/* Enterprise workspace layer: shared tokens, hierarchy, and responsive polish. */
:root {
  --navy-950: #071827;
  --navy-900: #0b2033;
  --navy-800: #12324d;
  --slate-900: #172436;
  --slate-700: #46576a;
  --slate-500: #596c80;
  --slate-300: #cbd5df;
  --slate-200: #dde5ec;
  --slate-100: #edf2f6;
  --slate-50: #f6f8fa;
  --surface: #ffffff;
  --paper: #f3f6f9;
  --ink: var(--slate-900);
  --muted: var(--slate-500);
  --line: var(--slate-200);
  --sidebar: 264px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgb(7 24 39 / 5%);
  --shadow-md: 0 10px 30px rgb(7 24 39 / 8%);
}

html { background: var(--paper); }

body {
  min-width: 320px;
  color: var(--ink);
  background:
    linear-gradient(180deg, #eef3f7 0, var(--paper) 180px),
    var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a, button, input, select, textarea { transition-duration: 160ms; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 26%, transparent);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  color: var(--slate-900);
  font-weight: 700;
  letter-spacing: -.025em;
}

h1 { font-size: clamp(26px, 2vw, 32px); }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

.sidebar {
  width: var(--sidebar);
  padding: 24px 16px;
  color: #d8e2ea;
  background:
    radial-gradient(circle at 10% 0, rgb(30 93 113 / 22%), transparent 32%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border: 0;
  box-shadow: 8px 0 28px rgb(7 24 39 / 8%);
}

.sidebar .brand {
  min-height: 54px;
  padding: 0 10px 24px;
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
}

.sidebar .workspace-brand-name { color: #fff; }
.sidebar .workspace-brand-logo { max-width: 188px; max-height: 44px; }
.sidebar .brand-icon { background: var(--teal); box-shadow: 0 8px 22px rgb(0 0 0 / 24%); }

.nav-caption {
  padding: 25px 12px 9px;
  color: #7f98aa;
  font-size: 10px;
  letter-spacing: .14em;
}

.sidebar nav { display: grid; gap: 3px; }

.sidebar nav a {
  position: relative;
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  color: #aec0ce;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 550;
}

.sidebar nav a:hover,
.sidebar nav a:focus-visible {
  color: #fff;
  background: rgb(255 255 255 / 7%);
  border-color: rgb(255 255 255 / 7%);
}

.sidebar nav a.active {
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 42%, transparent), rgb(255 255 255 / 5%));
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  box-shadow: inset 3px 0 0 var(--teal);
}

.sidebar .nav-symbol { width: 22px; color: #8ba5b5; }
.sidebar nav a.active .nav-symbol { color: #c8f3eb; }

.sidebar-foot {
  margin-top: 28px;
  padding: 20px 11px 4px;
  color: #89a0af;
  border-color: rgb(255 255 255 / 9%);
}

.sidebar-foot .dot { box-shadow: 0 0 0 4px rgb(39 158 123 / 12%); }
.workspace { margin-left: var(--sidebar); }

.topbar {
  position: sticky;
  z-index: 15;
  top: 0;
  height: 72px;
  padding: 0 34px;
  background: rgb(255 255 255 / 94%);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.topbar-title {
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.topbar .pill { background: var(--slate-50); border-color: var(--slate-200); }
.account-trigger { border-radius: var(--radius-md); }
.account-trigger:hover, .account-trigger:focus-visible, .account-menu.open .account-trigger { background: var(--slate-50); }
.account-copy strong { color: var(--slate-900); }

.avatar {
  width: 38px;
  height: 38px;
  color: #075d57;
  background: color-mix(in srgb, var(--teal) 15%, #fff);
  border: 1px solid color-mix(in srgb, var(--teal) 24%, #fff);
}

.account-dropdown {
  padding: 9px;
  border-color: var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.content {
  width: 100%;
  max-width: 1760px;
  min-height: calc(100vh - 110px);
  padding: 34px 36px 42px;
}

.page-heading { margin-bottom: 25px; }
.page-heading h1 { line-height: 1.15; }
.eyebrow { color: var(--teal); font-size: 10px; letter-spacing: .14em; }
.subtitle { max-width: 760px; color: var(--slate-500); line-height: 1.65; }

.btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 650;
  line-height: 1.25;
  box-shadow: none;
}

.btn-primary {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--teal) 22%, transparent);
}

.btn-primary:hover, .btn-primary:focus {
  color: #fff;
  background: color-mix(in srgb, var(--teal) 84%, #071827);
  border-color: color-mix(in srgb, var(--teal) 84%, #071827);
  transform: translateY(-1px);
}

.btn-light {
  color: var(--slate-700);
  background: #fff;
  border-color: var(--slate-300);
}

.btn-light:hover { color: var(--slate-900); background: var(--slate-50); border-color: #aebbc7; }
.btn-sm { min-height: 30px; padding: 5px 10px; font-size: 11px; }

.card {
  margin-bottom: 22px;
  background: var(--surface);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-head {
  min-height: 60px;
  padding: 17px 21px;
  background: linear-gradient(180deg, #fff, #fbfcfd);
  border-color: var(--slate-200);
}

.card-head h2, .card-head h3 { font-size: 16px; }
.card-body { padding: 22px; }

.metrics { gap: 15px; }
.metric {
  position: relative;
  min-height: 132px;
  padding: 20px;
  overflow: hidden;
  border-color: var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.metric::after {
  position: absolute;
  right: -28px;
  bottom: -42px;
  width: 100px;
  height: 100px;
  content: "";
  background: color-mix(in srgb, var(--teal) 7%, transparent);
  border-radius: 50%;
}

.metric-label { color: var(--slate-500); font-weight: 650; }
.metric-value { margin: 9px 0 5px; color: var(--slate-900); font-size: 29px; font-weight: 730; }
.metric-note { color: var(--slate-500); line-height: 1.45; }
.metric-icon { background: color-mix(in srgb, var(--teal) 10%, #fff); border: 1px solid color-mix(in srgb, var(--teal) 18%, #fff); }
.metric-link:hover, .metric-link:focus-visible { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); box-shadow: var(--shadow-md); }

.table { color: var(--slate-900); }
.table-responsive { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.table-responsive .table { width: max-content; min-width: 100%; }
.table > thead > tr > th {
  padding: 12px 18px;
  color: #607184;
  background: #f4f7f9;
  border-color: var(--slate-200);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
}

.table > tbody > tr > td { padding: 14px 18px; border-color: #e8edf2; }
.table > tbody > tr:hover { background: #f8fafb; }
.record-name { color: #163149; font-weight: 700; }
.record-name:hover { color: var(--teal); }

.badge, .status-badge {
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
}

.form-label { color: var(--slate-700); font-weight: 650; }
.form-control, .form-select {
  min-height: 42px;
  color: var(--slate-900);
  background-color: #fff;
  border-color: var(--slate-300);
  border-radius: var(--radius-sm);
}

.form-control:hover, .form-select:hover { border-color: #aebbc7; }
.form-control:focus, .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 13%, transparent);
}

.form-page .card-body { padding: 28px; }
.list-filters { background: #f7f9fb; border-color: var(--slate-200); border-radius: var(--radius-md); }
.read-only-value, .form-hint { background: var(--slate-50); border-color: var(--slate-200); }

.module-tabs, .segmented { padding: 4px; background: #e7edf2; border-radius: var(--radius-md); }
.module-tabs a, .segmented a { border-radius: 6px; }
.module-tabs a.active, .segmented a.active { color: var(--teal); box-shadow: 0 1px 3px rgb(7 24 39 / 10%); }

.summary-strip { border-color: var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.summary-strip > div, .summary-strip > a { border-color: var(--slate-200); }
.summary-strip strong { color: var(--slate-900); }

.calendar-day, .queue-lane { border-color: var(--slate-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.calendar-day > header, .queue-lane { background: #f7f9fb; }
.queue-card { border-color: var(--slate-200); box-shadow: 0 2px 7px rgb(7 24 39 / 5%); }

.toast-container { top: 86px; }
.app-toast { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

.login-page { background: #fff; }
.login-aside {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 6vw, 82px);
  background:
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--teal) 35%, transparent), transparent 30%),
    linear-gradient(145deg, var(--navy-800), var(--navy-950) 74%);
}

.login-aside::after {
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 430px;
  height: 430px;
  content: "";
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgb(255 255 255 / 3%), 0 0 0 140px rgb(255 255 255 / 2%);
}

.login-aside > * { position: relative; z-index: 1; }
.login-aside h1 { max-width: 560px; color: #fff; font-size: clamp(43px, 5vw, 64px); font-weight: 700; letter-spacing: -.05em; }
.login-aside p { color: #afc2cf; }
.login-main { padding: 40px; background: linear-gradient(145deg, #fff, #f7f9fb); }
.login-box { max-width: 400px; padding: 12px; }
.login-box h2 { margin-top: 8px; color: var(--slate-900); font-size: 30px; }
.login-box .btn { min-height: 44px; }

footer.app-footer { color: var(--slate-500); }

/* WCAG AA text contrast on white and paper surfaces. */
.crumbs,
.detail-grid dt,
.summary-strip > div,
.summary-strip > a,
.pagination-bar,
.form-hint,
.field-limit,
.segmented a,
.brand-preview > span,
.profile-identity p,
.profile-photo-editor p,
.account-menu-link > span:first-child,
.account-signout button > span:first-child { color: var(--slate-500); }
.crumbs a { color: #526579; }

.status-active, .status-released, .status-sent, .status-checked-in, .status-final, .status-completed {
  color: #166b50;
  background: #e5f5ed;
}
.status-pending, .status-scheduled, .status-planned, .status-draft {
  color: #355f9b;
  background: #eaf0fd;
}
.status-failed, .status-cancelled, .status-no-show, .status-legacy {
  color: #8d3f3f;
  background: #faeaea;
}
.status-warning, .status-in-consultation { color: #79500e; background: #fff1dc; }
.status-archived, .status-private { color: #596864; background: #edf0f0; }

@media (max-width: 1150px) {
  :root { --sidebar: 236px; }
  .content { padding: 28px 26px 38px; }
  .topbar { padding-inline: 24px; }
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: 14px 0 40px rgb(7 24 39 / 28%);
    transition: transform 180ms ease;
  }
  body.menu-open .sidebar { transform: translateX(0); }
  body.menu-open::before {
    position: fixed;
    z-index: 18;
    inset: 0;
    content: "";
    background: rgb(7 24 39 / 52%);
    backdrop-filter: blur(2px);
  }
  .workspace { margin-left: 0; }
  .menu-toggle { display: block; }
  .topbar { padding-inline: 22px; }
  .content { max-width: none; padding: 26px 22px 36px; }
  footer.app-footer { padding-inline: 22px; }
  .appointment-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
  .appointment-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
  .queue-lane { min-width: 0; }
}

@media (max-width: 780px) {
  .topbar { height: 64px; padding: 0 16px; }
  .content { padding: 22px 16px 32px; }
  .page-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .page-heading > .no-print { width: 100%; justify-content: flex-start; }
  .topbar .pill { display: none !important; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-head, .card-body { padding-inline: 16px; }
  .table > thead > tr > th, .table > tbody > tr > td { padding-inline: 13px; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip > div, .summary-strip > a { border-bottom: 1px solid var(--slate-200); }
  .detail-grid { grid-template-columns: 1fr; }
  .list-filters { align-items: stretch; }
  .filter-actions { width: 100%; flex-wrap: wrap; }
  .filter-actions .btn { flex: 1 1 auto; }
  .record-controls { align-items: stretch; }
}

@media (max-width: 600px) {
  .content { padding: 20px 14px 30px; }
  .page-heading { margin-bottom: 20px; }
  .card { margin-bottom: 18px; border-radius: 12px; }
  .form-page .card-body { padding: 18px; }
  .appointment-calendar, .appointment-queue {
    grid-auto-columns: auto;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .calendar-day, .queue-lane { min-height: 0; }
  .calendar-navigation { align-items: stretch; flex-direction: column; }
  .calendar-navigation > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calendar-navigation .btn { padding-inline: 8px; }
  .queue-summary { gap: 7px; }
}

@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr; }
  .metric { min-height: 112px; }
  .page-heading > .no-print { display: grid; grid-template-columns: 1fr; }
  .page-heading > .no-print .btn { width: 100%; }
  .summary-strip { grid-template-columns: 1fr; }
  .summary-strip > div, .summary-strip > a { border-right: 0; }
  .account-copy { max-width: 118px; }
  .account-chevron { display: none; }
  .record-controls { display: grid; grid-template-columns: 1fr; }
  .record-controls .btn, .record-controls form, .record-controls form .btn { width: 100%; }
  .pagination-bar { align-items: stretch; flex-direction: column; }
  .pagination-bar > div { justify-content: space-between; }
  .login-main { padding: 24px 18px; }
  footer.app-footer { display: grid; gap: 5px; padding: 8px 14px 22px; }
  footer.app-footer .float-end { float: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  body { background: #fff; }
  .card, .metric, .summary-strip { box-shadow: none; }
}