/* Roobazi design system — ported from the Open Design Phase 1 prototype. */
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),url("../fonts/Vazirmatn-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio, geometry.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* functional inline SVG icons opt into bounded geometry; content SVGs keep their own */
  .od-icon { display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }

  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

/* ============ Design tokens ============ */
:root{
  --navy-900:#1C1A3A; --navy-700:#2E2C5C; --navy-100:#E7E7F3;
  --orange-500:#FF6B00; --orange-400:#FF8A1F; --orange-600:#E5480A; --orange-50:#FFF3E8;
  --white:#FFFFFF; --gray-50:#F6F7FB; --gray-500:#6B6F86; --brown-800:#4A230F;
  --success:#1FA971; --danger:#E5484D; --warning:#F5B400;
  /* derived, AA-safe inks and lines */
  --success-ink:#137A50; --danger-ink:#C42B30; --warning-ink:#7D5600;
  --line:#E3E5EE; --line-strong:#8D91A8; --switch-off:#9A9EB4;
  --grad-hero:linear-gradient(135deg,var(--orange-400),var(--orange-600));

  --font:"Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-32:32px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --r:12px; --r-lg:16px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(28,26,58,.06),0 1px 1px rgba(28,26,58,.04);
  --shadow-2:0 8px 24px rgba(28,26,58,.12);
  --shadow-3:0 20px 56px rgba(28,26,58,.24);

  --dur-fast:160ms; --dur:240ms; --dur-exit:160ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);

  --sidebar-w:264px;
  --hex-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,9 85.5,29.5 85.5,70.5 50,91 14.5,70.5 14.5,29.5' fill='black' stroke='black' stroke-width='16' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-16);line-height:1.6;color:var(--navy-900);background:var(--white);-webkit-font-smoothing:antialiased;text-size-adjust:100%}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--navy-700);outline-offset:2px;border-radius:6px}
.on-navy :focus-visible{outline-color:var(--orange-400)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--gray-500)}
.t-12{font-size:var(--fs-12)} .t-14{font-size:var(--fs-14)} .t-16{font-size:var(--fs-16)}
.t-20{font-size:var(--fs-20)} .t-24{font-size:var(--fs-24)} .t-32{font-size:var(--fs-32)}
.h-title{font-size:var(--fs-24);font-weight:800;line-height:1.35;color:var(--navy-900)}
.h-sec{font-size:var(--fs-20);font-weight:700;line-height:1.4}
.h-sub{font-size:var(--fs-16);font-weight:700;line-height:1.5}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-12);direction:ltr;unicode-bidi:isolate;background:var(--navy-100);color:var(--navy-700);padding:2px 6px;border-radius:6px}
.hex{-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-5);border-radius:var(--r);border:1.5px solid transparent;font-size:var(--fs-16);font-weight:700;line-height:1.2;white-space:nowrap;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn .od-icon{--od-icon-size:20px}
.btn-primary{background:var(--orange-500);color:var(--navy-900)}
.btn-primary:active{background:var(--orange-600)}
.btn-secondary{background:var(--white);color:var(--navy-900);border-color:var(--navy-900)}
.btn-ghost{background:transparent;color:var(--navy-900)}
.btn-danger{background:var(--white);color:var(--danger-ink);border-color:var(--danger-ink)}
.btn-danger-solid{background:var(--danger-ink);color:var(--white)}
.btn-block{width:100%}
.btn-sm{min-height:40px;padding:0 var(--s-4);font-size:var(--fs-14)}
.btn:active:not([disabled]){transform:scale(.98)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn[aria-busy="true"]{pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r);border:0;background:transparent;color:inherit;transition:background-color var(--dur-fast) var(--ease-out)}
.icon-btn .od-icon{--od-icon-size:22px}
.link-btn{border:0;background:none;padding:var(--s-2) 0;min-height:44px;font-weight:700;color:var(--navy-900);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--orange-500);text-decoration-thickness:2px}
@media (hover:hover){
  .btn-primary:hover:not([disabled]){background:var(--orange-400)}
  .btn-secondary:hover:not([disabled]),.btn-ghost:hover:not([disabled]),.icon-btn:hover{background:var(--navy-100)}
  .btn-danger:hover:not([disabled]){background:#FDECEC}
  .btn-danger-solid:hover:not([disabled]){background:#A92327}
  .on-navy .icon-btn:hover{background:var(--navy-700)}
}
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-inline-end-color:transparent;animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ Forms ============ */
.field{display:grid;gap:6px}
.field > *{min-width:0}
.label{font-size:var(--fs-14);font-weight:700;color:var(--navy-900)}
.label .req{color:var(--danger-ink);margin-inline-start:2px}
.help{font-size:var(--fs-14);color:var(--gray-500);line-height:1.5}
.err{font-size:var(--fs-14);color:var(--danger-ink);line-height:1.5;font-weight:600}
.err:empty{display:none}
.input,.select,.textarea{width:100%;min-height:48px;padding:0 var(--s-4);border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--white);font-size:var(--fs-16);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.textarea{padding:var(--s-3) var(--s-4);min-height:96px;resize:vertical;line-height:1.6}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--navy-900);box-shadow:0 0 0 4px var(--navy-100)}
.input[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--danger-ink)}
.input[readonly],.input:disabled,.textarea:disabled{background:var(--gray-50);color:var(--gray-500);border-style:dashed}
.input::placeholder{color:#8D91A8}
.select{appearance:none;padding-inline-end:var(--s-10);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1A3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:left 14px center}
.input-wrap{position:relative;display:block}
.input-wrap > .od-icon{position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%);--od-icon-size:20px;color:var(--gray-500);pointer-events:none}
.input-wrap .input{padding-inline-start:44px}
.readonly-note{display:flex;align-items:center;gap:6px}
.readonly-note .od-icon{--od-icon-size:16px}

.otp{display:flex;gap:var(--s-2);direction:ltr;justify-content:center}
.otp input{width:52px;height:60px;text-align:center;font-size:var(--fs-24);font-weight:800;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--white);caret-color:var(--orange-500)}
.otp input:focus{outline:none;border-color:var(--navy-900);box-shadow:0 0 0 4px var(--navy-100)}
.otp[aria-invalid="true"] input{border-color:var(--danger-ink)}
.otp.shake{animation:shake 300ms var(--ease-out)}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}

/* chips */
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--s-4);border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:var(--white);color:var(--navy-900);font-size:var(--fs-14);font-weight:600;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.chip::before{content:"";position:absolute;inset:-2px}
.chip .od-icon{--od-icon-size:16px}
.chip .chip-check{display:none}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--navy-900);border-color:var(--navy-900);color:var(--white)}
.chip[aria-pressed="true"] .chip-check,.chip[aria-checked="true"] .chip-check{display:inline-block}
.chip:disabled{opacity:.5;cursor:not-allowed}
@media (hover:hover){.chip:hover:not([aria-pressed="true"]):not(:disabled){background:var(--navy-100)}}
.chip-dot{width:10px;height:11px;background:var(--rc,var(--navy-900))}

/* switch */
.switch{position:relative;display:inline-flex;align-items:center;flex:none;min-width:52px;min-height:44px;cursor:pointer}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:inherit}
.switch .track{position:relative;width:48px;height:28px;border-radius:var(--r-pill);background:var(--switch-off);transition:background-color var(--dur-fast) var(--ease-out)}
.switch .track::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease-out)}
.switch .track::before{content:"";position:absolute;top:9px;left:9px;width:10px;height:6px;border:solid var(--navy-900);border-width:0 0 2px 2px;transform:rotate(-45deg);opacity:0;transition:opacity var(--dur-fast)}
.switch input:checked + .track{background:var(--orange-500)}
.switch input:checked + .track::after{transform:translateX(-20px)}
.switch input:checked + .track::before{opacity:0}
.switch input:focus-visible + .track{outline:3px solid var(--navy-700);outline-offset:2px}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled + .track{opacity:.5}

/* checkbox */
.check{display:inline-flex;align-items:center;gap:var(--s-3);min-height:44px;cursor:pointer;font-size:var(--fs-16)}
.check input{appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid var(--line-strong);border-radius:6px;background:var(--white) center/14px no-repeat;transition:background-color var(--dur-fast)}
.check input:checked{background-color:var(--navy-900);border-color:var(--navy-900);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

/* radio pills */
.radio-pills{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.radio-pill{position:relative}
.radio-pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.radio-pill span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s-5);border-radius:var(--r-pill);border:1.5px solid var(--line-strong);font-weight:600;font-size:var(--fs-14)}
.radio-pill input:checked + span{background:var(--navy-900);border-color:var(--navy-900);color:var(--white)}
.radio-pill input:focus-visible + span{outline:3px solid var(--navy-700);outline-offset:2px}

/* swatches */
.swatches{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.swatch{position:relative;width:44px;height:44px}
.swatch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.swatch span{display:grid;place-items:center;width:44px;height:44px;background:var(--sw);color:var(--white)}
.swatch span .od-icon{--od-icon-size:20px;opacity:0}
.swatch input:checked + span .od-icon{opacity:1}
.swatch input:focus-visible + span{outline:3px solid var(--navy-700);outline-offset:2px}
.swatch input:disabled{cursor:not-allowed}

/* ============ Surfaces ============ */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-5)}
.card-flush{padding:0}
.stat-card{display:grid;gap:var(--s-1);background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4) var(--s-5)}
.stat-card .num{display:block;font-size:clamp(24px,5vw,32px);font-weight:800;line-height:1.2;color:var(--orange-600);white-space:nowrap}
.stat-card .cap{display:block;font-size:var(--fs-14);color:var(--gray-500)}
.banner{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r);background:var(--navy-100);color:var(--navy-900);font-size:var(--fs-14);line-height:1.6}
.banner .od-icon{--od-icon-size:20px;margin-top:2px}
.banner-warn{background:#FFF6DB;color:#5C3F00}
.banner-orange{background:var(--orange-50);color:#7A2E05}
.banner-danger{background:#FDECEC;color:#8E1F23}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* avatar + role badge */
.avatar{--size:40px;position:relative;display:grid;place-items:center;flex:none;width:var(--size);height:calc(var(--size) * 1.06);background:var(--av,var(--navy-700));color:var(--white);font-weight:800;font-size:calc(var(--size) * .36);line-height:1;-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat}
.avatar img{width:100%;height:100%;object-fit:cover}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:700;line-height:1;white-space:nowrap;color:var(--rc);background:color-mix(in srgb,var(--rc) 11%,#fff)}
.badge::before{content:"";width:8px;height:9px;background:var(--rc);-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat}
.badge-more{--rc:var(--navy-700)}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-14);font-weight:700;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status-active{color:var(--success-ink)}
.status-inactive{color:var(--gray-500)}
.status-inactive::before{background:transparent;border:2px solid currentColor;width:6px;height:6px}

/* tabs */
.tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--line)}
.tab{position:relative;min-height:44px;padding:0 var(--s-4);border:0;background:none;font-size:var(--fs-14);font-weight:600;color:var(--gray-500);white-space:nowrap}
.tab[aria-selected="true"]{color:var(--navy-900);font-weight:800}
.tab[aria-selected="true"]::after{content:"";position:absolute;inset-inline:var(--s-3);bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--orange-500)}
@media (hover:hover){.tab:hover{color:var(--navy-900)}}

/* table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-14)}
.table th{background:var(--navy-100);color:var(--navy-900);font-weight:700;text-align:start;padding:var(--s-3) var(--s-4);white-space:nowrap}
.table td{padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);vertical-align:middle}
.table tbody tr{transition:background-color var(--dur-fast)}
@media (hover:hover){.table tbody tr:hover{background:var(--gray-50)}}
.table .cell-user{display:flex;align-items:center;gap:var(--s-3);min-width:180px}
.table .cell-user .name{font-weight:700;font-size:var(--fs-16)}
.table .row-inactive td{color:var(--gray-500)}

/* list rows */
.list{display:grid}
.list > li + li{border-top:1px solid var(--line)}
.row-btn{display:flex;align-items:center;gap:var(--s-3);width:100%;padding:var(--s-3) var(--s-4);min-height:64px;border:0;background:var(--white);text-align:start;transition:background-color var(--dur-fast)}
@media (hover:hover){.row-btn:hover{background:var(--gray-50)}}
.row-btn .chev{--od-icon-size:20px;color:var(--gray-500)}
.row-body{display:grid;gap:4px;flex:1 1 0;min-width:0}
.row-body > *{min-width:0}
.row-title{font-weight:700;font-size:var(--fs-16);line-height:1.4}
.row-meta{font-size:var(--fs-14);color:var(--gray-500)}

/* empty / state */
.empty{display:grid;justify-items:center;text-align:center;gap:var(--s-3);padding:var(--s-8) var(--s-5)}
.empty .h-sub{max-width:36ch}
.empty p{max-width:44ch;color:var(--gray-500);font-size:var(--fs-14)}
.empty .actions{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;margin-top:var(--s-2)}

/* fox mascot */
.fox{position:relative;width:var(--fox,96px);flex:none}
.fox > img{display:block;width:100%;height:auto}
.fox-overlay{position:absolute;inset:0;width:100%;height:100%}
.fox-badge{position:absolute;bottom:-2%;inset-inline-end:-10%;width:42%;aspect-ratio:1/1.06;display:grid;place-items:center;color:var(--white)}
.fox-badge .od-icon{--od-icon-size:55%}
.fox-badge.ok{background:var(--success-ink)}
.fox-badge.idle{background:var(--navy-100);color:var(--navy-700)}
.fox-welcome{animation:fox-in var(--dur) var(--ease-out) both}
@keyframes fox-in{from{opacity:0;transform:translateY(8px) rotate(-4deg)}to{opacity:1;transform:none}}
.fox-empty > img{filter:saturate(.75)}
.tail-spin{display:inline-block;width:var(--spin,48px);height:var(--spin,48px)}
.tail-spin svg{display:block;width:100%;height:100%;animation:spin 900ms linear infinite}

/* ============ Overlays ============ */
.overlay{position:fixed;inset:0;z-index:100;display:grid;align-items:end}
.scrim{position:absolute;inset:0;background:rgba(28,26,58,.48);opacity:0;transition:opacity var(--dur) var(--ease-out)}
.sheet{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:100%;max-height:92dvh;background:var(--white);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-3);transform:translateY(100%);transition:transform var(--dur) var(--ease-out);padding-bottom:env(safe-area-inset-bottom)}
.sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line);margin:var(--s-2) auto 0}
.sheet-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-5) var(--s-3) var(--s-3)}
.sheet-head h2{flex:1 1 0;min-width:0;font-size:var(--fs-20);font-weight:800;line-height:1.4}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:var(--s-2) var(--s-5) var(--s-5)}
.sheet-foot{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:var(--s-3) var(--s-5) var(--s-4);border-top:1px solid var(--line)}
.sheet-foot .btn{flex:1 1 auto}
.overlay.open .scrim{opacity:1}
.overlay.open .sheet{transform:none}
.overlay.closing .scrim{opacity:0;transition-duration:var(--dur-exit);transition-timing-function:var(--ease-in)}
.overlay.closing .sheet{transform:translateY(100%);transition-duration:var(--dur-exit);transition-timing-function:var(--ease-in)}
.overlay.dialog{align-items:center;justify-items:center;padding:var(--s-4)}
.overlay.dialog .sheet{width:min(440px,100%);border-radius:var(--r-lg);transform:scale(.96);opacity:0;transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);padding-bottom:0}
.overlay.dialog .sheet-grip{display:none}
.overlay.dialog.open .sheet{transform:none;opacity:1}
.overlay.dialog.closing .sheet{transform:scale(.96);opacity:0}
@media (min-width:768px){
  .overlay{align-items:center;justify-items:center;padding:var(--s-6)}
  .sheet{width:min(560px,100%);border-radius:var(--r-lg);transform:scale(.96);opacity:0;transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);padding-bottom:0}
  .sheet-grip{display:none}
  .sheet-head{padding-top:var(--s-4)}
  .overlay.open .sheet{transform:none;opacity:1}
  .overlay.closing .sheet{transform:scale(.96);opacity:0}
  .sheet-foot{justify-content:flex-start}
  .sheet-foot .btn{flex:0 0 auto}
}

.menu{position:absolute;z-index:60;top:calc(100% - 4px);inset-inline-end:var(--s-4);width:min(300px,calc(100vw - 32px));background:var(--white);color:var(--navy-900);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2);padding:var(--s-2);transform-origin:top left;animation:menu-in var(--dur-fast) var(--ease-out)}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.menu-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3)}
.menu-item{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:44px;padding:0 var(--s-3);border:0;border-radius:8px;background:none;text-align:start;font-size:var(--fs-16);font-weight:600;text-decoration:none;color:var(--navy-900)}
.menu-item .od-icon{--od-icon-size:20px;color:var(--navy-700)}
.menu-item.danger,.menu-item.danger .od-icon{color:var(--danger-ink)}
@media (hover:hover){.menu-item:hover{background:var(--navy-100)}}

.toasts{position:fixed;z-index:200;inset-inline:var(--s-4);bottom:calc(84px + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:var(--s-2);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--s-3);max-width:min(460px,100%);padding:var(--s-3) var(--s-4);border-radius:var(--r);background:var(--navy-900);color:var(--white);box-shadow:var(--shadow-2);font-size:var(--fs-14);font-weight:600;line-height:1.5;pointer-events:auto;animation:toast-in var(--dur) var(--ease-out)}
.toast .ti{display:grid;place-items:center;flex:none;width:26px;height:28px;color:var(--navy-900);background:var(--success)}
.toast.error .ti{background:#FF8A8D}
.toast.info .ti{background:var(--orange-400)}
.toast .ti .od-icon{--od-icon-size:16px}
.toast.out{animation:toast-out var(--dur-exit) var(--ease-in) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}
@media (min-width:1024px){.toasts{bottom:var(--s-6)}}

.offline-bar{position:fixed;z-index:150;top:0;inset-inline:0;display:flex;align-items:center;justify-content:center;gap:var(--s-2);padding:calc(env(safe-area-inset-top) + 8px) var(--s-4) var(--s-2);background:#FFF6DB;color:#5C3F00;font-size:var(--fs-14);font-weight:700;box-shadow:var(--shadow-1)}
.offline-bar .od-icon{--od-icon-size:18px}

/* ============ Splash ============ */
.splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;align-content:center;gap:var(--s-8);background:var(--white);transition:opacity var(--dur) var(--ease-in)}
.splash img{width:min(180px,46vw);height:auto}
.splash.hide{opacity:0;pointer-events:none}

/* ============ Login ============ */
.auth{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr)}
.auth-aside{display:none}
.auth-main{display:grid;align-content:start;justify-items:center;padding:calc(env(safe-area-inset-top) + var(--s-10)) var(--s-5) calc(env(safe-area-inset-bottom) + var(--s-8))}
.auth-card{width:min(400px,100%);display:grid;gap:var(--s-6)}
.auth-card > *{min-width:0}
.auth-logo{width:120px;height:auto;justify-self:center}
.auth-head{display:grid;gap:var(--s-2);text-align:center}
.auth-head p{color:var(--gray-500)}
.auth-form{display:grid;gap:var(--s-5)}
.otp-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;font-size:var(--fs-14)}
.no-account{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4);border-radius:var(--r);background:var(--orange-50)}
.no-account .od-field{--od-gap:4px}
.no-account strong{font-size:var(--fs-16);color:#7A2E05}
.no-account span{font-size:var(--fs-14);color:#5E2808}
.demo{border:1px dashed var(--line-strong);border-radius:var(--r);padding:0 var(--s-4)}
.demo summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:48px;cursor:pointer;font-size:var(--fs-14);font-weight:700;color:var(--navy-700);list-style:none}
.demo summary::-webkit-details-marker{display:none}
.demo summary .od-icon{--od-icon-size:18px;transition:transform var(--dur-fast)}
.demo[open] summary .od-icon{transform:rotate(180deg)}
.demo-list{display:grid;gap:var(--s-1);padding-bottom:var(--s-3)}
.demo-item{display:flex;align-items:center;gap:var(--s-3);width:100%;padding:var(--s-2);min-height:56px;border:0;border-radius:var(--r);background:none;text-align:start}
@media (hover:hover){.demo-item:hover{background:var(--gray-50)}}
.demo-item .row-body{gap:2px}
@media (min-width:1024px){
  .auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .auth-main{align-content:center;background:var(--white)}
  .auth-aside{display:grid;align-content:center;justify-items:center;gap:var(--s-6);padding:var(--s-12);background:var(--navy-900);color:var(--white);text-align:center}
  .auth-aside img{width:140px;height:auto}
  .auth-aside h2{font-size:var(--fs-32);font-weight:800;line-height:1.35}
  .auth-aside p{max-width:34ch;color:#C9C8E3;font-size:var(--fs-16)}
}

/* ============ Shell ============ */
.shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100dvh}
.sidebar{display:none}
.appbar{grid-row:1;position:relative;z-index:30;background:var(--navy-900);color:var(--white);padding:env(safe-area-inset-top) var(--s-4) 0}
.appbar-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo title avatar" "meta meta meta";column-gap:var(--s-3);row-gap:var(--s-2);align-items:center;padding-block:var(--s-2) var(--s-3)}
.appbar-logo{grid-area:logo;width:30px;height:auto}
.appbar-title{grid-area:title;font-size:var(--fs-20);font-weight:800;line-height:1.3}
.appbar-meta{grid-area:meta;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.appbar-meta:empty{display:none}
.appbar-avatar{grid-area:avatar;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:var(--r);background:transparent;padding:0}
.appbar-avatar[aria-expanded="true"]{background:var(--navy-700)}
.main{grid-row:2;overflow-y:auto;overscroll-behavior:contain;background:var(--white)}
.page{width:100%;max-width:1120px;margin:0 auto;padding:var(--s-5) var(--s-4) var(--s-10);display:grid;gap:var(--s-5);align-content:start}
.page > *{min-width:0}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}

.seg{display:inline-flex;flex:none;padding:3px;border-radius:var(--r-pill);background:var(--navy-700)}
.seg button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:transparent;color:#E4E3F5;font-size:var(--fs-14);font-weight:700;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast)}
.seg button .od-icon{--od-icon-size:16px}
.seg button[aria-pressed="true"]{background:var(--orange-500);color:var(--navy-900)}
.seg-light{background:var(--navy-100)}
.seg-light button{color:var(--navy-700)}

.bottomnav{grid-row:3;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));background:var(--white);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 16px rgba(28,26,58,.04)}
.bn-item{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;min-height:64px;padding:var(--s-2) var(--s-1);color:var(--gray-500);text-decoration:none;font-size:var(--fs-12);font-weight:700}
.bn-item .od-icon{--od-icon-size:24px}
.bn-item[aria-current="page"]{color:var(--navy-900)}
.bn-item[aria-current="page"] .od-icon{color:var(--orange-600)}
.bn-item[aria-current="page"]::before{content:"";position:absolute;top:0;inset-inline:28%;height:3px;border-radius:0 0 3px 3px;background:var(--orange-500)}

@media (min-width:768px){
  .page{padding:var(--s-8) var(--s-6) var(--s-12)}
  .appbar-row{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"logo title meta avatar";min-height:68px;padding-block:var(--s-2)}
  .appbar-meta{justify-content:flex-end}
}
@media (min-width:1024px){
  .shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .main{grid-column:2;background:var(--gray-50)}
  .appbar{grid-column:2;background:var(--white);color:var(--navy-900);border-bottom:1px solid var(--line);padding-inline:var(--s-8)}
  .appbar-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"title meta avatar"}
  .appbar-logo{display:none}
  .appbar-avatar[aria-expanded="true"]{background:var(--navy-100)}
  .appbar .seg{background:var(--navy-100)}
  .appbar .seg button{color:var(--navy-700)}
  .appbar .seg button[aria-pressed="true"]{color:var(--navy-900)}
  .appbar.on-navy :focus-visible{outline-color:var(--navy-700)}
  .bottomnav{display:none}
  .sidebar{grid-row:1 / -1;grid-column:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--navy-900);color:var(--white);padding:var(--s-6) var(--s-4)}
  .side-brand{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-2) var(--s-6);text-decoration:none}
  .side-brand img{width:34px;height:auto}
  .side-brand .od-field strong{font-size:var(--fs-20);font-weight:800;line-height:1.2}
  .side-brand .od-field span{font-size:var(--fs-12);color:#B9B8D6}
  .side-nav{display:grid;gap:var(--s-1);align-content:start}
  .side-item{position:relative;display:flex;align-items:center;gap:var(--s-3);min-height:48px;padding:0 var(--s-4);border-radius:var(--r);color:#D6D5EC;text-decoration:none;font-weight:700;transition:background-color var(--dur-fast) var(--ease-out)}
  .side-item .od-icon{--od-icon-size:22px}
  .side-item[aria-current="page"]{background:var(--navy-700);color:var(--white)}
  .side-item[aria-current="page"] .od-icon{color:var(--orange-400)}
  .side-item[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--orange-500)}
  .side-foot{display:grid;gap:var(--s-2);border-top:1px solid var(--navy-700);padding-top:var(--s-4)}
  .side-user{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2)}
  .side-user .od-field strong{font-weight:700}
  .side-user .od-field span{font-size:var(--fs-12);color:#B9B8D6}
  .side-foot .menu-item{color:#D6D5EC}
  .side-foot .menu-item .od-icon{color:#D6D5EC}
  @media (hover:hover){.side-item:hover,.side-foot .menu-item:hover{background:var(--navy-700);color:var(--white)}}
  .page{padding:var(--s-8) var(--s-8) var(--s-12)}
}

/* ============ Home ============ */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-5);padding:var(--s-6) var(--s-5);border-radius:var(--r-lg);background:var(--grad-hero);color:var(--navy-900)}
.hero-plate{display:grid;place-items:center;width:104px;height:110px;background:var(--white)}
.hero-text{display:grid;gap:var(--s-2)}
.hero-text h2{font-size:clamp(24px,6vw,32px);font-weight:800;line-height:1.3}
.hero-text p{font-size:var(--fs-16);font-weight:600}
.hero .badge{background:rgba(255,255,255,.92)}
.hero-meta{font-size:var(--fs-14);font-weight:700;color:#3B1A06}
@media (max-width:420px){.hero{grid-template-columns:minmax(0,1fr)}.hero-plate{width:88px;height:94px}}

/* ============ Users ============ */
.toolbar{display:grid;gap:var(--s-3)}
.toolbar > *{min-width:0}
.filters-rail{--od-rail-pad:0px;margin-inline:calc(var(--s-4) * -1);padding-inline:var(--s-4);padding-block:2px}
.only-desktop{display:none}
@media (min-width:1024px){
  .toolbar{grid-template-columns:minmax(0,360px) auto;align-items:end;justify-content:space-between}
  .only-desktop{display:block}
  .only-mobile{display:none}
  .filters-rail{margin-inline:0;padding-inline:0}
}
.u-actions{display:flex;gap:var(--s-1);justify-content:flex-end}
.u-detail{display:grid;gap:var(--s-5)}
.u-detail-head{display:flex;align-items:center;gap:var(--s-4)}
.dl{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r)}
.dl > div{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--s-4);font-size:var(--fs-14)}
.dl > div + div{border-top:1px solid var(--line)}
.dl dt{color:var(--gray-500)}
.dl dd{margin:0;font-weight:700;text-align:end}
.form{display:grid;gap:var(--s-5)}
.form-2{display:grid;gap:var(--s-5)}
@media (min-width:768px){.form-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.err-summary{display:grid;gap:var(--s-2);padding:var(--s-4);border-radius:var(--r);background:#FDECEC;color:#8E1F23}
.err-summary strong{display:flex;align-items:center;gap:var(--s-2)}
.err-summary ul{list-style:disc;padding-inline-start:var(--s-6);font-size:var(--fs-14)}
.err-summary button{border:0;background:none;padding:2px 0;color:inherit;text-decoration:underline;font-weight:600;font-size:var(--fs-14)}

/* ============ Roles ============ */
.roles-layout{display:grid;gap:var(--s-6);align-items:start}
.roles-layout > *{min-width:0}
.roles-page.has-detail .roles-list-pane{display:none}
.roles-page:not(.has-detail) .roles-detail-pane{display:none}
@media (min-width:1024px){
  .roles-layout{grid-template-columns:340px minmax(0,1fr)}
  .roles-page .roles-list-pane,.roles-page .roles-detail-pane{display:grid !important}
}
.roles-list-pane,.roles-detail-pane{display:grid;gap:var(--s-4);align-content:start}
.group-title{font-size:var(--fs-14);font-weight:700;color:var(--gray-500);padding-inline:var(--s-1)}
.role-row[aria-current="true"]{background:var(--orange-50)}
.role-row[aria-current="true"] .row-title{color:var(--navy-900)}
.role-hex{display:grid;place-items:center;flex:none;width:40px;height:42px;background:var(--rc);color:var(--white)}
.role-hex .od-icon{--od-icon-size:18px}
.role-hex-lg{width:56px;height:59px}
.role-hex-lg .od-icon{--od-icon-size:24px}
.lock-tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-12);font-weight:700;color:var(--navy-700);white-space:nowrap}
.lock-tag .od-icon{--od-icon-size:14px}
.role-head{display:flex;align-items:center;gap:var(--s-4)}
.role-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.perm-group{display:grid;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.perm-group-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--navy-100);border-radius:var(--r) var(--r) 0 0;font-weight:700;font-size:var(--fs-14)}
.perm-row{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-4)}
.perm-row + .perm-row{border-top:1px solid var(--line)}
.perm-row .od-field{--od-gap:4px;flex:1 1 0}
.perm-row .od-field strong{font-size:var(--fs-16)}
.perm-row .od-field span{font-size:var(--fs-14);color:var(--gray-500)}
.perm-row .od-field .code{justify-self:start;display:inline-block}
.savebar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);padding:var(--s-3) var(--s-4);margin-inline:calc(var(--s-4) * -1);background:var(--white);border-top:1px solid var(--line);box-shadow:0 -6px 16px rgba(28,26,58,.06)}
.savebar[hidden]{display:none}
.savebar .msg{flex:1 1 160px;font-size:var(--fs-14);font-weight:700;display:flex;align-items:center;gap:var(--s-2)}
.savebar .msg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange-500)}
@media (min-width:1024px){.savebar{margin-inline:0;border:1px solid var(--line);border-radius:var(--r);bottom:var(--s-4)}}

/* ============ Profile ============ */
.profile-grid{display:grid;gap:var(--s-5)}
@media (min-width:1024px){.profile-grid{grid-template-columns:320px minmax(0,1fr);align-items:start}}
.profile-id{display:grid;justify-items:center;text-align:center;gap:var(--s-3)}
.file-btn{position:relative}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.file-btn:focus-within{outline:3px solid var(--navy-700);outline-offset:2px}

/* ============ State pages ============ */
.state-page{min-height:100dvh;display:grid;place-items:center;padding:var(--s-8) var(--s-5);background:var(--white)}
.state-card{display:grid;justify-items:center;text-align:center;gap:var(--s-4);max-width:440px}
.state-card h1{font-size:var(--fs-24);font-weight:800;line-height:1.4}
.state-card p{color:var(--gray-500)}
.state-code{font-size:var(--fs-14);font-weight:800;color:var(--orange-600);letter-spacing:.04em}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important}
  .tail-spin svg{animation:spin 2.4s linear infinite !important}
}

/* ============ Laravel / Livewire additions ============ */
[x-cloak]{display:none !important}
.splash[hidden],.offline-bar[hidden]{display:none}
.menu-item form,form.menu-item-form{display:contents}
.side-foot form{display:grid}
.only-mobile-inline{display:inline-flex}
@media (min-width:1024px){.only-mobile-inline{display:none !important}}
.dev-code{font-weight:800}