@import url("./fonts.css");
@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
img, svg { display: block; max-width: 100%; }
a { color: var(--text-accent); text-decoration: none; border-bottom: 1px solid rgba(232, 112, 31, .35); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
p, h1, h2, h3, h4 { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--orange-100); color: var(--stone-900); }

.display,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  text-wrap: balance;
}

.eyebrow,
.caps {
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.caps { letter-spacing: var(--tracking-title-caps); }

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

.btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  box-shadow: var(--shadow-1);
  transition: var(--transition-control);
}

.btn:hover { transform: translateY(var(--travel-hover)); border-color: var(--border-strong); }
.btn:active { transform: scale(var(--scale-press)); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.btn-md { min-height: 46px; padding: 12px 18px; font-size: 14px; }
.btn-sm { min-height: 32px; padding: 7px 12px; font-size: 12.5px; }
.btn-wide { width: 100%; }

.btn-primary {
  background: var(--accent);
  color: var(--stone-950);
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-muted);
}

.btn-ghost:hover { background: var(--surface-sunken); color: var(--text-strong); border-color: var(--border-hairline); }

.btn-ink {
  background: rgba(255,255,255,.08);
  color: var(--sand-50);
  border-color: var(--border-inverse);
  box-shadow: none;
}

.btn-ink:hover { background: rgba(255,255,255,.13); border-color: rgba(214,223,235,.28); }

.btn-danger {
  background: var(--danger-bg);
  border-color: rgba(174, 75, 52, .28);
  color: var(--danger-fg);
  box-shadow: none;
}

.icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  flex: 0 0 auto;
}

.field { display: grid; gap: 7px; }
.field label { font-size: 12.5px; font-weight: var(--weight-medium); color: var(--text-body); }
.field-hint { color: var(--text-subtle); font-size: 12px; }

.input,
.select,
.textarea,
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: var(--inset-well);
}

textarea { min-height: 112px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-subtle); }

input:focus,
select:focus,
textarea:focus,
.input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring), var(--inset-well);
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-body);
}

.badge,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}

.badge-accent { background: var(--accent-soft); border-color: rgba(232,112,31,.45); color: var(--text-accent); }
.badge-ok { background: var(--success-bg); color: var(--success-fg); border-color: rgba(74,95,59,.2); }
.badge-warn { background: var(--warning-bg); color: var(--stone-900); border-color: rgba(143,100,18,.22); }
.badge-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: rgba(130,49,31,.18); }
.badge-call { background: rgba(255,255,255,.06); color: var(--navy-100); border-color: var(--border-inverse); }

.badge-rec {
  background: rgba(174,75,52,.16);
  border-color: rgba(174,75,52,.38);
  color: var(--red-100);
}

.badge-rec::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-500);
  box-shadow: 0 0 0 0 rgba(174,75,52,.44);
  animation: rec-pulse 1.8s var(--ease-out) infinite;
}

@keyframes rec-pulse {
  0% { box-shadow: 0 0 0 0 rgba(174,75,52,.44); }
  72% { box-shadow: 0 0 0 7px rgba(174,75,52,0); }
  100% { box-shadow: 0 0 0 0 rgba(174,75,52,0); }
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-900);
  color: var(--sand-50);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
}

.card-pad { padding: 18px 20px; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th {
  padding: 14px 12px;
  color: var(--text-subtle);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-hairline);
}
.table td {
  padding: 16px 12px;
  color: var(--text-muted);
  font-size: 13px;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: middle;
}
.table tbody tr.is-featured td { background: var(--surface-card); box-shadow: var(--shadow-1); }
.table tbody tr.is-featured td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.table tbody tr.is-featured td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.table .primary { color: var(--text-strong); font-size: 14.5px; font-weight: var(--weight-medium); }

.dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(86dvh, 760px);
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sheet);
  background: var(--surface-page);
  color: var(--text-body);
  box-shadow: var(--shadow-4);
}

.dialog::backdrop { background: rgba(7, 14, 25, .42); }
.dialog-shell { display: flex; max-height: inherit; flex-direction: column; }
.dialog-head,
.dialog-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
.dialog-head { border-bottom: 1px solid var(--border-hairline); }
.dialog-foot { border-top: 1px solid var(--border-hairline); justify-content: flex-end; }
.dialog-body { padding: 20px; overflow: auto; }

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: var(--z-toast);
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  background: var(--navy-900);
  color: var(--sand-50);
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border-inverse);
  font-size: 13px;
}

.toast button {
  color: var(--orange-200);
  font-weight: var(--weight-medium);
}

.tabs,
.segment {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.tab,
.segment button {
  min-height: 34px;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--weight-medium);
}

.tab[aria-selected="true"],
.segment button[aria-pressed="true"] {
  background: var(--surface-card);
  color: var(--text-strong);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-1);
}

.progress {
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-sunken);
}
.progress > span { display: block; height: 100%; background: var(--accent); }

.skel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--sand-100);
  color: transparent;
}

.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: skel 1.35s var(--ease-standard) infinite;
}

@keyframes skel { to { transform: translateX(100%); } }

.empty-state {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.empty-state-inner {
  max-width: 44ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.empty-state-icon { color: var(--stone-400); }
.empty-state-title { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); color: var(--text-strong); }
.empty-state-copy { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 767px) {
  html { font-size: 16px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .dialog {
    width: 100vw;
    max-width: none;
    max-height: calc(92dvh - env(safe-area-inset-bottom));
    margin: auto 0 0;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }
  .dialog::before {
    content: "";
    width: 44px;
    height: 4px;
    border-radius: 3px;
    background: var(--stone-300);
  }
  .toast-stack {
    top: 64px;
    right: 16px;
    bottom: auto;
    left: 16px;
    width: auto;
  }
  .table-wrap { overflow: visible; }
  .table.responsive,
  .table.responsive thead,
  .table.responsive tbody,
  .table.responsive tr,
  .table.responsive th,
  .table.responsive td { display: block; }
  .table.responsive thead { display: none; }
  .table.responsive tr {
    margin-bottom: 10px;
    padding: 16px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-card);
    background: var(--surface-card);
    box-shadow: var(--shadow-2);
  }
  .table.responsive td {
    padding: 0;
    border: 0;
  }
}