/* Optional, browser-local visual study. No rules apply to print pages or paper.
 * Keep this file separate: removing data-ui-theme restores the existing theme.
 */
.studio-brand,
.studio-section-icon,
.studio-today { display: none; }
.document-table-scroll { display: contents; }

.appearance-switch { min-width: 0; }
.appearance-label { display: block; margin-bottom: 8px; color: #686a65; font-size: 12px; }
.appearance-options { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: #e9eae7; }
.appearance-options button {
  display: inline-flex; justify-content: center; align-items: center; gap: 5px;
  min-height: 32px; padding: 5px 12px; border: 0; border-radius: 7px;
  background: transparent; color: #50524d; box-shadow: none; font-size: 13px;
}
.appearance-options button[aria-pressed="true"] { color: #20231e; background: #fff; box-shadow: 0 1px 4px #00000015; }
.appearance-switch.is-compact { margin: 14px 18px; }
.appearance-switch.is-compact .appearance-options { display: flex; }
.appearance-switch.is-compact button { flex: 1; padding-inline: 6px; }
.appearance-switch p { margin: 12px 0 0; font-size: 13px; line-height: 1.6; }
.mobile-menu-sheet .appearance-switch { margin: 18px 0 0; }
.mobile-menu-sheet .appearance-label { color: #d2d8d2; }
.mobile-menu-sheet .appearance-options button { min-height: 44px; color: #50524d; }
.appearance-options button:focus-visible { outline: 2px solid #377e37; outline-offset: 3px; }

@media screen {
  /* Exclude /print from the entire theme, including inherited tokens. */
  html[data-ui-theme="studio"]:not(:has(.print-page)),
  html[data-ui-theme="studio"] body:not(:has(.print-page)) {
    background: #e5e4df;
  }

  html[data-ui-theme="studio"] .app:not(:has(.print-page)) {
    --ink: #262823;
    --muted: #72766e;
    --line: #e9eae5;
    --panel: #fff;
    --bg: #f7f6f3;
    --accent: #58b851;
    --accent-dark: #357d35;
    --accent-tint: #eaf5e4;
    --accent-tint2: #f3f7ef;
    --apple-text: #262823;
    --apple-secondary: #72766e;
    --apple-accent: #357d35;
    --apple-accent-strong: #285f28;
    --apple-blue: #357d35;
    --proof-row-hover: #f6f7f2;
    --proof-row-selected: #eaf5e4;
    --studio-shadow: 0 2px 3px #2928200a, 0 9px 18px -11px #29282052;
    margin: 18px;
    min-height: calc(100vh - 36px);
    border: 1px solid #d3d4cd;
    border-radius: 26px;
    background: #f7f6f3;
    box-shadow: 0 2px 3px #302e2410, 0 18px 45px -30px #302e2440;
  }

  html[data-ui-theme="studio"] .app:not(:has(.print-page))::before { display: none; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) > .main { padding: 26px 24px 32px 16px; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) > .main > div { max-width: none; }

  /* Integrated navigation, with the current brand assets in a horizontal lockup. */
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .sidebar {
    width: 214px; top: 19px; height: calc(100dvh - 38px); margin: 0;
    padding: 26px 0 16px; background: transparent; border: 0;
    border-radius: 26px 0 0 26px; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; overflow-y: auto;
    scrollbar-width: thin;
  }
  html[data-ui-theme="studio"] .sidebar .sidebar-brand { padding: 0 20px 24px; }
  html[data-ui-theme="studio"] .sidebar .brand-default-logo { display: none; }
  html[data-ui-theme="studio"] .sidebar .studio-brand { display: flex; gap: 12px; align-items: center; }
  html[data-ui-theme="studio"] .studio-brand img:first-child { width: 34.8px; height: 34.8px; flex-shrink: 0; }
  html[data-ui-theme="studio"] .studio-brand img:last-child { width: 126px; height: auto; flex-shrink: 0; }
  html[data-ui-theme="studio"] .sidebar .demo-pill { margin: -10px 0 12px; padding: 2px 8px; font-size: 9px; color: #55704b; background: #e9eedf; border: 0; }
  html[data-ui-theme="studio"] .sidebar nav { padding: 0 12px; gap: 4px; }
  html[data-ui-theme="studio"] .sidebar nav a {
    min-height: 54px; padding: 8px 10px; gap: 8px; color: #64685e;
    font-weight: 500; border-radius: 9px; letter-spacing: 0; box-shadow: none; white-space: nowrap;
  }
  html[data-ui-theme="studio"] .sidebar nav a.active { color: #182a13; background: #80d467; box-shadow: inset 0 1px 0 #ffffff40; }
  html[data-ui-theme="studio"] .sidebar nav a:hover { color: #262823; background: #eaece5; }
  html[data-ui-theme="studio"] .sidebar nav a.active:hover { background: #75ca5e; }
  html[data-ui-theme="studio"] .sidebar nav a .nav-icon { width: 38px; height: 38px; flex-shrink: 0; color: #82877c; }
  html[data-ui-theme="studio"] .sidebar nav a.active .nav-icon { color: #243c1d; }
  html[data-ui-theme="studio"] .sidebar .sidebar-bottom { padding-top: 14px; }
  html[data-ui-theme="studio"] .sidebar .about-link { width: calc(100% - 36px); margin: 8px 18px 12px; padding: 7px 8px; border: 0; background: transparent; text-align: left; color: #686d62; box-shadow: none; }
  html[data-ui-theme="studio"] .sidebar .sidebar-user { padding: 8px 18px; font-size: 12px; }
  html[data-ui-theme="studio"] .sidebar .sidebar-foot { padding-top: 6px; text-align: left; color: #84877e; }
  html[data-ui-theme="studio"] .sidebar .sidebar-rev { color: #84877e; }

  /* White surfaces, fine separators and a small, downward shadow. */
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) :is(.card, .kpi, .analytics-summary, .mobile-document-card, .client-card, .totals-card) {
    border: 1px solid #fff; border-radius: 20px; background: #fff;
    box-shadow: var(--studio-shadow); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .card { padding: 18px 20px; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .page-title { font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.35; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .section-label { font-size: 16px; font-weight: 600; letter-spacing: 0; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .section-label .sec-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9px; font-size: 12px;
    color: #fff; background: linear-gradient(145deg, #676960, #3e403a);
    box-shadow: inset 0 1px 2px #ffffff36;
  }
  html[data-ui-theme="studio"] .studio-section-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px;
    color: #fff; background: linear-gradient(145deg, #696a64, #41423e);
    box-shadow: inset 0 1px 3px #ffffff45;
  }
  html[data-ui-theme="studio"] .studio-section-icon svg { width: 20px; height: 20px; }
  html[data-ui-theme="studio"] .dashboard-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  html[data-ui-theme="studio"] .studio-today { display: block; color: #74786e; font-size: 13px; white-space: nowrap; }

  /* A single summary strip, with breathing room for the figures. */
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .kpi-row {
    gap: 0; padding: 16px 0; margin-bottom: 18px; border: 1px solid #fff;
    border-radius: 20px; background: #fff; box-shadow: var(--studio-shadow);
  }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .kpi-row .kpi {
    min-height: 0; padding: 4px 20px; border: 0; border-radius: 0;
    border-right: 1px solid #e8e9e3; box-shadow: none; background: transparent; transform: none;
  }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .kpi-row .kpi:last-child { border-right: 0; }
  html[data-ui-theme="studio"] .kpi-row .kpi-label { font-size: 13px; font-weight: 500; color: #72776d; letter-spacing: 0; }
  html[data-ui-theme="studio"] .kpi-row .kpi-value { margin: 7px 0; font-size: clamp(24px, 2.25vw, 38px); line-height: 1.15; font-weight: 550; letter-spacing: -.035em; }
  html[data-ui-theme="studio"] .kpi-row .kpi-num { font-weight: 550; }
  html[data-ui-theme="studio"] .kpi-row .kpi-sub { font-size: 12px; line-height: 1.6; }
  html[data-ui-theme="studio"] .dashboard-page .dashboard-section-card { border-top: 1px solid #fff; }
  html[data-ui-theme="studio"] .dashboard-section-card .dash-section-head {
    margin: 0 0 12px; padding: 0; min-height: 34px; background: transparent; border-radius: 0;
  }
  html[data-ui-theme="studio"] .dash-section-head > span:first-child::before { display: none; }
  html[data-ui-theme="studio"] .dash-section-head > span:first-child { gap: 10px; }
  html[data-ui-theme="studio"] .dash-section-meta { color: #72766e; font-size: 13px; }
  html[data-ui-theme="studio"] .dash-more-row td,
  html[data-ui-theme="studio"] button.dash-more-row { color: #527b3e; }

  /* Preserve column layout and all operational controls; just change their surface. */
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) table.list {
    border: 0; border-radius: 16px; background: #fff; overflow: hidden;
  }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) table.list th {
    background: #fff; color: #777c71; letter-spacing: 0; font-size: 12px; font-weight: 500;
    border-bottom: 1px solid #e8eae4;
  }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) table.list td { border-bottom-color: #eceee8; font-size: 14px; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) table.list tr:last-child td { border-bottom: 0; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) table.list tr.row-paid td { color: #83877e; background: #f7f8f4; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) table.list tr.clickable:hover td { background: #f2f5ec; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) table.list tr.row-selected td { background: #e9f4df; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) > .main > div > table.list { box-shadow: var(--studio-shadow); }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) :is(.documents-list, .payables-list) td { padding-top: 13px; padding-bottom: 13px; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .badge:not(.sh-reimbursement-badge) { border-color: transparent; font-weight: 500; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .badge.sent { background: #eaf5e4; color: #387a2b; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .badge.in_progress { background: #fbf1d8; color: #99620e; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .badge.paid { background: #edf0e9; color: #65705b; }

  html[data-ui-theme="studio"] .app:not(:has(.print-page)) :is(button, .btn):not(.sheet *) { border-radius: 9px; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .btn-primary { color: #fff; background: #3e423a; border-color: #3e423a; box-shadow: 0 2px 3px #0000000a; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .btn-primary:hover { background: #282e24; border-color: #282e24; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .tabs { background: #eaece5; border-color: transparent; border-radius: 11px; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .tabs button { color: #6b7065; background: transparent; box-shadow: none; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .tabs button.on { color: #242a20; background: #fff; box-shadow: 0 2px 4px #00000012, 0 6px 10px -6px #00000045; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) :is(input, select, textarea):not(.status-badge select) { border-color: #dfe2d8; background-color: #fff; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) :is(input, select, textarea):focus { border-color: #66a24d; box-shadow: 0 0 0 3px #77c85226; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) :is(input[type="checkbox"], input[type="radio"]) { accent-color: #4b873b; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) :is(.modal, .about-modal) { background: #fcfcfa; border: 1px solid #fff; border-radius: 22px; box-shadow: 0 24px 70px #272d2440; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .editor-preview { background: #dedfd9; border-radius: 18px; }
  html[data-ui-theme="studio"] .app:not(:has(.print-page)) .editor-section-secondary { background: #fafbf7; }

  /* Analytical panels use the same material, with measured green accents. */
  html[data-ui-theme="studio"] .analytics-summary { padding: 12px 0; }
  html[data-ui-theme="studio"] .analytics-summary-item { padding: 4px 18px; border-left-color: #e8e9e3; }
  html[data-ui-theme="studio"] .analytics-summary-item.is-primary { background: transparent; }
  html[data-ui-theme="studio"] .analytics-summary-item > span { font-weight: 500; letter-spacing: 0; }
  html[data-ui-theme="studio"] .analytics-summary-item > strong { font-weight: 550; margin: 7px 0; color: #30352c; }
  html[data-ui-theme="studio"] .analytics-panel .section-label { display: flex; align-items: center; gap: 9px; }
  html[data-ui-theme="studio"] .analytics-panel-note { color: #767b71; }
  html[data-ui-theme="studio"] .analytics-panel-stat { font-weight: 550; }
  html[data-ui-theme="studio"] .analytics-status-list > div { background: #f5f7f1; }

  @media (min-width: 769px) {
    html[data-ui-theme="studio"] .dashboard-section-card > .desktop-only { overflow-x: auto; }
    html[data-ui-theme="studio"] .dashboard-doc-table { min-width: 1000px; }
    html[data-ui-theme="studio"] .dashboard-doc-table th:nth-child(4) { min-width: 200px; }
    html[data-ui-theme="studio"] .dashboard-compact-table { min-width: 460px; }
    html[data-ui-theme="studio"] .document-table-scroll { display: block; max-width: 100%; overflow-x: auto; border-radius: 18px; background: #fff; box-shadow: var(--studio-shadow); }
    html[data-ui-theme="studio"] .document-table-scroll table.documents-list { min-width: 1120px; }
    html[data-ui-theme="studio"] .documents-list .client-col { min-width: 150px; }
    html[data-ui-theme="studio"] .documents-list .subject-col { min-width: 220px; }
  }

  @media (min-width: 769px) and (max-width: 1100px) {
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) { margin: 10px; min-height: calc(100vh - 20px); border-radius: 20px; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) .sidebar { width: 192px; top: 11px; height: calc(100dvh - 22px); }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) > .main { padding: 24px 16px 28px 8px; }
    html[data-ui-theme="studio"] .sidebar .sidebar-brand { padding-inline: 13px; }
    html[data-ui-theme="studio"] .sidebar .studio-brand { gap: 9.6px; }
    html[data-ui-theme="studio"] .studio-brand img:last-child { width: 112.8px; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) .card { padding: 16px; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) .kpi-row .kpi { padding-inline: 12px; }
  }

  @media (max-height: 800px) and (min-width: 769px) {
    html[data-ui-theme="studio"] .sidebar .sidebar-brand { padding-bottom: 14px; }
    html[data-ui-theme="studio"] .sidebar nav a { min-height: 50px; padding-block: 6px; }
    html[data-ui-theme="studio"] .sidebar .sidebar-bottom { padding-top: 8px; }
  }

  /* Retain mobile hit areas, safe areas, 16px inputs and the existing two-line truncation. */
  @media (max-width: 768px) {
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) { margin: 0; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) > .main { padding: 18px 12px calc(118px + env(safe-area-inset-bottom)); }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) .sidebar { display: none; }
    html[data-ui-theme="studio"] .mobile-topbar { background: #f7f6f3f5; border-bottom-color: #e1e4da; }
    html[data-ui-theme="studio"] .mobile-bottom-nav { background: #fcfdfaf5; border-top-color: #e1e4da; }
    html[data-ui-theme="studio"] .mobile-bottom-nav .mobile-nav-create .mobile-nav-icon { background: #74c75c; color: #21341a; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) .card { padding: 16px 14px; border-radius: 18px; }
    html[data-ui-theme="studio"] .studio-today { display: none; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) .kpi-row { padding: 0; overflow: hidden; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) .kpi-row .kpi { padding: 14px 12px; border-right: 0; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) .kpi-row .kpi:nth-child(odd) { border-right: 1px solid #e8e9e3; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) .kpi-row .kpi:nth-child(n+3) { border-top: 1px solid #e8e9e3; }
    html[data-ui-theme="studio"] .kpi-row .kpi-value { font-size: clamp(20px, 5.5vw, 29px); }
    html[data-ui-theme="studio"] .kpi-row .kpi-label { font-size: 12px; }
    html[data-ui-theme="studio"] .kpi-row .kpi-sub { font-size: 11px; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) :is(input, select, textarea) { font-size: 16px; }
    html[data-ui-theme="studio"] .studio-section-icon { flex-basis: 26px; width: 26px; height: 26px; border-radius: 8px; }
    html[data-ui-theme="studio"] .studio-section-icon svg { width: 17px; height: 17px; }
    html[data-ui-theme="studio"] .dash-section-head > span:first-child { gap: 6px; }
    html[data-ui-theme="studio"] .analytics-summary { padding: 0; }
    html[data-ui-theme="studio"] .analytics-summary-item { padding: 14px 12px; }
    html[data-ui-theme="studio"] .app:not(:has(.print-page)) > .main:has(.login-wrap) { padding-top: 24px; }
  }
}

@media print {
  .appearance-switch, .appearance-settings, .studio-brand,
  .studio-section-icon, .studio-today { display: none !important; }
}