/* ============================================================================
   OFFTO · offto-plus — platform layer on top of offto.css (Design System v2)
   ----------------------------------------------------------------------------
   Loaded AFTER offto.css by both Laravel panels. Adds only what offto.css does
   not ship, taken from the refined Travel Experts panel (vo.css) and made
   generic: one accent per panel (--panel-accent), the brand tag under the
   logo, the dashboard hero band, stat polish, the select-on-focus fix and a
   few helpers. Same rules as the design system: @layer, oklch(), color-mix(),
   logical properties only (dir="rtl" stays the whole RTL story).
   ========================================================================= */

@layer tokens {
  :root {
    /* The panel's own accent. Mother Panel = OFFTO blue; a company panel can set
       it inline on <html style="--panel-accent: …"> from its branding. */
    --panel-accent:        oklch(50% 0.105 240);  /* OFFTO brand blue #006DA2 */
    --panel-accent-strong: color-mix(in oklab, var(--panel-accent) 86%, black 14%);
    --panel-accent-soft:   color-mix(in oklab, var(--panel-accent) 9%, white);
    --panel-contrast:      oklch(99% 0 0);

    /* money — revenue, invoices, "starting from" */
    --gold:      oklch(66% 0.130 78);
    --gold-soft: oklch(96% 0.045 82);

    --hero-1: color-mix(in oklab, var(--panel-accent) 92%, black 8%);
    --hero-2: color-mix(in oklab, var(--brand) 88%, black 6%);
  }

  :root[data-theme="dark"] {
    --panel-accent:        oklch(72% 0.105 240);
    --panel-accent-strong: oklch(78% 0.100 240);
    --panel-accent-soft:   color-mix(in oklab, var(--panel-accent) 18%, transparent);
    --panel-contrast:      oklch(20% 0.03 240);

    --gold:      oklch(78% 0.125 82);
    --gold-soft: color-mix(in oklab, oklch(70% 0.130 82) 18%, transparent);

    --hero-1: color-mix(in oklab, oklch(42% 0.100 240) 88%, black 12%);
    --hero-2: color-mix(in oklab, oklch(46% 0.095 199) 88%, black 12%);
  }
}

@layer components {

  /* ------------------------------------------------------------- ACCENTS */
  .stat--accent { --stat-accent: var(--panel-accent); }
  .stat--gold   { --stat-accent: var(--gold); }

  .badge.is-accent {
    background: var(--panel-accent-soft);
    color: color-mix(in oklab, var(--panel-accent) 78%, var(--text));
    border-color: color-mix(in oklab, var(--panel-accent) 26%, transparent);
  }
  .badge.is-gold {
    background: var(--gold-soft);
    color: color-mix(in oklab, var(--gold) 72%, var(--text));
    border-color: color-mix(in oklab, var(--gold) 28%, transparent);
  }

  .btn-accent {
    background: var(--panel-accent);
    color: var(--panel-contrast);
    border-color: transparent;
    box-shadow: var(--shadow-xs);
  }
  .btn-accent:hover { background: var(--panel-accent-strong); }

  /* ----------------------------------------------------------- BRAND BLOCK
     Logo (per language and theme) + the tag naming the panel under it. */
  .sidebar__brand .brand-lockup { min-inline-size: 0; }
  .brand-block { display: grid; gap: .3rem; min-inline-size: 0; justify-items: start; }
  .brand-tag {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    padding: .12rem .55rem;
    border-radius: var(--r-pill);
    background: var(--panel-accent-soft);
    color: color-mix(in oklab, var(--panel-accent) 80%, var(--text));
    border: 1px solid color-mix(in oklab, var(--panel-accent) 24%, transparent);
    font-size: var(--fs-2xs);
    font-weight: 800;
    white-space: nowrap;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app[data-rail="true"] .sidebar:not(:hover) .brand-tag { display: none; }

  /* logo variants: html[lang] picks the Arabic or English wordmark */
  html[lang="ar"] .logo-en, html:not([lang="ar"]) .logo-ar { display: none !important; }

  /* The brand area is one topbar tall in offto.css; with the tag under the logo it needs to grow a
     little and keep breathing room above the logo instead of touching the top edge. */
  .sidebar__brand:has(.brand-tag) {
    height: auto;
    min-block-size: var(--topbar-h);
    padding-block: .85rem .7rem;
    align-items: center;
  }
  .brand-block .brand-lockup img { height: 26px; }

  /* active TOP-LEVEL page wears the panel accent (filled pill) */
  .sidebar .nav-group > .nav-link[aria-current="page"],
  .sidebar .nav-group > .nav-link:not(.nav-parent).is-active {
    background: color-mix(in oklab, var(--panel-accent) 12%, transparent);
    color: var(--panel-accent-strong);
  }
  .sidebar .nav-group > .nav-link[aria-current="page"] > :is(.icon, [data-icon]),
  .sidebar .nav-group > .nav-link:not(.nav-parent).is-active > :is(.icon, [data-icon]) { color: var(--panel-accent); }
  .sidebar .nav-group > .nav-link[aria-current="page"]::before,
  .sidebar .nav-group > .nav-link:not(.nav-parent).is-active::before { background: var(--panel-accent); }
  .sidebar .nav-link:hover > :is(.icon, [data-icon]) { color: var(--panel-accent); }

  /* a parent whose child is open: accent text only, no pill — the child shows where you are */
  .sidebar .nav-parent.is-active { background: transparent; color: var(--panel-accent-strong); }
  .sidebar .nav-parent.is-active > :is(.icon, [data-icon]) { color: var(--panel-accent); }

  /* sub-items: no pill (as offto.css intends), accent text + dot, and a little air between rows */
  .sidebar .nav-sub > div { display: grid; gap: .15rem; padding-block: .2rem .35rem; }
  .sidebar .nav-sub .nav-link[aria-current="page"],
  .sidebar .nav-sub .nav-link.is-active {
    background: transparent;
    color: var(--panel-accent-strong);
    font-weight: 700;
  }
  .sidebar .nav-sub .nav-link[aria-current="page"]::before,
  .sidebar .nav-sub .nav-link.is-active::before { content: none; }
  .sidebar .nav-sub .nav-link[aria-current="page"]::after,
  .sidebar .nav-sub .nav-link.is-active::after { background: var(--panel-accent); transform: scale(1.5); }
  .sidebar .nav-sub .nav-link:hover::after { background: var(--panel-accent); }

  /* ------------------------------------------------------- COLLAPSIBLE CARD
     <section class="card is-collapsible" data-collapse-key="…"> with a .card-hd button[data-collapse];
     the body is hidden while [data-collapsed]. The state is remembered per key (localStorage). */
  .card.is-collapsible > .card-hd { cursor: pointer; user-select: none; }
  .card.is-collapsible[data-collapsed] > .card-hd { border-block-end-color: transparent; }
  .card.is-collapsible[data-collapsed] > .card-bd { display: none; }
  .card.is-collapsible .collapse-caret { transition: transform var(--t, .2s) var(--ease, ease); }
  .card.is-collapsible:not([data-collapsed]) .collapse-caret { transform: rotate(180deg); }

  /* --------------------------------------------------------- HERO BAND
     Dashboard opener: who / what / next action. */
  .hero-band {
    position: relative;
    overflow: clip;
    border-radius: 1rem;
    padding: clamp(1.1rem, .8rem + 1vw, 1.65rem);
    color: oklch(99% 0 0);
    border: 1px solid color-mix(in oklab, var(--brand) 34%, transparent);
    background:
      radial-gradient(circle at 88% 12%, oklch(100% 0 0 / .12), transparent 26%),
      linear-gradient(115deg, var(--hero-1), var(--hero-2));
    box-shadow: 0 10px 28px color-mix(in oklab, var(--panel-accent) 9%, transparent);
    display: grid;
    gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .hero-band::before {
    content: "";
    position: absolute;
    inset-block-start: -70%;
    inset-inline-end: -10%;
    inline-size: 25rem; block-size: 25rem;
    border-radius: 50%;
    background: oklch(100% 0 0 / .055);
    pointer-events: none;
  }
  .hero-band__greeting { color: oklch(100% 0 0 / .76); font-size: var(--fs-xs); font-weight: 650; margin: 0; }
  .hero-band h2 {
    color: inherit;
    font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin-block: .2rem;
  }
  .hero-band p { color: oklch(100% 0 0 / .8); font-size: var(--fs-sm); }
  .hero-band__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1rem; }
  .hero-band__pill {
    display: inline-flex; align-items: center; gap: .38rem;
    padding: .3rem .6rem;
    border-radius: var(--r-pill);
    background: oklch(100% 0 0 / .12);
    border: 1px solid oklch(100% 0 0 / .23);
    color: oklch(100% 0 0 / .94);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(8px);
  }
  .hero-band__side { position: relative; display: grid; gap: .55rem; min-inline-size: 12.25rem; }
  .hero-band__kpi small { display: block; color: oklch(100% 0 0 / .7); font-size: var(--fs-2xs); }
  .hero-band__kpi b { display: block; color: oklch(100% 0 0); font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
  .hero-band .btn { min-block-size: 2.55rem; border-radius: .55rem; }
  .hero-band .btn-light {
    background: oklch(100% 0 0 / .98);
    color: color-mix(in oklab, var(--panel-accent) 78%, oklch(24% .035 240));
    border: 1px solid transparent;
    font-weight: 800;
  }
  .hero-band .btn-light:hover { background: oklch(100% 0 0); transform: translateY(-1px); }
  .hero-band .btn-wire {
    background: oklch(100% 0 0 / .08);
    color: oklch(100% 0 0);
    border: 1px solid oklch(100% 0 0 / .38);
    font-weight: 750;
  }
  .hero-band .btn-wire:hover { background: oklch(100% 0 0 / .17); transform: translateY(-1px); }

  @container page (max-width: 46rem) {
    .hero-band { grid-template-columns: 1fr; }
    .hero-band__side { min-inline-size: 0; }
  }

  /* ------------------------------------------------------------ DASHBOARD
     .dash wraps a dashboard page: lifted stats and cards. */
  .dash .stat {
    border: 1px solid var(--border-soft);
    border-block-start: 2px solid var(--stat-accent, var(--panel-accent));
    border-radius: .75rem;
    box-shadow: 0 6px 18px color-mix(in oklab, var(--panel-accent) 5%, transparent);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .dash .stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--stat-accent, var(--panel-accent)) 38%, var(--border-soft));
  }
  .dash .stat__ico { border-radius: .5rem; }
  .dash .stat__value { letter-spacing: -.025em; }
  .dash .stat__foot { border-block-start: 1px solid var(--border-soft); padding-block-start: .6rem; margin-block-start: .55rem; }
  .dash .card { border-color: var(--border-soft); border-radius: .8rem; box-shadow: 0 6px 20px color-mix(in oklab, var(--panel-accent) 4%, transparent); }
  .dash .card-icon, .card-icon.is-accent { border-radius: .55rem; background: color-mix(in oklab, var(--panel-accent) 12%, transparent); color: var(--panel-accent); }

  /* ------------------------------------------------------------ MINI TABLE */
  .mini { display: grid; gap: .1rem; }
  .mini__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: center;
    padding: .55rem .15rem;
    border-block-end: 1px dashed var(--border-soft);
  }
  .mini__row:last-child { border-block-end: 0; }
  .mini__ttl { font-weight: 700; font-size: var(--fs-sm); }
  .mini__sub { font-size: var(--fs-xs); color: var(--text-3); }
  .mini__v { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ------------------------------------------------------ IMAGE PICKER
     Logo / favicon fields on settings pages: preview on a checkerboard. */
  .img-pick { display: grid; gap: .5rem; }
  .img-pick__preview {
    display: grid; place-items: center;
    min-block-size: 4.5rem;
    padding: .6rem;
    border-radius: var(--r-md);
    border: 1px dashed var(--border);
    background-color: var(--surface-2, var(--surface));
    background-image: conic-gradient(color-mix(in oklab, var(--text) 6%, transparent) 25%, transparent 0 50%, color-mix(in oklab, var(--text) 6%, transparent) 0 75%, transparent 0);
    background-size: 16px 16px;
  }
  .img-pick__preview.is-dark { background-color: oklch(22% .02 272); }
  .img-pick__preview img { max-block-size: 3.2rem; max-inline-size: 100%; object-fit: contain; }

  /* ---------------------------------------------------- SELECT ON FOCUS
     Upstream offto.css bug (found in the experts panel): the focus rule uses the
     `background` shorthand, which resets background-size/repeat — the select
     caret then repeats over the whole control while its list is open (white box
     on dark, black box on light). Re-pin the four longhands per direction. */
  html .select:focus,
  html .select:focus-visible {
    background-color: var(--surface);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 1.15rem, calc(100% - .72rem) 1.15rem;
  }
  html[dir="rtl"] .select:focus,
  html[dir="rtl"] .select:focus-visible {
    background-position: 1.05rem 1.15rem, .72rem 1.15rem;
    background-image: linear-gradient(135deg, currentColor 50%, transparent 50%),
                      linear-gradient(45deg, transparent 50%, currentColor 50%);
  }
  select.select, select { color-scheme: inherit; }
  .select option, .select optgroup { background-color: var(--surface); color: var(--text); }

  /* ------------------------------------------------------------ SHELL BARS
     Sticky notices above the topbar: Sign as (warning), suspension (danger). */
  .shell-bar {
    position: sticky; top: 0; z-index: 30;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
    padding: .55rem 1rem; font-size: var(--fs-sm); font-weight: 600;
    border-block-end: 1px solid color-mix(in oklab, var(--bar-tone) 45%, transparent);
    background: color-mix(in oklab, var(--bar-tone) 22%, var(--surface));
    color: color-mix(in oklab, var(--bar-tone) 70%, var(--text));
    --bar-tone: var(--info, var(--brand));
  }
  .shell-bar.is-warning { --bar-tone: var(--warning); }
  .shell-bar.is-danger { --bar-tone: var(--danger); }
  .shell-bar__text { flex: 1 1 18rem; color: var(--text); }
  .shell-bar__form { display: inline; margin: 0; }

  /* ------------------------------------------------------------ STAGES & KANBAN
     Module onboarding stages s0..s4 (Requested → In progress → Done → QA'd → Live), from the prototype. */
  :root { --s0: #8996A5; --s1: #2F6FB0; --s2: #6E57A3; --s3: #B3860F; --s4: #1F7A49; }
  :root[data-theme="dark"] { --s0: #7F8C9B; --s1: #5C97D6; --s2: #9B84CF; --s3: #D9AE3A; --s4: #4FC486; }
  .stage-strip { display: inline-flex; gap: 2px; }
  .stage-strip > i { inline-size: .9rem; block-size: .45rem; border-radius: 2px; background: var(--stage, var(--s0)); }
  .stage-dot { display: inline-block; inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--stage, var(--s0)); }
  .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: .75rem; overflow-x: auto; padding-block-end: .5rem; }
  .kanban__col { display: flex; flex-direction: column; gap: .5rem; min-block-size: 12rem; padding: .6rem; border-radius: var(--radius, .75rem);
    background: color-mix(in oklab, var(--stage) 6%, var(--surface-2, var(--surface))); border-block-start: 3px solid var(--stage); }
  .kanban__hd { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: var(--fs-sm); }
  .kanban__list { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-block-size: 3rem; }
  .kanban__card { padding: .6rem .7rem; border-radius: .6rem; background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-xs, none); cursor: grab; font-size: var(--fs-sm); }
  .kanban__card[data-locked] { cursor: default; }
  .kanban__card.sortable-ghost { opacity: .4; }
  .kanban__card .sub { color: var(--text-3); font-size: var(--fs-xs); }

  /* ------------------------------------------------------------ SIDEBAR BADGES (open incidents, tickets…) */
  .nav-badge { margin-inline-start: auto; min-inline-size: 1.35rem; padding: 0 .4rem; border-radius: 999px; text-align: center;
    font-size: var(--fs-2xs); font-weight: 700; line-height: 1.35rem; background: var(--danger); color: #fff; }
  .app[data-rail="collapsed"] .nav-badge, .sidebar.is-rail .nav-badge { display: none; }

  /* ------------------------------------------------------------ READABILITY FIXES (review 29-10)
     breadcrumb separators, menu hover vs active, smaller hints, visible row actions */
  .breadcrumb > * + *::before { content: "/"; margin-inline-end: .35rem; color: var(--text-3); opacity: .55; font-weight: 400; }
  .breadcrumb > .icon + *::before, .breadcrumb > * + .icon::before { content: none; }

  .sidebar .nav-group > .nav-link, .sidebar .nav-sub .nav-link { margin-block: 2px; }
  .nav-link:hover:not(.is-active):not([aria-current="page"]) { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }

  .hint, .field-help, .field .hint { font-size: var(--fs-2xs); line-height: 1.55; color: var(--text-3); }

  .row-actions { gap: .35rem; }
  .row-actions > .btn-icon, .act-row > .act { border: 1px solid var(--border); background: var(--surface); }
  .row-actions > .btn-icon:hover, .act-row > .act:hover { border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); }
  td.col-actions, th.col-actions { white-space: nowrap; }

  /* ------------------------------------------------------------ SELECT2 (every select) */
  .select2-container--default .select2-selection--multiple { min-block-size: 2.75rem; padding: .25rem .45rem; }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in oklab, var(--brand) 12%, var(--surface)); border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--border));
    color: var(--text); border-radius: 999px; padding-inline: .55rem; font-size: var(--fs-sm); }
  .select2-dropdown { background: var(--surface); border-color: var(--border); color: var(--text); }
  .select2-container--default .select2-results__option--highlighted[aria-selected],
  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: color-mix(in oklab, var(--brand) 16%, var(--surface)); color: var(--text); }
  .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--surface-2); color: var(--text); border-color: var(--border); }
  dialog .select2-container--open { z-index: 2000; }

  /* ------------------------------------------------------------ FLATPICKR (every date) */
  .fp-alt { cursor: pointer; }
  .flatpickr-calendar { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md, 0 8px 24px rgb(0 0 0 / .18)); color: var(--text); }
  .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--border); }
  .flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-weekday,
  .flatpickr-current-month input.cur-year { color: var(--text); fill: var(--text); background: transparent; }
  .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--text-2); }
  .flatpickr-day { color: var(--text); }
  .flatpickr-day:hover, .flatpickr-day.inRange { background: var(--surface-3); border-color: var(--surface-3); }
  .flatpickr-day.today { border-color: var(--brand); }
  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--brand); border-color: var(--brand); color: #fff; }
  .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-3); opacity: .55; }
  .flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--text); }

  /* ------------------------------------------------------------ FILTER BARS (review 30-10)
     Select2 is 100% wide by default; inside a toolbar every filter would take a whole row. Filters sit
     side by side with a fitting width and wrap neatly; the search field takes the remaining space. */
  .toolbar > .select2-container,
  .toolbar > :is(div, label):has(> select.select, > select.select2):not(.input-wrap) {
    flex: 0 1 13rem; inline-size: 13rem !important; min-inline-size: 10.5rem; max-inline-size: 17rem;
  }
  .toolbar > :is(div, label):has(> select.select, > select.select2) > .select2-container { inline-size: 100% !important; }
  .toolbar > .input-wrap { flex: 1 1 15rem; min-inline-size: 12rem; max-inline-size: 24rem; }
  .toolbar .select2-container--default .select2-selection--single { min-block-size: 2.5rem; }
  .toolbar > .filter-chips { flex: 0 0 auto; }
  @media (max-width: 640px) {
    .toolbar > .select2-container,
    .toolbar > :is(div, label):has(> select.select, > select.select2):not(.input-wrap),
    .toolbar > .input-wrap { flex: 1 1 100%; inline-size: 100% !important; max-inline-size: none; }
  }

  /* ------------------------------------------------------------ FORM FIELDS (review 30-10)
     Every field in a form reserves one line under it for its error, and the error is pinned there:
     whatever the page script does (insert it before a Select2, after an input group…), it shows under
     the control and nothing in the row moves when errors appear or disappear. */
  form .field { position: relative; padding-block-end: 1.2rem; }
  form .field .err {
    position: absolute; inset-inline: 0; inset-block-end: 0; margin: 0;
    font-size: var(--fs-2xs); line-height: 1.2rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  form .field .is-invalid + .select2-container .select2-selection,
  form .field .select2-container.is-invalid .select2-selection { border-color: var(--danger); }

  /* Switches and checkbox lines sit in a box as tall as an input, centred like the field beside them. */
  .field > .switch, .field > .check, .field > .radio-row { min-block-size: var(--ctl-h, 2.75rem); }

  /* ------------------------------------------------------------ HELPERS */
  .ltr { direction: ltr; unicode-bidi: isolate; }
  .fs-2xs { font-size: var(--fs-2xs); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .num-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* ===== NAMED FILTERS (review 30-10) =====================================================
   A filter shows what it filters before its value: "الخطورة: الكل" (offto-plus.js, filterName). */
.s2-named { display: inline-flex; align-items: baseline; gap: .35rem; max-inline-size: 100%; overflow: hidden; }
.s2-named .s2-name { color: var(--text-3, var(--muted)); font-weight: 600; font-size: var(--fs-xs); flex: none; }
.select2-selection__placeholder .s2-named { color: inherit; }

/* The search field of a filter bar often carries .grow (utilities layer: min-width 0), which beat the
   components-layer rule above and let crowded bars squash it to an icon. Same layer, so it holds. */
@layer utilities {
  .toolbar > .input-wrap { flex: 1 1 15rem; min-inline-size: 12rem; max-inline-size: 24rem; }
  @media (max-width: 640px) { .toolbar > .input-wrap { flex: 1 1 100%; max-inline-size: none; } }
}