/* Mouse feedback stays outside the clinical color system and print styles. */
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root {
    --pointer-glow: rgba(8, 126, 169, .10);
    --pointer-ring: rgba(8, 126, 169, .24);
    --pointer-edge: #183d5d;
  }
  :root[data-theme="dark"] {
    --pointer-glow: rgba(100, 211, 231, .12);
    --pointer-ring: rgba(100, 211, 231, .30);
    --pointer-edge: #f1fbff;
  }
  #dashboard .dashboard-metric {
    position: relative;
    isolation: isolate;
  }
  #dashboard .dashboard-metric::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), var(--pointer-glow), transparent 75%);
    opacity: 0;
    transition: opacity 180ms ease-out;
    z-index: -1;
  }
  #dashboard .dashboard-metric.pointer-lit::before { opacity: 1; }
  #dashboard .dashboard-metric:hover { transform: none; }

  #app-shell :is(button.primary, button.secondary, .record-button, .record-tab, .nav-item, .appointment-menu summary) {
    transition: box-shadow 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out;
  }
  #app-shell :is(button.primary, button.secondary, .record-button, .record-tab, .nav-item, .appointment-menu summary):not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow: 0 0 0 2px var(--pointer-ring), 0 5px 14px rgba(8, 38, 62, .09);
  }
  #app-shell .nav-item .nav-icon { transition: box-shadow 180ms ease-out; }
  #app-shell .nav-item:hover .nav-icon { box-shadow: 0 0 12px var(--pointer-ring); }
  #appointments :is(.calendar-event, .calendar-day) {
    transition: box-shadow 160ms ease-out;
  }
  #appointments .calendar-day:hover { box-shadow: inset 0 0 0 1px var(--pointer-ring); }
  #appointments .calendar-event:hover { box-shadow: 0 0 0 2px var(--pointer-ring), 0 4px 12px rgba(8, 38, 62, .10); }

  /* A contrasting edge identifies the target; never replace its condition fill. */
  #odontogram-grid:not(.read-only) .surface {
    transition: stroke-width 120ms ease-out, stroke 120ms ease-out;
  }
  #odontogram-grid:not(.read-only) .surface:hover {
    stroke: var(--pointer-edge);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
  }
}
/* Shared corrections from the local audit: existing clinic theme, less visual fragmentation. */
@media screen {
  label > .date-control, #appointments .appointment-filters label > .date-control { margin:0 !important; display:inline-flex !important; line-height:normal; font-size:inherit; }
  .date-control { display:inline-flex; position:relative; min-width:0; width:100%; align-items:center; }
  .date-control > input[hidden], .date-control > button[hidden] { display:none !important; }
  .date-control .date-display { width:100%; min-width:0; padding-right:44px !important; margin:0; }
  .date-control .date-open { position:absolute; right:2px; top:2px; bottom:2px; width:40px; min-height:40px; padding:9px; border:0; background:transparent; color:var(--polish-ink); box-shadow:none; }
  .date-open svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
  .date-popover { position:fixed; inset:auto; margin:0; width:min(328px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; padding:12px; border:1px solid var(--polish-line-strong); border-radius:12px; background:var(--polish-surface); color:var(--polish-ink); box-shadow:var(--polish-shadow-sm); z-index:1000; }
  .date-calendar-head { display:grid; grid-template-columns:32px minmax(0,1fr) 76px 32px; align-items:center; gap:4px; }
  .date-calendar-head :is(button,input,select) { width:100%; min-width:0; height:40px; min-height:40px; padding:4px; margin:0; font-size:14px; }
  .date-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; margin:10px 0; }
  .date-calendar-grid > span { text-align:center; padding:4px; font-size:14px; }
  .date-calendar-grid button { min-width:0; min-height:40px; padding:4px; border:0; border-radius:6px; color:var(--polish-ink); background:transparent; box-shadow:none; font-size:14px; }
  .date-calendar-grid button.outside-month { color:var(--polish-copy-soft); }
  .date-calendar-grid button.selected { background:var(--polish-primary); color:var(--polish-surface); outline:2px solid currentColor; outline-offset:-4px; }
  .date-calendar-grid button:not(:disabled):hover { background:var(--polish-brand-tint); color:var(--polish-ink); }
  .date-popover :is(button,input,select) { font-family:inherit; border:1px solid var(--polish-line-strong); border-radius:6px; background:var(--polish-field); color:var(--polish-ink); }
  .date-popover button { cursor:pointer; }
  .date-calendar-foot { display:flex; justify-content:space-between; gap:12px; }
  .date-calendar-foot button { min-height:40px; padding:6px 12px; font-size:14px; }
  #odontogram-conflict[hidden] { display:none !important; }
  #odontogram-conflict { display:block; margin-bottom:12px; }
  #odontogram-conflict p { margin:8px 0; }
  #appointments .calendar-month-grid { grid-template-rows:38px !important; grid-auto-rows:minmax(100px,auto) !important; }
  #appointments[data-agenda-layout="month"] .calendar-month-day { min-height:100px !important; padding:8px !important; }
  #appointments .calendar-month-day .calendar-empty { padding:12px 0 !important; }
  #appointments .calendar-month-layout.has-selected-day { grid-template-columns:minmax(0,1fr) minmax(210px,22%) !important; }
  #appointments .calendar-event-patient { white-space:normal !important; overflow-wrap:anywhere; word-break:normal; line-height:1.3; }
  html[data-theme="dark"] #appointments .calendar-selected-status { background:var(--polish-brand-tint) !important; color:var(--polish-ink) !important; }
  #appointments .calendar-event-main { min-width:0; }
  #appointments .calendar-event-edit { min-width:40px; min-height:40px; }
  #appointments .calendar-columns .calendar-event-edit { min-width:40px; min-height:40px; }
  #app-shell :is(#payments,#patients,#doctors,#users,#medical-leaves) > .section-actions { min-height:0 !important; padding:8px 0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
  #payments .finance-stats { gap:0; border:1px solid var(--polish-line); border-radius:12px; overflow:hidden; background:var(--polish-surface); }
  #payments .finance-stats > article { border:0; border-right:1px solid var(--polish-line); border-radius:0; box-shadow:none; padding:14px; }
  #record .record-tab-panel > .section-actions { min-height:0 !important; padding:10px 0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; }
  #record .record-tabs { border-radius:10px; }
  @media (max-width:767px) {
    #appointments .calendar-event-edit,
    #appointments .calendar-columns .calendar-event-edit { min-width:44px; min-height:44px; }
    #appointments .calendar-month-grid { grid-template-rows:32px !important; grid-auto-rows:minmax(62px,auto) !important; }
    #appointments[data-agenda-layout="month"] .calendar-month-day { min-height:62px !important; padding:3px !important; }
    #appointments .calendar-month-layout.has-selected-day { grid-template-columns:minmax(0,1fr) !important; }
    #appointments .calendar-day.is-empty { min-height:0 !important; padding:6px 10px !important; }
    #appointments .calendar-day.is-empty .calendar-events-list { display:none; }
    #appointments .calendar-day.is-empty .calendar-day-mobile-heading { display:flex; align-items:center; gap:10px; min-height:40px !important; padding:4px !important; }
    #appointments .calendar-day.is-empty .calendar-day-mobile-heading small { margin-left:auto; }
    #appointments .calendar-day.is-empty .calendar-day-mobile-heading strong { font-size:18px; }
    #record-header { padding:12px !important; min-height:0 !important; margin-bottom:10px !important; }
    #record-header h2 { font-size:18px !important; }
    #record .record-tabs { margin:8px 0; padding:4px; }
    #odontogram-mode-description { display:none; }
    #odontogram-tab .section-actions h2 { font-size:19px; }
    #odontogram-mode-controls, #record .clinical-chart-controls { padding:6px !important; margin-bottom:8px !important; }
    #record .clinical-chart-controls { flex-wrap:wrap; gap:6px; }
    #record .clinical-chart-controls label { display:flex; align-items:center; gap:8px; width:100%; }
    #record .clinical-chart-controls select { min-width:0; flex:1; }
    #record .odontogram-tools { padding:10px !important; gap:8px; }
    #record .tooth-legend { max-height:140px; overflow-y:auto; padding:5px; scrollbar-width:thin; }
    #record .odontogram-panel { padding:10px !important; }
    #payments .finance-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
}

@media screen and (max-width:760px) {
  .date-control .date-open { width:44px; min-width:44px; min-height:44px; }
  .date-calendar-head :is(button,input,select), .date-calendar-grid button, .date-calendar-foot button { min-height:44px; height:44px; }
  .date-popover { width:min(360px,calc(100vw - 16px)); }
  .date-calendar-head { grid-template-columns:44px minmax(0,1fr) 84px 44px; }
  .date-calendar-head button { min-width:44px; }
  dialog[open] :is(
    button,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select,
    textarea
  ) { min-height:44px; }
  dialog[open] :is(input, select, textarea) { font-size:16px; }
  dialog[open] .modal-heading > .close { min-width:44px; width:44px; height:44px; }
  .date-popover button { min-height:44px; }
}
/* Clinic welcome: a quiet form alongside an enamel-inspired illustration. */
@media screen {
#login-screen { --welcome-blue:#087ea9; --welcome-ice:#b8e8f3; position:fixed; inset:0; padding:32px; overflow:auto; background:var(--polish-canvas,#edf5f8) !important; }
#login-screen.show { display:flex; align-items:flex-start; justify-content:center; }
#login-screen::before { display:none; }
#login-screen .login-layout { display:grid; grid-template-columns:1.1fr 1fr; width:min(1320px,100%); margin:auto; min-height:740px; border-radius:28px; overflow:hidden; background:var(--polish-surface); box-shadow:0 24px 80px #082f4920; flex-shrink:0; }
#login-screen .login-story { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; padding:48px 52px 36px; background:linear-gradient(145deg,#0c304a,#104e6b); color:#fff; }
#login-screen .login-brand-name { font-size:21px; font-weight:700; letter-spacing:-.4px; }
#login-screen .login-brand-name span { display:block; margin-top:6px; color:var(--welcome-ice); font-size:14px; font-weight:400; letter-spacing:0; }
#login-screen .login-story-copy { margin-top:62px; position:relative; z-index:1; }
#login-screen .login-story h2 { margin:0 0 18px; color:#fff; font-size:clamp(36px,3.3vw,54px); line-height:1.08; letter-spacing:-1.8px; font-weight:600; }
#login-screen .login-story-copy p { max-width:340px; margin:0; font-size:17px; line-height:1.6; color:var(--welcome-ice); }
#login-screen .login-dental-art { display:block; width:calc(100% + 80px); height:300px; max-height:300px; margin:-10px -40px -16px; flex:1; min-height:230px; }
#login-screen .login-story-footer { font-size:14px; line-height:1.7; color:#e8f8fc; }
#login-screen .login-story-footer span { display:block; color:var(--welcome-ice); }
#login-screen .login-form-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:48px; min-width:0; background:var(--polish-surface); }
#login-screen .login-card { width:100%; max-width:380px; padding:0; margin:0; border:0; border-radius:0; background:transparent !important; box-shadow:none; text-align:left; }
#login-screen .login-logo { width:180px; height:104px; margin:0 0 32px; border:0; border-radius:14px; background:#fff; }
#login-screen .login-logo img { width:100%; height:100%; margin:0; object-fit:contain; position:static; }
#login-screen .login-card h1 { font-size:30px; line-height:1.2; letter-spacing:-.8px; margin:0 0 12px; color:var(--polish-ink) !important; }
#login-screen .login-card .login-intro { margin:0 0 32px; font-size:16px; line-height:1.5; color:var(--polish-copy) !important; }
#login-screen .login-card label { display:block; margin:20px 0 8px; color:var(--polish-ink) !important; font-size:14px; font-weight:600; }
#login-screen .login-card input { display:block; width:100%; height:54px; min-height:54px; margin:0; padding:12px 16px; font-size:16px; border:1px solid var(--polish-line-strong); border-radius:10px; background:var(--polish-field); color:var(--polish-ink); box-shadow:none; }
#login-screen .login-card input::placeholder { color:var(--polish-copy-soft); opacity:1; font-weight:400; }
#login-screen .login-password-field { position:relative; }
#login-screen .login-password-field input { padding-right:86px; }
#login-screen #login-password-toggle { position:absolute; right:5px; top:5px; width:76px; height:44px; min-height:44px; padding:0; margin:0; border:0; background:transparent; box-shadow:none; color:var(--polish-primary); font-size:14px; font-weight:700; cursor:pointer; }
#login-screen .login-card .form-error { min-height:20px; margin:12px 0; color:var(--polish-danger,#b42318) !important; font-size:14px; line-height:1.4; }
#login-screen .login-submit { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:54px; border:0; border-radius:10px; background:var(--welcome-blue) !important; color:#fff !important; font-size:16px; font-weight:700; box-shadow:0 5px 16px #087ea928; transition:background .18s,box-shadow .18s; cursor:pointer; }
#login-screen .login-submit svg { width:22px; height:22px; transition:transform .18s; }
#login-screen .login-submit:hover { background:#066c92 !important; box-shadow:0 7px 20px #087ea93b; }
#login-screen .login-submit:hover svg { transform:translateX(3px); }
#login-screen .login-submit:disabled { opacity:.65; cursor:wait; }
#login-screen .login-card .login-help { margin:26px 0 0; font-size:14px; line-height:1.7; color:var(--polish-copy) !important; }
#login-screen .login-access-note { margin:38px 0 0; font-size:14px; color:var(--polish-copy-soft); text-align:center; }
#login-screen :is(input,button):focus-visible { outline:3px solid var(--polish-primary); outline-offset:3px; }
#login-screen .login-card:focus-within .login-logo { box-shadow:none; }
#login-screen .login-story::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(320px circle at var(--light-x,50%) var(--light-y,45%),#68d9ef25,transparent 80%); opacity:0; transition:opacity .4s; }
#login-screen .login-story.pointer-active::after { opacity:1; }
@media(min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 #login-screen.show .login-layout { animation:welcome-reveal .6s cubic-bezier(.2,.7,.2,1) both; }
 #login-screen .login-dental-art { transform:translate3d(var(--art-x,0px),var(--art-y,0px),0); transition:transform .25s ease-out; }
 @keyframes welcome-reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
}
@media(max-width:900px) {
 #login-screen { padding:20px; }
 #login-screen .login-layout { grid-template-columns:1fr; min-height:0; max-width:500px; border-radius:20px; }
 #login-screen .login-story { display:none; }
 #login-screen .login-form-panel { padding:36px; }
 #login-screen .login-logo { margin-bottom:24px; }
 #login-screen .login-card h1 { font-size:27px; }
}
@media(max-width:420px) {
 #login-screen { padding:12px; }
 #login-screen .login-form-panel { padding:28px 22px; }
 #login-screen .login-access-note { margin-top:28px; }
}
@media(max-height:820px) and (min-width:901px) {
 #login-screen { padding:20px; }
 #login-screen .login-layout { min-height:660px; }
 #login-screen .login-story-copy { margin-top:38px; }
 #login-screen .login-dental-art { height:240px; }
 #login-screen .login-form-panel { padding:32px 48px; }
}
@media(max-height:720px) { #login-screen.show { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { #login-screen *,#login-screen *::after { transition:none !important; animation:none !important; } }
}
/* Payments: patient accounts, a focused payment form, and a separate cash summary.
   Screen styles only; clinical print documents retain their shared half-Letter layout. */
@media screen {
  #payments [hidden] { display:none!important;}
  #payments .finance-layout { display:block;}
  #payments .finance-modes { display:flex; gap:8px; margin:0 0 16px; padding:4px; width:max-content; max-width:100%; border:1px solid var(--polish-line); border-radius:11px; background:var(--polish-surface-soft);}
  #payments .finance-modes button { min-height:44px; padding:10px 22px; border:0; border-radius:8px; background:transparent; color:var(--polish-copy); box-shadow:none; font-family:Manrope,'DM Sans',system-ui,sans-serif; font-size:14px; font-weight:700; letter-spacing:0; line-height:1.2;}
  #payments .finance-modes button[aria-pressed="true"] { color:var(--polish-ink); background:var(--polish-surface); box-shadow:var(--polish-shadow-xs);}
  #payments .finance-layout>.panel,#payments .cash-panel { margin:0; padding:16px; border:1px solid var(--polish-line); border-radius:13px; background:var(--polish-surface); box-shadow:none;}
  #payments .panel-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}
  #payments .panel-heading h2,#payments .cash-panel h2 { margin:0; font-size:20px;}
  #payments .panel-heading p,#payments .cash-panel-heading p { margin:5px 0 0; color:var(--polish-copy); font-size:14px; line-height:1.5;}
  #payments .finance-search { display:grid; gap:8px; margin:0 0 12px; padding:0; border:0; background:transparent!important; box-shadow:none;}
  #payments .finance-search label { color:var(--polish-ink); font-size:15px; font-weight:700;}
  #payments .finance-search input { min-height:48px; width:100%; padding:12px 14px; border:1px solid var(--polish-line-strong); border-radius:9px; background:var(--polish-field); color:var(--polish-ink); font-size:16px;}
  .finance-filter-details,.finance-extra-fields { margin:16px 0; border:1px solid var(--polish-line); border-radius:9px; background:var(--polish-surface);}
  .finance-filter-details>summary,.finance-extra-fields>summary { min-height:44px; padding:12px 14px; color:var(--polish-copy); font-size:14px; font-weight:700; cursor:pointer;}
  .finance-filter-details[open]>summary,.finance-extra-fields[open]>summary { border-bottom:1px solid var(--polish-line);}
  #payments .finance-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:end; gap:12px; margin:0; padding:14px;}
  #payments .finance-filters label { min-width:0; color:var(--polish-copy); font-size:14px;}
  #payments .finance-filters select { min-height:44px; margin-top:6px; font-size:14px;}
  #payments .finance-patient-group { margin-top:16px; border:1px solid var(--polish-line); border-radius:12px; overflow:hidden;}
  #payments .finance-patient-heading { display:flex!important; position:static!important; min-height:0!important; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0!important; padding:14px 16px!important; border:0!important; border-radius:0!important; background:var(--polish-surface-soft)!important; box-shadow:none!important;}
  #payments .finance-patient-heading h3 { margin:0; color:var(--polish-ink); font-size:18px; line-height:1.4; overflow-wrap:anywhere;}
  #payments .finance-patient-heading p,#payments .finance-patient-heading small { margin:4px 0 0; color:var(--polish-copy); font-size:14px;}
  #payments .finance-patient-balance { min-width:0; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
  #payments .finance-patient-balance span { display:block; color:var(--polish-ink); font-size:15px; font-weight:700; line-height:1.5;}
  #payments .finance-patient-balance small { display:block; line-height:1.5;}
  #payments .finance-patient-plans { padding:0 16px;}
  #payments .finance-plan { display:grid; grid-template-columns:minmax(0,1fr) minmax(105px,.3fr) auto; align-items:center; gap:16px; padding:16px 0; margin:0; border:0!important; border-top:1px solid var(--polish-line)!important; border-radius:0; background:transparent!important; box-shadow:none;}
  #payments .finance-plan:hover { background:var(--polish-surface-soft)!important;}
  #payments .finance-plan:first-child { border-top:0!important;}
  #payments .finance-plan>div { min-width:0; grid-column:auto; grid-row:auto;}
  #payments .finance-plan h3,#payments .finance-plan h4 { margin:0; color:var(--polish-ink); font-size:16px; line-height:1.4; overflow-wrap:anywhere;}
  #payments .finance-plan p { margin:5px 0 0; font-size:14px; line-height:1.5; color:var(--polish-copy); overflow-wrap:anywhere;}
  #payments .finance-plan-copy small,#payments .finance-plan-copy .finance-plan-meta { display:block; margin-top:6px; color:var(--polish-copy); font-size:14px; line-height:1.5;}
  #payments .finance-plan-balance { text-align:right;}
  #payments .finance-plan-balance strong { display:block; font-size:22px; font-variant-numeric:tabular-nums; color:var(--polish-ink); overflow-wrap:anywhere;}
  #payments .finance-plan-balance small { display:block; margin-top:3px; color:var(--polish-copy); font-size:14px;}
  #payments .finance-plan>div:last-child { align-items:flex-end;}
  #payments .finance-actions { display:flex; flex-wrap:wrap; gap:8px;}
  #payments .finance-plan>.finance-actions { flex-direction:row; align-items:center; justify-content:flex-end;}
  #payments .finance-actions button { min-height:44px; padding:10px 12px; font-size:14px; white-space:normal;}
  #payments .finance-actions button.pay { border-color:var(--polish-primary)!important; background:var(--polish-primary)!important; color:var(--polish-surface)!important; box-shadow:none!important;}
  html[data-theme="dark"] #payments .finance-actions button.pay { color:var(--polish-navy-deep)!important;}
  #payments .balance-bar { max-width:180px; height:4px;}
  .financial-badge,.plan-status { text-transform:none; letter-spacing:0;}
  #payments .finance-list-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding-top:16px; color:var(--polish-copy); font-size:14px;}
  .finance-list-footer>div { display:flex; gap:8px;}
  #payments .cash-panel-heading { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px;}
  #payments .cash-panel-controls { display:grid; grid-template-columns:120px minmax(0,220px); gap:10px; min-width:0;}
  #payments .cash-panel-controls>select,#payments .cash-panel-controls .date-control { width:100%; min-height:44px;}
  #payments .cash-panel-controls>select { font-size:15px;}
  #payments .cash-range-label { margin:0 0 16px; font-size:14px;}
  #payments .finance-stats { display:block; margin:0 0 16px; border:0; background:transparent;}
  #payments .finance-stats>article { margin:0; padding:16px; border:1px solid var(--polish-line); border-radius:10px; background:var(--polish-surface-soft); box-shadow:none;}
  #payments .finance-stats strong { margin:6px 0; font-size:30px; font-variant-numeric:tabular-nums;}
  #payments .finance-stats-general { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:16px;}
  #payments .finance-stats-general article { min-width:0;}
  #payments .finance-stats-general :is(span,strong,small) { display:block; overflow-wrap:anywhere;}
  #payments .finance-stats-general span,#payments .finance-stats-general small { color:var(--polish-copy); font-size:14px;}
  #payments .finance-stats-general strong { margin:8px 0 4px; color:var(--polish-ink); font-size:22px; font-variant-numeric:tabular-nums;}
  #payments .cash-panel #cash-methods { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:0 0 16px;}
  #payments .cash-method { display:flex; flex-direction:column; align-items:flex-start; gap:6px; border:0; padding:0;}
  #payments .cash-method strong { font-size:19px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
  #payments .cash-total { display:flex; justify-content:space-between; gap:12px; max-width:none; padding:12px 14px; margin:0; border:1px solid var(--polish-line); border-color:var(--polish-line)!important; border-radius:9px; background:var(--polish-brand-tint)!important; color:var(--polish-ink)!important;}
  #payments .cash-total strong { overflow-wrap:anywhere; font-variant-numeric:tabular-nums;}
  #payments .cash-day-heading { flex-wrap:wrap; gap:12px; margin:24px 0 8px;}
  #payments .cash-day-heading button { min-height:44px; font-size:14px;}
  #payments #cash-day-payments { max-height:none; overflow:visible; gap:0;}
  #payments .cash-day-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(90px,.2fr) auto; align-items:start; gap:16px; padding:16px 0; border:0; border-bottom:1px solid var(--polish-line); border-radius:0;}
  #payments .cash-day-row>div { min-width:0;}
  #payments .cash-day-row strong { font-size:15px; overflow-wrap:anywhere;}
  #payments .cash-day-row small { font-size:14px; line-height:1.5; overflow-wrap:anywhere;}
  #payments .cash-day-actions { flex-wrap:wrap; gap:8px;}
  #payments .cash-day-actions button { min-height:44px; padding:10px 12px; font-size:14px;}
  #payments .voided-payment,#plan-detail-modal .voided-payment { opacity:1; text-decoration:none; background:var(--polish-surface-soft);}
  #payments .voided-payment>div:nth-child(2)>strong { text-decoration:line-through;}
  #plan-modal,#plan-detail-modal { width:min(960px,calc(100vw - 32px)); max-width:min(960px,calc(100vw - 32px));}
  #payment-modal { width:min(720px,calc(100vw - 32px)); max-width:min(720px,calc(100vw - 32px));}
  #payment-success-modal { width:min(560px,calc(100vw - 32px)); max-width:min(560px,calc(100vw - 32px));}
  :is(#plan-modal,#payment-modal,#payment-success-modal) .modal-heading { gap:12px;}
  :is(#plan-modal,#payment-modal,#payment-success-modal) .modal-heading p { margin:6px 0 0; font-size:14px; line-height:1.5;}
  :is(#plan-modal,#payment-modal,#plan-detail-modal,#payment-success-modal) .close { flex-shrink:0; width:44px; min-height:44px; display:inline-grid; place-items:center; padding:8px;}
  :is(#plan-modal,#payment-modal,#plan-detail-modal,#payment-success-modal) button.primary { border-color:var(--polish-primary)!important; background:var(--polish-primary)!important; color:var(--polish-surface)!important; box-shadow:none!important;}
  html[data-theme="dark"] :is(#plan-modal,#payment-modal,#plan-detail-modal,#payment-success-modal) button.primary { color:var(--polish-navy-deep)!important;}
  :is(#plan-modal,#payment-modal) .finance-form-section { padding:16px 0; border-bottom:1px solid var(--polish-line);}
  :is(#plan-modal,#payment-modal) .finance-form-section h3 { margin:0 0 12px; font-size:16px; line-height:1.5;}
  :is(#plan-modal,#payment-modal) .finance-form-section .form-grid { margin:0; gap:12px 16px;}
  :is(#plan-modal,#payment-modal) .form-grid label { font-size:14px;}
  :is(#plan-modal,#payment-modal) .form-grid :is(input,select,textarea) { min-height:44px; font-size:16px;}
  :is(#plan-modal,#payment-modal) .finance-extra-fields .form-grid { margin:0; padding:14px;}
  #plan-modal .items-heading { align-items:flex-start; flex-wrap:wrap; gap:12px; margin:0 0 16px;}
  #plan-modal .items-heading h3 { margin-bottom:4px;}
  #plan-modal .items-heading small { font-size:14px; line-height:1.5; color:var(--polish-copy);}
  #plan-modal .plan-item { display:grid; grid-template-columns:minmax(160px,1fr) 170px 72px 110px 44px; align-items:end; gap:10px; margin-bottom:12px; padding:12px; border:1px solid var(--polish-line); border-radius:9px; background:var(--polish-surface-soft);}
  #plan-modal .plan-item .plan-item-field { display:grid; gap:6px; min-width:0; color:var(--polish-copy); font-size:14px; font-weight:700;}
  #plan-modal .plan-item :is(input,.date-control) { min-width:0; min-height:44px; margin:0; font-size:15px;}
  #plan-modal .plan-item .remove-plan-item { width:44px; min-height:44px; border:1px solid var(--polish-line); color:var(--polish-danger); background:var(--polish-surface);}
  #plan-modal .plan-total-layout { display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr); align-items:end; gap:16px;}
  #plan-modal .plan-total-layout .standalone-label { margin:0; font-size:14px; color:var(--polish-copy);}
  #plan-modal .plan-total-layout input { display:block; min-height:44px; width:100%; margin-top:6px; padding:10px 12px; border:1px solid var(--polish-line-strong); border-radius:9px; background:var(--polish-field); color:var(--polish-ink); font-size:16px;}
  #plan-modal .plan-calculation { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:12px 16px; margin:0; background:var(--polish-brand-tint); color:var(--polish-copy);}
  #plan-modal .plan-calculation strong { color:var(--polish-ink); font-size:25px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
  #payment-modal .payment-plan-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.4fr); gap:10px 16px; margin:0; padding:16px 0; border:0; border-bottom:1px solid var(--polish-line); border-radius:0; background:transparent;}
  #payment-modal .payment-plan-summary>div { min-width:0;}
  #payment-modal .payment-plan-summary>div:first-child { grid-column:1;}
  #payment-modal .payment-plan-summary>div:nth-child(2) { grid-column:1;}
  #payment-modal .payment-plan-summary>div:nth-child(3) { grid-column:2; grid-row:1 / span 2; align-self:center; text-align:right;}
  #payment-modal .payment-plan-summary .payment-summary-wide { grid-column:1 / -1;}
  #payment-modal .payment-plan-summary span { font-size:14px; text-transform:none;}
  #payment-modal .payment-plan-summary strong { font-size:16px; overflow-wrap:anywhere;}
  #payment-modal .payment-plan-summary>div:nth-child(3) strong { font-size:23px; font-variant-numeric:tabular-nums;}
  #payment-modal .payment-choice-section .field-hint { margin:0 0 12px; line-height:1.5;}
  #payment-modal .payment-procedure-list { display:grid; gap:8px; max-height:none; overflow:visible; margin:0 0 12px; padding:0;}
  #payment-modal .payment-procedure-option { display:grid; grid-template-columns:20px minmax(0,1fr) auto; min-height:64px; padding:12px; gap:10px; border:1px solid var(--polish-line); border-radius:9px; background:var(--polish-surface);}
  #payment-modal .payment-procedure-option:has(input:checked),#payment-modal .payment-general-option:has(input:checked) { border-color:var(--polish-primary); background:var(--polish-brand-tint); box-shadow:inset 3px 0 var(--polish-primary);}
  #payment-modal .payment-procedure-option.is-paid { opacity:1; color:var(--polish-copy); background:var(--polish-surface-soft);}
  #payment-modal .payment-procedure-copy { min-width:0;}
  #payment-modal .payment-procedure-copy strong { font-size:15px; line-height:1.4; overflow-wrap:anywhere;}
  #payment-modal .payment-procedure-copy small { font-size:14px; line-height:1.4;}
  #payment-modal .payment-procedure-balance { font-size:14px; font-variant-numeric:tabular-nums; white-space:normal; overflow-wrap:anywhere;}
  #payment-modal .payment-general-option { display:flex; align-items:flex-start; min-height:64px; gap:10px; margin:0; padding:12px; border:1px solid var(--polish-line); border-radius:9px; background:var(--polish-surface);}
  #payment-modal .payment-general-option input { margin:3px 0 0;}
  #payment-modal .payment-general-copy { display:grid; gap:4px; min-width:0; color:var(--polish-ink); font-size:15px;}
  #payment-modal .payment-general-option .field-hint { margin:0;}
  #payment-modal .payment-amount-section input[name="amount"] { min-height:52px; font-size:24px; font-variant-numeric:tabular-nums;}
  #payment-modal .payment-amount-section select { min-height:52px;}
  .finance-notice,#payment-pending-notice,#finance-pending-payments { margin:12px 0; padding:12px 14px; border:1px solid var(--polish-line); border-left:3px solid var(--polish-primary); border-radius:8px; background:var(--polish-brand-tint); color:var(--polish-ink); font-size:14px; line-height:1.5; overflow-wrap:anywhere;}
  #payment-modal .payment-confirm-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:8px;}
  #payment-modal .payment-confirm-summary span { display:block; color:var(--polish-copy); font-size:14px;}
  #payment-modal .payment-confirm-summary strong { display:block; margin-top:4px; color:var(--polish-ink); font-size:21px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
  #finance-pending-payments button { margin-top:8px; min-height:44px;}
  #payment-modal .finance-print-choice { display:flex; align-items:center; gap:10px; min-height:44px; margin:12px 0 0; color:var(--polish-copy); font-size:14px;}
  #payment-modal .finance-print-choice input { width:18px; height:18px; margin:0; accent-color:var(--polish-primary);}
  .finance-procedures { list-style:none; padding:0; margin:12px 0;}
  .finance-procedures li { display:grid; grid-template-columns:minmax(160px,1fr) repeat(3,minmax(70px,.24fr)) auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--polish-line);}
  .finance-procedures small { display:block; margin-bottom:4px; color:var(--polish-copy); font-size:14px;}
  .finance-procedures strong { color:var(--polish-ink); font-size:15px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
  .finance-procedures .procedure-description { min-width:0;}
  .finance-procedures .procedure-description small { margin:5px 0 0;}
  #plan-detail-modal .detail-hero { padding:16px; margin:16px 0; color:var(--polish-ink); background:var(--polish-surface-soft)!important; border:1px solid var(--polish-line); border-color:var(--polish-line)!important; border-radius:10px;}
  #plan-detail-modal .detail-hero p,#plan-detail-modal .detail-amounts span { color:var(--polish-copy)!important;}
  #plan-detail-modal .detail-hero h3 { color:var(--polish-ink)!important; font-size:19px; overflow-wrap:anywhere;}
  #plan-detail-modal .detail-amounts strong { color:var(--polish-ink)!important; font-size:21px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
  #plan-detail-modal .detail-toolbar { flex-wrap:wrap; gap:12px;}
  #plan-detail-modal .detail-toolbar>div { flex-wrap:wrap;}
  .finance-table-scroll { max-width:100%; overflow:auto;}
  #plan-detail-modal .payment-history-list { display:grid; gap:10px;}
  #plan-detail-modal .payment-history-card { padding:14px; border:1px solid var(--polish-line); border-radius:9px; background:var(--polish-surface);}
  #plan-detail-modal .payment-history-main { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;}
  #plan-detail-modal .payment-history-main strong { color:var(--polish-ink); font-size:17px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
  #plan-detail-modal .payment-history-meta { display:flex; flex-wrap:wrap; gap:6px 14px; margin:8px 0; color:var(--polish-copy); font-size:14px; line-height:1.5; overflow-wrap:anywhere;}
  #plan-detail-modal .payment-history-card details { margin-top:12px; color:var(--polish-copy); font-size:14px; line-height:1.5;}
  #plan-detail-modal .payment-history-card summary { min-height:44px; cursor:pointer; padding:10px 0;}
  #plan-detail-modal .payment-history-card p { margin:6px 0; overflow-wrap:anywhere;}
  #plan-detail-modal .payment-history-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
  #plan-detail-modal .payment-history-actions button { min-height:44px; padding:10px 12px; font-size:14px;}
  #plan-detail-modal .finance-danger-zone { margin-top:20px; padding-top:12px; border-top:1px solid var(--polish-line);}
  .finance-danger-zone summary { min-height:44px; padding:10px 0; color:var(--polish-copy); cursor:pointer;}
  .finance-danger-zone p,.finance-plan-notes { color:var(--polish-copy); font-size:14px; line-height:1.5; overflow-wrap:anywhere;}
  .finance-danger-zone .delete-procedure { display:block; margin:8px 0;}
  #record-treatment-plan-list .record-treatment-plan-card { padding:16px; border:1px solid var(--polish-line); border-radius:12px; background:var(--polish-surface); box-shadow:none;}
  #record-treatment-plan-list .record-treatment-plan-head h3 { font-size:18px;}
  #record-treatment-plan-list .record-treatment-plan-summary { padding:14px; border-radius:8px; background:var(--polish-surface-soft);}
  #payment-success-modal .payment-success-shell { padding:24px;}
  #payment-success-modal .payment-success-label { display:block; margin-bottom:5px; color:var(--polish-success); font-size:14px; font-weight:700;}
  #payment-success-modal .payment-success-context { display:grid; gap:5px; padding:16px 0; border-bottom:1px solid var(--polish-line); overflow-wrap:anywhere;}
  #payment-success-modal .payment-success-context strong { color:var(--polish-ink); font-size:18px;}
  #payment-success-modal .payment-success-context span { color:var(--polish-copy); font-size:14px;}
  #payment-success-modal .payment-success-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0;}
  #payment-success-modal .payment-success-amount { grid-column:1 / -1;}
  #payment-success-modal .payment-success-summary dt { margin-bottom:6px; color:var(--polish-copy); font-size:14px;}
  #payment-success-modal .payment-success-summary dd { margin:0; color:var(--polish-ink); font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
  #payment-success-modal .payment-success-amount dd { color:var(--polish-ink); font-size:34px;}
  #payment-success-modal .payment-success-message { min-height:21px; margin:0; font-size:14px; line-height:1.5;}
  :is(#payments,#plan-modal,#payment-modal,#plan-detail-modal,#payment-success-modal) :focus-visible { outline:3px solid var(--polish-primary); outline-offset:2px;}
  :is(#plan-modal,#payment-modal) .form-error:not(:empty) { margin:12px 0; font-size:14px; line-height:1.5;}
  @media(max-width:1100px) {
    #payments .finance-plan { grid-template-columns:minmax(0,1fr) minmax(100px,.4fr);}
    #payments .finance-plan>.finance-actions { grid-column:1 / -1!important;}
    .finance-procedures li { grid-template-columns:repeat(3,minmax(0,1fr));}
    .finance-procedures .procedure-description { grid-column:1 / -1;}}
  @media(max-width:760px) {
    #payments .finance-layout>.panel,#payments .cash-panel { padding:14px;}
    #payments .panel-heading { align-items:flex-start;}
    #payments .panel-heading h2,#payments .cash-panel h2 { font-size:18px;}
    #payments .finance-filters { grid-template-columns:repeat(2,minmax(0,1fr));}
    #payments .finance-patient-heading { padding:12px!important;}
    #payments .finance-patient-plans { padding:0 12px;}
    #payments .finance-plan { grid-template-columns:minmax(0,1fr) minmax(90px,.4fr)!important; gap:12px; padding:14px 0;}
    #payments .finance-plan>div:last-child { align-items:stretch;}
    #payments .finance-plan .finance-actions { grid-column:1 / -1;}
    #payments .finance-plan>.finance-actions { justify-content:stretch;}
    #payments .finance-actions button { flex:1;}
    #payments .finance-plan-balance strong { font-size:21px;}
    #payments .finance-modes { width:100%;}
    #payments .finance-modes button { flex:1; min-width:0; padding:10px 14px;}
    #payments .cash-panel-controls { width:100%; grid-template-columns:110px minmax(0,1fr);}
    #payments .cash-panel #cash-methods,#payments .finance-stats-general { grid-template-columns:repeat(2,minmax(0,1fr));}
    #payments .cash-day-row { grid-template-columns:minmax(0,1fr) minmax(80px,.3fr); gap:12px;}
    #payments .cash-day-actions { grid-column:1 / -1;}
    #payments .cash-day-actions button { flex:1;}
    #payments .finance-stats strong { font-size:28px;}
    #payments .finance-list-footer>div { flex:1;}
    #payments .finance-list-footer button { flex:1;}
    #payment-modal .payment-plan-summary { grid-template-columns:minmax(0,1fr) minmax(100px,.4fr);}
    #payment-modal .payment-procedure-option { grid-template-columns:20px minmax(0,1fr);}
    #payment-modal .payment-procedure-balance { grid-column:2;}
    #payment-modal .payment-amount-section .form-grid { grid-template-columns:1fr;}
    #plan-detail-modal .detail-hero { display:block;}
    #plan-detail-modal .detail-amounts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px;}
    #plan-detail-modal .detail-amounts strong { font-size:18px;}
    #plan-modal .plan-item { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
    #plan-modal .plan-item :is([data-field="description"],[data-field="procedureDate"],.date-control,[data-plan-field="description"],[data-plan-field="procedureDate"]) { grid-column:1 / -1;}
    #plan-modal .plan-item .remove-plan-item { grid-column:1 / -1; justify-self:end; width:44px;}
    #plan-modal .plan-total-layout { grid-template-columns:1fr;}
    #record-treatment-plan-list .record-treatment-plan-card { padding:14px;}
    #payment-success-modal .payment-success-shell { padding:16px 14px calc(16px + env(safe-area-inset-bottom));}
    #payment-success-modal .modal-actions { flex-direction:column-reverse; align-items:stretch;}
    #payment-success-modal .modal-actions button { width:100%; min-height:44px;}}
  @media(max-width:430px) {
    #payments .finance-filters { grid-template-columns:1fr;}
    #payments .finance-patient-heading { display:block!important;}
    #payments .finance-patient-heading>div+div { margin-top:8px;}
    #payments .finance-patient-balance { text-align:left;}
    #payment-modal .payment-plan-summary { grid-template-columns:1fr;}
    #payment-modal .payment-plan-summary>div:nth-child(3) { grid-column:1; grid-row:auto; text-align:left;}
    #payment-success-modal .payment-success-summary { grid-template-columns:1fr;}}}
.workflow-visit { margin-block:20px; padding:18px; border:1px solid var(--border,#cad7df); border-radius:13px; }
.workflow-visit legend { font-weight:700; }
.workflow-visit button { margin:8px 8px 0 0; }
.visit-state { display:block; font-size:14px; font-weight:700; margin-top:4px; color:var(--text-secondary,#526b82); }
#upcoming-list h3, #record-upcoming-appointments h3 { margin:16px 0; }
.clinical-evolution-grid dd { white-space:pre-wrap; }
/* In-app staff notices share MASTER's existing theme tokens. */
@media screen {
  #staff-notification-panel[hidden] { display:none!important; }
  .staff-notifications { position:relative; display:flex; align-items:center; flex:0 0 auto; min-width:0; }
  .staff-notifications:has(#staff-notification-bell[hidden]) { display:none; }
  .staff-notifications [hidden] { display:none!important; }
  #staff-notification-bell { position:relative; display:inline-grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; margin:0; padding:10px; border:1px solid var(--polish-line-strong); border-radius:9px; color:var(--polish-copy); background:var(--polish-surface); box-shadow:none; cursor:pointer; }
  #staff-notification-bell>svg { width:23px; height:23px; transform-origin:50% 20%; }
  #staff-notification-bell:hover,#staff-notification-bell[aria-expanded="true"],#staff-notification-bell.is-unread { border-color:var(--polish-primary); color:var(--polish-primary-strong); background:var(--polish-brand-tint); }
  #staff-notification-bell.is-ringing>svg { animation:staff-notification-ring 650ms ease-in-out 1; }
  #staff-notification-count { position:absolute; top:-4px; right:-3px; display:grid; place-items:center; min-width:20px; min-height:20px; padding:1px 4px; border:2px solid var(--polish-surface); border-radius:20px; color:var(--polish-surface); background:var(--polish-primary); font-size:11px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
  html[data-theme="dark"] #staff-notification-count { color:var(--polish-navy-deep); }
  #staff-notification-panel { position:fixed; z-index:2000; display:flex; flex-direction:column; width:min(440px,calc(100vw - 24px)); max-height:min(640px,calc(100dvh - 120px)); margin:0; padding:0; border:1px solid var(--polish-line-strong); border-radius:13px; color:var(--polish-ink); background:var(--polish-surface); box-shadow:var(--polish-shadow-md); text-align:left; }
  #staff-notification-panel:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
  .staff-notification-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid var(--polish-line); }
  .staff-notification-panel-heading>div:first-child { min-width:0; }
  #staff-notification-heading { margin:0; color:var(--polish-ink); font-size:18px; line-height:1.4; overflow-wrap:anywhere; }
  .staff-notification-panel-heading p { margin:5px 0 0; color:var(--polish-copy); font-size:14px; line-height:1.5; }
  .staff-notification-panel-tools { display:flex; flex:0 0 auto; gap:4px; }
  .staff-notification-panel-tools button { display:inline-grid; place-items:center; width:44px; min-height:44px; padding:10px; border:1px solid var(--polish-line); border-radius:9px; color:var(--polish-copy); background:var(--polish-surface-soft); box-shadow:none; }
  .staff-notification-panel-tools svg { width:21px; height:21px; }
  #staff-notification-list { display:grid; gap:10px; flex:1 1 auto; min-height:0; padding:12px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; }
  #staff-notification-list:empty { padding-block:0; }
  #staff-notification-panel .notif-card { min-width:0; padding:12px; border:1px solid var(--polish-line); border-radius:9px; background:var(--polish-surface); }
  #staff-notification-panel .notif-card--unread { border-left:3px solid var(--polish-primary); background:var(--polish-brand-tint); }
  #staff-notification-panel .notif-card__heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 12px; margin:0; color:var(--polish-ink); font-size:15px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
  #staff-notification-panel .notif-card__heading strong { min-width:0; }
  #staff-notification-panel .notif-card__heading>span { flex-shrink:0; padding:3px 7px; border-radius:20px; color:var(--polish-copy); background:var(--polish-surface-soft); font-size:11px; font-weight:700; line-height:1.5; }
  #staff-notification-panel .notif-card--unread .notif-card__heading>span { color:var(--polish-primary-strong); background:var(--polish-surface); }
  #staff-notification-panel .notif-card__patient { margin:8px 0 0; color:var(--polish-ink); font-size:15px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
  #staff-notification-panel .notif-card__meta { margin:5px 0 0; color:var(--polish-copy); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
  #staff-notification-panel .notif-card__message { margin:8px 0 0; color:var(--polish-ink); font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
  #staff-notification-panel .notif-card__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  #staff-notification-panel .notif-card__actions button,#staff-notification-more { min-width:0; min-height:44px; max-width:100%; padding:10px 12px; border:1px solid var(--polish-line-strong); border-radius:9px; color:var(--polish-ink); background:var(--polish-surface); box-shadow:none; font-size:14px; font-weight:700; line-height:1.4; white-space:normal; }
  #staff-notification-panel .staff-notification-open { border-color:var(--polish-primary); color:var(--polish-surface); background:var(--polish-primary); }
  html[data-theme="dark"] #staff-notification-panel .staff-notification-open { color:var(--polish-navy-deep); }
  #staff-notification-panel .staff-notification-read { color:var(--polish-copy); background:var(--polish-surface-soft); }
  #staff-notification-panel button:disabled { opacity:.65; cursor:wait; }
  .staff-notification-panel-footer { padding:12px 16px; border-top:1px solid var(--polish-line); }
  #staff-notification-status { margin:0; color:var(--polish-copy); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
  #staff-notification-more { width:100%; margin-top:10px; }
  .staff-notifications button:focus-visible,#staff-notification-panel button:focus-visible,#staff-notification-panel:focus-visible { outline:3px solid var(--polish-primary); outline-offset:2px; }
  @keyframes staff-notification-ring { 0%,100% { transform:rotate(0); } 20% { transform:rotate(-12deg); } 40% { transform:rotate(10deg); } 60% { transform:rotate(-6deg); } 80% { transform:rotate(3deg); } }
  @media(max-width:899px) {
    #staff-notification-panel { max-width:none; }
  }
  @media(max-width:430px) {
    .staff-notification-panel-heading { flex-wrap:wrap; gap:10px; padding:14px; }
    .staff-notification-panel-heading>div:first-child { flex:1 1 180px; }
    .staff-notification-panel-tools { margin-left:auto; }
    #staff-notification-heading { font-size:17px; }
    #staff-notification-panel .notif-card__actions button { flex:1 1 130px; }
    .staff-notification-panel-footer { padding:12px 14px; }
  }
  @media(prefers-reduced-motion:reduce) {
    #staff-notification-bell.is-ringing>svg { animation:none; }
  }
}
@media print {
  .staff-notifications,#staff-notification-panel { display:none!important; }
}
@media screen {
  #pending-procedure-plan { margin-bottom:16px; padding:16px; border:1px solid var(--polish-line); border-radius:13px; background:var(--polish-surface); box-shadow:none; }
  #pending-procedure-plan[hidden] { display:none; }
  .treatment-procedure-heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; }
  .treatment-procedure-heading h3 { margin:0; color:var(--polish-ink); font-size:18px; line-height:1.5; }
  .treatment-procedure-heading p { max-width:560px; margin:5px 0 0; color:var(--polish-copy); font-size:14px; line-height:1.5; }
  .treatment-budget-heading { margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--line); }
  .treatment-budget-heading h3 { margin:0; color:var(--polish-ink); font-size:18px; line-height:1.5; }
  .treatment-budget-heading p { margin:5px 0 0; color:var(--polish-copy); font-size:14px; line-height:1.5; }
  .treatment-procedure-tools { display:flex; flex-wrap:wrap; gap:8px; }
  #pending-procedure-plan button { min-height:44px; padding:10px 12px; font-size:14px; white-space:normal; }
  #treatment-procedure-list-status,.treatment-procedure-empty { margin:12px 0; color:var(--polish-copy); font-size:14px; line-height:1.5; }
  .treatment-procedure-table-wrap { max-width:100%; }
  .treatment-procedure-table { table-layout:fixed; width:100%; border-collapse:collapse; color:var(--polish-ink); font-size:14px; line-height:1.5; }
  .treatment-procedure-table th,.treatment-procedure-table td { padding:12px 8px; border-bottom:1px solid var(--polish-line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
  .treatment-procedure-table th { color:var(--polish-copy); font-size:14px; font-weight:700; }
  .treatment-procedure-table td strong { color:var(--polish-ink); font-size:15px; }
  .treatment-procedure-table td small { display:block; margin-top:5px; color:var(--polish-copy); font-size:14px; }
  .treatment-procedure-table .treatment-procedure-description { width:30%; }
  .treatment-procedure-table .treatment-procedure-selection { width:90px; }
  .treatment-procedure-table .treatment-procedure-actions { width:88px; }
  #treatment-procedure-context { color:var(--polish-copy); font-size:14px; line-height:1.5; }
  #treatment-procedure-context:empty { display:none; }
  .treatment-procedure-selection label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:44px; font-size:14px; cursor:pointer; }
  .treatment-procedure-selection input { width:18px; height:18px; margin:0; accent-color:var(--polish-primary); }
  .treatment-procedure-state { display:inline-block; padding:4px 7px; border:1px solid var(--polish-line); border-radius:20px; background:var(--polish-surface-soft); font-size:14px; font-weight:700; }
  .treatment-procedure-budget-state,.treatment-procedure-muted { color:var(--polish-copy); font-size:14px; }
  .treatment-procedure-notes summary { min-height:44px; color:var(--polish-primary-strong); font-size:14px; cursor:pointer; }
  .treatment-procedure-notes p { margin:8px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
  .treatment-procedure-budget-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
  #treatment-procedure-selection-count { color:var(--polish-copy); font-size:14px; }
  .treatment-procedure-success { margin:12px 0; padding:10px 12px; border-left:3px solid var(--polish-success); color:var(--polish-ink); background:var(--polish-surface-soft); font-size:14px; line-height:1.5; }
  #treatment-procedure-modal { width:min(680px,calc(100vw - 32px)); max-width:min(680px,calc(100vw - 32px)); }
  #treatment-procedure-modal .modal-heading p { margin:5px 0 0; color:var(--polish-copy); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
  #treatment-procedure-modal .close { flex-shrink:0; width:44px; min-height:44px; padding:8px; }
  #treatment-procedure-modal :is(input,select,textarea) { min-height:44px; font-size:16px; }
  #treatment-procedure-modal textarea { line-height:1.5; }
  #treatment-procedure-modal .treatment-procedure-surfaces { display:flex; flex-wrap:wrap; gap:8px 16px; min-width:0; margin:0; padding:12px; border:1px solid var(--polish-line); border-radius:9px; background:var(--polish-surface-soft); }
  #treatment-procedure-modal .treatment-procedure-surfaces legend { padding:0 4px; color:var(--polish-copy); font-size:14px; font-weight:700; }
  #treatment-procedure-modal .treatment-procedure-surfaces label { display:flex; align-items:center; gap:8px; min-height:44px; color:var(--polish-ink); font-size:14px; }
  #treatment-procedure-modal input[type="checkbox"],
  #treatment-procedure-modal input[type="radio"] { width:18px; min-height:18px; height:18px; margin:0; accent-color:var(--polish-primary); }
  #treatment-procedure-modal .treatment-procedure-send { display:grid; gap:8px; padding:12px; border:1px solid var(--polish-line); border-radius:9px; background:var(--polish-brand-tint); }
  #treatment-procedure-modal .treatment-procedure-send legend { padding:0 4px; font-weight:700; }
  #treatment-procedure-modal .treatment-procedure-send label { display:flex; align-items:flex-start; gap:8px; min-height:44px; }
  #treatment-procedure-modal .treatment-procedure-send input { flex-shrink:0; margin-top:3px; }
  #treatment-procedure-modal .treatment-procedure-send .field-hint { margin:0; color:var(--polish-copy); font-size:14px; font-weight:400; line-height:1.5; }
  #treatment-procedure-modal .form-error { font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
  #treatment-procedure-modal button,#treatment-procedure-restore { min-height:44px; white-space:normal; }
  #treatment-procedure-restore[hidden],#treatment-procedure-reload[hidden] { display:none!important; }
  :is(#pending-procedure-plan,#treatment-procedure-modal) button.primary { border-color:var(--polish-primary)!important; color:var(--polish-surface)!important; background:var(--polish-primary)!important; box-shadow:none!important; }
  html[data-theme="dark"] :is(#pending-procedure-plan,#treatment-procedure-modal) button.primary { color:var(--polish-navy-deep)!important; }
  :is(#pending-procedure-plan,#treatment-procedure-modal) :focus-visible { outline:3px solid var(--polish-primary); outline-offset:2px; }
  @media(max-width:899px) {
    #pending-procedure-plan { padding:14px; }
    .treatment-procedure-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .treatment-procedure-table,.treatment-procedure-table tbody { display:block; }
    .treatment-procedure-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; padding:14px 0; border-bottom:1px solid var(--polish-line); }
    .treatment-procedure-table td { display:block; min-width:0; width:auto!important; padding:0; border:0; }
    .treatment-procedure-table td::before { display:block; margin-bottom:4px; color:var(--polish-copy); font-size:14px; font-weight:700; content:attr(data-label); }
    .treatment-procedure-table td:is(.treatment-procedure-description,.treatment-procedure-selection,.treatment-procedure-actions,[data-label="Doctor"],[data-label="Observaciones"]) { grid-column:1 / -1; }
    .treatment-procedure-selection label { flex-wrap:nowrap; }
    .treatment-procedure-tools { width:100%; }
    .treatment-procedure-tools button { flex:1; }
  }
}
@media print {
  #treatment-procedure-modal { display:none!important; }
}
@media screen {
  #intake-form .intake-growing-field {
    display:block;
    box-sizing:border-box;
    width:100%;
    min-width:0;
    min-height:44px;
    max-height:none;
    padding:10px 12px;
    border:1px solid var(--polish-line-strong);
    border-radius:8px;
    color:var(--polish-ink);
    background:var(--polish-surface-soft);
    font:inherit;
    font-size:14px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    overflow:hidden;
    resize:none;
  }
  #intake-form .intake-growing-field[rows="2"] { min-height:64px; }
  #intake-form .intake-growing-field[rows="3"] { min-height:86px; }
  #intake-form .intake-growing-field::placeholder { color:var(--polish-copy); opacity:1; }
  #intake-form .intake-growing-field:focus-visible { outline:3px solid var(--polish-primary); outline-offset:2px; }
  #intake-form .intake-check-grid .intake-growing-field { margin-top:8px; }
  #intake-form .intake-detail-grid { align-items:start; }
  #intake-form :is(.form-grid,.emergency-contact-fields,.minor-responsible-fields) { align-items:start; }
}
/* Screen density: shared spacing only. Keep type, clinical geometry and print layouts. */
@media screen {
  :root { --layout-panel-space:16px; --layout-section-space:12px;}
  #app-main { padding:20px clamp(20px,2.2vw,40px) 40px; padding-inline:clamp(20px,2.2vw,40px) !important;}
  #app-main > header { min-height:72px; margin-bottom:16px !important; padding:10px 16px !important;}
  #sidebar .brand { padding-bottom:16px !important;}
  #sidebar .nav-label { margin-top:16px !important;}
  #sidebar .nav-label-sub { margin-top:18px !important;}

  #app-main .panel { padding:var(--layout-panel-space);}
  #app-main .section-actions { margin-bottom:var(--layout-section-space) !important; gap:12px;}
  #app-main .panel-heading { margin-bottom:12px; padding-bottom:10px !important;}
  #app-main .empty { padding:24px 16px;}
  #app-main .search { margin-bottom:12px;}
  #app-main .doctor-grid { gap:12px;}
  #app-main .doctor-card { padding:16px;}
  #app-main .doctor-card-head { margin-bottom:12px;}
  #app-main .doctor-contact { padding:12px 0;}
  #app-main .calendar-status { padding-top:12px;}
  #app-main .setup-notice { margin-bottom:12px;}

  #dashboard .dashboard-overview { padding:16px 20px; gap:16px; margin-bottom:12px;}
  #dashboard .dashboard-metrics { margin-bottom:12px;}
  #dashboard .dashboard-metric { min-height:100px; padding:14px 16px;}
  #dashboard .finance-mini-strip { padding:12px 16px; margin-bottom:12px;}
  #upcoming-list h3, #record-upcoming-appointments h3 { margin:12px 0;}

  #appointments .agenda-command-deck { margin-bottom:12px;}
  #appointments .appointment-filters { padding:12px;}
  #appointments .agenda-toolbar { padding:10px 12px;}
  #appointments .agenda-summary-strip { padding:10px 12px;}
  #appointments .agenda-sidebar { padding:14px;}
  #appointments .appointment-row { padding-block:12px;}

  #record .back-button { margin-bottom:12px;}
  #record .record-header { min-height:96px; padding:14px 16px; margin-bottom:12px;}
  #record .record-tabs { margin-bottom:12px;}
  #record .intake-form h3:not(:first-child) { margin-top:20px; padding-top:16px;}
  #record .intake-form h3 { margin-bottom:12px;}
  #record .intake-check-grid { gap:12px; margin-top:12px;}
  #record .workflow-visit { margin-block:16px; padding:14px;}
  #record .clinical-procedure { padding-block:12px; gap:12px;}
  #record .clinical-history-filter { margin-block:12px;}
  #record .record-tab-panel > .panel + .panel { margin-top:12px;}
  #record .panel > .section-actions { min-height:0; padding:12px !important;}
  #record .clinical-evolution-grid { margin-top:12px;}
  #chart-workspace .odontogram-tools { gap:12px; padding:14px;}
  #chart-workspace .chart-tool-footer { gap:12px 16px;}
  #chart-workspace .chart-secondary-tools > details > summary { padding:12px 14px;}

  #payments .finance-modes { margin-bottom:12px;}
  #payments .finance-stats { margin:8px 0 16px;}
  #payments .finance-layout > .panel, #payments .cash-panel { padding:16px;}
  #payments .finance-search { margin:12px 0;}
  #payments .finance-plan { padding-block:16px;}
  #payments .cash-panel-heading { gap:16px;}
  #payments #cash-methods { gap:16px; padding-block:12px;}
  #payments .cash-day-row { padding-block:12px; gap:16px;}
  #record-treatment-plan-list .record-treatment-plan-card { padding:16px;}
  #app-main .leave-summary { gap:12px; margin-bottom:12px;}
  #app-main .leave-summary article { padding:16px;}
  #app-main .leave-summary strong { margin-top:8px;}
  #app-main :is(.leave-row,.record-leave) { padding-block:12px;}
  #audit .audit-filters { padding-block:12px;}
  #audit .audit-results-heading { padding-block:12px;}
  #audit .audit-event summary, #audit .audit-event-body { padding:12px;}
  #audit .audit-fields { gap:12px; margin-bottom:12px;}

  /* Preserve label/control separation and roomy click targets in every form. */
  .form-grid { gap:14px 16px; margin-top:16px;}
  .intake-form .form-grid, .evolution-procedure-grid.form-grid { margin-top:0;}
  dialog form, dialog .detail-shell, dialog .install-help { padding:20px;}
  dialog .modal-heading { margin-bottom:14px; padding-bottom:12px;}
  dialog .modal-actions { margin-top:16px; gap:10px;}
  dialog .section-actions { min-height:0; padding:12px !important; margin-bottom:12px !important; gap:12px;}
  .evolution-procedures { margin:16px 0;}
  .evolution-procedure-row { margin:14px 0; padding:14px;}
  .evolution-existing { margin:12px 0;}
  .procedure-export-row { margin:14px 0; gap:12px;}
  #payment-modal .form-grid { margin:12px 0; gap:14px;}
  .finance-procedures { margin:12px 0;}
  .finance-procedures li { padding-block:12px;}
  .finance-danger-zone { margin-top:20px; padding-top:12px;}
  #prescription-form .rx-toggle { margin:16px 0;}
  #prescription-form .rx-notice, #prescription-form .rx-guidance { margin-bottom:16px;}
  #prescription-form .rx-total { padding:14px 16px; margin-top:16px;}
  #prescription-modal form { padding:0;}
  #prescription-modal .modal-heading { margin:0; top:0; padding:18px 24px;}
  #prescription-form .rx-catalog { padding:18px;}
  #prescription-form .rx-editor { padding:18px 24px;}

  #login-screen { padding:24px;}
  #login-screen .login-layout { min-height:680px;}
  #login-screen .login-story { padding:36px 40px 28px;}
  #login-screen .login-story-copy { margin-top:44px;}
  #login-screen .login-form-panel { padding:36px;}
  #login-screen .login-logo { margin-bottom:24px;}
  #login-screen .login-card .login-intro { margin-bottom:24px;}
  #login-screen .login-card label { margin-top:16px;}
  #login-screen .login-card .login-help { margin-top:20px;}
  #login-screen .login-access-note { margin-top:24px;}

  /* Intermediate desktops: keep document actions within their row. */
  #app-main :is(.leave-actions,.record-leave-actions) { flex-wrap:wrap; gap:8px;}
  #app-main :is(.leave-row,.record-leave) > div { min-width:0; overflow-wrap:anywhere;}
  @media(min-width:900px) and (max-width:1399px) {
    #app-main :is(.leave-row,.record-leave) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
    #app-main .leave-actions { grid-column:2 / -1; justify-content:flex-end;}
    #app-main .record-leave-actions { grid-column:1 / -1;}}
  @media(max-width:900px) {
    #login-screen .login-layout { min-height:0;}}
  @media(max-width:899px) {
    #app-main { padding:14px 16px calc(28px + env(safe-area-inset-bottom)); padding-inline:16px !important;}
    #app-main > header { margin-top:-14px; margin-inline:-16px; padding:10px 16px !important; min-height:0;}}
  @media(max-width:760px) {
    :root { --layout-panel-space:14px;}
    #dashboard .dashboard-overview { padding:16px; gap:12px;}
    #dashboard .dashboard-metric { min-height:84px; padding:12px 14px;}
    #record .record-header { min-height:0;}
    #record .record-tabs { margin-block:8px;}
    #app-main :is(.leave-summary article,.doctor-card) { padding:14px;}
    #payments .finance-layout > .panel, #payments .cash-panel { padding:14px;}
    /* Keep the existing mobile sticky header/footer offsets in sync. */
    dialog form, dialog .detail-shell, dialog .install-help { padding:16px 14px calc(16px + env(safe-area-inset-bottom));}
    dialog .modal-heading { top:-16px; margin:-16px -14px 14px; padding:12px 14px;}
    dialog .modal-actions { bottom:calc(-16px - env(safe-area-inset-bottom)); margin:16px -14px calc(-16px - env(safe-area-inset-bottom)); padding:12px 14px calc(16px + env(safe-area-inset-bottom));}
    .form-grid { gap:12px;}
    .evolution-procedure-row { padding:12px;}
    #prescription-modal form { padding:0;}
    #prescription-modal .modal-heading { margin:0; padding:14px 16px;}
    #prescription-form .rx-catalog, #prescription-form .rx-editor { padding:16px;}
    #login-screen { padding:16px;}
    #login-screen .login-form-panel { padding:28px;}}
  @media(max-width:420px) {
    #app-main { padding-inline:12px !important;}
    #app-main > header { margin-inline:-12px; padding-inline:12px !important;}
    #login-screen { padding:12px;}
    #login-screen .login-form-panel { padding:24px 20px;}}}

/* Native disclosure and explicit scrolling keep all clinical controls reachable. */
.record-tab-scroll-controls { display:flex; justify-content:space-between; gap:8px; margin:0 0 12px;}
.record-tab-scroll-controls[hidden] { display:none;}
.record-tab-scroll-controls button,.patient-choices-more,#history-load-more,#leave-load-more { min-height:44px;}
.patient-choices-more { margin-top:8px;}
.chart-tools-disclosure { min-width:0;}
.chart-tools-disclosure > summary { display:none;}
@media screen and (max-width:600px) {
  .chart-tools-disclosure > summary { display:list-item; min-height:44px; padding:12px; cursor:pointer; font-weight:700; border:1px solid currentColor; border-radius:9px; margin-bottom:8px;}
  .chart-tools-disclosure > summary:focus-visible { outline:3px solid currentColor; outline-offset:2px;}
  .chart-tools-disclosure:not([open]) > .odontogram-tools { display:none;}
  #history-load-more,#leave-load-more { width:100%; margin-block:12px;}}
@media print { .record-tab-scroll-controls { display:none;}}

.chart-surface-help > summary { min-height:44px; padding:12px 0; cursor:pointer; font-weight:700;}
.chart-surface-help .surface-guide { min-width:0; width:auto; margin:8px 0 12px;}
.chart-tools-disclosure > summary { color:var(--text-primary); background:var(--surface-soft); border-color:var(--border-strong);}
.chart-surface-help > summary:focus-visible { outline:3px solid var(--primary); outline-offset:2px;}
/* Navigation starts collapsed at each login. Expansion lasts only within the current session. */
@media screen {
  #mobile-menu-button,
  #sidebar-mobile-launcher {
    display:grid;
    place-items:center;
    position:relative;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    border:1px solid var(--border-strong);
    border-radius:11px;
    background:var(--surface) !important;
    color:var(--link);
    box-shadow:var(--shadow-sm);
  }

  #sidebar-menu-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:start;
    gap:10px;
    flex-shrink:0;
    padding-bottom:8px;
    border-bottom:1px solid var(--line);
  }
  #sidebar-menu-heading #mobile-menu-button { grid-column:2; grid-row:1; margin-top:6px; }
  #sidebar-menu-heading .brand {
    grid-column:1;
    grid-row:1;
    display:flex;
    width:100%;
    padding:0 0 10px !important;
    border-bottom:0 !important;
  }
  #sidebar-menu-heading .brand-crop { width:146px; height:82px; max-width:100%; }
  #sidebar-menu-heading .brand-crop img { position:absolute; left:50%; top:50%; width:142px !important; height:142px !important; max-width:none; max-height:none; transform:translate(-50%,-50%); object-fit:contain; }
  #sidebar-mobile-launcher { display:none; }

  .mobile-menu-button span {
    position:absolute;
    left:50%;
    width:18px;
    height:2px;
    margin-left:-9px;
    border-radius:2px;
    background:var(--link);
    transition:transform 180ms ease,opacity 180ms ease,top 180ms ease;
  }
  body.mobile-menu-open #mobile-menu-button span { background:currentColor; }
  .mobile-menu-button span:nth-child(1) { top:15px; }
  .mobile-menu-button span:nth-child(2) { top:21px; }
  .mobile-menu-button span:nth-child(3) { top:27px; }

  #mobile-menu-button:focus-visible,
  #sidebar-mobile-launcher:focus-visible,
  #sidebar .nav-item:focus-visible {
    outline:3px solid var(--focus-ring) !important;
    outline-offset:2px;
  }

  #sidebar .nav-icon { flex:0 0 30px; width:30px; height:30px; }
  #sidebar .nav-icon svg { width:22px; height:22px; overflow:visible; }
  #sidebar .nav-icon svg :is(path,rect,circle,line,polyline) {
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #sidebar .nav-icon-detail { opacity:.8; }
  #sidebar .nav-item-label { min-width:0; }

  .sidebar-navigation-tooltip {
    position:fixed;
    z-index:100;
    max-width:220px;
    padding:9px 12px;
    border:1px solid var(--border-strong);
    border-radius:9px;
    background:var(--surface);
    color:var(--text-primary);
    box-shadow:var(--shadow-md);
    font-size:14px;
    font-weight:650;
    line-height:1.35;
    pointer-events:none;
  }
  .sidebar-navigation-tooltip[hidden] { display:none; }
}

@media screen and (min-width:600px) {
  #sidebar { width:260px; transform:none; transition:width 220ms ease,padding 220ms ease; }
  #sidebar-close-button { display:none; }
  #mobile-menu-backdrop { display:none !important; }
  #app-main { width:calc(100% - 260px); margin-left:260px; transition:margin-left 220ms ease,width 220ms ease; }
  #app-main > header { grid-template-columns:minmax(0,1fr) auto; }
  #app-main > header > div:not(.header-meta) { min-width:0; }

  body.sidebar-collapsed #sidebar { width:80px; padding:20px 10px; }
  body.sidebar-collapsed #app-main { width:calc(100% - 80px); margin-left:80px; }
  body.sidebar-collapsed #sidebar-menu-heading { display:flex; flex-direction:column; align-items:center; gap:12px; padding-bottom:12px; }
  body.sidebar-collapsed #sidebar-menu-heading #mobile-menu-button { margin-top:0; }
  body.sidebar-collapsed #sidebar .brand { padding:0 0 14px !important; }
  body.sidebar-collapsed #sidebar .brand-crop { position:relative; width:60px; height:46px; border-radius:12px; }
  body.sidebar-collapsed #sidebar .brand-crop img { position:absolute; left:50%; top:50%; width:76px !important; height:76px !important; max-width:none; max-height:none; transform:translate(-50%,-50%); object-fit:contain; }
  body.sidebar-collapsed #sidebar .brand > small,
  body.sidebar-collapsed #sidebar .nav-label { display:none; }
  body.sidebar-collapsed #sidebar > nav {
    justify-items:center;
    gap:7px;
    margin-top:16px;
    padding:4px 0 12px;
    scrollbar-width:thin;
  }
  body.sidebar-collapsed #sidebar > nav::-webkit-scrollbar { width:6px; }
  body.sidebar-collapsed #sidebar .nav-item {
    position:relative;
    justify-content:center;
    width:48px;
    min-width:48px;
    height:48px;
    min-height:48px;
    margin:0;
    padding:0 !important;
    gap:0;
  }
  body.sidebar-collapsed #sidebar .nav-item-label {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }
  body.sidebar-collapsed #sidebar .nav-icon { width:32px; height:32px; flex-basis:32px; border-radius:10px; }
  body.sidebar-collapsed #sidebar .nav-item:is(:hover,:focus-visible) .nav-icon svg { animation:sidebar-icon-greet 420ms ease-out 1; }
  body.sidebar-collapsed #sidebar .nav-item.active .nav-icon { animation:sidebar-icon-selected 600ms ease-out 1; }
  body.sidebar-collapsed #mobile-menu-button span:nth-child(1) { transform:translateY(1px); }
  body.sidebar-collapsed #mobile-menu-button span:nth-child(3) { transform:translateY(-1px); }
}

@media screen and (min-width:600px) and (max-width:899px) {
  #sidebar { padding:19px 15px; }
  #app-main > header { grid-template-columns:minmax(0,1fr) auto; }
}

@media screen and (max-width:599px) {
  #sidebar-mobile-launcher { display:grid; }
}

@keyframes sidebar-icon-greet {
  0%,100% { transform:translateY(0) rotate(0); }
  35% { transform:translateY(-2px) rotate(-5deg); }
  70% { transform:translateY(-1px) rotate(3deg); }
}
@keyframes sidebar-icon-selected {
  0%,100% { transform:scale(1); }
  40% { transform:scale(1.08); }
}

@media screen and (prefers-reduced-motion:reduce) {
  #sidebar,#app-main,#mobile-menu-button span,#sidebar-mobile-launcher span { transition:none !important; }
  #sidebar .nav-icon,#sidebar .nav-icon svg { animation:none !important; }
}

@media print { .sidebar-navigation-tooltip { display:none !important; } }
/* Shared screen components. Clinical data and print layouts use their existing rules. */
@media screen {
  @font-face { font-family:'DM Sans'; src:url('fonts/dm-sans.woff2?v=195') format('woff2'); font-weight:100 1000; font-style:normal; font-display:swap; }
  @font-face { font-family:Manrope; src:url('fonts/manrope.woff2?v=195') format('woff2'); font-weight:200 800; font-style:normal; font-display:swap; }
  :root { --ui-on-primary:#fff; --ui-neutral-bg:var(--surface-soft); }
  html[data-theme="dark"] { --ui-on-primary:#06121f; }
  html #prescription-modal,html[data-theme] #prescription-modal { --rx-accent:var(--primary); --rx-on-accent:var(--ui-on-primary); }
  body { font-family:'DM Sans',system-ui,sans-serif; font-size:16px; }
  :is(h1,h2,h3,h4),#app-main > header h1 { font-family:Manrope,'DM Sans',system-ui,sans-serif; }

  /* A single primary/secondary action treatment across the clinical and payment forms. */
  html :is(#app-shell,dialog) button.primary,
  html[data-theme="dark"] :is(#app-shell,dialog) button.primary {
    min-height:44px;
    padding:10px 14px;
    border:1px solid var(--primary) !important;
    border-radius:9px;
    background:var(--primary) !important;
    color:var(--ui-on-primary) !important;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
    box-shadow:none !important;
  }
  html :is(#app-shell,dialog) button.primary:hover,
  html[data-theme="dark"] :is(#app-shell,dialog) button.primary:hover { background:var(--primary-dark) !important; border-color:var(--primary-dark) !important; }
  html :is(#app-shell,dialog) button.secondary {
    min-height:44px;
    padding:10px 14px;
    border:1px solid var(--border-strong) !important;
    border-radius:9px;
    background:var(--surface) !important;
    color:var(--link) !important;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
    box-shadow:none !important;
  }
  html :is(#app-shell,dialog) button.secondary:hover { background:var(--surface-soft) !important; }
  html :is(#app-shell,dialog) button.primary:not(:disabled):active { background:var(--primary-dark) !important; border-color:var(--primary-dark) !important; box-shadow:inset 0 2px 6px rgba(6,18,31,.26) !important; transform:translateY(1px); }
  html :is(#app-shell,dialog) button.secondary:not(:disabled):active { background:var(--surface-soft) !important; box-shadow:inset 0 2px 5px rgba(16,46,80,.16) !important; transform:translateY(1px); }
  html :is(#app-shell,dialog) :is(button,input,select,textarea,summary):focus-visible { outline:3px solid var(--focus-ring) !important; outline-offset:2px; }
  html :is(#app-shell,dialog) :is(input,select,textarea)[aria-invalid="true"] { border-color:var(--danger) !important; }
  form[data-submitting="true"] button:disabled { cursor:progress; }
  dialog .modal-heading > button.close { flex:0 0 44px; display:grid; place-items:center; width:44px; height:44px; min-height:44px; border:1px solid var(--border-strong); border-radius:9px; color:var(--link); background:var(--surface); }

  #intake-form select,
  #payments .date-display {
    min-width:0;
    min-height:44px;
    height:auto;
    padding:9px 12px;
    border:1px solid var(--border-strong);
    border-radius:9px;
    color:var(--text-primary);
    background:var(--field);
    font:inherit;
    font-size:15px;
    line-height:1.4;
  }
  #intake-form select { width:auto; }
  #intake-form .habits-grid select { width:100%; }
  #intake-form .intake-check-grid label { flex-wrap:wrap; align-items:center; gap:8px; }
  #doctor-list .doctor-edit { min-height:40px; }

  dialog textarea.clinical-growing-field {
    display:block;
    box-sizing:border-box;
    width:100%;
    min-height:64px;
    max-height:none;
    padding:10px 12px;
    border:1px solid var(--border-strong);
    border-radius:9px;
    background:var(--field);
    color:var(--text-primary);
    font:inherit;
    font-size:16px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    overflow:hidden;
    resize:none;
  }
  dialog textarea.clinical-growing-field[rows="3"] { min-height:86px; }
  #record .record-header .avatar-large { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; color:var(--link); background:var(--brand-sky); border:1px solid var(--border-strong); border-radius:12px; font-size:18px; font-weight:750; }
  #patient-list .avatar > span { flex:0 0 34px; width:34px; height:34px; }
  #patient-list .avatar > div { min-width:0; overflow-wrap:anywhere; }
  #patient-list .patient-letter[data-patient-letter=""] { width:auto; padding-inline:12px; white-space:normal; }
  #record .record-tab,#record .clinical-history-filter button,#leave-search { min-height:44px; }
  #users .role-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #user-doctor-field[hidden] { display:none; }

  /* Status always keeps its text, with the same treatment in every view. */
  html .doctor-status.inactive,
  html[data-theme="dark"] .doctor-status.inactive { color:var(--text-secondary) !important; background:var(--ui-neutral-bg) !important; border-color:var(--border-strong); }
  #record .financial-badge { display:inline-flex; align-items:center; gap:6px; margin:8px 0; padding:5px 9px; font-size:14px; font-weight:700; border:1px solid var(--border-strong); border-radius:9px; }
  #record .financial-badge.pendiente { background:var(--crm-warning-tint); color:var(--warning); }
  #record .financial-badge.parcial { background:var(--brand-sky); color:var(--link); }
  #record .financial-badge.pagado { background:var(--crm-success-tint); color:var(--success); }
  #dashboard .balance-icon svg { width:24px; height:24px; }

  .clinical-text-details { margin:12px 0; border:1px solid var(--line); border-radius:9px; background:var(--surface-soft); }
  .clinical-text-details > summary { min-height:44px; padding:10px 12px; cursor:pointer; color:var(--link); font-size:14px; font-weight:700; }
  .clinical-text-details > :is(p,.consent-content) { margin:0; padding:0 12px 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
  #app-main :is(.leave-row,.record-leave) { align-items:start; }
  #app-main :is(.leave-row,.record-leave) .clinical-text-details { margin:8px 0 0; }
  #app-main :is(.leave-row,.record-leave) .clinical-text-details > summary { font-size:14px; }

  #clinical-alerts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:start; gap:10px; margin:12px 0; }
  #clinical-alerts > .clinical-alert { grid-column:1 / -1; }
  #clinical-alerts .clinical-alert { min-width:0; flex-direction:column; gap:4px; padding:10px 12px; }
  #clinical-alerts .clinical-alert :is(strong,span) { overflow-wrap:anywhere; }
  .clinical-alert-details { display:block; grid-column:1 / -1; min-width:0; }
  .clinical-alert-details > summary { display:none; }
  .clinical-alert-secondary { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:start; gap:10px; }

  .agenda-filters-disclosure,.agenda-calendar-disclosure { min-width:0; }
  .agenda-filters-disclosure > summary,.agenda-calendar-disclosure > summary { display:none; }
  .sidebar-account { display:none; }
  @media(min-width:600px) { html #app-shell dialog { margin:auto; inset:0; } }
  @media(max-width:899px) { #users .role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media(max-width:599px) {
    html #app-shell dialog,html #app-shell dialog.wide-dialog,html #prescription-modal {
      position:fixed;
      inset:auto 0 0;
      width:100%;
      max-width:100%;
      max-height:calc(100dvh - 12px) !important;
      margin:0;
      border-radius:16px 16px 0 0 !important;
    }
    /* Existing prescription rules use !important for width. */
    html #prescription-modal { width:100% !important; max-width:100% !important; }
    #intake-form select,#payments .date-display { font-size:16px; }
    #record .record-header { display:flex; align-items:flex-start; gap:12px; }
    #record .record-header > div:not(.avatar-large) { min-width:0; }
    #record .record-header .avatar-large { flex-basis:40px; width:40px; height:40px; font-size:15px; }
    #record .record-header h2 { font-size:18px; line-height:1.4; }
    #clinical-alerts { grid-template-columns:1fr; }
    .clinical-alert-details { display:block; min-width:0; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
    .clinical-alert-details > summary { display:list-item; min-height:44px; padding:10px 12px; cursor:pointer; color:var(--text-primary); font-size:14px; font-weight:700; }
    .clinical-alert-details > summary span { display:block; color:var(--text-secondary); font-size:14px; font-weight:400; line-height:1.5; }
    .clinical-alert-secondary { display:grid; grid-template-columns:1fr; gap:8px; padding:0 10px 10px; }
    .clinical-alert-details:not([open]) > .clinical-alert-secondary { display:none; }
    .agenda-filters-disclosure > summary,.agenda-calendar-disclosure > summary { display:list-item; min-height:44px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:9px; color:var(--link); background:var(--surface); font-size:14px; font-weight:700; cursor:pointer; }
    #agenda-filter-count { color:var(--text-secondary); font-size:14px; }
    #appointments .agenda-toolbar { gap:8px; }
    #appointments .agenda-summary-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px; }
    #appointments .agenda-summary-strip > :is(article,button) { min-width:0; padding:4px; border:0; text-align:left; }
    #appointments .agenda-summary-strip :is(span,small) { font-size:11px; overflow-wrap:anywhere; }
    #appointments .agenda-summary-strip small { white-space:normal; overflow:visible; text-overflow:clip; }
    #appointments .agenda-summary-strip strong { margin:4px 0; font-size:20px; }
    #appointments .agenda-summary-next em { display:none; }
    #appointments .agenda-workspace { display:flex; flex-direction:column; gap:12px; }
    #appointments .agenda-content { order:0; min-width:0; }
    #appointments .agenda-calendar-disclosure { order:1; }
    #appointments .agenda-sidebar { margin-top:8px; }
    #sidebar .sidebar-account { display:grid; gap:10px; width:100%; flex-shrink:0; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
    #sidebar-account .user-chip { display:flex; width:100%; max-width:none; padding:0; border:0; box-shadow:none; background:transparent; }
    #sidebar-account .user-chip > div { display:block !important; min-width:0; }
    #sidebar-account .user-chip :is(strong,small) { display:block; white-space:normal; overflow-wrap:anywhere; }
    #sidebar-account .user-chip small { font-size:14px; }
    #sidebar-account button { width:100%; }
  }
}

/* Cabecera móvil compacta: el título usa todo el ancho disponible; fecha y cierre de sesión viven en el menú lateral. */
.sidebar-date { margin:0; color:var(--text-secondary); font-size:14px; font-weight:600; }
@media screen and (max-width:599px) {
  #app-main > header { grid-template-columns:44px minmax(0,1fr) auto !important; align-items:center; column-gap:10px; row-gap:0; min-height:0 !important; }
  #app-main > header > div:not(.header-meta) { min-width:0; }
  #app-main > header h1 { font-size:clamp(17px,5.4vw,21px) !important; overflow-wrap:break-word; }
  #app-main > header .header-meta { width:auto !important; min-width:0; flex:0 0 auto; display:flex; flex-wrap:nowrap; gap:6px !important; justify-content:flex-end; }
  #app-main > header .header-meta :is(.date,.user-chip,.install-button,#logout-button,.logout-button) { display:none !important; }
}
@media screen and (min-width:600px) { .sidebar-date { display:none; } }

#offline-indicator { position:fixed; z-index:2000; left:50%; top:calc(8px + env(safe-area-inset-top,0px)); transform:translateX(-50%); max-width:min(92vw,560px); padding:8px 14px; border-radius:999px; background:#7a2e0e; color:#fff; font-size:14px; font-weight:700; line-height:1.3; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.25); }
#offline-indicator[hidden] { display:none; }

#odontogram-grid .surface:focus-visible { outline:none !important; stroke:var(--tooth-focus); stroke-width:5; paint-order:stroke; filter:drop-shadow(0 0 3px rgba(0,0,0,.65)); }

.skip-link { position:absolute; left:12px; top:12px; z-index:3000; padding:10px 14px; border-radius:9px; background:#102e50; color:#fff; font-size:14px; font-weight:700; text-decoration:none; transform:translateY(-160%); }
.skip-link:focus { transform:none; }

/* Tableta: el menú lateral no tapa el título y la agenda cabe en el alto. */
@media screen and (min-width:600px) and (max-width:899px) {
  #sidebar-mobile-launcher { display:none !important; }
  #app-main > header { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center; }
  #app-main > header > div:not(.header-meta) { min-width:0; }
  #app-main > header h1 { overflow-wrap:anywhere; }
}
@media screen and (min-width:600px) and (max-width:1023px) {
  .agenda-filters-disclosure > summary,.agenda-calendar-disclosure > summary { display:list-item; min-height:44px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:9px; color:var(--link); background:var(--surface); font-size:14px; font-weight:700; cursor:pointer; }
  #agenda-filter-count { color:var(--text-secondary); font-size:14px; }
  #appointments .agenda-workspace { display:flex; flex-direction:column; gap:12px; }
  #appointments .agenda-content { order:0; min-width:0; }
  #appointments .agenda-calendar-disclosure { order:1; }
  #appointments .agenda-summary-strip { gap:8px; margin-bottom:10px; }
  #appointments .agenda-summary-strip > :is(article,button) { padding:8px 12px; }
}
#appointments .appt-time-block { min-width:var(--clinic-time-track); overflow:visible; }
#appointments .appt-time-block strong { white-space:nowrap; overflow:visible; text-overflow:clip; font-size:14px; }
#appointments .appointment-menu summary { width:44px; height:44px; min-width:44px; min-height:44px; }
.workflow-visit-toggle { display:flex; align-items:center; min-height:44px; }
#visit-enable { width:44px; height:44px; flex:0 0 44px; }

body.sidebar-collapsed #sidebar .brand-crop { width:56px; height:56px; overflow:hidden; background:transparent; box-shadow:none; }
body.sidebar-collapsed #sidebar .brand-crop img { position:absolute; inset:0; left:0 !important; top:0 !important; width:100% !important; height:100% !important; max-width:100%; max-height:100%; transform:none !important; object-fit:contain; object-position:center; }

@media screen and (min-width:1024px) {
  #appointments .agenda-filters-disclosure > .appointment-filters { display:grid; grid-template-columns:minmax(200px,2fr) minmax(130px,1fr) minmax(130px,1fr) minmax(110px,1fr) auto; gap:10px; padding:10px 14px; align-items:end; }
  #appointments .agenda-filters-disclosure > .appointment-filters > :nth-child(n) { grid-column:auto; }
}
@media screen and (min-width:1024px) and (max-height:860px) {
  #appointments .appointment-filters { padding:8px 12px; }
  #appointments .appointment-filters :is(input,select), #appointment-filter-clear { height:40px; min-height:40px; }
  #appointments .agenda-toolbar { padding:6px 12px; }
  #appointments .agenda-summary-strip { padding:6px 12px; }
  #appointments .agenda-summary-strip > :is(article,button) { min-height:40px !important; }
  #appointments .agenda-workspace { margin-top:8px; }
  #appointments .calendar-month-day { min-height:64px !important; }
}

/* La medida de la hora está en foundation.css (--clinic-time-track). */
#app-shell :is(.appt-time-block, .calendar-selected-time, .calendar-event-time) {
  min-width: var(--clinic-time-track);
  overflow: visible;
}
#app-shell :is(.appt-time-block strong, .calendar-selected-time strong, .calendar-event-time) {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}