/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html, body {
  background: var(--dp-bg);
  color: var(--dp-text-primary);
  margin: 0;
}

body {
  display: flex;
  min-height: 100vh;
  font-family: var(--dp-font-sans);
  line-height: var(--text-line-height);
}

:root {
  /* Typography — Inter family, 150% line-height across all variants */
  --dp-font-sans:        'Inter', sans-serif;
  --text-line-height: 1.5;

  /* Heading — weight 600 */
  --text-heading-2xl: 30px;
  --text-heading-xl:  24px;
  --text-heading-lg:  18px;
  --text-heading-md:  16px;
  --text-heading-sm:  14px;
  --text-heading-xs:  12px;

  /* Paragraph — weight 400 */
  --text-paragraph-lg: 18px;
  --text-paragraph-md: 16px;
  --text-paragraph-sm: 14px;
  --text-paragraph-xs: 12px;

  /* Label — weight 500 */
  --text-label-lg: 18px;
  --text-label-md: 16px;
  --text-label-sm: 14px;
  --text-label-xs: 12px;

  /* Surfaces */
  --dp-bg:              #0B0E11;
  --dp-surface:         #13171C;
  --dp-surface-raised:  #1A1F26;
  --dp-border:          #242B35;

  /* Text */
  --dp-text-primary:    #E8ECF1;
  --dp-text-secondary:  #7A8494;
  --dp-text-muted:      #4A5568;

  /* Status */
  --dp-green:           #34D399;
  --dp-yellow:          #FBBF24;
  --dp-red:             #F87171;
  --dp-orange:          #FB923C;

  /* Accent / chrome */
  --dp-accent:               #34D399;
  --dp-link:                 #E8ECF1;
  --dp-row-hover-bg:         #1A1F26;
  --dp-cta-bg:               var(--dp-surface);
  --dp-cta-color:            var(--dp-accent);
  --dp-cta-border:           color-mix(in srgb, var(--dp-accent) 40%, transparent);
  --dp-cta-hover-bg:         color-mix(in srgb, var(--dp-accent) 6%, transparent);
  --dp-cta-hover-border:     var(--dp-accent);
  --dp-cta-hover-color:      var(--dp-accent);

  /* Flash */
  --dp-notice-bg:            #0d2b1f;
  --dp-notice-border:        #1a4a34;
  --dp-alert-bg:             #2b0d0d;
  --dp-alert-border:         #4a1a1a;

  /* Table */
  --dp-table-row-border:     #161b22;
  --dp-table-header-divider: #1e242d;

  /* Sidebar */
  --sb-bg:              #0B0E11;
  --sb-surface:         #13171C;
  --sb-border:          #242B35;
  --sb-text:            #E8ECF1;
  --sb-text-muted:      #7A8494;
  --sb-accent:          #34D399;
  --sb-hover-bg:        #1A1F26;
  --sb-width:           200px;
  --sb-width-collapsed: 48px;
  --sb-active-color:    var(--sb-text);
}

html[data-theme="light"] {
  --dp-bg:                   #F4F5F7;
  --dp-surface:              #FFFFFF;
  --dp-surface-raised:       #F9FAFB;
  --dp-border:               #E5E7EB;
  --dp-text-primary:         #111827;
  --dp-text-secondary:       #6B7280;
  --dp-text-muted:           #9CA3AF;
  --dp-green:                #059669;
  --dp-yellow:               #D97706;
  --dp-red:                  #DC2626;
  --dp-orange:               #EA580C;
  --dp-accent:               #128AED;
  --dp-link:                 #128AED;
  --dp-row-hover-bg:         #EFF6FF;
  --dp-cta-bg:               #128AED;
  --dp-cta-color:            #FFFFFF;
  --dp-cta-border:           #128AED;
  --dp-cta-hover-bg:         #0F74CA;
  --dp-cta-hover-border:     #0F74CA;
  --dp-cta-hover-color:      #FFFFFF;
  --sb-bg:                   #FFFFFF;
  --sb-surface:              #F9FAFB;
  --sb-border:               #E5E7EB;
  --sb-text:                 #111827;
  --sb-text-muted:           #6B7280;
  --sb-accent:               #128AED;
  --sb-hover-bg:             #EFF6FF;
  --sb-active-color:         #128AED;
  --dp-notice-bg:            #D1FAE5;
  --dp-notice-border:        #6EE7B7;
  --dp-alert-bg:             #FEE2E2;
  --dp-alert-border:         #FCA5A5;
  --dp-table-row-border:     #E5E7EB;
  --dp-table-header-divider: #E5E7EB;
}


main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--dp-bg);
  color: var(--dp-text-primary);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

main h1 {
  font-size: var(--text-heading-xl);
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0;
  color: var(--dp-text-primary);
}

main > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

main > header > hgroup p {
  margin: 4px 0 0;
  font-size: var(--text-paragraph-sm);
  color: var(--dp-text-secondary);
}

main > header > hgroup p a {
  color: inherit;
  text-decoration: none;
}

main > header > hgroup p a:hover { color: var(--dp-text-primary); }

main > header > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.app-flash {
  padding: 0 24px;
}

.notice,
.alert {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: var(--text-paragraph-sm);
}

.notice {
  background: var(--dp-notice-bg);
  color: var(--dp-green);
  border: 1px solid var(--dp-notice-border);
}

.alert {
  background: var(--dp-alert-bg);
  color: var(--dp-red);
  border: 1px solid var(--dp-alert-border);
}

main a.btn-accent {
  font-size: var(--text-label-xs);
  font-weight: 500;
  color: var(--dp-cta-color);
  background: var(--dp-cta-bg);
  border: 1px solid var(--dp-cta-border);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  padding: 7px 14px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

main a.btn-accent:hover {
  border-color: var(--dp-cta-hover-border);
  background: var(--dp-cta-hover-bg);
  color: var(--dp-cta-hover-color);
}

main section:has(> table) {
  overflow-x: auto;
  border: 1px solid var(--dp-border);
  border-radius: 8px;
}

main table {
  border-collapse: collapse;
  font-size: var(--text-paragraph-xs);
  width: 100%;
}

main thead th {
  padding: 10px 14px;
  background: var(--dp-surface);
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid var(--dp-border);
  border-right: 1px solid var(--dp-table-header-divider);
  color: var(--dp-text-secondary);
  font-size: var(--text-label-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

main thead th:last-child { border-right: none; }

main tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--dp-table-row-border);
  border-right: 1px solid var(--dp-table-row-border);
  color: var(--dp-text-primary);
  vertical-align: middle;
}

main tbody td:last-child { border-right: none; }
main tbody tr:last-child td { border-bottom: none; }
main tbody tr:hover td { background: var(--dp-row-hover-bg); }

main td.num, main th.num {
  font-size: var(--text-paragraph-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

main td.mono {
  font-size: var(--text-paragraph-xs);
  font-variant-numeric: tabular-nums;
  color: var(--dp-text-secondary);
}

main td.muted {
  color: var(--dp-text-secondary);
  font-size: var(--text-paragraph-xs);
}

main td.muted a {
  color: inherit;
  text-decoration: none;
}

main td.muted a:hover { color: var(--dp-accent); }

main thead th a.sort-link {
  color: inherit;
  text-decoration: none;
}

main thead th a.sort-link:hover { color: var(--dp-text-primary); }

main td.actions {
  text-align: right;
  white-space: nowrap;
}

main td.url {
  font-size: var(--text-paragraph-xs);
  font-variant-numeric: tabular-nums;
  color: var(--dp-text-muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main a.name-link {
  font-weight: 500;
  color: var(--dp-link);
  text-decoration: none;
  font-size: var(--text-label-sm);
}

main a.name-link:hover { color: var(--dp-accent); }

main a.edit-link {
  font-size: var(--text-label-xs);
  font-weight: 500;
  color: var(--dp-text-muted);
  text-decoration: none;
  transition: color 0.12s;
}

main a.edit-link:hover { color: var(--dp-text-secondary); }

main a.tag-link {
  font-size: var(--text-paragraph-xs);
  font-variant-numeric: tabular-nums;
  color: var(--dp-text-muted);
  text-decoration: none;
  transition: color 0.12s;
}

main a.tag-link:hover { color: var(--dp-text-secondary); }

main .empty-state {
  padding: 32px 14px;
  text-align: center;
  color: var(--dp-text-muted);
  font-size: var(--text-paragraph-sm);
}

/* Secondary action button */

main a.btn,
main button.btn,
main form.btn {
  font-size: var(--text-label-sm);
  font-weight: 500;
  color: var(--dp-text-primary);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

main a.btn,
main button.btn { padding: 10px 20px; }

main a.btn:hover,
main button.btn:hover,
main form.btn:hover {
  background: color-mix(in srgb, var(--dp-text-primary) 5%, var(--dp-surface));
}

main form.btn button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  display: block;
}

main button.btn-danger,
main form.btn-danger,
main form.btn-danger button { color: var(--dp-red); }

/* Info panel */

main section.panel {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

main section.panel > h2 {
  font-size: var(--text-label-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dp-text-muted);
  margin: 0 0 16px;
}

/* Collapsible panel */

main details.panel {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

main details.panel > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

main details.panel > summary::-webkit-details-marker { display: none; }

main details.panel[open] > summary {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--dp-border);
}

main details.panel > summary strong {
  font-size: var(--text-label-sm);
  font-weight: 500;
  color: var(--dp-text-primary);
  white-space: nowrap;
}

main details.panel > summary span {
  font-size: var(--text-paragraph-xs);
  color: var(--dp-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

main details.panel > summary::after {
  content: "▸";
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--text-label-xs);
  color: var(--dp-text-muted);
  transition: transform 0.15s;
}

main details.panel[open] > summary::after {
  transform: rotate(90deg);
}

main details.panel > h2 {
  font-size: var(--text-label-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dp-text-muted);
  margin: 20px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--dp-border);
}

/* Definition list info rows */

main dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }

main dl > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: 12px;
}

main dt {
  font-size: var(--text-label-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dp-text-muted);
}

main dd {
  font-size: var(--text-paragraph-sm);
  color: var(--dp-text-primary);
  margin: 0;
}

/* Form fields */

/* Stacked new/edit forms render bare, right after the action_header — card them. */
main > header + form {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  padding: 2em;
  max-width: 50em;
}

main form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 24px;
  min-inline-size: 0;
}

main form fieldset:last-of-type { margin-bottom: 16px; }

main form legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: var(--text-label-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dp-text-secondary);
}

main form .field { margin-bottom: 16px; }

main form label {
  display: block;
  font-size: var(--text-label-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dp-text-muted);
  margin-bottom: 6px;
}

main form input[type=text],
main form input[type=email],
main form input[type=password],
main form input[type=number],
main form input[type=datetime-local],
main form input[type=date],
main form textarea,
main form select {
  font-size: var(--text-paragraph-sm);
  background: var(--dp-bg);
  border: 1px solid var(--dp-border);
  border-radius: 5px;
  padding: 8px 12px;
  color: var(--dp-text-primary);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.12s;
}

main form input[type=text]:focus,
main form input[type=email]:focus,
main form input[type=password]:focus,
main form input[type=number]:focus,
main form input[type=datetime-local]:focus,
main form input[type=date]:focus,
main form textarea:focus,
main form select:focus { border-color: var(--dp-text-secondary); }

main form select option { background: var(--dp-surface); }

main form input[type=submit].submit {
  font-size: var(--text-label-xs);
  font-weight: 500;
  color: var(--dp-text-secondary);
  background: var(--dp-bg);
  border: 1px solid var(--dp-border);
  border-radius: 5px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

main form input[type=submit].submit:hover {
  color: var(--dp-text-primary);
  border-color: var(--dp-text-secondary);
}

/* Inline form row (date pickers, compact filter forms) */

main form .form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

main form .form-row input:not([type=submit]),
main form .form-row select {
  width: auto;
  flex: 1;
  min-width: 120px;
}

/* Stats strip */

main .stats-strip {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
}

main .stats-strip > * {
  flex: 1;
  background: var(--dp-surface);
  border-radius: 6px;
  padding: 16px 20px;
  text-align: center;
}

main .stats-strip .value {
  font-size: var(--text-heading-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--dp-text-primary);
  margin-bottom: 4px;
}

main .stats-strip .label {
  font-size: var(--text-label-xs);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--dp-text-secondary);
  font-weight: 500;
}

/* Chart canvas wrapper */

main .chart-wrap {
  position: relative;
  height: 360px;
}

/* Ordered step strip (workflow sequences) */

main ol.step-strip {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

main ol.step-strip > li {
  flex: 1;
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

main ol.step-strip > li > header {
  display: flex;
  align-items: center;
  gap: 8px;
}

main ol.step-strip > li > header > span {
  font-size: var(--text-label-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--dp-text-muted);
  background: var(--dp-bg);
  border: 1px solid var(--dp-border);
  border-radius: 4px;
  padding: 2px 6px;
}

main ol.step-strip > li > header > h2 {
  font-size: var(--text-label-xs);
  font-weight: 500;
  color: var(--dp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin: 0;
}

main ol.step-strip > li > form.btn button {
  width: 100%;
  text-align: left;
}