/* Shared work surfaces. Screen-only so printed QR labels retain their dimensions. */
@media screen {
  :root {
    --erp-page:#f4f4f1;
    --erp-surface:#fffefa;
    --erp-soft:#efefec;
    --erp-raised:#ffffff;
    --erp-ink:#262825;
    --erp-muted:#636760;
    --erp-line:#dedfda;
    --erp-control-line:#bfc3bb;
    --erp-accent:#ece5f3;
    --erp-accent-ink:#5b4678;
    --erp-primary:#252625;
    --erp-primary-ink:#faf9f6;
    --erp-focus:#3c618f;
    --erp-focus-ring:#5494c326;
    --erp-danger:#a33e38;
    --erp-danger-surface:#fbefeb;
    --erp-danger-line:#e8c2b9;
    --erp-radius:26px;
    --erp-control-radius:16px;
    --erp-shadow:0 8px 28px #25262508;
    --erp-modal-shadow:0 28px 100px #20232033;
    --erp-mesh:radial-gradient(ellipse at 0% 0%,#e7dcf3cc,transparent 60%),radial-gradient(ellipse at 100% 100%,#d8eaf4b3,transparent 65%),radial-gradient(ellipse at 80% 0%,#f2e4dc80,transparent 60%),#f3f1f5;
    --erp-glass:#fffefad9;
    --erp-ease:cubic-bezier(.22,.75,.25,1);
    --erp-text-size:16px;
    --erp-label-size:14px;
    --erp-caption-size:13px;
    --erp-icon-size:22px;
    --ink:var(--erp-ink);
    --muted:var(--erp-muted);
    --line:var(--erp-line);
    --surface:var(--erp-page);
    --pearl:var(--erp-surface);
    --glass:var(--erp-glass);
    --focus:var(--erp-focus);
    --soft-shadow:var(--erp-shadow);
    --page-background:radial-gradient(ellipse at 0% 0%,#e8e0f240,transparent 34rem),radial-gradient(ellipse at 100% 16%,#e1edf638,transparent 38rem),var(--erp-page);
  }

  html[data-theme="dark"] {
    --erp-page:#101110;
    --erp-surface:#1c1d1c;
    --erp-soft:#252625;
    --erp-raised:#30312f;
    --erp-ink:#f4f4ef;
    --erp-muted:#b4b7ae;
    --erp-line:#373934;
    --erp-control-line:#5a5e54;
    --erp-accent:#36303e;
    --erp-accent-ink:#e8dbf8;
    --erp-primary:#f1f0e9;
    --erp-primary-ink:#20221e;
    --erp-focus:#d0b7ee;
    --erp-focus-ring:#b596d333;
    --erp-danger:#ffb7a9;
    --erp-danger-surface:#3b2925;
    --erp-danger-line:#785148;
    --erp-shadow:0 10px 30px #00000014;
    --erp-modal-shadow:0 28px 100px #00000080;
    --erp-mesh:radial-gradient(ellipse at 0% 0%,#85699875,transparent 65%),radial-gradient(ellipse at 100% 100%,#4b9c9e66,transparent 65%),radial-gradient(ellipse at 90% 0%,#ba897252,transparent 60%),#20221f;
    --erp-glass:#1c1d1ce8;
    --ink:var(--erp-ink);
    --muted:var(--erp-muted);
    --line:var(--erp-line);
    --surface:var(--erp-page);
    --pearl:var(--erp-surface);
    --glass:var(--erp-glass);
    --focus:var(--erp-focus);
    --soft-shadow:var(--erp-shadow);
    --page-background:var(--erp-page);
    --directory-surface:#1c1d1cf2;
    --directory-card:#252625e8;
    --directory-line:var(--erp-line);
    --directory-ink:var(--erp-ink);
    --directory-muted:var(--erp-muted);
    --directory-hover:var(--erp-raised);
    --directory-selected:linear-gradient(120deg,#e6d8ee,#ebe1de 48%,#cce8e8);
    --directory-glow-pink:#bd94a412;
    --directory-glow-blue:#86bbd210;
    --directory-glow-cream:#cfc0a50c;
    background:var(--erp-page);
  }

  html[data-theme] body:not(.camera-mode):not(:has(.doctor-profile-reference)) {
    color:var(--erp-ink);
    background:var(--page-background);
    background-attachment:fixed;
  }

  /* Typography remains the existing local font, including its Cyrillic fallback. */
  :where(.heading,.section-label,.dialog-heading) h2 {text-wrap:balance}
  :where(.heading,.section-label,.dialog-heading) p {text-wrap:pretty}
  :where(.metadata,.detail-stock,.batch-quantity,.quantity,.money-breakdown) {font-variant-numeric:tabular-nums}
  html[data-theme] :is(.button,.text-button,.back):where(:not(.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)) {font-size:var(--erp-label-size)}

  /* Keep warning panels, photo canvases and dossier silhouettes distinct. */
  html[data-theme] .panel:where(:not(.doctor-profile-reference *,.camera-panel,.product-photo,.issue-photo-picker,.issue-live-camera,.financial-summary-unavailable,.reconciliation-recovery,.asset-danger-actions,.asset-quarantine-action,.finance-block-error,.success)) {
    border-color:var(--erp-line);
    border-radius:var(--erp-radius);
    background:var(--erp-surface);
    box-shadow:var(--erp-shadow);
    backdrop-filter:none;
  }

  /* Ordinary actions share a rhythm; swipe confirmation and camera controls keep theirs. */
  html[data-theme] .button:where(:not(.swipe-action,.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)) {
    min-height:46px;
    border-color:transparent;
    background:var(--erp-primary);
    color:var(--erp-primary-ink);
    box-shadow:inset 0 1px 0 #ffffff14;
    transition:background .18s var(--erp-ease),border-color .18s var(--erp-ease),box-shadow .18s var(--erp-ease),transform .18s var(--erp-ease);
  }
  html[data-theme] .button.secondary:where(:not(.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)) {
    border-color:var(--erp-line);
    background:var(--erp-soft);
    color:var(--erp-ink);
    box-shadow:none;
  }
  html[data-theme] .button.soft:where(:not(.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)) {
    border-color:transparent;
    background:var(--erp-accent);
    color:var(--erp-accent-ink);
    box-shadow:none;
  }
  html[data-theme] .button.danger:where(:not(.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)) {
    border-color:var(--erp-danger-line);
    background:var(--erp-danger-surface);
    color:var(--erp-danger);
    box-shadow:none;
  }
  html[data-theme] .button.small:where(:not(.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)) {min-height:44px}
  html[data-theme] .icon-button:where(:not(.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)) {
    min-height:44px;
    border-color:var(--erp-line);
    background:var(--erp-soft);
    color:var(--erp-ink);
    box-shadow:none;
    transition:background .18s var(--erp-ease),border-color .18s var(--erp-ease),transform .18s var(--erp-ease);
  }
  html[data-theme]:where(:not([data-focus-modality="pointer"])) :is(.button,.icon-button):where(:not(.camera-panel *,.scan-dialog *,#label-dialog *)):focus-visible {
    outline:2px solid var(--erp-focus);
    outline-offset:3px;
    box-shadow:0 0 0 5px var(--erp-focus-ring);
  }

  /* Text fields only: native choices, hidden date inputs and quantity wheels are excluded. */
  html[data-theme] :where(.form-panel,.auth-panel,.settings-section,.supplier-dialog,.employee-editor-dialog,.stock-editor-dialog,.cabinet-team-dialog,.cabinet-management-create,.category-management-create) :is(input:not([type]),input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],input[type="search"],input[type="number"],textarea):where(:not(.quantity-value,.doctor-profile-reference *)) {
    border-color:var(--erp-control-line);
    border-radius:var(--erp-control-radius);
    background:var(--erp-surface);
    color:var(--erp-ink);
    caret-color:var(--erp-focus);
  }
  html[data-theme] :where(.form-panel,.auth-panel,.settings-section,.supplier-dialog,.employee-editor-dialog,.stock-editor-dialog,.cabinet-team-dialog,.cabinet-management-create,.category-management-create) :is(input,textarea):where(:not([type="checkbox"],[type="radio"],[type="file"],[type="range"],.quantity-value,.date-picker-input,.doctor-profile-reference *)):focus-visible {
    border-color:var(--erp-focus);
    background:var(--erp-raised);
    outline:0;
    box-shadow:0 0 0 3px var(--erp-focus-ring);
  }

  /* Header selectors preserve the clinical/warehouse/cabinet scope and menu placement. */
  html[data-theme] body:not(:has(.doctor-profile-reference)) #header.site-header {
    border-color:var(--erp-line);
    border-radius:24px;
    background:var(--erp-glass);
    box-shadow:0 4px 22px #25262508;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }
  html[data-theme] #header :is(.desktop-quick-action,.mobile-settings-action,.desktop-profile) {
    border-color:var(--erp-line);
    background:var(--erp-soft);
    color:var(--erp-ink);
    box-shadow:none;
  }
  html[data-theme] #header .warehouse-context .unit-trigger {
    border-color:var(--erp-line);
    background:var(--erp-soft);
    color:var(--erp-ink);
    box-shadow:none;
    font-size:var(--erp-label-size);
  }
  html[data-theme] #header .cabinet-control .unit-trigger {
    border-color:var(--erp-control-line);
    background:var(--erp-accent);
    color:var(--erp-accent-ink);
  }
  html[data-theme] #header .warehouse-context .unit-chevron {color:var(--erp-muted)}
  html[data-theme] #header :is(.desktop-quick-action,.mobile-settings-action)>svg {width:var(--erp-icon-size);height:var(--erp-icon-size)}
  html[data-theme] #header .desktop-profile-copy strong {font-size:var(--erp-label-size)}
  html[data-theme] #header .desktop-profile-copy small {font-size:12px;line-height:1.4}
  html[data-theme] #header .context-field-label {font-size:12px;line-height:1.35;letter-spacing:0}
  html[data-theme] #header :is(.cabinet-context-links a,.cabinet-context-status) {font-size:var(--erp-caption-size);line-height:1.4}
  html[data-theme] #header .warehouse-context .unit-trigger:focus-visible {
    outline:2px solid var(--erp-focus);
    outline-offset:3px;
  }

  /* Modal colours are shared; each specialised modal owns its internal scrolling. */
  html[data-theme] dialog:is(.product-delete-dialog,.employee-delete-dialog,.supplier-dialog,.employee-editor-dialog,.stock-editor-dialog,.product-match-dialog,.cabinet-team-dialog,.cabinet-archive-dialog,.dossier-photo-dialog) {
    border-color:var(--erp-line);
    border-radius:28px;
    background:var(--erp-surface);
    color:var(--erp-ink);
    box-shadow:var(--erp-modal-shadow);
    backdrop-filter:none;
    overscroll-behavior:contain;
    scroll-padding-block:24px;
  }
  html[data-theme] dialog:is(.product-delete-dialog,.employee-delete-dialog,.supplier-dialog,.employee-editor-dialog,.stock-editor-dialog,.product-match-dialog,.cabinet-team-dialog,.cabinet-archive-dialog,.dossier-photo-dialog)::backdrop {
    background:#10111080;
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
  }
  html[data-theme] .supplier-dialog-actions {background:var(--erp-surface);border-color:var(--erp-line)}
  html[data-theme] .supplier-form-grid fieldset {background:var(--erp-soft);border-color:var(--erp-line)}
  html[data-theme] .supplier-form-grid :is(legend,label) {color:var(--erp-ink)}
  html[data-theme] :is(.supplier-dialog-intro,.product-delete-dialog p,.employee-delete-dialog p,.cabinet-archive-dialog p,.cabinet-archive-dialog li) {color:var(--erp-muted)}
  html[data-theme] :is(.product-delete-dialog,.employee-delete-dialog,.cabinet-archive-dialog) p strong {color:var(--erp-ink)}

  @media (hover:hover) and (pointer:fine) {
    html[data-theme] :is(.button,.icon-button):where(:not(.swipe-action,.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)):hover:not(:disabled) {
      box-shadow:0 4px 12px #25262514;
      transform:translateY(-1px);
    }
    html[data-theme] :is(.button.secondary,.icon-button):where(:not(.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)):hover:not(:disabled) {background:var(--erp-raised);border-color:var(--erp-control-line)}
    html[data-theme] #header :is(.desktop-quick-action,.mobile-settings-action):hover {background:var(--erp-accent);border-color:var(--erp-control-line)}
  }
  html[data-theme] :is(.button,.icon-button):where(:not(.swipe-action,.doctor-profile-reference *,.camera-panel *,.scan-dialog *,#label-dialog *)):active:not(:disabled) {transform:scale(.98)}
}

@media screen and (min-width:1180px) {
  :root,html[data-theme="dark"] {
    --desktop-rail-surface:var(--erp-page);
    --desktop-rail-line:var(--erp-line);
    --desktop-rail-icon:var(--erp-muted);
    --desktop-rail-hover:var(--erp-soft);
    --desktop-rail-accent:var(--erp-accent);
  }
  html[data-theme] #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout) {
    border-color:transparent;
    background:transparent;
    color:var(--erp-muted);
    transition:background .18s var(--erp-ease),color .18s var(--erp-ease),border-color .18s var(--erp-ease);
  }
  html[data-theme] #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout):is(:hover,:focus-visible) {
    background:var(--erp-soft);
    color:var(--erp-ink);
  }
  html[data-theme] #navigation .desktop-nav-link.active,
  html[data-theme] #navigation .desktop-theme-toggle[aria-checked="true"] {
    border-color:var(--erp-control-line);
    background:var(--erp-accent);
    color:var(--erp-accent-ink);
  }
  html[data-theme] #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout):focus-visible {outline:2px solid var(--erp-focus);outline-offset:3px}
  html[data-theme] #navigation :is(.desktop-nav-icon,.desktop-nav-link svg,.desktop-theme-toggle>svg,.desktop-logout>svg) {width:var(--erp-icon-size);height:var(--erp-icon-size)}
  html[data-theme] #navigation .desktop-nav-link[aria-expanded="true"] {border-color:var(--erp-control-line);background:var(--erp-accent);color:var(--erp-accent-ink)}
}

@media screen and (max-width:1179px) {
  html:root,html[data-theme="dark"] {--nav-clearance:112px}
  /* Five destinations share one capsule; the scanner is a regular destination. */
  html[data-theme] #navigation.bottom-nav {
    --dock-size:64px;
    --dock-cell:clamp(50px,calc((100vw - 54px) / 5),76px);
    --dock-gap:4px;
    --dock-bottom-gap:calc(12px + env(safe-area-inset-bottom,0px));
    --dock-surface:#fffefaf2;
    --dock-ink:#5d625a;
    --dock-active:#252625;
    --dock-active-ink:#fffefa;
    left:50%;
    width:calc(5 * var(--dock-cell) + 4 * var(--dock-gap) + 14px);
    max-width:calc(100% - 24px);
    min-height:calc(var(--dock-size) + 14px);
    padding:6px;
    border:1px solid #d5d8cf;
    border-radius:30px;
    background:var(--dock-surface);
    box-shadow:0 8px 26px #10111018;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  html[data-theme="dark"] #navigation.bottom-nav {
    --dock-surface:#252625f5;
    --dock-ink:#c7cabf;
    --dock-active:#f1f1ea;
    --dock-active-ink:#252625;
    border-color:#41443d;
    box-shadow:0 8px 26px #00000038;
  }
  /* The capsule itself paints the surface, avoiding an SVG edge over the inset. */
  html[data-theme] #navigation .nav-surface {opacity:0}
  html[data-theme] #navigation .nav-icon {width:var(--dock-cell);height:var(--dock-size);border-radius:23px;border:0;background:transparent;color:inherit;box-shadow:none}
  html[data-theme] #navigation .nav-icon svg {width:24px;height:24px;transform:translateY(-9px)}
  html[data-theme] #navigation .nav-highlight {border-radius:23px;background:var(--dock-active);box-shadow:none}
  html[data-theme] #navigation .nav-item.active .nav-icon {border-color:transparent;background:transparent;color:var(--dock-active-ink)}
  html[data-theme] #navigation .nav-item {color:var(--dock-ink)}
  html[data-theme] #navigation .nav-item.active {color:var(--dock-active-ink)}
  html[data-theme] #navigation .nav-item .nav-label {
    position:absolute;
    inset:auto auto 9px 50%;
    display:block;
    max-width:calc(var(--dock-cell) - 2px);
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    font-size:12px;
    font-weight:500;
    line-height:1.2;
    letter-spacing:-.2px;
    box-shadow:none;
    opacity:1;
    transform:translateX(-50%);
    animation:none;
  }
  html[data-theme] #navigation .nav-more-panel {right:-6px;bottom:calc(100% + 14px);background:var(--erp-surface);color:var(--erp-ink);border-color:var(--erp-line);box-shadow:var(--erp-modal-shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
  html[data-theme] #navigation .nav-more-link {font-size:14px;color:var(--erp-ink)}
  html[data-theme] #navigation .nav-more-link:is(:hover,.is-active) {background:var(--erp-accent);color:var(--erp-accent-ink)}
  html[data-theme] #navigation .nav-more-action {border-color:var(--erp-line);background:transparent}
  html[data-theme] #navigation .nav-more[open]>summary:not(.active) .nav-icon {background:var(--erp-soft);color:var(--erp-ink);box-shadow:none}
  html[data-theme] #navigation :is(.nav-item,.nav-more-link):focus-visible {outline:2px solid var(--erp-focus);outline-offset:2px}
}

@media screen and (max-width:600px) {
  html[data-theme] body:not(:has(.doctor-profile-reference)) #header.site-header {border-radius:22px}
  html[data-theme] dialog:is(.product-delete-dialog,.employee-delete-dialog,.supplier-dialog,.employee-editor-dialog,.stock-editor-dialog,.product-match-dialog,.cabinet-team-dialog,.cabinet-archive-dialog,.dossier-photo-dialog) {
    position:fixed;
    inset:auto 0 0;
    width:100%;
    max-width:600px;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top,0px)));
    margin:0 auto;
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:28px 28px 0 0;
    padding-bottom:max(20px,env(safe-area-inset-bottom,0px));
    scroll-padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
  }
  html[data-theme] dialog:is(.product-delete-dialog,.employee-delete-dialog,.cabinet-archive-dialog,.cabinet-team-dialog) .actions {display:flex;flex-wrap:wrap;gap:10px}
  html[data-theme] dialog:is(.product-delete-dialog,.employee-delete-dialog,.cabinet-archive-dialog,.cabinet-team-dialog) .actions>.button {flex:1 1 130px}
  html[data-theme] .supplier-dialog-actions {padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
}

@media screen and (prefers-reduced-motion:reduce) {
  html[data-theme] :is(.button,.icon-button,.desktop-quick-action,.mobile-settings-action),
  html[data-theme] #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout,.nav-icon,.nav-scanner,.nav-highlight) {transition:none}
  html[data-theme] :is(.button,.icon-button):where(:not(.swipe-action,.camera-panel *,.scan-dialog *,#label-dialog *)):is(:hover,:active) {transform:none}
}

@media screen and (forced-colors:active) {
  html[data-theme] :is(.button,.icon-button),
  html[data-theme] #navigation :is(.nav-icon,.nav-scanner,.desktop-nav-link,.desktop-theme-toggle,.desktop-logout) {border:1px solid ButtonText}
  html[data-theme] #navigation :is(.nav-item.active .nav-icon,.desktop-nav-link.active) {outline:2px solid Highlight}
}