/* NIRVANA AJAN 7 — responsive, mobile and accessibility final layer.
   Source module: do not merge by hand into generated canonical assets. */
:root{
  --a7-safe-top:env(safe-area-inset-top,0px);
  --a7-safe-right:env(safe-area-inset-right,0px);
  --a7-safe-bottom:env(safe-area-inset-bottom,0px);
  --a7-safe-left:env(safe-area-inset-left,0px);
  --a7-vvh:100dvh;
  --a7-focus-color:#0b63ce;
  --a7-focus-offset:3px;
  --a7-touch-min:44px;
}
html{scroll-padding-top:calc(76px + var(--a7-safe-top));text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{min-width:0;min-height:100%;overflow-wrap:anywhere}
body.agent7-overlay-open{overflow:hidden;overscroll-behavior:none}
body.agent7-keyboard-open{padding-bottom:max(0px,var(--a7-keyboard-inset,0px))}
main,.content,.container,.shell-main,.clean-core-page-scope,.ui-cleanroom-page-scope,
.agent2-shell-content,.agent2-page-header,.agent2-page-header__copy,.agent2-page-header__actions,
.card,.panel,.workspace-card,.nv-card,.nv-auth-card,.nv-public-main,.nv-auth-main,
.grid,.form-grid,.a4-form-grid,[class*="__grid"],[class*="__content"],[class*="__body"]{min-inline-size:0;max-inline-size:100%}
:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,th,td,.btn,.badge,.chip,.muted,.help-text,.field-help,.alert,.toast){overflow-wrap:anywhere;word-break:normal}
pre,code,kbd,samp{overflow-wrap:normal;word-break:normal}
img,svg,video,canvas{max-inline-size:100%}
img,video{block-size:auto}
fieldset{min-inline-size:0}
.a4-visually-hidden{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* Keyboard focus is visible in every theme and survives forced-colors. */
:where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]):focus-visible{
  outline:3px solid var(--a7-focus-color)!important;
  outline-offset:var(--a7-focus-offset)!important;
  box-shadow:0 0 0 1px Canvas,0 0 0 5px color-mix(in srgb,var(--a7-focus-color) 28%,transparent)!important;
  position:relative;
  z-index:2;
}
:where(.table-responsive,.table-wrap,.data-table-wrap,[data-responsive-table],[data-a7-scroll-region]):focus-visible{
  outline:3px solid var(--a7-focus-color)!important;
  outline-offset:2px!important;
}
:where(a[href],button,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible){outline:none}
.skip-link:focus-visible{position:fixed!important;inset:calc(8px + var(--a7-safe-top)) auto auto calc(8px + var(--a7-safe-left))!important;z-index:10000!important;inline-size:auto!important;block-size:auto!important;clip:auto!important;clip-path:none!important;white-space:normal!important}

/* Native controls, error states and non-color status cues. */
:where(input,select,textarea){max-inline-size:100%}
:where(input,select,textarea)[aria-invalid="true"],:where(input,select,textarea):user-invalid{
  border-inline-start:4px solid #b42318!important;
  background-image:linear-gradient(135deg,transparent 72%,#b42318 72% 82%,transparent 82%);
  background-size:18px 18px;background-position:right 8px top 8px;background-repeat:no-repeat;
}
:where(.alert,.nv-alert,[role="alert"],[role="status"]){border-inline-start-width:4px}
:where(.badge,.chip,[data-status],.status-pill){white-space:normal;line-height:1.25}
:where(.badge,.chip,[data-status],.status-pill)::before{content:"";display:inline-block;inline-size:.45em;block-size:.45em;margin-inline-end:.42em;border:1px solid currentColor;border-radius:50%;vertical-align:.12em}
:where([data-status="error"],[data-status="danger"],.badge-danger,.status-danger)::before{border-radius:0;transform:rotate(45deg)}
:where([data-status="warning"],.badge-warning,.status-warning)::before{border-radius:1px;clip-path:polygon(50% 0,100% 100%,0 100%)}

/* Scroll regions keep native table semantics and expose controlled horizontal movement. */
:where(.table-responsive,.table-wrap,.data-table-wrap,[data-responsive-table],[data-a7-scroll-region]){
  max-inline-size:100%;overflow:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;
}
:where(.table-responsive,.table-wrap,.data-table-wrap,[data-responsive-table],[data-a7-scroll-region])>table{margin-block-end:0}
:where(table){max-inline-size:100%;border-collapse:separate;border-spacing:0}
:where(th,td){vertical-align:top}
:where(th[aria-sort]) button,button[data-sort],button.sortable{min-block-size:var(--a7-touch-min)}
.a7-scroll-hint{display:block;margin:.35rem 0;color:var(--text-muted,#475467);font-size:.78rem}
.a7-scroll-hint::before{content:"↔ ";font-weight:800}

/* Overlay sizing, focus safety and mobile keyboard compatibility. */
:where(.modal-backdrop,.a4-modal-backdrop,.agent2-command-palette,[data-a4-dialog],[data-modal],[role="presentation"]){padding-inline:max(12px,var(--a7-safe-left)) max(12px,var(--a7-safe-right))}
:where(.modal,.a4-modal,[role="dialog"],[role="alertdialog"]){max-inline-size:min(720px,100%);max-block-size:min(calc(var(--a7-vvh) - var(--a7-safe-top) - var(--a7-safe-bottom) - 24px),900px);overflow:auto;overscroll-behavior:contain}
:where(.modal-head,.modal-header,.a4-modal__header,[class*="modal__head"]){position:sticky;inset-block-start:0;z-index:3;background:inherit}
:where(.modal-actions,.modal-footer,.a4-modal__footer,[class*="modal__footer"]){position:sticky;inset-block-end:0;z-index:3;padding-block-end:max(12px,var(--a7-safe-bottom));background:inherit}
:where([aria-hidden="true"].modal-backdrop,[aria-hidden="true"].a4-modal-backdrop,[aria-hidden="true"].agent2-command-palette){pointer-events:none!important}
:where([hidden]){display:none!important}

/* Shell and safe-area contract. */
:where(.agent2-app-header,.nv-public-header,.nv-auth-header){padding-top:var(--a7-safe-top)}
:where(.agent2-primary-navigation,.nv-public-nav[data-open]){padding-bottom:var(--a7-safe-bottom)}
:where(.agent2-mobile-bottom-nav,.mobile-bottom-nav){padding-inline:max(8px,var(--a7-safe-left)) max(8px,var(--a7-safe-right))!important;padding-bottom:max(7px,var(--a7-safe-bottom))!important}
:where(.sticky-actions,.form-actions--sticky,[data-sticky-actions],.kds-action-bar,.scanner-actions){padding-bottom:max(12px,var(--a7-safe-bottom))}
:where(.toast-host,.a4-toast-host){inset-inline:max(12px,var(--a7-safe-left)) max(12px,var(--a7-safe-right));inset-block-end:calc(12px + var(--a7-safe-bottom))}

/* Coarse pointers get usable hit areas without forcing desktop density changes. */
@media (pointer:coarse),(max-width:1180px){
  :where(button,.btn,[role="button"],input:not([type="hidden"]),select,textarea,summary,.mobile-nav-item,.a4-icon-button,.nv-secret-toggle,.chip-remove,.pagination a,.pagination button){min-block-size:var(--a7-touch-min)}
  :where(button,.btn,[role="button"],summary,.mobile-nav-item,.a4-icon-button,.nv-secret-toggle,.chip-remove,.pagination a,.pagination button){min-inline-size:var(--a7-touch-min)}
  :where(input[type="checkbox"],input[type="radio"]){inline-size:22px;block-size:22px;min-inline-size:22px;min-block-size:22px}
  :where(.actions,.form-actions,.page-actions,.toolbar,.button-group,.modal-actions,.agent2-page-header__actions){gap:max(8px,.55rem)}
}

@media (max-width:860px){
  html{scroll-padding-top:calc(66px + var(--a7-safe-top));scroll-padding-bottom:calc(78px + var(--a7-safe-bottom))}
  body:where(.surface-kind-platform,.surface-kind-owner,.surface-kind-workspace){padding-bottom:calc(72px + var(--a7-safe-bottom))}
  :where(.container,.shell-main,.clean-layout-content,.agent2-shell-layout){inline-size:min(100%,100vw);max-inline-size:100%;margin-inline:auto}
  :where(.grid,.form-grid,.a4-form-grid,.filters-grid,.dashboard-grid,.kpi-grid,.recipe-grid,.reservation-grid){grid-template-columns:minmax(0,1fr)!important}
  :where(.toolbar,.page-actions,.form-actions,.button-group,.agent2-page-header__actions,.modal-actions){flex-wrap:wrap}
  :where(.toolbar,.page-actions,.form-actions,.button-group,.agent2-page-header__actions)>:where(.btn,button,a[role="button"]){max-inline-size:100%}
  .agent2-primary-navigation{inset-block:0!important;padding-top:var(--a7-safe-top);block-size:var(--a7-vvh);max-block-size:var(--a7-vvh)}
  .agent2-nav-backdrop{block-size:var(--a7-vvh)!important}
  .agent2-command-palette__dialog{block-size:var(--a7-vvh)!important;max-block-size:var(--a7-vvh)!important;padding-bottom:var(--a7-safe-bottom)}
  :where(.modal-backdrop,.a4-modal-backdrop){align-items:end;padding:0!important}
  :where(.modal,.a4-modal,[role="dialog"],[role="alertdialog"]){inline-size:100%;max-inline-size:none;max-block-size:min(94dvh,var(--a7-vvh));border-end-start-radius:0;border-end-end-radius:0;padding-inline:max(12px,var(--a7-safe-left)) max(12px,var(--a7-safe-right))}
  :where(.table-responsive,.table-wrap,.data-table-wrap,[data-responsive-table],[data-a7-scroll-region]){border-radius:10px}
  :where(.nv-public-header,.nv-auth-header){padding-inline:max(12px,var(--a7-safe-left)) max(12px,var(--a7-safe-right))}
  .nv-public-nav[data-open]{max-block-size:calc(var(--a7-vvh) - 64px - var(--a7-safe-top));overflow:auto;overscroll-behavior:contain}
}

@media (max-width:520px){
  :where(h1,.h1){font-size:clamp(1.45rem,8vw,2rem);line-height:1.12}
  :where(h2,.h2){font-size:clamp(1.2rem,6.5vw,1.6rem)}
  :where(.card,.panel,.nv-card,.nv-auth-card,.workspace-card){padding-inline:min(4vw,16px)}
  :where(.btn,button,a[role="button"]){white-space:normal;text-align:center}
  :where(.agent2-page-header__actions,.modal-actions,.form-actions,.page-actions){display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  :where(.agent2-page-header__actions,.modal-actions,.form-actions,.page-actions)>*{inline-size:100%;max-inline-size:100%}
  .toast-host,.a4-toast-host{max-inline-size:calc(100vw - 24px)}
}

@media (max-width:360px){
  :root{--a7-focus-offset:2px}
  :where(.container,.shell-main,.content,.agent2-shell-layout){padding-inline:max(8px,var(--a7-safe-left)) max(8px,var(--a7-safe-right))}
  :where(.agent2-mobile-bottom-nav .mobile-nav-item){font-size:.62rem;line-height:1.1}
  :where(.agent2-mobile-bottom-nav__track){gap:2px!important}
}

/* Text zoom/reflow: preserve controls and avoid fixed-height clipping. */
@media (max-width:1280px){
  :where(.card,.panel,.workspace-card,.kpi-card,.chart-card){block-size:auto;min-block-size:0}
  :where(.page-title,.agent2-page-header__copy,.nv-brand__copy){min-inline-size:0}
}
@media (max-height:240px){
  :where(.agent2-app-header,.nv-public-header,.nv-auth-header){position:static!important}
  :where(.agent2-primary-navigation,.agent2-command-palette__dialog,.modal,.a4-modal,[role="dialog"]){max-block-size:var(--a7-vvh)!important}
  :where(.agent2-mobile-bottom-nav){position:static!important}
  body:where(.surface-kind-platform,.surface-kind-owner,.surface-kind-workspace){padding-bottom:0!important}
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto!important}
  *,*::before,*::after{animation-delay:0s!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:.001ms!important}
  :where(.skeleton,.pulse,.shimmer,[data-loading]){background-image:none!important}
}

@media (forced-colors:active){
  :root{--a7-focus-color:Highlight}
  :where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid Highlight!important;box-shadow:none!important;forced-color-adjust:auto}
  :where(button,.btn,input,select,textarea,.card,.panel,.modal,.a4-modal,.agent2-primary-navigation,.agent2-mobile-bottom-nav,.badge,.chip,.status-pill){border:1px solid CanvasText!important;box-shadow:none!important;forced-color-adjust:auto}
  :where([aria-current="page"],[aria-selected="true"],[aria-pressed="true"],.is-selected,.active){outline:2px solid Highlight!important;outline-offset:-2px}
  :where(.badge,.chip,[data-status],.status-pill)::before{background:CanvasText;clip-path:none;transform:none}
  :where(svg,img[alt=""]){forced-color-adjust:auto}
}

@media print{
  :where(.skip-link,.agent2-app-header,.agent2-primary-navigation,.agent2-nav-backdrop,.agent2-mobile-bottom-nav,.agent2-command-palette,.nv-public-header,.nv-auth-header,.toast-host,.a4-toast-host,.modal-backdrop,.a4-modal-backdrop,.no-print,[data-no-print]){display:none!important}
  :where(html,body,main,.content,.container,.shell-main,.clean-core-page-scope,.agent2-shell-layout,.agent2-shell-content){inline-size:100%!important;max-inline-size:none!important;margin:0!important;padding:0!important;overflow:visible!important;background:#fff!important;color:#000!important;box-shadow:none!important}
  :where(table){inline-size:100%!important;font-size:9pt}
  :where(tr,img,svg,.card,.panel){break-inside:avoid}
  :where(a[href])::after{content:none!important}
}
/* ==========================================================================
   CLAUDE_VISUAL — v971 gorsel iyilestirme katmani
   --------------------------------------------------------------------------
   Kapsam  : Yalnizca canli sistemde OLCULMUS gorsel/UX kusurlari.
   Kural   : Mevcut ui-v2 token sistemi (--ds-*) disina cikilmaz.
             Yeni webfont, CDN, harici JS veya framework eklenmez.
             DOM yapisi degistirilmez; yalnizca sunum katmani.
   Yukleme : cleanroom_base.html icinde ui-v2.css + shell-scroll-repair.css +
             nirvana-responsive-accessibility.css'ten SONRA gelir ki
             breakpoint override'lari gecerli olsun.
   Not     : ui-v2.css SHA-256 muhurlu ve performans butcesinde yalnizca
             897 ham bayt boslugu var; bu yuzden duzeltmeler ayri dosyada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Mobil navigasyon yuksekligi tokeni breakpoint'e baglanir        [YUKSEK]
   --------------------------------------------------------------------------
   OLCUM (ui-v2.css):
     --ds-mobile-nav-height:4rem  -> :root[data-ui-version="v2"] icinde
     KOSULSUZ tanimli, tek tanim, hicbir yerde 0'a cekilmiyor.
     .ds-mobile-nav ise yalniz @media (max-width:44rem) altinda gorunur.
   Tuketiciler (BASE katmanda, medya sorgusu disinda):
     .ds-toast-region     -> inset-block-end: max(1.25rem, 4rem + safe + .75rem)
     .ds-sticky-action-bar-> inset-block-end: calc(4rem + safe)
     .ds-bulk-bar         -> bottom: calc(4rem + .75rem)
   CANLI DOGRULAMA (1440x900, ana sayfa):
     .ds-mobile-nav elementi sayfada HIC YOK,
     buna ragmen .ds-toast-region hesaplanan inset-block-end = 76px.
     Beklenen 20px. Yani masaustu ve tablette bildirim/yapiskan aksiyon
     cubuklari olmayan bir navigasyon icin 56px bosluk birakiyor.
   COZUM: token varsayilani 0, yalniz navigasyonun gercekten gorundugu
   breakpoint'te 4rem. Katmansiz (unlayered) tanim, ui-v2.css'in
   @layer tokens tanimini kaskadda yener; ui-v2.css'e dokunulmaz.
   -------------------------------------------------------------------------- */
:root[data-ui-version="v2"] {
  --ds-mobile-nav-height: 0rem;
}

@media (max-width: 44rem),
       (max-width: 64rem) and (max-height: 32rem) and (orientation: landscape) {
  :root[data-ui-version="v2"] {
    --ds-mobile-nav-height: 4rem;
  }
}

/* --------------------------------------------------------------------------
   1) iOS Safari otomatik yakinlastirma (auto-zoom) engeli            [YUKSEK]
   --------------------------------------------------------------------------
   OLCUM: /login  -> 2 form alaninin ikisi de 14px
          /basvuru -> 9 form alaninin dokuzu da 14px
   iOS Safari, 16px'ten kucuk bir alana odaklandiginda sayfayi zorla
   yakinlastirir; kullanici duzeni kaybeder ve yatay kaydirmaya dusler.
   Kontrol yuksekligi (44px) ve dokunma hedefi korunur; yalnizca yazi
   boyutu 16px tabanina cekilir.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem), (pointer: coarse) {
  html[data-ui-version="v2"] .ds-input,
  html[data-ui-version="v2"] select.ds-input,
  html[data-ui-version="v2"] textarea.ds-input,
  html[data-ui-version="v2"] .ds-field input:not([type="checkbox"]):not([type="radio"]),
  html[data-ui-version="v2"] .ds-field select,
  html[data-ui-version="v2"] .ds-field textarea,
  html[data-ui-version="v2"] .ds-auth-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  html[data-ui-version="v2"] .ds-auth-form select,
  html[data-ui-version="v2"] .ds-auth-form textarea {
    font-size: 1rem;
    line-height: var(--ds-leading-snug);
  }
}

/* --------------------------------------------------------------------------
   2) Navigasyonda aktif sayfa isareti                                  [ORTA]
   --------------------------------------------------------------------------
   OLCUM: Public navigasyondaki 10 baglantinin hicbirinde aria-current yok.
   Kullanici hangi sayfada oldugunu ust menuden anlayamiyor.
   Sablonlara aria-current="page" eklendi; gorsel karsiligi burada.
   Renk + kalinlik + alt cizgi birlikte kullanilir (yalniz renge dayanmaz).
   -------------------------------------------------------------------------- */
html[data-ui-version="v2"] .ds-public-nav__link[aria-current="page"] {
  position: relative;
  color: var(--ds-color-brand-strong);
  font-weight: var(--ds-weight-semibold);
  background: var(--ds-color-brand-soft);
}

html[data-ui-version="v2"] .ds-public-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--ds-space-3);
  inset-block-end: 0.375rem;
  block-size: 0.125rem;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-brand);
}

html[data-ui-version="v2"] .ds-public-mobile-menu__panel a[aria-current="page"] {
  color: var(--ds-color-brand-strong);
  font-weight: var(--ds-weight-semibold);
  background: var(--ds-color-brand-soft);
  border-radius: var(--ds-radius-md);
}

/* Yuksek kontrast / zorlanmis renk modunda alt cizgi tek basina tasiyici olur. */
@media (forced-colors: active) {
  html[data-ui-version="v2"] .ds-public-nav__link[aria-current="page"],
  html[data-ui-version="v2"] .ds-public-mobile-menu__panel a[aria-current="page"] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

/* --------------------------------------------------------------------------
   3) Giris / basvuru ekranlarinda ikincil gezinme                      [ORTA]
   --------------------------------------------------------------------------
   OLCUM: /login  disa acilan baglantilar -> /  /forgot-password  /basvuru
          /basvuru disa acilan baglantilar -> /  /login
   Iki ekranda da Ozellikler / Paketler / Demo'ya gecis yok; ziyaretci
   satin alma karari verirken geri donup urunu inceleyemiyor.
   Sablona eklenen ikincil gezinmenin gorsel karsiligi.
   -------------------------------------------------------------------------- */
html[data-ui-version="v2"] .ds-auth-secondary-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-1);
  margin-block-start: var(--ds-space-6);
  padding-block-start: var(--ds-space-4);
  border-block-start: 1px solid var(--ds-color-divider);
}

html[data-ui-version="v2"] .ds-auth-secondary-nav__label {
  margin-inline-end: var(--ds-space-2);
  color: var(--ds-color-text-subtle);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-letter-caps);
  text-transform: uppercase;
}

html[data-ui-version="v2"] .ds-auth-secondary-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ds-touch-target);
  padding-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  text-decoration: none;
}

html[data-ui-version="v2"] .ds-auth-secondary-nav a:hover {
  background: var(--ds-color-surface-subtle);
  color: var(--ds-color-brand-strong);
}

/* --------------------------------------------------------------------------
   4) Form yardim metni goruntusu                                       [ORTA]
   --------------------------------------------------------------------------
   OLCUM: /login kullanici adi alanindaki yardim metni <small> icinde ve
   aria-describedby ile alana bagli degildi. Sablonda baglandi; burada
   yardim metnine tutarli bir gorsel rol veriliyor (ui-v2'de .ds-field small
   icin tanimli kural yok -> tarayici varsayilani 0.8em ile geliyordu).
   -------------------------------------------------------------------------- */
html[data-ui-version="v2"] .ds-field > small,
html[data-ui-version="v2"] .ds-field__hint {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-normal);
}

html[data-ui-version="v2"] .ds-field > small strong,
html[data-ui-version="v2"] .ds-field__hint strong {
  color: var(--ds-color-text);
  font-weight: var(--ds-weight-semibold);
}

/* --------------------------------------------------------------------------
   5) Public bolum etiketleri okunabilirlik tabani                     [DUSUK]
   --------------------------------------------------------------------------
   OLCUM: /ozellikler, /fiyatlandirma, /demo sayfalarinda .nv-kicker
   bolum etiketleri 11.68px olarak render ediliyordu (okunabilirlik tabani
   olarak 12px kabul edilir). Buyuk harf + genis harf araligi ile birlikte
   11.68px yasli veya dusuk gormeli kullanicilarda kayba yol aciyor.
   -------------------------------------------------------------------------- */
html[data-ui-version="v2"] .nv-kicker {
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-snug);
}

/* --------------------------------------------------------------------------
   6) Hata sayfasi (404 / 403 / 500) tasarim sistemi hizalamasi        [YUKSEK]
   --------------------------------------------------------------------------
   OLCUM: error.html ayri bir gorsel dil kullaniyordu:
     - yaricap 27px / 12px / 11px  (ds olcegi: 14px / 10px / 8px)
     - font-weight 900 / 760 / 750 (ds olcegi: en fazla 740)
     - hata kodu color-mix(primary %14, white) -> neredeyse gorunmez hayalet
   Marka kimligi korunarak ds token olcegine hizalanir.
   -------------------------------------------------------------------------- */
.nv-error-page {
  background: var(--ds-color-canvas, #f4f5f3);
  color: var(--ds-color-text, #202c28);
}

.nv-error-page .nv-error-card {
  border-radius: var(--ds-radius-xl, 1.125rem);
  border-color: var(--ds-color-border, #d9dfdc);
  box-shadow: var(--ds-shadow-md, 0 10px 28px rgb(16 42 39 / 8%));
}

/* OLCUM: hata kodu color-mix(brand %14, white) ile render ediliyordu ->
   canli 404'te hesaplanan renk srgb(0.867 0.922 0.911), beyaz uzerinde
   yaklasik 1.2:1. 128px'lik "404" neredeyse gorunmez bir hayalet.
   Dekoratif kalmali ama gercekten gorunmeli: brand rengi %55 opaklikta
   beyaz uzerinde yaklasik 2.3:1 verir. */
.nv-error-page .nv-error-code {
  color: var(--ds-color-brand, #0d715d);
  opacity: 0.55;
  font-weight: var(--ds-weight-bold, 740);
  letter-spacing: var(--ds-letter-tight, -0.022em);
}

/* OLCUM: error.html govdesinde class="sr-only" kullaniliyor
   (#agent7-live-region, canli bolge duyurulari icin), fakat bare '.sr-only'
   ne ui-v2.css'te (0 eslesme) ne de nirvana-auth.css'te tanimli.
   Canli olcumde: position static, overflow visible -> icine bir duyuru
   metni yazilirsa ekranda gorunur hale gelir. Guvenli taban tanim. */
.nv-error-page .sr-only:not(:focus):not(:active) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nv-error-page .nv-error-card h1 {
  font-weight: var(--ds-weight-bold, 740);
  letter-spacing: var(--ds-letter-tight, -0.022em);
  color: var(--ds-color-text-strong, #17231f);
}

.nv-error-page .nv-actions > :where(a, button) {
  min-height: var(--ds-touch-target, 2.75rem);
  border-radius: var(--ds-radius-md, 0.625rem);
  font-weight: var(--ds-weight-semibold, 640);
}

.nv-error-page .nv-actions > .primary {
  background: var(--ds-color-brand, #0d715d);
  border-color: var(--ds-color-brand, #0d715d);
  color: var(--ds-color-on-brand, #fff);
}

.nv-error-page .nv-actions > .primary:hover {
  background: var(--ds-color-brand-hover, #0b624f);
  border-color: var(--ds-color-brand-hover, #0b624f);
}

/* Hata sayfasindaki ikincil gezinme (sablona eklendi). */
.nv-error-page .nv-error-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-1, 0.25rem);
  margin-block-start: var(--ds-space-5, 1.25rem);
  padding-block-start: var(--ds-space-4, 1rem);
  border-block-start: 1px solid var(--ds-color-divider, #e7ebe9);
}

.nv-error-page .nv-error-links__label {
  margin-inline-end: var(--ds-space-2, 0.5rem);
  color: var(--ds-color-text-subtle, #66736e);
  font-size: var(--ds-text-xs, 0.75rem);
  font-weight: var(--ds-weight-semibold, 640);
  letter-spacing: var(--ds-letter-caps, 0.065em);
  text-transform: uppercase;
}

.nv-error-page .nv-error-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch-target, 2.75rem);
  padding-inline: var(--ds-space-3, 0.75rem);
  border-radius: var(--ds-radius-md, 0.625rem);
  color: var(--ds-color-text-muted, #56645f);
  font-size: var(--ds-text-sm, 0.875rem);
  font-weight: var(--ds-weight-medium, 520);
  text-decoration: none;
}

.nv-error-page .nv-error-links a:hover {
  background: var(--ds-color-surface-subtle, #f8f9f7);
  color: var(--ds-color-brand-strong, #0a4f43);
}

/* Hata sayfasi ui-v2.css'in :focus-visible standardini devralmaz;
   klavye kullanicisi icin ayni halkayi burada tanimliyoruz. */
.nv-error-page :where(a, button):focus-visible {
  outline: var(--ds-focus-ring-width, 0.1875rem) solid var(--ds-color-focus, #145fa8);
  outline-offset: 0.1875rem;
  border-radius: var(--ds-radius-md, 0.625rem);
}

/* --------------------------------------------------------------------------
   7) Hareket azaltma sozlesmesi
   --------------------------------------------------------------------------
   Bu katmanda tanimlanan tek gecis/donusum bile olsa, sistem genelindeki
   prefers-reduced-motion sozlesmesine uyar.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-ui-version="v2"] .ds-public-nav__link[aria-current="page"]::after,
  html[data-ui-version="v2"] .ds-auth-secondary-nav a,
  .nv-error-page .nv-error-links a {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   8) Paket karsilastirma tablosu: klavye ile kaydirilabilir bolge      [ORTA]
   --------------------------------------------------------------------------
   OLCUM (/fiyatlandirma, 768px): .nv-compare-wrap scrollWidth=720 >
   clientWidth=619 yani gercekten yatay kayiyor, fakat tabindex/role/aria-label
   yoktu. Fare veya dokunmatik olmayan kullanici tablonun sag tarafindaki
   "Kurumsal" sutununa hic ulasamiyordu (WCAG 2.1.1 Klavye).
   Sablona tabindex="0" role="region" aria-labelledby eklendi; odak halkasi
   burada tanimlanir ki odaklanabilir hale gelen kutu gorunur olsun.
   -------------------------------------------------------------------------- */
.nv-compare-wrap:focus-visible {
  outline: var(--ds-focus-ring-width, 0.1875rem) solid var(--ds-color-focus, #145fa8);
  outline-offset: 0.125rem;
}

/* --------------------------------------------------------------------------
   9) Paket adi rozetleri okunabilirlik tabani                         [DUSUK]
   --------------------------------------------------------------------------
   OLCUM (/fiyatlandirma): .nv-plan-card icindeki paket adi span'leri
   (BASLANGIC / PROFESYONEL / KURUMSAL) 11.84px render ediliyordu.
   Buyuk harf + genis harf araligi ile birlikte 12px okunabilirlik tabaninin
   altinda. Dekoratif degil, satin alma kararinin ana etiketi.
   -------------------------------------------------------------------------- */
.nv-plan-card > span:first-child {
  font-size: var(--ds-text-xs, 0.75rem);
  line-height: var(--ds-leading-snug, 1.34);
}

/* Primary action links must keep inverse text color after legacy anchor rules. */
html[data-ui-version="v2"] body a.ds-button.ds-button--primary:link,
html[data-ui-version="v2"] body a.ds-button.ds-button--primary:visited {
  color: var(--ds-color-text-inverse, #fff) !important;
}

html[data-ui-version="v2"] body a.ds-pos-product {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

html[data-ui-version="v2"] body .file-preview-image.hidden {
  display: none !important;
}

/* ========================================================================== 
   10) LUZE operational polish r12
   --------------------------------------------------------------------------
   A single, calm visual language for authenticated operational surfaces.
   The selectors are deliberately scoped to canonical-v2 so public pages and
   retired error documents keep their own visual contracts.
   ========================================================================== */

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] {
  --luze-ink: #102823;
  --luze-spruce: #0b392f;
  --luze-spruce-deep: #082a24;
  --luze-teal: #0c7965;
  --luze-teal-soft: #dceee8;
  --luze-amber: #a65f0b;
  --luze-canvas: #f4f7f5;
  --luze-mist: #dce8e3;
  --luze-line: #cbdad4;
}

/* The operation rail is the LUZE signature: one strong edge, quiet elsewhere. */
html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .legacy-functional-surface[data-functional-surface="true"]
  :is(.page-hero.compact-hero, .detail-hero.dashboard-hero, .settings-hero.premium-hero-panel) {
  position: relative !important;
  min-height: clamp(11.75rem, 21vw, 15rem) !important;
  padding: clamp(1.35rem, 2.8vw, 2.35rem) !important;
  border: 1px solid rgba(120, 190, 171, 0.28) !important;
  border-inline-start: 0.3rem solid #28aa8d !important;
  border-radius: 1.125rem !important;
  background-color: var(--luze-spruce-deep) !important;
  background-image:
    radial-gradient(circle at 88% 12%, rgba(45, 183, 151, 0.2), transparent 19rem),
    linear-gradient(128deg, var(--luze-spruce-deep) 0%, var(--luze-spruce) 68%, #0c594a 100%) !important;
  color: #f8fbfa !important;
  box-shadow: 0 1rem 2.4rem rgba(8, 42, 36, 0.14) !important;
  overflow: hidden !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .legacy-functional-surface[data-functional-surface="true"]
  :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
  :is(h1, .title-xl) {
  max-width: 54rem !important;
  margin-block: 0 !important;
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  text-shadow: none !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .legacy-functional-surface[data-functional-surface="true"]
  :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
  :is(.hero-kicker, .eyebrow, .section-eyebrow) {
  color: #7fe0c7 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .legacy-functional-surface[data-functional-surface="true"]
  :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
  :is(p, .muted, small) {
  max-width: 50rem !important;
  color: #d4e8e1 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .legacy-functional-surface[data-functional-surface="true"]
  :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
  .page-context-rail {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  margin-block-start: 1rem !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .legacy-functional-surface[data-functional-surface="true"]
  :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
  .page-context-rail > * {
  min-height: 1.9rem !important;
  padding: 0.32rem 0.62rem !important;
  border: 1px solid rgba(183, 225, 214, 0.3) !important;
  border-radius: 0.55rem !important;
  background: rgba(8, 42, 36, 0.42) !important;
  color: #e9f5f1 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

/* Native v2 headers receive a light command-paper treatment. */
html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-shell-content > .ds-page-header,
html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-shell-content > header.ds-page-header {
  position: relative !important;
  padding: clamp(1.35rem, 2.8vw, 2.25rem) !important;
  border: 1px solid var(--luze-line) !important;
  border-inline-start: 0.3rem solid var(--luze-teal) !important;
  border-radius: 1rem !important;
  background:
    radial-gradient(circle at 94% 8%, rgba(12, 121, 101, 0.09), transparent 18rem),
    linear-gradient(135deg, #fbfdfc, var(--luze-canvas)) !important;
  box-shadow: 0 0.5rem 1.5rem rgba(16, 40, 35, 0.06) !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-page-header__title {
  max-width: 54rem !important;
  color: var(--luze-ink) !important;
  font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-page-header__eyebrow {
  color: var(--luze-teal) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-page-header__description {
  max-width: 54rem !important;
  color: #52645e !important;
  font-size: 0.94rem !important;
  line-height: 1.58 !important;
}

/* Prevent section headings from competing with the page decision. */
html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-section-heading__title {
  margin: 0 !important;
  color: var(--luze-ink) !important;
  font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
  font-weight: 750 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.018em !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .legacy-functional-surface[data-functional-surface="true"]
  :is(h2.section-title, .section-header h2, .card-header h2) {
  font-size: clamp(1.2rem, 2vw, 1.58rem) !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.018em !important;
}

/* Cards become quieter work surfaces instead of equally loud tiles. */
html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  :is(.ds-card, .legacy-functional-surface .section-card, .legacy-functional-surface .card, .legacy-functional-surface .panel) {
  border-color: var(--luze-line) !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 1px 2px rgba(16, 40, 35, 0.045) !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  :is(.ds-card, .legacy-functional-surface .section-card, .legacy-functional-surface .card, .legacy-functional-surface .panel):hover {
  box-shadow: 0 0.4rem 1.1rem rgba(16, 40, 35, 0.07) !important;
}

/* Context bars read as one slim route strip across every application family. */
html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] :is(
  [data-ui4-management-context],
  [data-ui5-inventory-context],
  [data-ui6-field-context],
  [data-ui7-procurement-context],
  [data-ui8-finance-context],
  [data-ui9-restaurant-context],
  [data-ui10-admin-context],
  [data-ui11-internal-context]
) {
  margin-block-end: 0.85rem !important;
  padding: 0.62rem 0.75rem !important;
  border-color: var(--luze-line) !important;
  border-inline-start: 0.2rem solid var(--luze-teal) !important;
  border-radius: 0.75rem !important;
  background: #f8faf9 !important;
  box-shadow: none !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] :is(
  .ui4-management-context__links,
  .ui5-inventory-context__nav,
  .ui6-field-context__nav,
  .ui7-procurement-context__nav,
  .ui8-finance-context__nav,
  .ui9-restaurant-context__links,
  .ui10-admin-context__nav,
  .ui11-internal-context__nav
) a {
  border-radius: 0.55rem !important;
  font-weight: 680 !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] :is(
  .ui4-management-context__links,
  .ui5-inventory-context__nav,
  .ui6-field-context__nav,
  .ui7-procurement-context__nav,
  .ui8-finance-context__nav,
  .ui9-restaurant-context__links,
  .ui10-admin-context__nav,
  .ui11-internal-context__nav
) a[aria-current="page"] {
  border-color: #b8d8ce !important;
  background: var(--luze-teal-soft) !important;
  color: #075546 !important;
}

/* Buttons share a disciplined geometry; status pills remain pills. */
html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  :is(.ds-button, .legacy-functional-surface .btn, .legacy-functional-surface button:not(.icon-button)) {
  border-radius: 0.625rem !important;
}

@media (max-width: 44rem) {
  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero.compact-hero, .detail-hero.dashboard-hero, .settings-hero.premium-hero-panel) {
    min-height: 0 !important;
    padding: 1.15rem !important;
    border-radius: 0.875rem !important;
    gap: 0.9rem !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
    :is(h1, .title-xl) {
    font-size: clamp(1.85rem, 8.3vw, 2.25rem) !important;
    line-height: 1.06 !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
    .page-context-rail {
    flex-wrap: nowrap !important;
    margin-inline: -0.15rem !important;
    padding: 0.15rem 0.15rem 0.45rem !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: inline proximity !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(168, 213, 201, 0.78) rgba(8, 42, 36, 0.24) !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
    .page-context-rail::-webkit-scrollbar {
    display: block !important;
    height: 0.35rem !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
    .page-context-rail::-webkit-scrollbar-track {
    background: rgba(8, 42, 36, 0.24) !important;
    border-radius: 999px !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
    .page-context-rail::-webkit-scrollbar-thumb {
    background: rgba(168, 213, 201, 0.78) !important;
    border-radius: 999px !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
    .page-context-rail > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    white-space: nowrap !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
    :is(.hero-actions, .mobile-action-stack) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0.55rem !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
    :is(.hero-actions, .mobile-action-stack) > :first-child {
    grid-column: 1 / -1 !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    :is(.page-hero, .detail-hero.dashboard-hero, .settings-hero)
    :is(.hero-actions, .mobile-action-stack) > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-shell-content > .ds-page-header,
  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-shell-content > header.ds-page-header {
    padding: 1.1rem !important;
    border-radius: 0.875rem !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-page-header__title {
    font-size: clamp(1.8rem, 8vw, 2.15rem) !important;
    line-height: 1.08 !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-page-header__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-page-header__actions > :first-child {
    grid-column: 1 / -1 !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] .ds-page-header__actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] :is(
    [data-ui4-management-context],
    [data-ui5-inventory-context],
    [data-ui6-field-context],
    [data-ui7-procurement-context],
    [data-ui8-finance-context],
    [data-ui9-restaurant-context],
    [data-ui10-admin-context],
    [data-ui11-internal-context]
  ) {
    margin-inline: calc(var(--ds-space-3, 0.75rem) * -1) !important;
    margin-block-end: 0.65rem !important;
    padding: 0.35rem var(--ds-space-3, 0.75rem) !important;
    border-inline-end: 0 !important;
    border-radius: 0 !important;
    background: #f8faf9 !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] :is(
    .ui4-management-context__links,
    .ui5-inventory-context__nav,
    .ui6-field-context__nav,
    .ui7-procurement-context__nav,
    .ui8-finance-context__nav,
    .ui9-restaurant-context__links,
    .ui10-admin-context__nav,
    .ui11-internal-context__nav
  ) a {
    min-height: 2.75rem !important;
    padding-inline: 0.68rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"] :is(.ds-card, .section-card, .card, .panel) {
    transition: none !important;
  }
}

/* The mobile drawer must always expose a close action without requiring users
   to scroll through the complete navigation tree. */
html[data-ui-version="v2"] .ds-sidebar__top-close {
  display: none !important;
}

@media (max-width: 64rem) {
  html[data-ui-version="v2"] .ds-sidebar__brand {
    padding-inline-end: 4rem !important;
  }

  html[data-ui-version="v2"] .ds-sidebar__top-close {
    position: absolute !important;
    z-index: 2 !important;
    inset-block-start: calc(var(--ds-safe-top, 0px) + 0.75rem) !important;
    inset-inline-end: 0.75rem !important;
    display: inline-flex !important;
    inline-size: 3rem !important;
    min-inline-size: 3rem !important;
    max-inline-size: 3rem !important;
    block-size: 3rem !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: rgba(230, 250, 244, 0.4) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f4fcf9 !important;
    -webkit-text-fill-color: #f4fcf9 !important;
    box-shadow: 0 0.35rem 1rem rgba(3, 19, 16, 0.22) !important;
  }

  html[data-ui-version="v2"] .ds-sidebar__top-close:hover {
    border-color: rgba(230, 250, 244, 0.72) !important;
    background: rgba(255, 255, 255, 0.18) !important;
  }
}

/* --------------------------------------------------------------------------
   11) r13 visual review corrections
   -------------------------------------------------------------------------- */

/* Secondary actions on the spruce command surface must remain unmistakable. */
html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .legacy-functional-surface[data-functional-surface="true"]
  :is(.page-hero.compact-hero, .detail-hero.dashboard-hero, .settings-hero.premium-hero-panel)
  :is(.hero-actions, .mobile-action-stack)
  :is(.btn.secondary, .btn.ghost) {
  border-color: rgba(230, 250, 244, 0.82) !important;
  background: rgba(8, 42, 36, 0.92) !important;
  color: #f4fcf9 !important;
  -webkit-text-fill-color: #f4fcf9 !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .legacy-functional-surface[data-functional-surface="true"]
  :is(.page-hero.compact-hero, .detail-hero.dashboard-hero, .settings-hero.premium-hero-panel)
  :is(.hero-actions, .mobile-action-stack)
  :is(.btn.secondary, .btn.ghost):hover {
  border-color: rgba(230, 250, 244, 0.88) !important;
  background: rgba(20, 102, 84, 0.72) !important;
}

/* POS has a dedicated dark header, so its eyebrow uses the inverse teal. */
html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .ds-pos-header .ds-page-header__eyebrow {
  color: #7fe0c7 !important;
}

html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
  .ds-kds-header .ds-page-header__eyebrow {
  color: #7fe0c7 !important;
}

@media (max-width: 44rem) {
  /* Finance context is one horizontally readable rail, not four stacked cards. */
  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    .finance-hero .finance-context-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.45rem !important;
    width: 100% !important;
    margin-block-start: 0.85rem !important;
    padding: 0.1rem !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: inline proximity !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(168, 213, 201, 0.78) rgba(8, 42, 36, 0.24) !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    .finance-hero .finance-context-rail::-webkit-scrollbar {
    display: block !important;
    height: 0.35rem !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    .finance-hero .finance-context-rail::-webkit-scrollbar-track {
    background: rgba(8, 42, 36, 0.24) !important;
    border-radius: 999px !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    .finance-hero .finance-context-rail::-webkit-scrollbar-thumb {
    background: rgba(168, 213, 201, 0.78) !important;
    border-radius: 999px !important;
  }

  html[data-ui-version="v2"] body[data-ui-family="canonical-v2"]
    .legacy-functional-surface[data-functional-surface="true"]
    .finance-hero .finance-context-rail > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 2rem !important;
    padding: 0.38rem 0.65rem !important;
    scroll-snap-align: start !important;
    white-space: nowrap !important;
  }
}