/* V2.5.0-dev.6.8.9 — shared Design System / semantic UI tokens. Branding identity remains supplied by BrandingService. */
:root{
 --ui-font-family:var(--brand-font,Cairo,Tajawal,Arial,sans-serif);
 --ui-brand-primary:var(--blue);--ui-brand-primary-dark:var(--blue-dark);--ui-brand-soft:color-mix(in srgb,var(--blue) 10%,var(--ui-card,#fff));
 --ui-text:#17313a;--ui-text-secondary:#435861;--ui-muted:#61757e;--ui-heading:var(--ui-text);
 --ui-line:#d8e3e7;--ui-cell-line:#e7eef0;--ui-soft:#f5f8f9;--ui-surface-subtle:#f7fafb;--ui-surface-muted:#f2f6f7;--ui-table-head-bg:#f4f7f8;--ui-row-hover:#f8fbfb;--ui-card:#fff;--ui-control-bg:var(--ui-card);--ui-on-brand:#fff;
 --ui-success:#166b43;--ui-success-bg:#e3f6eb;--ui-warning:#76580d;--ui-warning-bg:#fff8e6;--ui-danger:#b42336;--ui-danger-bg:#fff1f2;--ui-info:#245d6c;--ui-info-bg:#edf4f6;
 --ui-radius:12px;--ui-radius-sm:9px;--ui-radius-xs:7px;--ui-control:42px;--ui-control-sm:34px;--ui-shadow:0 8px 24px rgba(15,55,68,.06);
 --ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-5:20px;--ui-space-6:24px;--ui-gap:var(--ui-space-3);
 --ui-font-xs:12px;--ui-font-sm:13px;--ui-font:14px;--ui-font-strong:15px;--ui-section:18px;--ui-title:26px;--ui-financial:18px;
 --ui-weight-regular:400;--ui-weight-filter:600;--ui-weight-medium:700;--ui-weight-strong:800;--ui-weight-heavy:900;
 /* P0 — the three shell values that were the only ones still living as literals. Everything else
    in this block already existed; these were hard-coded at their single use site (page background
    in main.css, 88px of header, the gap between page sections) which is exactly how a value drifts
    when a second surface needs it. No new scale and no second framework — three names for three
    numbers the system was already using. */
 --ui-page-bg:#f2f7fa;--ui-header-h:64px;--ui-section-gap:var(--ui-space-5);
}
*{box-sizing:border-box}.main{max-width:1560px;margin-inline:auto;padding:28px 24px 46px}body{color:var(--ui-text);font-family:var(--ui-font-family);font-size:var(--ui-font);line-height:1.65}
.page-title,.ui-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}.page-title h2,.ui-page-header h2{font-size:var(--ui-title);line-height:1.25;margin:0;color:var(--ui-heading)}.page-title p,.ui-page-header p{font-size:var(--ui-font);color:var(--ui-text-secondary);margin:var(--ui-space-1) 0 0}.ui-page-actions,.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{min-height:var(--ui-control);border-radius:var(--ui-radius-sm);font-size:var(--ui-font);font-weight:var(--ui-weight-strong);padding:0 var(--ui-space-4);box-shadow:none}.btn-sm{min-height:var(--ui-control-sm);padding:0 var(--ui-space-3);font-size:var(--ui-font-sm)}input,select,textarea{font-family:var(--ui-font-family);font-size:var(--ui-font);font-weight:var(--ui-weight-regular);min-height:var(--ui-control);border-radius:var(--ui-radius-sm);color:var(--ui-text);background:var(--ui-control-bg)}
/* Native <select> renders taller than <input> at an identical min-height/padding (Chromium form-control
   box model quirk) — the mismatch repeats wherever a search box and a filter <select> sit in the same row.
   An explicit height (not just min-height) equalizes them; checkboxes/radios/file/color inputs are excluded
   so their intrinsic control size is untouched. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),select{height:var(--ui-control)}
input[type=checkbox],input[type=radio]{height:auto;min-height:0}
/* Central compact control variant — the Central Shared Control Contract (docs/UI_UX_RULES.md) forbids
   a page-local selector rewriting height/min-height on the shared input primitive; this is the one
   named variant for that real, recurring need. !important matches the existing override precedent
   for this same base rule (see .lookup-add-row input{min-height:34px!important} in this file). */
.field-sm{height:var(--ui-control-sm)!important;min-height:var(--ui-control-sm)!important}
/* Native <select> vertical centering — root cause confirmed live: Chromium locks the `line-height`
   property on <select> entirely while it keeps native appearance:auto chrome (an explicit author
   line-height is silently ignored — verified by toggling appearance on/off on the same element).
   appearance:none releases that lock (the element is still a real native <select>, same keyboard/
   screen-reader/OS dropdown-list behavior — only the closed-box chrome changes) so a controlled
   line-height can finally center the value text reliably. The OS-drawn arrow is replaced with a
   centrally-drawn chevron matching the app's icon stroke style (round caps, 2px stroke). */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;line-height:1.3;padding-left:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23435861' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 8px center;background-size:16px 16px}
/* Filter Control Variant — filter-bar fields read moderately more emphasized than default Form
   Control fields (400), short of full Bold (700). One central rule covers every filter toolbar
   pattern in the app (flex .ui-toolbar/.booking-toolbar/.accounting-toolbar rows and the
   .report-filter-grid layout) so no module ever needs a local font-weight override to match it. */
.ui-toolbar input,.ui-toolbar select,.booking-toolbar input,.booking-toolbar select,.accounting-toolbar input,.accounting-toolbar select,.report-filter-grid input,.report-filter-grid select{font-weight:var(--ui-weight-filter)}
.card,.form-card{border-radius:var(--ui-radius);box-shadow:none;border:1px solid var(--ui-line);background:var(--ui-card)}.card-head{min-height:50px;padding:11px 15px}.card-body{padding:14px 15px}.compact-card .card-body{padding:11px 13px}
.ui-toolbar,.booking-toolbar,.search-row{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;padding:var(--ui-space-3);border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card);margin-bottom:var(--ui-space-3)}.ui-search,.payments-search-wrap,.booking-search-box{display:flex;align-items:center;gap:var(--ui-space-2);min-width:280px;flex:1 1 360px;min-height:var(--ui-control);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);padding:0 var(--ui-space-3)}.ui-search input,.payments-search-wrap input,.booking-search-box input{border:0!important;outline:0;min-height:38px;background:transparent;width:100%;box-shadow:none!important}
.ui-list-shell{width:100%;min-height:calc(var(--ui-control) * 8.5);padding-inline:var(--ui-space-2);padding-block:var(--ui-space-2);display:flex;flex-direction:column}.ui-list-shell>.ui-table-wrap{flex:0 0 auto}.ui-list-shell-empty{justify-content:center}
/* ---- Employees module: content-sized form grid + calmer section hierarchy ----------------------
   Priority: the brand turquoise is an ACCENT. Section icon chips are neutral by default and only the
   section that carries the primary meaning in its context opts into brand colour via .is-primary.
   The 12-column grid exists because .grid2/.grid3 give every control an identical width, which is what
   made currency/status/day fields stretch across half a row. Uses existing --ui-* tokens only. */
.emp-form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ui-space-2) var(--ui-space-3);align-items:end;max-width:1040px}
.emp-form>.s2{grid-column:span 2}
.emp-form>.s3{grid-column:span 3}
.emp-form>.s4{grid-column:span 4}
.emp-form>.s5{grid-column:span 5}
.emp-form>.s6{grid-column:span 6}
.emp-form>.s8{grid-column:span 8}
.emp-form>.s7{grid-column:span 7}
.emp-form>.s12{grid-column:1/-1}
@media(max-width:1024px){
 .emp-form{grid-template-columns:repeat(6,minmax(0,1fr))}
 .emp-form>.s8,.emp-form>.s6,.emp-form>.s5{grid-column:span 6}
 .emp-form>.s4{grid-column:span 3}
 .emp-form>.s3{grid-column:span 2}
 .emp-form>.s2{grid-column:span 1}
}
@media(max-width:640px){
 .emp-form{grid-template-columns:repeat(2,minmax(0,1fr))}
 .emp-form>*{grid-column:span 2}
 .emp-form>.s2,.emp-form>.s3{grid-column:span 1}
}
.emp-section .cheque-section-heading>span{background:var(--ui-surface-subtle);color:var(--ui-muted)}
.emp-section.is-primary .cheque-section-heading>span{background:var(--ui-brand-soft);color:var(--blue)}
.emp-section .cheque-section-heading h4{font-size:var(--ui-font-sm)}
.emp-section+.payroll-prepare-actions{display:grid;gap:4px;justify-items:end;min-width:0}
/* The consequence of the two buttons, beside the two buttons. Muted: it is a statement of fact, not
   a warning — the warning tone belongs to things that go wrong. */
.payroll-action-note{margin:0;max-width:56ch;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.5;text-align:start}
.payroll-action-note:empty{display:none}
.payroll-action-note b{color:var(--ui-text);font-weight:var(--ui-weight-strong)}
.emp-section{margin-top:0}
.emp-stack{display:grid;gap:var(--ui-space-3)}
/* Add-employee groups: quiet framing so five sections read as one short form, not five cards. */
.emp-fieldset{border:0;border-top:1px solid var(--ui-line);padding:var(--ui-space-3) 0 0;margin:var(--ui-space-3) 0 0;min-width:0}
fieldset.emp-fieldset:first-of-type{border-top:0;padding-top:0;margin-top:0}
.emp-fieldset>legend{padding:0;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);color:var(--ui-muted);letter-spacing:.02em}
.emp-quiet{color:var(--ui-muted);font-size:var(--ui-font-xs)}
.emp-classify{display:flex;flex-wrap:wrap;gap:var(--ui-space-3);align-items:center;min-height:var(--ui-control)}
.emp-classify .inline-check{margin:0;white-space:nowrap}
.emp-readout{min-height:var(--ui-control);display:flex;align-items:center;font-weight:var(--ui-weight-filter);color:var(--ui-text)}
/* Secondary detail the office fills in rarely — collapsed so it costs one line, not a whole section. */
.emp-collapse{border-top:1px solid var(--ui-line);padding-top:var(--ui-space-3);margin-top:var(--ui-space-3)}
.emp-collapse>summary{cursor:pointer;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);color:var(--ui-muted);list-style:none}
.emp-collapse>summary::-webkit-details-marker{display:none}
.emp-collapse>summary:before{content:"▾";display:inline-block;margin-inline-end:6px;transition:transform .15s}
.emp-collapse:not([open])>summary:before{transform:rotate(-90deg)}
.emp-collapse>.emp-form{margin-top:var(--ui-space-2)}
.emp-quick-host{margin-bottom:var(--ui-space-2);justify-content:flex-end}
.emp-caret{font-style:normal;font-size:10px;opacity:.75;margin-inline-start:2px}
.emp-file-toolbar-actions{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap}
/* ---- Employees reconstruction: density, hierarchy and content-sized surfaces -------------------
   Everything below composes existing --ui-* tokens; no new palette, radius scale or type scale. */

/* A simple form does not need the 1150px default modal: at that width even a 2-column "narrow"
   field renders ~176px. Content-sized modals are what actually make small fields small. */
/* max-width (not width): .modal.modal-runtime-open>.modal-box sets width at higher specificity, and
   capping is what actually constrains the box — the same approach the inline max-width modals use. */
.modal-box.emp-modal-sm{max-width:min(720px,calc(100vw - 32px))}
.modal-box.emp-modal-md{max-width:min(880px,calc(100vw - 32px))}

/* Classification: a multi-select pill set. The whole surface is the target, not a 13px square. */
.emp-pillset{display:flex;flex-wrap:wrap;gap:var(--ui-space-2)}
.emp-pill{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--ui-text);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);cursor:pointer;user-select:none;line-height:1;transition:background .12s,border-color .12s,color .12s}
.emp-pill:hover{background:var(--ui-surface-subtle)}
.emp-pill input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.emp-pill:has(input:checked){background:var(--ui-brand-soft);border-color:var(--blue);color:var(--blue-dark)}
.emp-pill:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.emp-pill>span:first-child{display:none;width:14px;height:14px}
.emp-pill:has(input:checked)>span:first-child{display:inline-flex}
.emp-pill svg{width:14px;height:14px}

/* Secondary navigation inside a tab — deliberately lighter than .ui-tabs so it never competes
   with the four real top-level tabs. */
.emp-subnav{display:flex;flex-wrap:wrap;gap:var(--ui-space-1);padding:3px;background:var(--ui-surface-subtle);border:1px solid var(--ui-line);border-radius:var(--ui-radius);margin-bottom:var(--ui-space-3)}
.emp-subnav button{flex:0 0 auto;padding:6px 12px;border:0;border-radius:calc(var(--ui-radius) - 3px);background:transparent;color:var(--ui-muted);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);cursor:pointer;line-height:1.4;font-family:inherit}
.emp-subnav button:hover{color:var(--ui-text)}
.emp-subnav button.active{background:var(--ui-card);color:var(--blue-dark);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.emp-subnav .emp-subnav-count{opacity:.6;font-size:10px;margin-inline-start:4px}

/* Period scoping row for long history. */
.emp-periodbar{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;margin-bottom:var(--ui-space-3)}
.emp-periodbar label{margin:0;font-size:var(--ui-font-xs);color:var(--ui-muted);font-weight:var(--ui-weight-filter)}
.emp-periodbar select{width:auto;min-width:150px}
.emp-periodbar .emp-periodbar-spacer{flex:1 1 auto}

/* Overview identity header — the one place the employee name is stated large. */
.emp-identity{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap;padding-bottom:var(--ui-space-3);border-bottom:1px solid var(--ui-line);max-width:960px}
.emp-identity h3{margin:0 0 4px;font-size:20px;line-height:1.25}
.emp-identity .emp-identity-meta{color:var(--ui-muted);font-size:var(--ui-font-sm)}

/* Compact labelled facts: a definition grid, not a row of cards. Values carry the weight. */
.emp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,235px));justify-content:start;gap:var(--ui-space-1) var(--ui-space-4)}
.emp-facts>div{min-width:0;display:flex;align-items:baseline;justify-content:flex-start;gap:var(--ui-space-2);padding:5px 0;border-bottom:1px dashed var(--ui-cell-line)}
.emp-facts dt,.emp-facts .k{color:var(--ui-muted);font-size:var(--ui-font-xs);white-space:nowrap}
.emp-facts dd,.emp-facts .v{margin:0;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-filter);min-width:0;overflow-wrap:anywhere}
.emp-facts .v.is-alert{color:var(--ui-warning)}

/* Grouped block: a quiet titled region, far lighter than the bordered fact-card sections. */
.emp-group{min-width:0}
.emp-group>h4{margin:0 0 var(--ui-space-2);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);color:var(--ui-muted);letter-spacing:.02em}
.emp-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,320px));justify-content:start;gap:var(--ui-space-4) var(--ui-space-5,28px)}
/* P4 — the employee file's own pieces, sized from their content.
   `.emp-facts-grid` replaces the fixed two-column `.cheque-facts-grid` in the Work tab: a start date
   and a contract type are short, and auto-fit lets four of them share a wide modal instead of two
   taking half a page each. A `.wide` cell still spans every column, so allowances and qualifications
   keep the full row they need. The cells themselves stay `.cheque-fact`, unchanged. */
.emp-facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 var(--ui-space-4)}
.emp-facts-grid .cheque-fact.wide{grid-column:1/-1}
.emp-work-actions{margin-top:var(--ui-space-3);flex-wrap:wrap;gap:var(--ui-space-2)}
/* The status badge and the linked system user read as one block at the end of the identity row. */
.emp-identity-side{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;justify-content:flex-end}
.emp-identity-user{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);unicode-bidi:isolate}
/* The KPI strip needs no rule of its own: `.ui-financial-summary` already wraps at auto-fit/150px,
   which is exactly the behaviour wanted here. The class stays on the element as a hook, deliberately
   without a duplicate declaration that would drift from the shared one. */

/* Payroll figure: ONE primary number, everything else subordinate to it. */
.emp-figure{display:flex;align-items:flex-end;gap:var(--ui-space-4);flex-wrap:wrap;padding-bottom:var(--ui-space-3);border-bottom:1px solid var(--ui-line)}
.emp-figure-main small{display:block;color:var(--ui-muted);font-size:var(--ui-font-xs);margin-bottom:2px}
.emp-figure-main b{font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.emp-figure-side{display:flex;gap:var(--ui-space-4);flex-wrap:wrap;padding-bottom:4px}
.emp-figure-side span{display:flex;flex-direction:column;gap:2px}
.emp-figure-side small{color:var(--ui-muted);font-size:var(--ui-font-xs)}
.emp-figure-side b{font-size:var(--ui-font-sm);font-variant-numeric:tabular-nums}

/* Slip breakdown: alignment and typography do the work, not tiles. */
.emp-breakdown{display:grid;gap:var(--ui-space-1)}
.emp-breakdown{max-width:360px}
.emp-breakdown-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ui-space-3);padding:5px 0;border-bottom:1px dashed var(--ui-cell-line)}
.emp-breakdown-row span{color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}
.emp-breakdown-row b{font-variant-numeric:tabular-nums;font-size:var(--ui-font-sm)}
.emp-breakdown-row.is-total{border-bottom:0;border-top:1px solid var(--ui-line);margin-top:4px;padding-top:9px}
.emp-breakdown-row.is-total span,.emp-breakdown-row.is-total b{font-size:var(--ui-font-base,15px);font-weight:800;color:var(--ui-text)}

/* Inline help: replaces permanently-printed accounting explanations. */
.emp-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--ui-line);color:var(--ui-muted);font-size:10px;font-weight:700;cursor:help;margin-inline-start:5px;vertical-align:middle;line-height:1}

/* Notes stay small until the operator needs more. */
.emp-form textarea,.emp-note{min-height:calc(var(--ui-control) + 6px);resize:vertical}

/* Payroll preparation reads as a payslip under review, not a form: one dominant net figure, a strip of
   contributing amounts, then accordions that stay closed until the manager wants to inspect a part. */
.emp-review-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap;padding-bottom:var(--ui-space-2);border-bottom:1px solid var(--ui-line)}
.emp-review-head b{font-size:var(--ui-font-sm)}
.emp-review-head .emp-review-meta{color:var(--ui-muted);font-size:var(--ui-font-xs)}
.emp-strip{display:flex;align-items:flex-end;justify-content:flex-start;gap:var(--ui-space-3) var(--ui-space-4);flex-wrap:wrap;padding:var(--ui-space-3) 0;border-bottom:1px solid var(--ui-line)}
.emp-strip-item{display:flex;flex-direction:column;gap:2px;min-width:0}
.emp-strip-item small{color:var(--ui-muted);font-size:var(--ui-font-xs);white-space:nowrap}
.emp-strip-item b{font-size:var(--ui-font-sm);font-variant-numeric:tabular-nums;color:var(--ui-text-secondary)}
.emp-strip-item.is-minus b{color:var(--ui-warning)}
.emp-strip-net{padding-inline-start:var(--ui-space-4);border-inline-start:1px solid var(--ui-line)}
.emp-strip-net small{display:block;color:var(--ui-muted);font-size:var(--ui-font-xs)}
.emp-strip-net b{font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--blue-dark)}
.emp-acc{border:1px solid var(--ui-line);border-radius:var(--ui-radius);overflow:hidden}
.emp-acc+.emp-acc{margin-top:var(--ui-space-2)}
.emp-acc>summary{display:flex;align-items:center;gap:var(--ui-space-2);padding:9px 12px;cursor:pointer;list-style:none;background:var(--ui-surface-subtle);font-size:var(--ui-font-xs)}
.emp-acc>summary::-webkit-details-marker{display:none}
.emp-acc>summary:before{content:"\25B8";color:var(--ui-muted);font-size:11px;transition:transform .15s;display:inline-block}
.emp-acc[open]>summary:before{transform:rotate(90deg)}
.emp-acc>summary>b{font-weight:var(--ui-weight-filter)}
.emp-acc>summary>.emp-acc-sum{margin-inline-start:auto;color:var(--ui-muted);font-variant-numeric:tabular-nums}
.emp-acc-body{padding:10px 12px;background:var(--ui-card)}
.emp-acc-row{display:flex;align-items:center;justify-content:flex-start;gap:var(--ui-space-3);padding:6px 0;border-bottom:1px dashed var(--ui-cell-line);flex-wrap:wrap;max-width:560px}
.emp-acc-row:last-child{border-bottom:0}
.emp-acc-row .k{flex:0 1 auto;width:210px;min-width:0;font-size:var(--ui-font-xs);overflow-wrap:anywhere}
.emp-acc-row .v{width:110px;text-align:start}
.emp-acc-row .emp-acc-note{color:var(--ui-muted);font-size:10px;white-space:nowrap}
.emp-acc-row .v{font-variant-numeric:tabular-nums;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);white-space:nowrap}
.emp-acc-row input[type=number]{max-width:120px}
.emp-acc-row .emp-rate{max-width:150px}
.emp-acc-empty{color:var(--ui-muted);font-size:var(--ui-font-xs);padding:4px 0}


/* Field grouping inside forms/modals — built only from existing ui tokens, no new palette. */
.ui-fieldset{border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:var(--ui-space-3);margin-block:var(--ui-space-3);min-width:0}
.ui-fieldset>legend{padding-inline:var(--ui-space-2);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);color:var(--ui-muted)}
/* Offer Builder (منشئ العروض) — two-pane layout: structured form (scrolls with the modal) + a sticky
   live-text preview column. Built entirely from existing tokens/.emp-form/.ui-fieldset/.row-card. */
.offer-builder-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--ui-space-4);align-items:start}
.offer-builder-form{min-width:0}
.offer-builder-preview{position:sticky;top:0;display:grid;gap:var(--ui-space-2);min-width:0}
.offer-builder-preview textarea{width:100%;font-family:inherit;line-height:1.6;resize:vertical}
.offer-builder-actions{display:flex;flex-wrap:wrap;gap:8px}
.offer-resync-hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--ui-font-xs);color:var(--ui-warning);background:var(--ui-warning-bg);border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);padding:6px 10px}
.offer-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.offer-block-head b{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);font-weight:var(--ui-weight-strong)}
.offer-block-empty{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);padding:6px 0}
.offer-line-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.offer-line-row input{flex:1 1 auto;min-width:0}
/* §O — إجمالي المسافرين: editable total + a small "إعادة الحساب" icon button that only appears
   once the employee has manually overridden the auto-computed sum. */
.offer-travelers-total-field{display:flex;gap:6px;align-items:center}
.offer-travelers-total-field input{flex:1 1 auto;min-width:0}
.offer-travelers-total-field button{flex:0 0 auto}
/* §RoundP7-K — snippet-insert row: labeled select + a "manage snippets" action beside it. */
.offer-snippet-insert-row{display:flex;align-items:flex-end;gap:var(--ui-space-2);margin-bottom:var(--ui-space-3);flex-wrap:wrap}
.offer-snippet-insert-select{flex:1 1 240px;min-width:200px}
/* §RoundP7-S — canonical-list-backed inputs (airline/hotel/service, all already reading
 * App.settings.airlines/hotels/serviceTypes via <datalist>) get a search-icon affordance so they
 * read as "pick from a list, or type" rather than a plain text field — browsers don't allow styling
 * the datalist popup itself, so this is presentation-only on the input, not a new combobox widget. */
.offer-suggest-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c93a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:14px;padding-right:28px}
@media(max-width:900px){.offer-builder-grid{grid-template-columns:minmax(0,1fr)}.offer-builder-preview{position:static}}
/* Booking Execution Follow-up — reuses .ui-toolbar/.ui-table-wrap/.ui-data-table/.row-card as-is; the
   only new primitive is this compact checkbox+label pair for toolbar/dialog "show completed" toggles. */
/* ==========================================================================================
   THE DASHBOARD — A COLUMN FLOW, NOT A GRID OF ROWS.

   The previous version was a twelve-column dense grid. Dense packing fixed holes left by MISSING
   blocks, but it could not fix the other kind of empty space: a grid ROW is as tall as its tallest
   member, so a long list beside a short card leaves the short one floating above a gap. That gap is
   what the owner was looking at.

   So the detail blocks are not in a grid at all. `.dash-columns` is a CSS multi-column flow: blocks
   pack by HEIGHT, each takes only the room it needs, and a block that disappears is simply absent
   while everything after it moves up. There are no rows, so there is nothing to leave a hole in.
   `break-inside:avoid` keeps a block whole.

   The two full-width pieces sit outside that flow, because they are genuinely wide: the "today"
   strip (a row of small equal stats) and current trips (a card grid). Variation in block size is
   therefore real — wide, column, stat — rather than a grid span pretending to be one.

   Direction is inherited, never flipped: the document is RTL, so the first column is the right-hand
   column and every edge here is a logical property. Figures are the deliberate exception and are
   isolated LTR with tabular digits, so a column of counts lines up as a column.
   ========================================================================================== */
.dash-page{display:block}
.dash-section.is-gone,.dash-block.is-gone,.dash-lists.is-gone{display:none}

/* --- toolbar: title, ONE search control, actions. No panel, no field label, no refresh stamp. --- */
/* P1.4 — THE SEARCH IS CENTRED IN THE PAGE, not merely "after the title".
   Three grid tracks with the outer two sharing one flexible size: whatever the title and the action
   cluster measure, the middle track stays in the page's optical centre. A flex row cannot do this —
   it centres the FREE SPACE, which moves as the buttons change. */
.dash-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--ui-space-3);margin-bottom:var(--ui-space-4)}
.dash-bar>h2{margin:0;font-size:var(--ui-section);line-height:1.35;color:var(--ui-heading);white-space:nowrap;justify-self:start}
.dash-bar-actions{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;justify-self:end}
.dash-icon-btn{width:var(--ui-control-sm);height:var(--ui-control-sm);flex:0 0 auto;display:grid;place-items:center;
 border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);color:var(--ui-text-secondary);cursor:pointer}
.dash-icon-btn:hover{background:var(--ui-row-hover);color:var(--ui-text)}
.dash-icon-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dash-icon-btn svg{width:16px;height:16px}
/* The icon lives INSIDE the field on the reading side — it was previously a separate tile in a card
   beside the input, which is what made a one-line control look like a section. */
/* P0.3 — WIDER, AND STILL CENTRED. `clamp` rather than a hard width: it grows with the page up to
   a comfortable typing width and shrinks below it without ever forcing the three toolbar tracks
   to overflow. The centring comes from the grid, not from the width. */
.dash-search{position:relative;width:clamp(240px,42vw,620px);min-width:0;display:flex;align-items:center;justify-self:center}
.dash-search>input{height:var(--ui-control)}
.dash-search-icon{position:absolute;inset-inline-start:11px;display:grid;place-items:center;color:var(--ui-muted);pointer-events:none}
.dash-search-icon svg{width:16px;height:16px}
.dash-search>input{width:100%;min-width:0;height:var(--ui-control-sm);padding-inline:34px var(--ui-space-3);
 border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-control-bg,var(--ui-card));color:var(--ui-text);font:inherit;font-size:var(--ui-font-sm)}
.dash-search>input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent)}
.dash-search .omni-results{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:40;margin:0;max-height:min(60vh,420px);overflow:auto;
 background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);padding:var(--ui-space-2)}
.dash-search .omni-results:empty{display:none;padding:0;border:0;box-shadow:none}

/* --- sections --- */
.dash-section{margin-bottom:var(--ui-section-gap)}
.dash-section-head{margin:0 0 var(--ui-space-2);font-size:var(--ui-font-strong);font-weight:var(--ui-weight-strong);color:var(--ui-text-secondary)}

/* TODAY: small, equal, self-fitting. Never fewer than 170px, so a label never has to be clipped. */
/* P1.7 — MANAGEMENT DENSITY. These cards hold a two-digit number and a short label; they were
   built at a size that would suit a headline figure, so six of them ate the first screen. Smaller
   icon, smaller figure, tighter padding — the information is unchanged and the row now reads at a
   glance instead of scrolling. */
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:var(--ui-space-2)}
.dash-stat{display:flex;align-items:center;gap:var(--ui-space-2);min-width:0;padding:var(--ui-space-2) var(--ui-space-3);
 border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);font:inherit;text-align:start;cursor:pointer;
 transition:background .15s,border-color .15s}
.dash-stat:hover{background:var(--ui-row-hover);border-color:color-mix(in srgb,var(--blue) 35%,var(--ui-line))}
.dash-stat:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dash-stat-icon{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;
 background:var(--blue-soft,var(--ui-surface-subtle));color:var(--blue)}
.dash-stat-icon svg{width:15px;height:15px}
.dash-stat-copy{display:grid;gap:1px;min-width:0}
.dash-stat-copy b{font-size:var(--ui-font-strong);line-height:1.35;font-weight:var(--ui-weight-heavy);color:var(--ui-heading);
 direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
/* The label WRAPS. It is the primary text of the card and is never ellipsised or tooltip-only. */
.dash-stat-copy small{font-size:var(--ui-font-xs);line-height:1.5;color:var(--ui-text-secondary);overflow-wrap:anywhere}
/* A zero today is still an answer, so it keeps its card — quietly. */
.dash-stat.is-quiet{background:var(--ui-surface-subtle)}
.dash-stat.is-quiet .dash-stat-icon{background:var(--ui-card);color:var(--ui-muted)}
.dash-stat.is-quiet .dash-stat-copy b{color:var(--ui-muted)}

/* --- blocks --- */
.dash-block{min-width:0;display:flex;flex-direction:column;gap:var(--ui-space-2);
 background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:var(--ui-space-3);box-shadow:var(--ui-shadow)}
/* The sales/collections trend was removed from the Dashboard by owner decision; its rules went
   with it rather than being left to style nothing. */
/* P2.3 — the active focus is stated, not implied: the owner must never be left asking which
   bookings the Dashboard meant. Same shell as the existing balance-filter banner so it reads as
   the same kind of thing, with a semantic edge because it arrived from somewhere. */
.booking-focus-banner{border-inline-start:3px solid var(--blue)}
.booking-focus-banner>span{font-weight:var(--ui-weight-strong);color:var(--ui-heading)}
.dash-wide{margin-bottom:var(--ui-section-gap)}
.dash-block-head{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;min-width:0}
.dash-block-icon{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;
 background:var(--ui-surface-subtle);color:var(--ui-text-secondary)}
.dash-block-icon svg{width:15px;height:15px}
/* A block title is primary information: it wraps, it is never clipped and never ellipsised. */
.dash-block-head h3{margin:0;flex:1 1 auto;min-width:0;font-size:var(--ui-font-strong);font-weight:var(--ui-weight-strong);
 color:var(--ui-heading);line-height:1.5;overflow-wrap:anywhere}
.dash-block-count{flex:0 0 auto;padding:2px 9px;border-radius:999px;background:var(--ui-surface-subtle);
 color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);
 direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
/* Controls take their own line rather than squeezing the title out of the way. */
.dash-block-controls{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;min-width:0;flex-basis:100%}
.dash-block-body{display:grid;gap:var(--ui-space-2);min-width:0}
.dash-cards{grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}
.dash-block-foot{margin-top:auto;padding-top:var(--ui-space-2);border-top:1px solid var(--ui-cell-line)}
.dash-block-foot button{width:100%;min-height:var(--ui-control-sm);border:0;border-radius:var(--ui-radius-xs);background:var(--ui-surface-subtle);
 color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);cursor:pointer}
.dash-block-foot button:hover{background:var(--ui-row-hover);color:var(--ui-text)}
.dash-none{padding:var(--ui-space-6);text-align:center;color:var(--ui-muted);background:var(--ui-card);
 border:1px dashed var(--ui-line);border-radius:var(--ui-radius)}

/* THE COLUMN FLOW. `columns` takes an IDEAL width, so the count follows the viewport with no
   breakpoint list to maintain: three across on a wide desktop, two on a laptop, one on a phone. */
/* P1.8 — TWO LISTS SIDE BY SIDE, AND NEITHER STRETCHED TO THE OTHER.
   `align-items:start` is what keeps a short "المغادرة خلال ٧ أيام" from being padded out to the
   height of a full current-trips grid. `auto-fit` with a real minimum means one list alone takes
   the whole width instead of leaving half the row empty — which is exactly what happens when the
   other is removed by permission or has nothing to say. */
.dash-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--ui-space-4);align-items:start;margin-bottom:var(--ui-section-gap)}
@media(min-width:1180px){.dash-lists{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}}

/* Money that needs chasing. Same row shape as the notification rows — one visual language. */
.dash-money-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-space-2);width:100%;min-width:0;
 padding:var(--ui-space-2);border:0;border-radius:var(--ui-radius-xs);background:transparent;font:inherit;text-align:start;cursor:pointer}
.dash-money-row:hover{background:var(--ui-row-hover)}
.dash-money-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.dash-money-row.is-due{background:var(--ui-warning-bg)}
.dash-money-copy{display:grid;gap:1px;min-width:0}
.dash-money-copy b{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-medium);color:var(--ui-text);line-height:1.5;overflow-wrap:anywhere}
.dash-money-copy small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.45;overflow-wrap:anywhere}
/* Each amount carries its own currency and is isolated LTR. Currencies are never summed. */
.dash-money-row>em{flex:0 0 auto;font-style:normal;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-text);
 unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}

@media(max-width:820px){
 /* Below this the three tracks cannot all hold their content, so the search takes its own line and
    stays centred there rather than being squeezed between the title and the buttons. */
 .dash-bar{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--ui-space-2)}
 .dash-search{grid-column:1/-1;width:100%;order:3}
}
/* phone (Phase 4 / Round 5 owner review): the title and the two buttons no longer fit one line - the title takes its own
   line instead of running under the buttons */
@media(max-width:480px){.dash-bar>h2{grid-column:1/-1}.dash-bar-actions{grid-column:1/-1;justify-self:start}}

/* P2 — THE NOTIFICATION CENTRE AS FOUR BLOCKS.
   Same card shell, radius, borders and spacing tokens as the dashboard blocks — this is the shared
   visual language, not a second one. Four across on a wide screen, two on a tablet, one when narrow.
   A block never grows its own scrollbar: it shows a few rows and a "عرض الكل" that expands it in
   place, so the page keeps the single vertical scroll. */
/* Explicit counts rather than auto-fit: at this page's width auto-fit lands on THREE columns and
   leaves the fourth block alone on its own row, which reads as a mistake. Four across, then a
   balanced 2x2, then one — never 3+1. */
/* P3.2 — THE FOUR CARDS ARE A ROW, NOT FOUR INDEPENDENT COLUMNS.
   `align-items:start` left them at 270/593/710/116 — a ragged edge that reads as four unrelated
   panels rather than one view of the same question. `stretch` gives the row a single height and
   the footers line up, because .notif-block-foot already pushes itself to the bottom. */
.notif-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-space-4);align-items:stretch}
@media(max-width:1400px){.notif-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.notif-grid{grid-template-columns:minmax(0,1fr)}}
.notif-block{display:flex;flex-direction:column;gap:var(--ui-space-2);min-width:0;
 background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:var(--ui-space-4);box-shadow:var(--ui-shadow)}
.notif-block.has-urgent{border-inline-start:4px solid var(--ui-danger)}
.notif-block-head{display:flex;align-items:center;gap:var(--ui-space-2);min-width:0}
.notif-block-icon{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:var(--ui-surface-subtle);color:var(--ui-text-secondary)}
.notif-block-icon svg{width:16px;height:16px}
.notif-block-head h3{margin:0;flex:1 1 auto;min-width:0;font-size:var(--ui-font-strong);font-weight:var(--ui-weight-strong);color:var(--ui-heading);line-height:1.5;overflow-wrap:anywhere}
.notif-block-count{flex:0 0 auto;min-width:26px;text-align:center;padding:2px 8px;border-radius:999px;background:var(--ui-surface-subtle);color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong)}
.notif-block-count.is-urgent{background:var(--ui-danger-bg);color:var(--ui-danger)}
/* P3.2 — ONE CATEGORY MUST NOT SET THE HEIGHT OF ALL FOUR.
   Expanding "حجوزات ورحلات" to 58 rows used to stretch the page and leave the other three cards as
   short stubs beside a column of alerts. An EXPANDED body now scrolls within its own card instead:
   the four cards stay the same size, their headers stay visible, and the page keeps one scroll
   until someone deliberately opens a category. A collapsed body is six rows and never scrolls, so
   the nested scrollbar exists only where it was asked for. */
.notif-block-body{display:grid;gap:var(--ui-space-1);min-width:0}
/* And the body is bounded whether collapsed or expanded, so the tallest category can never set
   the height of the row — which is what it did when one of them held 58 alerts. */
.notif-block-body{max-height:min(42vh,380px);overflow-y:auto;overscroll-behavior:contain}
.notif-block-body.is-expanded{max-height:min(46vh,420px);padding-inline-end:2px}
.notif-block{max-height:none}
/* A row is the whole button: title and detail on the reading side, time and amount trailing.
   Neither side is ellipsised — a truncated alert is an alert nobody acts on. */
.notif-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-space-2);width:100%;min-width:0;
 padding:var(--ui-space-2);border:0;border-radius:var(--ui-radius-xs);background:transparent;font:inherit;text-align:start;cursor:pointer}
.notif-row:hover{background:var(--ui-row-hover)}
.notif-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.notif-row.is-due{background:var(--ui-warning-bg)}
.notif-row.is-due:hover{background:color-mix(in srgb,var(--ui-warning-bg) 80%,var(--ui-warning) 8%)}
.notif-row-main{display:grid;gap:1px;min-width:0;flex:1 1 auto;justify-items:start;text-align:start}
.notif-row-main b{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-medium);color:var(--ui-text);line-height:1.5;overflow-wrap:anywhere}
.notif-row-main small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.45;overflow-wrap:anywhere}
.notif-row-side{display:grid;gap:1px;justify-items:end;flex:0 0 auto;text-align:end}
.notif-row-side em{font-style:normal;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-text);unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.notif-row-side time{font-size:10px;color:var(--ui-muted);white-space:nowrap}
.notif-block-foot{margin-top:auto;padding-top:var(--ui-space-2);border-top:1px solid var(--ui-cell-line)}
.notif-block-foot button{width:100%;min-height:var(--ui-control-sm);border:0;border-radius:var(--ui-radius-xs);background:var(--ui-surface-subtle);
 color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);cursor:pointer}
.notif-block-foot button:hover{background:var(--ui-row-hover);color:var(--ui-text)}
.notif-empty{margin:0;padding:var(--ui-space-3) 0;color:var(--ui-muted);font-size:var(--ui-font-xs)}
.notif-empty-all{text-align:center;padding:var(--ui-space-6)}
/* Read lifecycle. A read row stays where it was and loses its emphasis — it is not hidden, because
   this page exists to look back at what was raised. The dot is the unread marker and disappears on
   read; colour alone never carries the state, the row's aria-label says it too. */
.notif-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap;margin-bottom:var(--ui-space-3)}
.notif-toolbar-count{font-size:var(--ui-font-sm);color:var(--ui-text-secondary)}
.notif-toolbar-count b{color:var(--ui-heading);font-weight:var(--ui-weight-heavy);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
/* The bell's own read-all: a quiet link in the panel header, not a menu row. */
.bell-title{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2)}
.bell-readall{border:0;background:transparent;color:var(--blue);font:inherit;font-size:var(--ui-font-xs);
 font-weight:var(--ui-weight-strong);cursor:pointer;padding:2px 4px;border-radius:var(--ui-radius-xs)}
.bell-readall:hover{background:var(--ui-row-hover)}
.bell-readall:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.notif-readall{min-height:var(--ui-control-sm);padding-inline:var(--ui-space-4);border:1px solid var(--ui-line);border-radius:999px;
 background:var(--ui-card);color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);cursor:pointer}
.notif-readall:hover{background:var(--ui-row-hover);color:var(--ui-text)}
.notif-row-dot{flex:0 0 auto;width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--blue)}
.notif-row.is-read{opacity:.62}
.notif-row.is-read .notif-row-dot{background:transparent}
.notif-row.is-read .notif-row-main b{font-weight:var(--ui-weight-filter);color:var(--ui-text-secondary)}
.notif-block-unread{flex:0 0 auto;padding:2px 8px;border-radius:999px;background:var(--ui-info-bg);color:var(--ui-info);
 font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);white-space:nowrap}
.notif-block-unread.is-urgent{background:var(--ui-danger-bg);color:var(--ui-danger)}
.notif-block-foot{display:flex;gap:var(--ui-space-2)}
.notif-block-foot button{flex:1 1 0}

/* P1 — the attention strip. Same card shell, radius, borders and spacing tokens as every other
   card in the system; the only thing it adds is a semantic left edge, because these cards exist to
   be triaged by colour at a glance. The number leads, the label follows, and the whole card is the
   button — there is no separate "open" affordance to hunt for. */
/* It is the body of a .dash-section, which owns the spacing below it, so it carries no margin of
   its own. Same minimum width as the today strip so the two rows above the fold read as a pair. */
.dash-attention{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:var(--ui-space-2)}
.dash-attention-card{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;
 padding:var(--ui-space-2) var(--ui-space-3);border:1px solid var(--ui-line);border-inline-start:3px solid var(--ui-line);
 border-radius:var(--ui-radius);background:var(--ui-card);font:inherit;text-align:start;cursor:pointer;transition:background .15s,border-color .15s}
.dash-attention-card:hover{background:var(--ui-row-hover)}
.dash-attention-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Arabic ascenders and descenders overflow a tight line box; 1.1 left the figure's glyphs
   running past their line and crowding the label beneath it. These line-heights give the text
   its own room — nothing is clipped either way, but the card reads cleanly now. Figures are
   isolated LTR with tabular digits so a column of counts aligns. */
.dash-attention-card>b{font-size:var(--ui-section);line-height:1.35;font-weight:var(--ui-weight-heavy);color:var(--ui-heading);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.dash-attention-card>small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.5;overflow-wrap:anywhere}
.dash-attention-card.tone-danger{border-inline-start-color:var(--ui-danger);background:var(--ui-danger-bg)}
.dash-attention-card.tone-danger>b{color:var(--ui-danger)}
.dash-attention-card.tone-warning{border-inline-start-color:var(--ui-warning);background:var(--ui-warning-bg)}
.dash-attention-card.tone-warning>b{color:var(--ui-warning)}
.dash-attention-card.tone-info{border-inline-start-color:var(--ui-info);background:var(--ui-info-bg)}
.dash-attention-card.tone-info>b{color:var(--ui-info)}
/* A zero keeps its card but loses its urgency — "nothing overdue" is information, not an alarm. */
.dash-attention-card.is-calm{background:var(--ui-card)}
.dash-attention-card.is-calm>b{color:var(--ui-muted)}
/* The finance head: period on one side, freshness and manual refresh on the other. */
.dash-finance-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap;margin-bottom:var(--ui-space-2)}
.dash-finance-meta{display:flex;align-items:center;gap:var(--ui-space-3);flex-wrap:wrap;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.dash-refresh-btn{display:inline-flex;align-items:center;gap:5px;height:var(--ui-control-sm);padding:0 var(--ui-space-3);
 border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-card);color:var(--ui-text-secondary);
 font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);cursor:pointer}
.dash-refresh-btn:hover{background:var(--ui-row-hover);color:var(--ui-text)}
.dash-refresh-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.dash-refresh-btn svg{width:14px;height:14px}
/* A metric card with no movement in any currency says so once. */
.followup-vnext-currency-lines .is-empty b{color:var(--ui-muted);font-weight:var(--ui-weight-filter)}
.execution-toolbar-check{display:flex;align-items:center;gap:6px;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);color:var(--ui-text);cursor:pointer;white-space:nowrap}
/* §C6 — one compact clickable counter chip replaces three raw number columns (الإجمالي/الجاهزة/
   المتبقية). Color communicates progress at a glance without inventing a new palette. */
.exec-counter-chip{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 10px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface-subtle);color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);cursor:pointer}
.exec-counter-chip:hover{background:var(--ui-row-hover)}
.exec-counter-chip span{color:var(--ui-text-secondary)}
.exec-counter-chip.is-partial{background:var(--ui-warning-bg);border-color:transparent;color:var(--ui-warning)}
.exec-counter-chip.is-partial span{color:var(--ui-warning)}
.exec-counter-chip.is-full{background:var(--ui-success-bg);border-color:transparent;color:var(--ui-success)}
.exec-counter-chip.is-full span{color:var(--ui-success)}
/* P4 — THE FOUR OPERATIONAL BLOCKS.
   Same card shell, radius, borders and spacing tokens as the dashboard and the notification centre;
   the only thing a block adds is a semantic leading edge, because these four exist to be triaged by
   colour at a glance. A block never scrolls itself — it shows a few cards and expands in place, so
   the page keeps the single vertical scroll. */
.exec-block{margin-bottom:var(--ui-space-4);background:var(--ui-card);border:1px solid var(--ui-line);
 border-inline-start:3px solid var(--ui-line);border-radius:var(--ui-radius);padding:var(--ui-space-3);box-shadow:var(--ui-shadow)}
.exec-block.tone-danger{border-inline-start-color:var(--ui-danger)}
.exec-block.tone-warning{border-inline-start-color:var(--ui-warning)}
.exec-block.tone-info{border-inline-start-color:var(--ui-info)}
.exec-block.tone-calm{border-inline-start-color:var(--ui-line)}
/* An empty block keeps its place and says so: on this page "nothing is overdue" is an answer worth
   reading, unlike on the dashboard where a silent block is the better one. */
.exec-block.is-quiet{background:var(--ui-surface-subtle);box-shadow:none}
.exec-block.is-focused{outline:2px solid var(--blue);outline-offset:2px}
.exec-block-head{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;min-width:0;margin-bottom:var(--ui-space-2)}
.exec-block-icon{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:var(--ui-surface-subtle);color:var(--ui-text-secondary)}
.exec-block-icon svg{width:15px;height:15px}
.exec-block-head h3{margin:0;flex:1 1 auto;min-width:0;font-size:var(--ui-font-strong);font-weight:var(--ui-weight-strong);color:var(--ui-heading);line-height:1.5;overflow-wrap:anywhere}
.exec-block-count{flex:0 0 auto;padding:2px 9px;border-radius:999px;background:var(--ui-surface-subtle);color:var(--ui-text-secondary);
 font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.exec-block-foot{margin-top:var(--ui-space-3);padding-top:var(--ui-space-2);border-top:1px solid var(--ui-cell-line)}
.exec-block-foot button{width:100%;min-height:var(--ui-control-sm);border:0;border-radius:var(--ui-radius-xs);background:var(--ui-surface-subtle);
 color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);cursor:pointer}
.exec-block-foot button:hover{background:var(--ui-row-hover);color:var(--ui-text)}
.exec-empty{margin:0;color:var(--ui-muted);font-size:var(--ui-font-xs)}
/* P4.2 — the same management density as the Dashboard: these cards carry five short lines and were
   sized as if they carried a paragraph. Tighter padding and gaps, one more card per row. */
.exec-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--ui-space-2)}
.exec-card{display:flex;flex-direction:column;gap:4px;min-width:0;padding:var(--ui-space-2) var(--ui-space-3);
 border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)}
.exec-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);flex-wrap:wrap}
.exec-card-ref{font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-text-secondary);unicode-bidi:isolate;font-variant-numeric:tabular-nums}
/* Customer, destination and status are primary text: they wrap, they are never ellipsised, and no
   tooltip stands in for any of them. */
.exec-card-customer{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);color:var(--ui-heading);line-height:1.5;overflow-wrap:anywhere}
.exec-card-meta{margin:0;display:flex;gap:var(--ui-space-3);flex-wrap:wrap;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.5;overflow-wrap:anywhere}
.exec-card-note{margin:0;padding:6px 8px;border-radius:var(--ui-radius-xs);background:var(--ui-card);
 font-size:var(--ui-font-xs);color:var(--ui-text);line-height:1.55;overflow-wrap:anywhere}
.exec-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);flex-wrap:wrap;margin-top:auto;padding-top:6px}
.exec-card-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.exec-service-modal{max-width:720px}
.exec-service-modal .modal-toolbar{align-items:center;gap:10px}
/* A modal is content-sized, never page-sized: the page-list empty-state floor (min-height above) would
   otherwise reserve a full empty band under every nested empty table inside a modal or drawer. */
.modal-box .ui-list-shell,.accounting-drawer .ui-list-shell{min-height:0}.ui-table-wrap,.unified-table-wrap,.accounting-table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;border:1px solid var(--ui-line);border-radius:11px;background:var(--ui-card)}.ui-data-table,.unified-table,.accounting-table{width:100%;border-collapse:collapse;table-layout:auto;font-size:var(--ui-font);min-width:0}.ui-data-table th,.unified-table th,.accounting-table th{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);color:var(--ui-text-secondary);background:var(--ui-table-head-bg);padding:var(--ui-space-3);text-align:right;white-space:nowrap;border-bottom:1px solid var(--ui-line)}.ui-data-table td,.unified-table td,.accounting-table td{padding:var(--ui-space-3);border-bottom:1px solid var(--ui-cell-line);vertical-align:middle;white-space:nowrap}.ui-data-table tbody tr,.unified-table tbody tr,.accounting-table tbody tr{cursor:default}.ui-data-table tbody tr[onclick],.unified-table tbody tr[onclick]{cursor:pointer}.ui-data-table tbody tr:hover,.unified-table tbody tr:hover,.accounting-table tbody tr:hover{background:var(--ui-row-hover)}.ui-data-table tr:last-child td,.unified-table tr:last-child td,.accounting-table tr:last-child td{border-bottom:0}.cell-note{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);margin-top:var(--ui-space-1);white-space:normal}.table-link{border:0;background:none;color:var(--blue-dark);font:inherit;font-weight:850;cursor:pointer;padding:0}.phone-ltr{direction:ltr;text-align:right;display:inline-block}
.row-actions,.table-actions{display:flex;align-items:center;gap:5px;white-space:nowrap}.input-action-row{display:flex;align-items:center;gap:var(--ui-space-2)}.input-action-row>input,.input-action-row>select{min-width:0;flex:1}.input-action-row>.btn{flex:0 0 auto}.ui-record-actions{display:inline-flex;flex-direction:row;align-items:center;gap:var(--ui-space-1);flex-wrap:nowrap}.ui-record-actions>.ui-action-menu{flex:0 0 auto}.ui-icon-btn,.icon-btn,.table-actions>button,.table-actions>.mini-menu-wrap>button{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-card);color:var(--ui-text-secondary);cursor:pointer;font-size:15px}.ui-icon-btn:hover,.icon-btn:hover{border-color:var(--blue);color:var(--blue-dark);background:var(--ui-surface-muted)}.ui-icon-btn.danger,.icon-btn.danger,.ui-icon-btn.danger-icon{color:var(--ui-danger)}.ui-icon-btn.is-whatsapp{color:#25d366;border-color:color-mix(in srgb,#25d366 35%,var(--ui-line))}.ui-icon-btn.is-whatsapp:hover{color:#1da851;border-color:#25d366;background:color-mix(in srgb,#25d366 10%,var(--ui-card))}.ui-action-icon{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ui-page-action-menu{position:relative;display:inline-flex}.ui-page-action-popover{position:absolute;z-index:95;top:calc(100% + var(--ui-space-1));left:0;min-width:220px;padding:var(--ui-space-1);background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);box-shadow:0 12px 28px rgba(15,45,56,.14)}.ui-page-action-popover button{width:100%;display:flex;align-items:center;gap:var(--ui-space-2);padding:var(--ui-space-2) var(--ui-space-3);border:0;border-radius:var(--ui-radius-xs);background:transparent;color:var(--ui-text);font:inherit;text-align:right;cursor:pointer}.ui-page-action-popover button:hover{background:var(--ui-surface-muted)}.ui-page-action-popover button.danger{color:var(--ui-danger)}.ui-page-action-popover svg{width:17px;height:17px}.ui-page-action-popover b{font-weight:var(--ui-weight-medium)}
.ui-action-menu{position:relative}.ui-action-popover{position:absolute;z-index:80;top:calc(100% + 5px);left:0;min-width:180px;padding:var(--ui-space-1);background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);box-shadow:0 12px 28px rgba(15,45,56,.14)}.ui-action-popover button{display:block;width:100%;border:0;background:none;padding:var(--ui-space-2) var(--ui-space-3);border-radius:var(--ui-radius-xs);text-align:right;font-family:inherit;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-medium);color:var(--ui-text);cursor:pointer}.ui-action-popover button:hover{background:var(--ui-surface-muted)}.ui-action-popover button.danger{color:var(--ui-danger)}
.ui-badge,.soft-badge,.invoice-state{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:850;line-height:1}.ui-badge+.ui-badge{margin-inline-start:var(--ui-space-1)}.ui-badge.neutral,.ui-badge.info,.soft-badge,.ui-badge.participant,.ui-badge.credit-us{background:var(--ui-info-bg);color:var(--ui-info)}.ui-badge.leader,.ui-badge.confirmed_pending,.ui-badge.soon,.ui-badge.partial,.ui-badge.overdue,.ui-badge.credit-party{background:var(--ui-warning-bg);color:var(--ui-warning)}.ui-badge.confirmed,.ui-badge.current,.ui-badge.paid{background:var(--ui-success-bg);color:var(--ui-success)}.ui-badge.draft,.ui-badge.upcoming{background:var(--ui-surface-muted);color:var(--ui-text-secondary)}.ui-badge.cancelled,.ui-badge.void{background:var(--ui-danger-bg);color:var(--ui-danger)}
.ui-money{display:inline-flex;align-items:baseline;gap:var(--ui-space-1);direction:ltr}.ui-money b{font-size:var(--ui-font);color:var(--ui-text)}.ui-money small{font-size:var(--ui-font-xs);color:var(--ui-muted);font-weight:var(--ui-weight-medium)}.ui-money.positive b{color:var(--ui-success)}.ui-money.negative b{color:var(--ui-danger)}
.ui-context-actions{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap}.ui-context-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-2)}
.ui-financial-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--ui-space-2);width:100%}.ui-financial-summary-item{min-width:0;padding:var(--ui-space-3);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}.ui-financial-summary-item small{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-medium);margin-bottom:var(--ui-space-1)}.ui-financial-summary-item>.ui-money b,.ui-financial-summary-item>b{font-size:var(--ui-font-strong);font-weight:var(--ui-weight-heavy);color:var(--ui-text)}.ui-financial-summary-item.status{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.ui-transaction-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--ui-space-2);margin-top:var(--ui-space-3);padding:var(--ui-space-3);border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-surface-subtle)}.ui-transaction-preview>span{min-width:0}.ui-transaction-preview small{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);margin-bottom:var(--ui-space-1)}.ui-transaction-preview b{display:block;color:var(--ui-text);font-size:var(--ui-font);overflow-wrap:anywhere}.ui-transaction-preview .wide{grid-column:1/-1}
.ui-empty,.empty-state{min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ui-muted);padding:12px;text-align:center}.ui-empty b{color:var(--ui-text-secondary)}.ui-empty span{font-size:var(--ui-font-xs)}
.ui-tabs,.payments-view-tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;overflow:visible;border-bottom:1px solid var(--ui-line);margin-bottom:12px;padding:0 2px}.ui-tabs button,.payments-view-tabs .pill{border:0!important;border-radius:8px 8px 0 0!important;background:transparent!important;color:var(--ui-text-secondary)!important;min-height:42px;padding:0 18px;font-weight:800;position:relative}.ui-tabs button.active,.payments-view-tabs .pill.active{color:var(--blue-dark)!important}.ui-tabs button.active:after,.payments-view-tabs .pill.active:after{content:'';position:absolute;right:10px;left:10px;bottom:-1px;height:3px;border-radius:3px;background:var(--blue)}
.ui-drawer-tabs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--ui-line);padding:0 var(--ui-space-3);background:var(--ui-card)}.ui-drawer-tabs button{border:0;border-radius:8px 8px 0 0;background:none;min-height:44px;padding:0 var(--ui-space-4);font-family:inherit;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);color:var(--ui-text-secondary);cursor:pointer;border-bottom:3px solid transparent;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.ui-drawer-tabs button:hover{color:var(--blue-dark);background:var(--ui-surface-muted)}.ui-drawer-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}.ui-drawer-tabs button.active{color:var(--blue-dark);border-bottom-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,transparent)}
/* Generic disclosure/collapse primitive — native <details>/<summary> (same semantics as the existing
   .data-advanced summary pattern in data-management), styled once centrally so any long section
   (passengers, completed tasks, historical rows...) reuses one shared look instead of a local one. */
.ui-collapsible{border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card);margin:var(--ui-space-3) 0}
.ui-collapsible>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);padding:var(--ui-space-3) var(--ui-space-4);font-weight:var(--ui-weight-strong);color:var(--ui-text);user-select:none;border-radius:var(--ui-radius)}
.ui-collapsible>summary::-webkit-details-marker{display:none}
.ui-collapsible>summary:after{content:'';flex:0 0 auto;width:8px;height:8px;border-inline-end:2px solid var(--ui-text-secondary);border-bottom:2px solid var(--ui-text-secondary);transform:rotate(45deg);transition:transform .15s ease}
.ui-collapsible[open]>summary:after{transform:rotate(-135deg)}
.ui-collapsible>summary:hover{background:var(--ui-row-hover)}
.ui-collapsible>summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.ui-collapsible[open]>summary{border-bottom:1px solid var(--ui-line);border-radius:var(--ui-radius) var(--ui-radius) 0 0}
.ui-collapsible-body{padding:var(--ui-space-3) var(--ui-space-4) var(--ui-space-4)}
/* Dashboard */
.alert-list,.timeline-list,.task-list,.current-trips-list{display:grid;gap:var(--ui-space-2);padding:var(--ui-space-2) var(--ui-space-3);min-height:0;flex:1;overflow:visible;max-height:none}.alert-item,.task-item{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:var(--ui-space-2);background:var(--ui-surface-subtle);color:var(--ui-text)}.alert-item{cursor:pointer;border-inline-start:4px solid var(--ui-info)}.alert-item:hover{background:var(--ui-row-hover);border-color:color-mix(in srgb,var(--blue) 35%,var(--ui-line))}.alert-item.urgent{border-inline-start-color:var(--ui-danger);background:var(--ui-danger-bg)}.alert-item.flight{border-inline-start-color:var(--blue)}.alert-item.hotel{border-inline-start-color:var(--ui-warning)}.alert-item.return{border-inline-start-color:var(--ui-info)}.compact-alert-list{grid-template-columns:repeat(2,minmax(0,1fr));min-height:40px}.compact-alert-list .empty-state{grid-column:1/-1}.notification-center-card{min-height:0}.notification-center-card .alert-list{padding:var(--ui-space-1) var(--ui-space-3)}.omni-search-shell{max-width:720px;margin-bottom:var(--ui-space-3)}.omni-search-content label{font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-text-secondary)}.omni-search-content input{font-size:var(--ui-font);background:var(--ui-control-bg)}
/* Bookings */
.booking-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ui-space-2);margin-bottom:var(--ui-space-3)}.booking-stat-card{min-height:70px;padding:var(--ui-space-3);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:none;display:flex;align-items:center;gap:var(--ui-space-2);background:var(--ui-card);color:var(--ui-text)}.booking-stat-card strong{display:block;font-size:var(--ui-financial);line-height:1.2;color:var(--ui-text);font-weight:var(--ui-weight-heavy)}.booking-stat-card small{display:block;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);margin-top:var(--ui-space-1)}.booking-stat-card small em{display:block;font-style:normal;font-size:var(--ui-font-xs);color:var(--ui-muted);margin-top:2px}.booking-stat-icon{width:32px;height:32px;flex:0 0 32px;border-radius:var(--ui-radius-sm);display:grid;place-items:center;background:var(--ui-info-bg);color:var(--ui-info)}.booking-stat-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.stat-current .booking-stat-icon{background:var(--ui-success-bg);color:var(--ui-success)}.stat-soon .booking-stat-icon{background:var(--ui-warning-bg);color:var(--ui-warning)}.stat-draft .booking-stat-icon,.stat-archive .booking-stat-icon{background:var(--ui-surface-muted);color:var(--ui-text-secondary)}.booking-toolbar{margin-bottom:var(--ui-space-3);display:grid;grid-template-columns:minmax(260px,1.25fr) minmax(116px,.72fr) minmax(116px,.72fr) minmax(142px,.88fr) minmax(96px,.58fr) minmax(92px,.55fr) minmax(88px,.52fr);gap:var(--ui-space-2)}.booking-toolbar .booking-search-box{min-width:0;width:100%}.booking-toolbar .booking-search-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent)}.booking-toolbar .booking-search-box svg{width:18px;height:18px;fill:none;stroke:var(--ui-text-secondary);stroke-width:2;flex:0 0 auto}.booking-toolbar .booking-filter-select{width:100%;min-width:0;min-height:var(--ui-control)}.booking-toolbar .booking-archive-toggle{min-height:var(--ui-control);display:flex;align-items:center;gap:var(--ui-space-2);padding-inline:var(--ui-space-3);margin:0;white-space:nowrap;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);font-size:var(--ui-font-sm)}.booking-toolbar .booking-archive-toggle input{width:auto}.booking-status-dock{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;padding:var(--ui-space-2);margin:0 0 var(--ui-space-3);background:var(--ui-card);border:1px dashed var(--ui-line);border-radius:var(--ui-radius)}.booking-status-dock .dock-label{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);font-weight:var(--ui-weight-strong)}.status-drop-zone{padding:6px 10px;border-radius:999px;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);border:1px solid transparent;transition:.15s}.status-drop-zone.confirmed{background:var(--ui-success-bg);color:var(--ui-success);border-color:color-mix(in srgb,var(--ui-success) 24%,var(--ui-line))}.status-drop-zone.draft{background:var(--ui-info-bg);color:var(--ui-info);border-color:color-mix(in srgb,var(--ui-info) 22%,var(--ui-line))}.status-drop-zone.void{background:var(--ui-danger-bg);color:var(--ui-danger);border-color:color-mix(in srgb,var(--ui-danger) 22%,var(--ui-line))}.status-drop-zone:hover{transform:translateY(-1px)}.bookings-unified-table{min-width:0}.bookings-unified-table td:nth-child(2),.bookings-unified-table td:nth-child(3){white-space:normal;min-width:160px}.bookings-unified-table th:nth-child(2),.bookings-unified-table td:nth-child(2){text-align:center}.booking-customer-cell{display:grid;justify-items:center;align-content:center;gap:2px;text-align:center;line-height:1.35}.booking-customer-cell .booking-customer-link{max-width:100%;white-space:normal;text-align:center}.booking-customer-cell .cell-note{display:block;margin-top:1px;text-align:center}.booking-status-cell{display:grid;justify-items:center;gap:3px;text-align:center}.booking-status-badges{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
/* Customers / suppliers */
.customers-table,.agents-table{min-width:0}.customer-role-band,.file-identity{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);padding:var(--ui-space-3);background:var(--ui-surface-subtle);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);margin:var(--ui-space-3) 0}.customer-role-band span{color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}.file-identity h2{margin:0 0 var(--ui-space-1);font-size:var(--ui-section);color:var(--ui-heading)}.file-identity p{margin:0;color:var(--ui-text-secondary)}.file-identity>span{max-width:45%;color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}.file-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-space-2);margin:var(--ui-space-3) 0 var(--ui-space-4)}.file-metrics>div{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:var(--ui-space-3);background:var(--ui-card)}.file-metrics span{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.file-metrics b{display:block;margin-top:var(--ui-space-1);font-size:var(--ui-font-strong);color:var(--ui-text)}.ui-file-modal{max-width:1050px}.participant-links{display:grid;gap:var(--ui-space-2)}.customer-booking-link{width:100%;display:flex;justify-content:space-between;gap:var(--ui-space-2);border:1px solid var(--ui-line);background:var(--ui-card);border-radius:var(--ui-radius-sm);padding:var(--ui-space-2) var(--ui-space-3);font-family:inherit;text-align:right;cursor:pointer}.customer-booking-link:hover{background:var(--ui-row-hover)}.customer-booking-link span{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}#customerRelations{display:flex;gap:var(--ui-space-2);flex-wrap:wrap;margin-top:var(--ui-space-2)}.relation-node{display:flex;flex-direction:column;gap:2px;text-align:right;border:1px solid var(--ui-line);background:var(--ui-card);border-radius:var(--ui-radius-sm);padding:var(--ui-space-2) var(--ui-space-3);cursor:pointer;color:var(--ui-text)}.relation-node:hover{background:var(--ui-row-hover);border-color:color-mix(in srgb,var(--blue) 25%,var(--ui-line))}.relation-node small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.relation-caption{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);margin-bottom:var(--ui-space-2)}
/* Accounting */
.accounting-page-header{margin-bottom:12px}.accounting-summary-strip{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}.accounting-summary-item{min-height:72px;padding:10px 12px;border:1px solid var(--ui-line);background:var(--ui-card);border-radius:10px}.accounting-summary-item small{font-size:12px;color:var(--ui-muted)}.accounting-summary-item>div{display:flex;flex-direction:column;font-size:13px;gap:4px;margin-top:5px}.accounting-main-card{padding:0!important;border:0!important;background:transparent!important}.accounting-table{min-width:0!important}
.accounting-toolbar{display:grid;grid-template-columns:minmax(280px,1.6fr) repeat(auto-fit,minmax(130px,.75fr));gap:var(--ui-space-2);align-items:center;padding:var(--ui-space-2);border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card);margin-bottom:var(--ui-space-3)}.accounting-toolbar .payments-search-wrap{min-width:0;width:100%}.accounting-toolbar select,.accounting-toolbar input[type=date]{width:100%;min-width:0;min-height:var(--ui-control)}
.ui-drawer-backdrop{position:fixed;inset:0;background:rgba(16,35,44,.26);z-index:1390;backdrop-filter:blur(1px)}.accounting-drawer{position:fixed!important;top:0;right:0;bottom:0;width:min(660px,94vw)!important;max-width:94vw;background:var(--ui-card);z-index:1400;box-shadow:-18px 0 42px rgba(15,45,56,.18);overflow-y:auto;overflow-x:hidden;border-inline-start:1px solid var(--ui-line);transform:none!important}.accounting-drawer-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 16px;background:var(--ui-card);border-bottom:1px solid var(--ui-line)}.drawer-close{width:34px;height:34px;border:1px solid var(--ui-line);background:var(--ui-soft);border-radius:9px;font-size:19px;cursor:pointer}.drawer-open{overflow:hidden}
.accounting-drawer-body,.accounting-drawer .card-body{font-size:14px}.drawer-invoice-head{padding:16px 16px 8px}.drawer-invoice-head h3{font-size:20px}.drawer-meta-grid,.drawer-money-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;padding:8px 16px!important}.drawer-meta-grid>div,.drawer-money-grid>div{padding:11px!important;border:1px solid var(--ui-line);background:var(--ui-soft);border-radius:9px!important}.drawer-meta-grid span,.drawer-money-grid span{display:block;font-size:12px!important;color:var(--ui-muted);margin-bottom:5px}.drawer-meta-grid b,.drawer-money-grid b{font-size:14px!important}.drawer-payments-list{padding:12px 16px}.drawer-payment-card{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:var(--ui-space-3);margin-bottom:var(--ui-space-2);background:var(--ui-card)}.drawer-payment-card>div{display:flex;justify-content:space-between;gap:8px;align-items:center}.drawer-payment-card b{font-size:17px;direction:ltr}.drawer-payment-card span,.drawer-payment-card small,.drawer-payment-card em{font-size:13px;color:var(--ui-muted);font-style:normal}.drawer-payment-card small,.drawer-payment-card em{display:block;margin-top:5px}.drawer-note{margin:var(--ui-space-3) var(--ui-space-4);padding:var(--ui-space-4);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)}.drawer-note b,.drawer-note span{display:block}.drawer-note b{font-size:var(--ui-font);color:var(--ui-text);font-weight:var(--ui-weight-heavy)}.drawer-note span{font-size:var(--ui-font-sm);line-height:1.75;color:var(--ui-text-secondary);margin-top:var(--ui-space-2);overflow-wrap:anywhere;white-space:pre-wrap}.drawer-actions{position:sticky;bottom:0;background:var(--ui-card);border-top:1px solid var(--ui-line);padding:var(--ui-space-3) var(--ui-space-5);display:flex;align-items:center;justify-content:flex-end;gap:var(--ui-space-2)}.drawer-actions>.table-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}.accounting-drawer #accountingInvoiceDrawerBody{padding-inline:var(--ui-space-3)}.financial-party-detail{padding-bottom:var(--ui-space-5)}.financial-detail-summary{padding:var(--ui-space-2) var(--ui-space-4) var(--ui-space-3)}.party-financial-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.financial-detail-section{padding:var(--ui-space-3) var(--ui-space-4);border-top:1px solid var(--ui-line)}.financial-detail-section h4{margin:0 0 var(--ui-space-2);font-size:var(--ui-font-strong);color:var(--ui-text);font-weight:var(--ui-weight-heavy)}.financial-detail-row{display:grid;grid-template-columns:minmax(0,1.6fr) auto auto;gap:var(--ui-space-2);align-items:center;padding:var(--ui-space-2) 0;border-bottom:1px solid var(--ui-line);font-size:var(--ui-font-sm);color:var(--ui-text)}.financial-detail-row:last-child{border-bottom:0}.financial-detail-row>div{min-width:0;display:flex;align-items:center;gap:var(--ui-space-1);flex-wrap:wrap}.financial-detail-row strong{direction:ltr;white-space:nowrap;color:var(--ui-text)}.financial-detail-row small,.financial-detail-row span{color:var(--ui-text-secondary)}.financial-detail-row.compact{grid-template-columns:minmax(0,1fr) auto}.detail-secondary-link{border:0;background:none;padding:0;color:var(--blue-dark);font:inherit;font-size:var(--ui-font-xs);cursor:pointer}.financial-linked-inline{display:inline-flex;align-items:center;gap:var(--ui-space-1);flex-wrap:wrap}
.financial-credit-card{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:var(--ui-space-3);margin-bottom:var(--ui-space-2);background:var(--ui-card)}.financial-credit-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2)}.financial-credit-head strong{font-size:var(--ui-financial);color:var(--ui-text);direction:ltr}.financial-credit-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ui-space-2);margin-top:var(--ui-space-2)}.financial-credit-meta span{min-width:0}.financial-credit-meta small{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.financial-credit-meta b{display:block;color:var(--ui-text);font-size:var(--ui-font-sm);margin-top:var(--ui-space-1);overflow-wrap:anywhere}.financial-credit-links{display:flex;gap:var(--ui-space-2);flex-wrap:wrap;margin-top:var(--ui-space-2);padding-top:var(--ui-space-2);border-top:1px solid var(--ui-line)}

.financial-overview-note{padding:var(--ui-space-3);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);color:var(--ui-text-secondary);font-size:var(--ui-font-sm);line-height:1.7}.financial-detail-subsection{margin-top:var(--ui-space-5);padding-top:var(--ui-space-4);border-top:1px solid var(--ui-line)}.financial-credit-reference-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--ui-space-3);align-items:center;padding:var(--ui-space-3) 0;border-bottom:1px solid var(--ui-line)}.financial-credit-reference-row:last-child{border-bottom:0}.financial-credit-reference-row small{display:block;color:var(--ui-text-secondary);margin-top:var(--ui-space-1)}
.unified-payment-modal{width:min(1080px,calc(100vw - 32px));max-width:1080px}.unified-payment-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:var(--ui-space-4);padding:var(--ui-space-4)}
/* Single-page payment entry: payment, customer credit, fees and details are sections stacked in one
   scrollable column, never tabs. The column scrolls internally so the toolbar (close / اعتماد الدفعة)
   and the live summary aside both stay reachable no matter how long the form gets. */
.unified-payment-main{min-width:0;display:flex;flex-direction:column;gap:var(--ui-space-4);max-height:min(68vh,720px);overflow-y:auto;overflow-x:hidden;padding-inline-end:var(--ui-space-2)}
.unified-payment-section{min-width:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:var(--ui-space-4);background:var(--ui-card)}
.unified-payment-section.hidden{display:none}
.unified-payment-section-title{margin:0 0 var(--ui-space-3);font-size:var(--ui-section);color:var(--ui-text);display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap}
.unified-payment-section .form-grid{margin:0}.unified-payment-summary{position:sticky;top:var(--ui-space-3);align-self:start;min-width:0;padding:var(--ui-space-4);border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-surface-subtle)}.unified-payment-summary h4{margin:0 0 var(--ui-space-3);font-size:var(--ui-section);color:var(--ui-text)}.central-payment-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-fx-line,.payment-shortage,.payment-preview-message{margin-top:var(--ui-space-3);padding:var(--ui-space-3);border-radius:var(--ui-radius-sm);border:1px solid var(--ui-line);background:var(--ui-card)}.payment-fx-line small,.payment-shortage small{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);margin-bottom:var(--ui-space-1)}.payment-fx-line b,.payment-shortage b{display:block;color:var(--ui-text);font-size:var(--ui-font-strong)}.payment-shortage{border-color:color-mix(in srgb,var(--ui-danger) 30%,var(--ui-line));background:var(--ui-danger-bg)}.payment-shortage b,.payment-preview-message{color:var(--ui-danger)}
/* Customer Credit Settlement Correction — settlement truth (cash + credit) and FIFO source trace. */
.payment-settlement-line,.payment-credit-allocations,.payment-credit-callout{margin-top:var(--ui-space-3);padding:var(--ui-space-3);border-radius:var(--ui-radius-sm);border:1px solid var(--ui-line);background:var(--ui-card)}
.payment-settlement-line small{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);margin-bottom:var(--ui-space-1)}
.payment-settlement-line b{display:block;color:var(--ui-text);font-size:var(--ui-font-strong)}
.payment-settlement-line span,.payment-credit-allocations span{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);margin-top:var(--ui-space-1)}
.payment-credit-allocations b{display:block;color:var(--ui-text);font-size:var(--ui-font-xs);margin-bottom:var(--ui-space-1)}
.payment-credit-allocations span.text-danger{color:var(--ui-danger)}
.payment-credit-callout{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);margin-top:0;border-color:color-mix(in srgb,var(--ui-accent,var(--ui-text)) 25%,var(--ui-line));background:var(--ui-surface-subtle)}
.payment-credit-callout span{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
@media (max-width:900px){.unified-payment-layout{grid-template-columns:minmax(0,1fr)}.unified-payment-main{max-height:none;overflow:visible;padding-inline-end:0}.unified-payment-summary{position:static}.payment-credit-callout{flex-direction:column;align-items:stretch}}
.settlement-components{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.payment-linked-fees{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.payment-linked-fees b{font-weight:600}
.payment-linked-fees .table-link{font-size:inherit}
.financial-add-dropdown{min-width:240px!important}.financial-add-dropdown button{font-size:14px!important;padding:11px 12px!important}
/* Treasury / expenses */
.finance-page{max-width:100%}.finance-summary-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.finance-summary-item{min-width:180px;flex:1 1 180px;max-width:280px;border:1px solid var(--ui-line);border-radius:10px;background:#fff;padding:10px 12px}.finance-summary-item small{display:block;color:var(--ui-muted);font-size:12px;margin-bottom:5px}.finance-summary-item>b{font-size:19px}.finance-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-space-3);margin-bottom:var(--ui-space-3)}.finance-summary-grid .finance-summary-item{min-width:0;max-width:none;min-height:82px;display:flex;flex-direction:column;justify-content:center}@media(max-width:900px){.finance-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.finance-summary-grid{grid-template-columns:1fr}}.finance-page-tabs{margin-bottom:12px}.finance-toolbar{margin-bottom:10px}.treasury-table,.treasury-movements-table,.expenses-table,.direct-costs-table{min-width:0}.financial-highlight{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border:1px solid var(--ui-line);border-radius:9px;background:#f8fafb;margin-bottom:10px}.financial-highlight b{font-size:19px}.small-highlight{justify-content:flex-start;font-weight:700}.compact-modal{max-width:700px}
.finance-onboarding{border:1px dashed #c8dce2;border-radius:12px;background:#fbfdfe;padding:18px;display:grid;gap:14px}.finance-onboarding h3{margin:0 0 5px;font-size:18px;color:var(--blue-dark)}.finance-onboarding p{margin:0;color:var(--ui-muted);font-size:13px;line-height:1.7;max-width:860px}.finance-starter-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.finance-starter-card{border:1px solid var(--ui-line);background:var(--ui-card);border-radius:10px;padding:12px;text-align:right;font-family:inherit;cursor:pointer;display:grid;gap:3px}.finance-starter-card:hover{border-color:var(--blue);background:var(--ui-surface-muted)}.finance-starter-card b{font-size:14px}.finance-starter-card span{font-weight:900;color:var(--blue-dark);direction:ltr}.finance-starter-card small{color:var(--ui-muted);font-size:11px}.finance-onboarding-actions{display:flex;gap:8px;flex-wrap:wrap}.ui-toolbar select{flex:0 0 auto;min-width:150px;max-width:220px}.ui-toolbar .date-input-wrapper{flex:0 0 auto;width:auto;min-width:150px;max-width:220px}.payment-inline-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.drawer-payment-main{display:flex;justify-content:space-between;gap:10px;align-items:center}.role-badge-stack{display:flex;gap:6px;flex-wrap:wrap}

/* Data management */
.data-summary-line{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--ui-line);border-radius:10px;background:#fff;margin-bottom:10px;color:#5d727a;font-size:13px}.data-summary-line b{color:var(--blue-dark);font-size:16px}.data-summary-line i{font-style:normal;color:#b2c0c5}.data-primary-actions{display:flex;gap:8px;flex-wrap:wrap}.data-inline-note{margin-top:10px;padding:9px 11px;background:#f8fafb;border-radius:8px;color:#64748b;font-size:13px}.text-action{border:0;background:none;color:var(--blue-dark);font-weight:700;cursor:pointer}.data-advanced{margin-top:12px;border-top:1px solid var(--ui-line);padding-top:10px}.data-advanced summary{cursor:pointer;font-weight:800}.data-advanced .data-primary-actions{margin-top:10px}.compact-backups{margin-top:10px}.data-policy{font-size:12px;color:var(--ui-muted)}
.appearance-picker{display:flex;gap:var(--ui-space-2);flex-wrap:wrap}.appearance-option{min-width:0;min-height:var(--ui-control);border:1px solid var(--ui-line);background:var(--ui-card);border-radius:var(--ui-radius-sm);display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-2);padding:0 var(--ui-space-3);color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);cursor:pointer}.appearance-option span{font-size:16px;line-height:1}.appearance-option.active{border-color:var(--blue);color:var(--blue-dark);background:color-mix(in srgb,var(--blue) 7%,var(--ui-card));box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 14%,transparent)}
/* §RoundP7-C — Appearance folded into the identity card-head as an icon-only cluster (no separate
 * big card, no visible text labels — title/aria-label carry the accessible name). */
.appearance-picker-icons{gap:var(--ui-space-1);flex-wrap:nowrap}
.appearance-picker-icons .appearance-option{min-width:var(--ui-control-sm);min-height:var(--ui-control-sm);padding:0;border-radius:999px}
.appearance-picker-icons .appearance-option span{font-size:15px}
/* §RoundP7-F — service-details field picker: compact 2-column selectable tiles instead of a plain
 * stacked checkbox list (previously unstyled — .schema-field-grid/.schema-field-option had no CSS). */
.schema-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-2);margin-top:var(--ui-space-3)}
@media(max-width:560px){.schema-field-grid{grid-template-columns:1fr}}
.schema-field-option{display:flex;align-items:center;gap:var(--ui-space-2);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);padding:var(--ui-space-2) var(--ui-space-3);cursor:pointer;font-size:var(--ui-font-sm);color:var(--ui-text);min-height:var(--ui-control)}
.schema-field-option:hover{background:var(--ui-row-hover)}
.schema-field-option input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;accent-color:var(--blue)}
.schema-field-option.is-selected{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,var(--ui-card));color:var(--blue-dark);font-weight:var(--ui-weight-strong)}
/* §RoundP7-H — reorder controls (▲/▼ + position) get their own column, separate from row actions,
 * so the two control groups never crowd/overlap in one narrow cell. Shared by any settings table
 * that combines manual ordering with row actions (currently: currency catalog). */
.ui-order-controls{display:inline-flex;align-items:center;gap:var(--ui-space-1);white-space:nowrap}
.ui-order-controls span{min-width:1.5em;text-align:center;font-weight:var(--ui-weight-strong)}
/* Currency settings — text actions. They may wrap onto a second line on a narrow table instead of
   being clipped; each button keeps its natural width so the label is always readable. */
.currency-row-actions{flex-wrap:wrap;gap:var(--ui-space-2)}.currency-row-actions .btn{flex:0 0 auto}
/* §RoundP7-G — Reference Catalog Center landing: 4 category cards instead of a pill row + a second
 * tab row stacked underneath it. */
.catalog-center-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-space-3);margin-top:var(--ui-space-3)}
@media(max-width:900px){.catalog-center-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.catalog-center-grid{grid-template-columns:1fr}}
.catalog-center-card{display:flex;flex-direction:column;align-items:center;gap:var(--ui-space-2);text-align:center;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card);padding:var(--ui-space-4) var(--ui-space-3);cursor:pointer;font:inherit;color:var(--ui-text)}
.catalog-center-card:hover{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 5%,var(--ui-card))}
.catalog-center-icon{width:44px;height:44px;border-radius:var(--ui-radius);background:var(--ui-info-bg);color:var(--blue-dark);display:grid;place-items:center}
.catalog-center-icon svg{width:22px;height:22px}
.catalog-center-name{font-weight:var(--ui-weight-strong);font-size:var(--ui-font-md);color:var(--ui-heading)}
.catalog-center-count{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}

/* Operational closeout: settings, search, templates and permissions */
.settings-main-tabs{margin-bottom:var(--ui-space-4);position:sticky;top:0;z-index:4;background:var(--ui-card);padding-block:var(--ui-space-2)}.settings-panel{min-width:0}.settings-panel>.card{margin-bottom:var(--ui-space-4)}.settings-save-row{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;margin-top:var(--ui-space-4)}.settings-dirty-dot{display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--ui-warning);margin-inline-start:var(--ui-space-1);vertical-align:middle}.settings-panel .grid4,.settings-panel .form-grid{min-width:0}.settings-panel input,.settings-panel select,.settings-panel textarea{max-width:100%}
/* Settings Master (Information Architecture round) — compact card grid replacing one long flat
   column of cards; each domain (identity/documents/contact/footer/colors/appearance) gets its own
   small card instead of one giant mixed form. */
.settings-cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-4);align-items:start}
.settings-cards-grid>.card{margin-bottom:0}
/* A column of cards inside the grid: related short cards stack under each other beside a tall one. */
.settings-cards-stack{display:grid;gap:var(--ui-space-4);align-content:start;min-width:0}.settings-cards-stack>.card{margin-bottom:0}
@media(max-width:1100px){.settings-cards-grid{grid-template-columns:1fr}}
.settings-info-line{margin-top:var(--ui-space-3);padding:var(--ui-space-2) var(--ui-space-3);color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.settings-info-line b{color:var(--ui-text);font-weight:var(--ui-weight-strong)}
/* Compact combined color control — swatch + hex read as ONE control, not two adjacent boxes. */
.color-field{display:flex;align-items:stretch;gap:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);overflow:hidden;background:var(--ui-card)}
.color-field input[type=color]{width:38px;height:var(--ui-control);padding:0;border:0;border-inline-end:1px solid var(--ui-line);border-radius:0;cursor:pointer;flex:0 0 auto}
.color-field input:not([type=color]){border:0;border-radius:0;flex:1 1 auto;min-width:0}
/* Settings sub-navigation (small pill tabs within a merged Settings section). */
.settings-subnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--ui-space-4)}
.settings-subnav button{height:32px;padding:0 14px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface-subtle);color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);cursor:pointer}
.settings-subnav button.active{background:var(--ui-info-bg);color:var(--blue-dark);border-color:transparent}
.settings-subnav button:hover{background:var(--ui-row-hover)}
[data-settings-subpanel].hidden{display:none!important}
.whatsapp-template-tabs{margin-bottom:var(--ui-space-3)}.whatsapp-template-panel{display:grid;gap:var(--ui-space-2);margin-bottom:var(--ui-space-3)}.whatsapp-template-panel textarea{min-height:128px;resize:vertical}.template-preview{padding:var(--ui-space-3);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);white-space:pre-wrap;color:var(--ui-text-secondary);font-size:var(--ui-font-sm);line-height:1.75}.whatsapp-template-panel.hidden{display:none!important}#waPlaceholders{font-size:var(--ui-font-sm);line-height:1.8}#waPlaceholders code{direction:ltr;display:inline-block;margin:2px 3px;padding:2px 6px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-surface-muted);color:var(--blue-dark)}
.user-permission-modal{width:min(980px,calc(100vw - 32px));max-width:980px}.permission-matrix{margin-top:var(--ui-space-4);overflow-x:auto;border:1px solid var(--ui-line);border-radius:var(--ui-radius)}.permission-matrix table{width:100%;border-collapse:collapse;min-width:760px}.permission-matrix th,.permission-matrix td{padding:var(--ui-space-2);border-bottom:1px solid var(--ui-cell-line);text-align:center;font-size:var(--ui-font-sm)}.permission-matrix th:first-child,.permission-matrix td:first-child{text-align:right;position:sticky;right:0;background:var(--ui-card);z-index:1}.permission-matrix thead th{background:var(--ui-table-head-bg);color:var(--ui-text-secondary);font-weight:var(--ui-weight-strong)}.permission-matrix input[type=checkbox]{min-height:0;width:17px;height:17px;accent-color:var(--blue)}
/* §8.3 — grouped permission accordion (one .ui-collapsible per module) replacing the flat matrix. */
.permission-matrix-grouped{border:0;overflow:visible;display:grid;gap:6px;max-height:60vh;overflow-y:auto;padding-inline-end:4px}
.permission-module-group{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:0 var(--ui-space-3)}
.permission-module-group summary{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-space-2) 0;font-weight:var(--ui-weight-strong)}
.permission-module-count{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);font-weight:var(--ui-weight-regular)}
.permission-group-actions{display:flex;gap:10px;padding-bottom:var(--ui-space-2)}
.permission-action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;padding-bottom:var(--ui-space-3)}
.permission-action-chip{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);font-size:var(--ui-font-xs);cursor:pointer}
.permission-action-chip input{min-height:0;width:15px;height:15px;accent-color:var(--blue)}
/* §7.1 — compact alert-settings cards (one per event group), and simplified module-visibility rows
   (single shared explanation lives on the card, not repeated under every row — index.html). */
.alert-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-3)}
@media(max-width:1100px){.alert-settings-grid{grid-template-columns:1fr}}
.alert-settings-card .card-head{padding-bottom:0}
.module-visibility-list{display:grid;gap:6px}
.module-visibility-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);cursor:pointer}
.omni-entity-summary,.omni-result-group{border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card);padding:var(--ui-space-3);margin-top:var(--ui-space-3)}.omni-entity-summary-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3)}.omni-entity-counts{display:flex;gap:var(--ui-space-2);flex-wrap:wrap;margin-top:var(--ui-space-2)}.omni-entity-counts span{padding:var(--ui-space-1) var(--ui-space-2);border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface-subtle);font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.omni-result-row{display:grid;grid-template-columns:minmax(80px,.7fr) minmax(120px,1fr) minmax(160px,1.5fr) minmax(0,2fr) auto;align-items:center;gap:var(--ui-space-2);padding:var(--ui-space-2) 0;border-bottom:1px solid var(--ui-cell-line);font-size:var(--ui-font-sm)}.omni-result-row:last-child{border-bottom:0}.omni-result-row button{justify-self:end}.full-search-toolbar,.alert-center-toolbar{align-items:end}.full-search-results,.alert-center-results{min-width:0}
@media(max-width:760px){.settings-main-tabs{position:static}.omni-result-row{grid-template-columns:1fr auto}.omni-result-row>*:not(button){grid-column:1}.omni-result-row button{grid-column:2;grid-row:1/5}.appearance-option{flex:1 1 120px}.user-permission-modal{width:calc(100vw - 16px)}}

/* Dark mode */

.booking-title-add{min-height:var(--ui-control);padding-inline:var(--ui-space-4);font-size:var(--ui-font);font-weight:var(--ui-weight-heavy)}.bookings-page-title{align-items:center}.booking-data-tools{display:flex;justify-content:flex-end;gap:var(--ui-space-2);margin:var(--ui-space-3) 0 var(--ui-space-4);padding:var(--ui-space-2) var(--ui-space-3);border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card)}.pill{min-height:var(--ui-control-sm);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-line);background:var(--ui-card);color:var(--ui-text-secondary);border-radius:999px;padding:0 var(--ui-space-3);font-family:inherit;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);cursor:pointer}.pill.active{background:var(--blue);border-color:var(--blue);color:var(--ui-on-brand)}
/* Central modal / drawer surface foundation */
body.modal-lock{overflow:hidden}.modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-start;justify-content:center;padding:var(--ui-space-6);overflow:auto;background:rgba(11,37,48,.68)}.modal-box{width:min(1150px,100%);background:var(--ui-card);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:0 25px 70px rgba(0,0,0,.25)}.modal-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);padding:var(--ui-space-3);background:var(--ui-card);border-bottom:1px solid var(--ui-line);border-radius:var(--ui-radius) var(--ui-radius) 0 0}.preview-area{padding:var(--ui-space-5);background:var(--ui-surface-muted)}.modal.modal-runtime-open{width:100vw;height:100vh;visibility:visible;opacity:1;pointer-events:auto}.modal.modal-runtime-open>.modal-box{display:block;visibility:visible;opacity:1;position:relative;z-index:2147483001;width:min(1150px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
.task-title{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);color:var(--ui-text)}.task-meta{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.5;margin-top:var(--ui-space-1)}
/* Shared form feedback, autocomplete and search surfaces */
.validation-error{border-color:var(--ui-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 12%,transparent);background:var(--ui-danger-bg)}.validation-message{color:var(--ui-danger);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);margin-top:var(--ui-space-1)}
.client-autocomplete,.airport-autocomplete,.booking-suggest{position:relative;z-index:8}.client-suggestions,.airport-suggestions,.booking-suggest-box{z-index:10050;position:absolute;top:calc(100% + var(--ui-space-1));right:0;left:0;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);max-height:260px;overflow:auto;padding:var(--ui-space-1)}.modal .client-autocomplete{z-index:20}.modal .client-suggestions{z-index:30;max-height:min(260px,40vh);overscroll-behavior:contain}.invoice-customer-autocomplete .client-suggestion{display:grid;gap:2px;min-height:46px;align-content:center}.invoice-customer-autocomplete .client-suggestion b{font-size:var(--ui-font-sm);line-height:1.35}.invoice-customer-autocomplete .client-suggestion .small{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);direction:ltr;unicode-bidi:isolate;text-align:right}.client-suggestion-empty{padding:var(--ui-space-3);color:var(--ui-text-secondary);font-size:var(--ui-font-sm);text-align:center}.client-suggestions.hidden,.airport-suggestions.hidden,.booking-suggest-box.hidden{display:none}.client-suggestion,.airport-suggestions button,.booking-suggest-box button{width:100%;border:0;background:var(--ui-card);text-align:right;padding:var(--ui-space-2);border-radius:var(--ui-radius-xs);font-family:inherit;font-size:var(--ui-font-sm);color:var(--ui-text);cursor:pointer}.client-suggestion{display:block;border-bottom:1px solid var(--ui-cell-line)}.client-suggestion:hover,.airport-suggestions button:hover,.booking-suggest-box button:hover,.booking-suggest-box button.is-active{background:var(--ui-row-hover)}.airport-suggestions button{display:grid;grid-template-columns:54px 1fr;gap:2px var(--ui-space-2)}.airport-suggestions button b{grid-row:1/3;direction:ltr;font-size:var(--ui-font-sm);color:var(--blue-dark);align-self:center}.airport-suggestions button span{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong)}.airport-suggestions button small,.airport-empty{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.airport-empty{padding:var(--ui-space-3)}.airport-settings-note{padding:var(--ui-space-3);border-radius:var(--ui-radius-sm);background:var(--ui-info-bg);color:var(--ui-info);margin:var(--ui-space-2) 0}.airport-priority-list{display:flex;gap:var(--ui-space-2);flex-wrap:wrap;margin:var(--ui-space-2) 0 var(--ui-space-3)}.airport-priority-list>b{width:100%;color:var(--ui-text)}.airport-priority-list span,.tag{display:inline-flex;align-items:center;font-size:var(--ui-font-xs);background:var(--ui-surface-muted);color:var(--ui-text-secondary);border:1px solid var(--ui-line);border-radius:999px;padding:var(--ui-space-1) var(--ui-space-2)}
.omni-search-shell{display:grid;grid-template-columns:var(--ui-control) minmax(0,1fr);gap:var(--ui-space-3);align-items:center;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:var(--ui-space-3);box-shadow:none}.omni-search-icon{width:var(--ui-control);height:var(--ui-control);border-radius:var(--ui-radius-sm);background:var(--blue);color:var(--ui-on-brand);display:grid;place-items:center;font-size:var(--ui-section)}.compact-omni{margin-bottom:var(--ui-space-3)}
.date-picker-btn{position:absolute;left:var(--ui-space-1);top:var(--ui-space-1);bottom:var(--ui-space-1);width:var(--ui-control-sm);border:0;border-radius:var(--ui-radius-sm);background:var(--ui-surface-muted);color:var(--blue-dark);display:grid;place-items:center;cursor:pointer}.date-picker-btn:hover{background:color-mix(in srgb,var(--blue) 10%,var(--ui-card))}.date-picker-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dark-mode{--ui-text:#e5edf4;--ui-muted:#9fb0c0;--ui-line:#2d4050;--ui-soft:#15232e;--ui-card:#101b24;background:#0c151d;color:var(--ui-text)}.dark-mode .ui-table-wrap,.dark-mode .unified-table-wrap,.dark-mode .accounting-table-wrap,.dark-mode .card,.dark-mode .appearance-option,.dark-mode .accounting-summary-item,.dark-mode .ui-toolbar,.dark-mode .booking-toolbar,.dark-mode .accounting-toolbar,.dark-mode .ui-search,.dark-mode .booking-search-box,.dark-mode .payments-search-wrap,.dark-mode .drawer-payment-card,.dark-mode .file-metrics>div,.dark-mode .data-summary-line{background:var(--ui-card);border-color:var(--ui-line)}.dark-mode .ui-data-table th,.dark-mode .unified-table th,.dark-mode .accounting-table th{background:#16242f;color:#c3d0da}.dark-mode .ui-data-table td,.dark-mode .unified-table td,.dark-mode .accounting-table td{border-color:#22333f}.dark-mode .customer-booking-link{background:var(--ui-card);border-color:var(--ui-line);color:var(--ui-text)}.dark-mode .ui-icon-btn,.dark-mode .icon-btn{background:#16242f;border-color:var(--ui-line);color:#d6e1e9}.dark-mode .financial-highlight,.dark-mode .data-inline-note,.dark-mode .customer-role-band,.dark-mode .file-identity{background:#15232e;border-color:var(--ui-line)}
@media(max-width:1180px){.main{padding-inline:var(--ui-space-4)}.booking-stats-grid,.accounting-summary-strip{grid-template-columns:repeat(2,1fr)}.accounting-toolbar{grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(120px,1fr))}.file-metrics{grid-template-columns:repeat(2,1fr)}.app-header{flex-wrap:wrap}}
@media(max-width:720px){.modal{padding:var(--ui-space-2)}.modal-toolbar{flex-wrap:wrap}.preview-area{padding:var(--ui-space-2)}.modal.modal-runtime-open>.modal-box{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.omni-search-shell{grid-template-columns:var(--ui-control-sm) minmax(0,1fr);padding:var(--ui-space-2)}.omni-search-icon{width:var(--ui-control-sm);height:var(--ui-control-sm)}.compact-alert-list{grid-template-columns:1fr}.financial-credit-meta{grid-template-columns:1fr}.page-title,.ui-page-header{flex-direction:column}.booking-stats-grid,.accounting-summary-strip,.file-metrics{grid-template-columns:1fr}.ui-toolbar,.booking-toolbar{align-items:stretch;flex-wrap:wrap}.ui-search,.payments-search-wrap,.booking-search-box{min-width:100%}.accounting-toolbar{grid-template-columns:1fr}.drawer-meta-grid,.drawer-money-grid,.party-financial-summary{grid-template-columns:1fr}.financial-detail-row{grid-template-columns:1fr auto}.financial-detail-row>small{grid-column:1/-1}.accounting-drawer{width:100vw!important;max-width:100vw}.finance-summary-item{max-width:none}.finance-starter-actions{grid-template-columns:1fr}.ui-data-table,.unified-table,.accounting-table{font-size:13px}}

.exchange-hint{margin-top:4px;color:var(--blue-dark);font-weight:700}.leader-marker{display:inline-flex;padding:3px 7px;border-radius:999px;background:#fff5d8;color:#8a6200;font-size:11px;margin-inline:5px}.data-advanced .data-backup-row{padding:7px 0;border-bottom:1px solid var(--ui-line)}

.customer-person-only.hidden{display:none!important}.financial-add-menu{position:relative}.financial-add-dropdown{z-index:100!important}.accounting-page .payments-page-actions{align-items:center}.accounting-page .header-actions{overflow:visible}.accounting-page{overflow:visible}


/* Accounting component adapters — shared rules replacing the removed dev.4 override block. */
.accounting-tabs{display:flex;gap:var(--ui-space-2);align-items:center;flex-wrap:wrap;background:transparent;padding:0;margin:0 0 var(--ui-space-3);overflow:visible}.accounting-tabs .pill{min-height:calc(var(--ui-control) + var(--ui-space-1));padding:var(--ui-space-2) var(--ui-space-5);font-size:var(--ui-font-strong);font-weight:var(--ui-weight-strong);white-space:nowrap}
.accounting-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 9px}.accounting-section-head h3{margin:0;font-size:17px}.accounting-section-head small{display:block;color:var(--ui-muted);font-size:12px;margin-top:2px}
.mini-menu-wrap{position:relative}.mini-row-menu{position:absolute;inset-inline-end:0;top:39px;z-index:120;background:#fff;border:1px solid var(--ui-line);border-radius:10px;min-width:185px;padding:5px;box-shadow:var(--ui-shadow)}.mini-row-menu button{display:block;width:100%;border:0;background:transparent;padding:9px 10px;text-align:right;font-family:inherit;font-size:13px;font-weight:750;border-radius:7px;cursor:pointer}.mini-row-menu button:hover{background:var(--ui-soft)}.mini-row-menu button.danger{color:#a52243}
.invoice-state.unpaid,.invoice-state.partial,.invoice-state.overdue{background:var(--ui-warning-bg);color:var(--ui-warning)}.invoice-state.paid{background:var(--ui-success-bg);color:var(--ui-success)}.invoice-state.cancelled{background:var(--ui-danger-bg);color:var(--ui-danger)}.invoice-state.credit-us{background:var(--ui-info-bg);color:var(--ui-info)}.invoice-state.credit-party{background:var(--ui-warning-bg);color:var(--ui-warning)}
.supplier-items-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0 7px}.supplier-items-head small{display:block;color:var(--ui-muted);font-size:12px}.supplier-item-row{display:grid;grid-template-columns:minmax(190px,1.4fr) 115px 90px minmax(150px,1fr) auto auto;gap:7px;align-items:center;border-bottom:1px solid var(--ui-line);padding:7px 0}.supplier-item-row.cancelled-item{opacity:.65;background:#fff7f7}.supplier-item-row input,.supplier-item-row select{min-height:40px;font-size:13px}.cancelled-item{text-decoration:line-through;color:#8f7171}
.invoice-pay-head.six,.invoice-pay-row.six{grid-template-columns:.8fr .8fr .55fr .9fr .8fr 1.2fr}.invoice-pay-head.supplier,.invoice-pay-row.supplier{grid-template-columns:1.5fr .8fr .7fr .55fr .65fr}.invoice-currency-summary{display:flex;flex-wrap:wrap;gap:6px 14px;background:var(--ui-soft);border-radius:8px;padding:8px 10px;margin-top:5px;font-size:12px}.receipt-custom-footer{margin-top:10px;padding:9px;border:1px solid var(--ui-line);border-radius:8px;font-size:12px}.print-keep{break-inside:avoid;page-break-inside:avoid}
@media(max-width:760px){.supplier-item-row{grid-template-columns:1fr 1fr}.accounting-tabs{overflow:visible}}

.bookings-list-host{display:block;width:100%}


.search-row{display:flex;align-items:center;gap:8px}.search-row>input{flex:1;min-width:0}.search-row>select{flex:0 0 190px;max-width:220px!important}

@media(max-width:980px){.ui-list-shell{min-height:calc(var(--ui-control) * 5.5);padding-inline:0}.ui-table-wrap,.unified-table-wrap,.accounting-table-wrap{overflow-x:auto;overflow-y:visible}.ui-data-table,.unified-table,.accounting-table{min-width:860px}.bookings-unified-table{min-width:900px}.accounting-table{min-width:1050px!important}.customers-table{min-width:760px}.agents-table{min-width:820px}.expenses-table,.direct-costs-table{min-width:880px}.accounting-toolbar{grid-template-columns:minmax(240px,1fr) repeat(2,minmax(120px,1fr))}}

.system-confirm-modal{direction:rtl;text-align:center}.system-confirm-box{width:min(520px,calc(100vw - 32px));max-width:520px}.system-confirm-head{padding:18px 20px 10px;text-align:center}.system-confirm-head h3{margin:0;color:var(--ui-text);font-weight:800}.system-confirm-body{padding:8px 22px 22px;text-align:center}.system-confirm-body p{margin:0 auto 20px;max-width:440px;color:var(--ui-text);line-height:1.75;text-align:center}.system-confirm-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.system-confirm-actions .btn{min-width:118px;justify-content:center}

@media(max-width:900px){.unified-payment-layout{grid-template-columns:1fr}.unified-payment-summary{position:static}.central-payment-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.financial-credit-reference-row{grid-template-columns:1fr}}
@media(max-width:620px){.central-payment-summary-grid{grid-template-columns:1fr}}

.ui-segmented{display:flex;align-items:center;gap:var(--ui-space-1);flex-wrap:wrap;margin-bottom:var(--ui-space-3);padding:var(--ui-space-1);border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-surface-subtle);width:max-content;max-width:100%}.ui-segmented button{border:0;background:transparent;color:var(--ui-text-secondary);min-height:var(--ui-control-sm);padding:0 var(--ui-space-3);border-radius:var(--ui-radius-sm);font:inherit;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);cursor:pointer}.ui-segmented button.active{background:var(--ui-card);color:var(--ui-text);box-shadow:0 1px 2px rgba(15,34,45,.08)}
/* §RoundP7-A — single central pagination footer rule (previously split across two mismatched
 * generations: a legacy raw-px/hex block plus this token-based one). All ui-data-table/ui-list-shell
 * pages share this one footer look. */
.ui-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap;padding:var(--ui-space-3) var(--ui-space-1) 0;color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}
.ui-pagination-empty{justify-content:flex-start;color:var(--ui-text-secondary)}
.ui-pagination-meta{display:flex;align-items:center;gap:var(--ui-space-3);flex-wrap:wrap}.ui-page-size{display:inline-flex;align-items:center;gap:var(--ui-space-1);color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}.ui-page-size select{min-height:32px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);color:var(--ui-text);padding-inline:var(--ui-space-2)}.ui-pagination-pages{display:flex;align-items:center;gap:var(--ui-space-1)}
.ui-pagination-pages button{min-width:32px;height:32px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);color:var(--ui-text);font-family:inherit;font-weight:var(--ui-weight-strong);cursor:pointer}
.ui-pagination-pages button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.ui-pagination-pages button:disabled{opacity:.4;cursor:default}
.embedded-financial-actions{display:flex;justify-content:flex-start;margin:0 0 var(--ui-space-3)}
.customer-financial-foundation{margin-top:var(--ui-space-5);padding-top:var(--ui-space-4);border-top:1px solid var(--ui-line)}.customer-financial-foundation>h3{margin:0 0 var(--ui-space-3);font-size:var(--ui-section);color:var(--ui-text)}.embedded-financial-detail{border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card);overflow:visible}.financial-credit-value{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap}

/* V2.5.0-dev.6.8.9.1 — central date / hotfix UI */
/* System-wide UI Consistency round — root cause of narrow-width overlap: min-width:0 let the
   wrapper shrink freely inside a squeezed grid/flex track, so the fixed 42px icon padding left
   less room than a DD/MM/YYYY value needs and the text got clipped against the calendar icon.
   A control-width floor (icon zone + a full date + end padding) keeps date fields legible at
   any width; ellipsis on the display input is a defensive fallback for any narrower edge case. */
.date-input-wrapper.central-date-field{position:relative;width:100%;min-width:130px;display:block}
.date-input-wrapper.central-date-field>.central-date-native{position:absolute!important;inline-size:1px!important;block-size:1px!important;min-width:0!important;min-height:0!important;opacity:0!important;pointer-events:none!important;inset:auto!important;margin:0!important;padding:0!important;border:0!important;clip-path:inset(50%);overflow:hidden}
.date-input-wrapper .date-display-input{width:100%;min-width:0;padding-inline-end:var(--ui-space-3);padding-inline-start:42px;direction:ltr;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date-input-wrapper .date-picker-btn{position:absolute!important;left:5px!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;width:32px!important;height:32px!important;margin:0!important;padding:6px!important;display:grid!important;place-items:center!important;border:0!important;background:transparent!important;color:var(--ui-text-secondary)!important;z-index:2}
.date-input-wrapper .date-picker-btn svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
/* The one central Al Imad date picker (UI.openDatePicker) every calendar button opens — system-styled
 * instead of the native Chromium popup, positioned by the same floating-menu helper the record-actions
 * "more" menu already uses (UIComponents.positionFloatingActionMenu), so it needs the same base
 * position:fixed/z-index contract that helper assumes. */
.ui-datepicker-popover{position:fixed!important;z-index:2147483300!important;width:264px;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:0 14px 34px rgba(15,45,56,.18);padding:var(--ui-space-2);font-size:var(--ui-font-sm)}
.ui-dp-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 6px;font-weight:var(--ui-weight-strong);color:var(--ui-heading)}
.ui-dp-nav{width:28px;height:28px;border:1px solid var(--ui-line);background:var(--ui-surface-muted);border-radius:var(--ui-radius-sm);color:var(--ui-text);cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center}
.ui-dp-nav:hover{border-color:var(--blue);color:var(--blue-dark)}
.ui-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);padding-bottom:2px}
.ui-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ui-dp-cell{height:32px;border:0;background:none;border-radius:var(--ui-radius-sm);color:var(--ui-text);cursor:pointer;font-size:var(--ui-font-sm);display:grid;place-items:center}
.ui-dp-cell.is-empty{cursor:default}
.ui-dp-cell:not(.is-empty):hover{background:var(--ui-surface-muted)}
.ui-dp-cell.is-today{box-shadow:inset 0 0 0 1px var(--blue)}
.ui-dp-cell.is-in-range{background:color-mix(in srgb,var(--blue) 12%,transparent);border-radius:0}
.ui-dp-cell.is-range-edge{background:color-mix(in srgb,var(--blue) 28%,transparent);border-radius:var(--ui-radius-sm);font-weight:var(--ui-weight-strong)}
.ui-dp-cell.is-selected{background:var(--blue);color:var(--ui-on-brand);font-weight:var(--ui-weight-strong)}
.ui-dp-foot{display:flex;justify-content:space-between;gap:6px;padding-top:6px;margin-top:4px;border-top:1px solid var(--ui-line)}
.ui-dp-today,.ui-dp-clear{border:0;background:none;color:var(--blue-dark);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);cursor:pointer;padding:4px 6px}
.ui-dp-clear{color:var(--ui-text-secondary)}
.ui-dp-today:hover,.ui-dp-clear:hover{text-decoration:underline}
/* §RoundP7-J — month/year picker reuses the day-picker shell (.ui-datepicker-popover/.ui-dp-head/
 * .ui-dp-nav/.ui-dp-foot/.ui-dp-cell) with a coarser 3-column month grid instead of the 7-column day
 * grid, and no weekday row. */
.ui-dp-month-grid{grid-template-columns:repeat(3,1fr);gap:4px}
.ui-dp-month-cell{height:40px;font-size:var(--ui-font-xs)}
.date-range-hint{display:block;margin-top:4px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.35}.date-range-hint.hidden{display:none!important}
#editorPage .section-icon{width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important;display:grid!important;place-items:center!important;color:var(--blue-dark)!important;overflow:hidden!important}
#editorPage .section-icon svg{width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#editorPage .form-card{margin-bottom:var(--ui-space-3)}#editorPage .form-head{min-height:44px;padding:var(--ui-space-2) var(--ui-space-3)}#editorPage .form-body{padding:var(--ui-space-3)}#editorPage .editor-shell{gap:var(--ui-space-3);grid-template-columns:minmax(0,1fr) 220px}.mini-preview-card{padding:var(--ui-space-3)}.booking-history-button{width:100%;margin:var(--ui-space-2) 0}.booking-history-modal{width:min(900px,calc(100vw - 24px));max-width:900px}.booking-history-table{font-size:var(--ui-font-sm)}
.omni-group{border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:var(--ui-space-3);margin-top:var(--ui-space-3);background:var(--ui-card)}.omni-group-head{display:flex;align-items:center;gap:var(--ui-space-2);padding-bottom:var(--ui-space-2);border-bottom:1px solid var(--ui-line)}.omni-group-head>b{font-size:var(--ui-font-sm);color:var(--ui-heading)}.omni-group-head>span{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.omni-group-head>button,.omni-all-results{margin-inline-start:auto;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-card);color:var(--blue-dark);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);padding:6px 10px;cursor:pointer}.omni-all-results{display:flex;margin:var(--ui-space-3) auto 0}.compact-search-result{margin-top:var(--ui-space-1);border-radius:var(--ui-radius-xs)}
.alert-item{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--ui-space-2);text-align:right}.alert-copy{display:grid;gap:3px;min-width:0}.alert-copy b{font-size:var(--ui-font-sm);color:var(--ui-heading)}.alert-copy .alert-route{color:var(--ui-text);font-weight:var(--ui-weight-strong)}.alert-copy .alert-datetime{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);direction:ltr;unicode-bidi:isolate;text-align:right}.alert-countdown{font-style:normal;white-space:nowrap;border:1px solid var(--ui-line);border-radius:999px;padding:4px 8px;background:var(--ui-card);font-size:var(--ui-font-xs);color:var(--blue-dark);font-weight:var(--ui-weight-strong)}
/* Width/height are owned solely by the more specific #userModal.modal-runtime-open rule below (§Part I —
 * this generic rule previously duplicated width:920px there, conflicting with that rule's 900px). */
.user-permission-modal{max-height:calc(100vh - 24px);overflow:hidden!important}.user-permission-modal>.modal-body,.user-permission-modal>.card-body{overflow:auto;min-height:0;padding-inline:var(--ui-space-3)}.user-permission-modal .modal-actions{position:sticky;bottom:0;background:var(--ui-card);border-top:1px solid var(--ui-line);z-index:2}.user-permission-modal .ui-data-table{max-width:100%}
.expense-detail-modal{width:min(980px,calc(100vw - 24px));max-width:980px;max-height:calc(100vh - 24px);overflow:hidden!important}.expense-detail-modal>.card-body{overflow:auto;min-height:0}.expense-modal-section:has(#expensePaymentsInModal:empty){display:none}.expense-modal-section{min-height:0}
@media(max-width:1050px){#editorPage .editor-shell{grid-template-columns:1fr}.mini-preview-card{position:static}}

/* v6.8.9.1 voucher refinement */
.modern-voucher.voucher-document-layout{display:flex;flex-direction:column;min-height:calc(297mm - 28mm)}
.modern-voucher .mv-brand-copy #vTitle{font-size:calc(var(--ui-section) + 2px);font-weight:var(--ui-weight-bold);color:var(--ui-heading);line-height:1.35;margin-top:2px}
.modern-voucher .mv-passenger-summary{font-size:var(--ui-font-sm);color:var(--ui-text-secondary);margin-bottom:var(--ui-space-2)}
.modern-voucher .mv-traveler-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-space-2)}
.modern-voucher .mv-traveler-item{border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);padding:var(--ui-space-2);display:grid;gap:2px;min-width:0;background:var(--ui-card)}
.modern-voucher .mv-traveler-item>b{font-size:var(--ui-font-sm);color:var(--ui-heading);overflow-wrap:anywhere}.modern-voucher .mv-traveler-item small,.modern-voucher .mv-traveler-item span{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);unicode-bidi:isolate}
.modern-voucher.voucher-document-layout>.mv-footer{margin-top:auto}
@media(max-width:700px){.modern-voucher .mv-traveler-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.modern-voucher .mv-traveler-grid{grid-template-columns:1fr}}
/* v6.8.9.1 central print/export center */
.central-print-preview-box{max-width:min(980px,calc(100vw - 24px));height:min(92vh,940px);overflow:hidden;display:flex;flex-direction:column}.central-print-preview-box .modal-toolbar{flex:0 0 auto}
/* v6.8.9.1 omni-search visual polish */
.omni-group-head{justify-content:space-between;gap:var(--ui-space-3)}.omni-group-head>div:first-child{display:flex;align-items:baseline;gap:var(--ui-space-2);min-width:0}.omni-group-head .ui-context-actions{margin-inline-start:auto}.omni-group-head .ui-context-actions .btn{min-height:30px;padding:4px 9px}.omni-all-results-wrap{display:flex;justify-content:center;margin-top:var(--ui-space-3)}.compact-search-result{min-height:52px;padding:var(--ui-space-2) var(--ui-space-3);background:var(--ui-card);border-color:var(--ui-cell-line)}.compact-search-result>span{display:grid;gap:3px;min-width:0}.compact-search-result>span>b{font-size:var(--ui-font-sm);color:var(--ui-heading)}.compact-search-result>span>small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-search-result>em{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
/* v6.8.9.1 expense/payment modal density */
.expense-detail-modal .expense-modal-section:has(.compact-empty-history){padding-bottom:var(--ui-space-2)}.compact-empty-history{min-height:0!important;margin:0!important;padding:var(--ui-space-2) 0!important}.compact-empty-history small{display:block;margin-top:2px;color:var(--ui-text-secondary)}

/* V2.5.0-dev.6.8.11 — UX / print / reports finalization */
/* Booking wizard: the top tabs own the four stages; the side navigator only owns sections inside the active stage. */
#editorPage .form-card{margin-bottom:var(--ui-space-2);border-color:color-mix(in srgb,var(--ui-line) 78%,transparent);box-shadow:none}#editorPage .form-head{min-height:40px;padding:var(--ui-space-2) var(--ui-space-3);background:color-mix(in srgb,var(--ui-surface-subtle) 55%,transparent)}#editorPage .form-body{padding:var(--ui-space-3)}#editorPage .editor-shell{gap:var(--ui-space-3);grid-template-columns:minmax(0,1fr) 220px}.booking-side-panel{display:grid;gap:var(--ui-space-2);padding:var(--ui-space-2)!important;overflow:visible!important}.booking-quick-nav{display:grid;gap:var(--ui-space-2);padding:var(--ui-space-2);margin:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);min-width:0}.booking-quick-nav-head{display:grid;gap:2px}.booking-quick-nav-head>span{font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-heading)}.booking-quick-nav-head small{font-size:calc(var(--ui-font-xs) - 1px);line-height:1.35;color:var(--ui-text-secondary)}.booking-quick-nav-chips{display:grid;gap:4px;min-width:0}.booking-nav-chip{position:relative;width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) 18px;align-items:center;gap:5px;min-height:31px;padding:4px 6px;border:1px solid transparent;border-radius:var(--ui-radius-xs);background:transparent;color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);text-align:right;cursor:pointer}.booking-nav-chip:hover,.booking-nav-chip.active{border-color:color-mix(in srgb,var(--blue) 35%,var(--ui-line));background:var(--ui-info-bg);color:var(--blue-dark)}.booking-nav-chip.error{border-color:color-mix(in srgb,var(--ui-danger) 42%,var(--ui-line));background:var(--ui-danger-bg);color:var(--ui-danger)}.booking-nav-chip .booking-nav-health{grid-column:2/4;font-size:calc(var(--ui-font-xs) - 1px);font-weight:var(--ui-weight-strong)}.booking-nav-icon{display:grid;place-items:center;width:17px;height:17px}.booking-nav-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}.section-progress-dot{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-style:normal;background:var(--ui-surface-muted)}.booking-nav-chip.complete .section-progress-dot{background:var(--ui-success-bg);color:var(--ui-success)}.booking-nav-chip.error .section-progress-dot{background:var(--ui-danger);color:#fff}.booking-wizard .wizard-step.step-error{border-color:color-mix(in srgb,var(--ui-danger) 45%,var(--ui-line));color:var(--ui-danger)}.booking-wizard .wizard-step.step-error>span{background:var(--ui-danger-bg);color:var(--ui-danger)}.booking-wizard .wizard-step.step-complete:not(.active)>span{background:var(--ui-success-bg);color:var(--ui-success)}.wizard-bottom-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);margin-top:var(--ui-space-3);padding-top:var(--ui-space-3);border-top:1px solid var(--ui-line)}.wizard-bottom-actions #wizardSave{margin-inline-start:auto}.audit-side-box{padding-top:var(--ui-space-1);border-top:1px solid var(--ui-line)}.booking-history-button{width:100%;margin:0 0 var(--ui-space-2)}
/* Required sections and additional-service fields use compact responsive grids. */
#basicSection .inline-checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-space-2)}#basicSection .check-chip{min-width:0;justify-content:flex-start}.service-smart-card .service-dynamic-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-2);align-items:end;margin-top:var(--ui-space-2)}.service-smart-card .service-field{min-width:0}.service-smart-card .service-field-notes{grid-column:1/-1}.service-smart-card .service-range-note{font-size:var(--ui-font-xs);padding:var(--ui-space-2);align-self:end}.service-smart-card .grid2{align-items:end}
/* Dashboard omni search is summary/navigation only. */
.omni-summary-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:4px}.omni-summary-row{width:100%;min-height:31px;display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);padding:4px 7px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-card);color:var(--ui-text);font:inherit;text-align:right;cursor:pointer}.omni-summary-row:hover{background:var(--ui-row-hover);border-color:color-mix(in srgb,var(--blue) 30%,var(--ui-line))}.omni-summary-row span{display:flex;align-items:center;gap:5px;min-width:0}.omni-summary-row b{font-size:var(--ui-font-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.omni-summary-row small,.omni-summary-row em{font-size:calc(var(--ui-font-xs) - 1px);font-style:normal;color:var(--ui-text-secondary);white-space:nowrap}.omni-summary-row em{color:var(--blue-dark);font-weight:var(--ui-weight-strong)}
/* Dashboard density follows the amount of information. */
.notification-center .compact-alert-list{grid-template-columns:repeat(auto-fit,minmax(210px,280px));justify-content:start;gap:var(--ui-space-2)}.notification-center .alert-item{grid-template-columns:auto minmax(0,1fr);align-content:start;min-height:78px;padding:var(--ui-space-2)}.notification-center .alert-countdown{grid-column:2;justify-self:start;margin-top:1px}.notification-center .alert-copy b{font-size:var(--ui-font-sm)}
/* Central Report Center: wider catalog without horizontal scroll + quick/advanced filter hierarchy. */
.report-center-page{min-width:0}.report-center-title{margin-bottom:var(--ui-space-3)}.report-center-shell{display:grid;grid-template-columns:minmax(252px,282px) minmax(0,1fr);gap:var(--ui-space-3);align-items:start}.report-filter-sidebar{position:sticky;top:76px;margin:0;display:flex;flex-direction:column;max-height:calc(100vh - 92px);overflow:hidden}.report-filter-sidebar .report-sidebar-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--ui-space-2) var(--ui-space-3) var(--ui-space-3)}.report-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);padding:var(--ui-space-3);border-bottom:1px solid var(--ui-line)}.report-sidebar-head b{display:block;font-size:var(--ui-font-sm);color:var(--ui-heading)}.report-sidebar-head small{display:block;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.35}.report-catalog-card{margin:0;overflow:hidden}/* CATALOG HEAD - group name, then search, and nothing wedged between them.
   The group name used to sit against a sentence explaining that you may pick a report from this
   group or search by name, which the list below and the search box beside it both already say. The
   name now has room of its own and reads at heading size; the search grows into the rest of the
   header instead of holding a 300px corner of it, because it is the tool most used on this screen. */
.report-catalog-head{padding:var(--ui-space-3);border-bottom:1px solid var(--ui-line);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.report-catalog-head>b{flex:0 0 auto;font-size:17px;font-weight:var(--ui-weight-strong);color:var(--ui-heading)}
.report-catalog-head .report-search-wrap{padding:0;flex:1 1 340px;min-width:220px}/* Horizontal group selector. It scrolls INSIDE itself when the seven groups no longer fit, so the
   page itself never gains a horizontal scrollbar, and the buttons keep a readable minimum width
   rather than being squeezed to unreadable slivers. */
.report-group-bar{display:flex;gap:6px;align-items:stretch;margin-bottom:var(--ui-space-3);padding:5px;background:var(--ui-soft);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm,9px);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.report-group-bar::-webkit-scrollbar{height:6px}
.report-group-bar::-webkit-scrollbar-thumb{background:var(--ui-line);border-radius:99px}
.report-category-btn{flex:1 1 auto;min-width:max-content;min-height:32px;padding:6px 14px;border:1px solid transparent;border-radius:var(--ui-radius-xs);background:transparent;color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);line-height:1.25;white-space:nowrap;cursor:pointer}
.report-category-btn:hover{color:var(--ui-text)}.report-category-btn.active{background:var(--ui-info-bg);border-color:color-mix(in srgb,var(--blue) 36%,var(--ui-line));color:var(--blue-dark);font-weight:var(--ui-weight-strong)}/* Compact wrapping cards. The old tall single column with a fixed max-height reserved a scroll
   area even for a three-report group; the grid wraps instead and only scrolls when a long group
   genuinely exceeds the cap. */
.report-definition-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:5px;padding:var(--ui-space-2) var(--ui-space-3) var(--ui-space-3);max-height:none;overflow:visible}
.report-catalog-card:has(.report-definition-list>:nth-child(13)) .report-definition-list{max-height:232px;overflow-y:auto;overflow-x:hidden}.report-definition-btn{min-width:0;display:grid;gap:2px;text-align:right;padding:7px 8px;border:1px solid transparent;border-radius:var(--ui-radius-xs);background:transparent;color:var(--ui-text);font:inherit;cursor:pointer}.report-definition-btn:hover{background:var(--ui-row-hover)}.report-definition-btn.active{background:var(--ui-info-bg);border-color:color-mix(in srgb,var(--blue) 30%,var(--ui-line))}.report-definition-btn b{font-size:var(--ui-font-xs);color:var(--ui-heading)}/* §E3 — the catalog only needs enough copy to help pick a report, not the full sentence; clamped
   to one line with the complete text still reachable via the button's title tooltip. */
.report-definition-btn small{font-size:var(--ui-font-xs);line-height:1.35;color:var(--ui-text-secondary);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.report-viewer{display:grid;gap:var(--ui-space-3);min-width:0}.report-filter-card,.report-result-card{margin:0}.report-filter-card .card-head,.report-result-card .card-head{min-height:46px;padding:var(--ui-space-2) var(--ui-space-3)}.report-filter-card .card-body,.report-result-card .card-body{padding:var(--ui-space-3)}.report-filter-section{display:grid;gap:var(--ui-space-2)}.report-filter-section+.report-filter-section{margin-top:var(--ui-space-3);padding-top:var(--ui-space-3);border-top:1px solid var(--ui-line)}.report-filter-section-title{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2)}.report-filter-section-title b{font-size:var(--ui-font-xs);color:var(--ui-heading)}.report-filter-section-title small{font-size:calc(var(--ui-font-xs) - 1px);color:var(--ui-text-secondary)}.report-quick-filters{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.report-quick-filter{min-height:29px;padding:4px 8px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);cursor:pointer}.report-quick-filter:hover,.report-quick-filter.active{background:var(--ui-info-bg);border-color:color-mix(in srgb,var(--blue) 38%,var(--ui-line));color:var(--blue-dark);font-weight:var(--ui-weight-strong)}.report-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(135px,1fr));gap:var(--ui-space-2)}.report-filter-grid label{display:grid;gap:4px;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-medium);color:var(--ui-text-secondary)}.report-filter-grid input,.report-filter-grid select{min-height:var(--ui-control)}.report-no-filters{font-size:var(--ui-font-sm);color:var(--ui-text-secondary)}.report-applied-filters{display:flex;gap:5px;flex-wrap:wrap;margin-top:var(--ui-space-2)}.report-applied-filters span{padding:3px 7px;border-radius:999px;background:var(--ui-surface-subtle);border:1px solid var(--ui-line);font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.report-center-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,220px));justify-content:start;gap:var(--ui-space-2)}.report-summary-card{min-height:58px;padding:var(--ui-space-2) var(--ui-space-3);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);display:grid;align-content:center;gap:2px}.report-summary-card small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.report-summary-card b{font-size:var(--ui-font);color:var(--ui-heading);overflow-wrap:anywhere}/* GROUPED SCREEN SUMMARY — the same shape the printout uses, from the same grouping function.
   `.is-grouped` is set by ReportCenterUI.renderSummary() only when the figures carry the `— <CUR>`
   convention, so a report with a plain summary keeps the card row it always had. Cards flow: one
   currency fills the row as a single strong line of figures, several wrap into balanced rows. */
.report-center-summary.is-grouped{display:flex;flex-direction:column;gap:var(--ui-space-2)}
.report-summary-lead{display:flex;flex-wrap:wrap;gap:var(--ui-space-2)}
.report-summary-lead .report-summary-card{min-width:150px}
.report-summary-currencies{display:flex;flex-wrap:wrap;gap:var(--ui-space-2)}
.report-summary-currency{flex:1 1 320px;min-width:0;display:grid;grid-template-columns:auto 1fr;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);overflow:hidden}
.report-summary-currency-code{display:flex;align-items:center;justify-content:center;min-width:48px;padding:0 10px;background:var(--ui-heading);color:#fff;font-weight:var(--ui-weight-strong);letter-spacing:.5px;direction:ltr}
.report-summary-currency-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.report-summary-figure{padding:8px 11px;border-inline-start:1px solid var(--ui-line);border-top:1px solid var(--ui-line);min-width:0}
.report-summary-currency-figures > .report-summary-figure:nth-child(-n+3){border-top:0}
.report-summary-figure small{display:block;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);overflow-wrap:anywhere}
.report-summary-figure b{display:block;margin-top:2px;font-size:var(--ui-font);color:var(--ui-heading);direction:ltr;unicode-bidi:isolate;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.report-summary-figure.is-strong{background:var(--ui-surface-subtle)}
.report-summary-figure.is-strong b{font-size:calc(var(--ui-font) + 2px);font-weight:var(--ui-weight-strong)}
.report-page-controls label{display:flex;align-items:center;gap:5px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.report-page-controls select{min-height:32px;width:auto;padding-block:3px}/* §D2 — root cause of the Inventory/Blocks report's overlapping/clipped-off columns: this wrapper
   and its child (.ui-list-shell > .ui-table-wrap, injected via UIComponents.table() in
   ReportCenterUI.renderTable()) were BOTH independently scrollable (overflow-x:auto on both),
   so a table wider than the card rendered past this outer box's edge instead of scrolling inside
   the inner .ui-table-wrap that already owns horizontal scroll everywhere else in the system.
   The inner wrap is the one central table-scroll mechanism (§D1) — this outer wrapper only needs
   to shrink correctly inside the report card, never scroll on its own. */
.report-table-screen{min-width:0}.central-report-table{font-size:var(--ui-font-sm);table-layout:auto}.central-report-table th{white-space:nowrap}.central-report-table td{vertical-align:middle}.central-report-table .report-col-currency,.central-report-table .report-col-compact{width:1%;white-space:nowrap}.central-report-table .report-col-money{white-space:nowrap}.report-linked-value{font-size:inherit;text-align:right}.report-cell-secondary{display:block;margin-top:2px;font-size:calc(var(--ui-font-xs) - 1px);font-weight:var(--ui-weight-regular);color:var(--ui-text-secondary);unicode-bidi:isolate}.report-money,.report-ltr,.report-currency{direction:ltr;unicode-bidi:isolate;display:inline-block}.report-currency{font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong)}.report-result-card{min-width:0;max-width:100%;overflow:hidden}.report-result-card .card-body,.report-result-card .ui-list-shell,.report-table-screen{min-width:0;max-width:100%}.report-result-card .ui-list-shell{overflow:hidden}.report-result-card .ui-table-wrap{margin:0;max-width:100%;overflow-x:auto;overflow-y:visible}.report-result-card .ui-empty{min-height:72px}.report-result-card .ui-pager{margin-top:var(--ui-space-2)}
/* Customer modal owns no horizontal scrollbar; tables may scroll internally. */
/* ============================================================================================
   ONE LAYOUT CONTRACT FOR EVERY FILE MODAL.

   This block was written for the customer file and scoped to it, so the four other modals that
   already declare `.ui-file-modal` — the supplier/agent file, the employee file, the payroll slip
   and the payroll preparation screen — were left with only what ModalManager sets inline:
   `max-height:calc(100vh - 32px); overflow:auto` on the BOX. That scrolls the whole box, so the
   toolbar scrolls away with the content, a wide table drags the entire modal sideways, and on a
   short viewport the save button leaves the screen.

   The contract, now shared by all five:
     · the box is a flex COLUMN and never scrolls itself (`overflow:hidden`)
     · the toolbar is a fixed row at the top — it cannot scroll away
     · `.card-body` is the ONE vertical scroll, and the only one
     · nothing scrolls sideways except a table, which gets its own horizontal scroll
     · the box is clamped to the viewport, so it cannot exceed the screen

   `display` and `overflow` are !important for the same reason they always were here: ModalManager
   writes `display:block` and `overflow:auto` as INLINE styles on every opened box, and an inline
   declaration beats a stylesheet rule at any specificity. Matching `.modal-runtime-open` keeps the
   rule paired with exactly the state that sets those inline styles.
   ============================================================================================ */
.modal.modal-runtime-open>.ui-file-modal{display:flex!important;flex-direction:column;overflow:hidden!important;
 max-width:min(1080px,calc(100vw - 24px));width:min(1080px,calc(100vw - 24px));max-height:calc(100vh - 24px)}
.ui-file-modal>.modal-toolbar{flex:0 0 auto}
.ui-file-modal>.card-body{flex:1 1 auto;min-height:0;min-width:0;max-width:100%;overflow-y:auto;overflow-x:hidden!important}
.ui-file-modal>.card-body>*{min-width:0;max-width:100%}
.ui-file-modal [data-customer-panel],.ui-file-modal [data-employee-panel],.ui-file-modal [data-agent-panel]{min-width:0;max-width:100%;overflow-x:hidden}
.ui-file-modal .ui-list-shell{min-width:0;max-width:100%;overflow:hidden}
/* The ONE place sideways movement is allowed, and only for the table itself. */
.ui-file-modal .ui-table-wrap{max-width:100%;overflow-x:auto!important;overflow-y:visible}
.ui-file-modal .ui-data-table{max-width:none}
/* Tab rails scroll sideways rather than wrapping into a second row that pushes content down. */
.ui-file-modal .ui-drawer-tabs{max-width:100%;overflow-x:auto;overflow-y:hidden}
.customer-file-tabs{max-width:100%;overflow-x:auto;overflow-y:hidden}
/* User create/edit modal: fixed header/footer, compact profile, permissions own the scroll. */
/* `display` is !important for the same reason `overflow` beside it already is: ModalManager writes
   `display:block` as an INLINE style on every opened modal box, and an inline declaration beats a
   stylesheet rule at any specificity. Without this the grid never applied, the box stayed a block
   that clipped at its max-height, and every permission group past the fold — plus Save/Cancel —
   became unreachable. */
#userModal.modal.modal-runtime-open>.user-permission-modal{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;width:min(900px,calc(100vw - 24px));max-width:900px;height:min(760px,calc(100vh - 24px));max-height:calc(100vh - 24px);overflow:hidden!important}.user-permission-modal .user-modal-head{position:relative;top:auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);padding:var(--ui-space-2) var(--ui-space-3);border-bottom:1px solid var(--ui-line);background:var(--ui-card)}.user-modal-title-wrap{display:flex;align-items:center;gap:var(--ui-space-2);min-width:0}.user-modal-title-wrap h3{margin:0;font-size:var(--ui-section);color:var(--ui-heading)}.user-modal-title-wrap small{display:block;margin-top:1px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.user-modal-title-icon{width:30px;height:30px;border-radius:var(--ui-radius-xs);background:var(--ui-info-bg);color:var(--blue-dark);display:grid;place-items:center;flex:0 0 auto}.user-modal-title-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.user-modal-content{min-height:0;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--ui-space-2);padding:var(--ui-space-2) var(--ui-space-3);overflow:hidden}.user-profile-compact{min-width:0}.user-profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ui-space-2)}.user-profile-grid>div{min-width:0}.user-profile-grid label{display:grid;gap:3px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.user-profile-grid input,.user-profile-grid select{min-width:0;min-height:34px;padding-block:5px;font-size:var(--ui-font-sm)}
/* The role-title field offers a list, so it must LOOK like the two selects beside it: same box, same
   height, and the same caret in the same place. The caret is drawn with the identical inline SVG,
   offset and padding the shared select rule uses, so the three controls in this grid line up instead
   of one of them reading as a plain text box that unexpectedly pops a list. */
.user-profile-grid .user-role-suggest{position:relative;display:block;min-width:0}
.user-profile-grid .user-role-suggest>input{
 width:100%;
 /* The caret is painted 8px from the physical LEFT edge, which in this RTL form is the field's
    inline-END — exactly where the shared select rule puts it. The 32px therefore has to be
    padding-inline-END too, or the space is reserved on the wrong side and the text runs under the
    caret. */
 padding-inline-end:32px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355717a' 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-position:8px 50%;background-size:16px 16px}
/* The list opens downward inside the modal's own content box, which is tall enough for it, and is
   capped so it can never run past the modal or cover the actions row. */
.user-profile-grid .user-role-suggest>.booking-suggest-box{max-height:min(224px,38vh)}.user-permissions-section{min-height:0;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);overflow:hidden;background:var(--ui-card)}.user-permissions-head{min-height:38px;display:flex;align-items:center;padding:6px 9px;border-bottom:1px solid var(--ui-line);background:var(--ui-surface-subtle)}.user-permissions-head b{display:block;font-size:var(--ui-font-sm);color:var(--ui-heading)}.user-permissions-head small{display:block;font-size:calc(var(--ui-font-xs) - 1px);color:var(--ui-text-secondary)}.user-permission-matrix-host{min-height:0;min-width:0;overflow:hidden}.user-permission-modal .permission-matrix{height:100%;max-height:none;margin:0;overflow:auto;border:0;border-radius:0;scrollbar-gutter:stable}.user-permission-modal .permission-matrix table{width:100%;min-width:660px;border-collapse:separate;border-spacing:0;table-layout:fixed}.user-permission-modal .permission-matrix th,.user-permission-modal .permission-matrix td{height:31px;padding:3px 5px;border-bottom:1px solid var(--ui-cell-line);border-inline-start:1px solid var(--ui-cell-line);text-align:center;font-size:calc(var(--ui-font-xs) - 1px);background:var(--ui-card)}.user-permission-modal .permission-matrix thead th{position:sticky;top:0;z-index:4;background:var(--ui-table-head-bg);color:var(--ui-heading);font-weight:var(--ui-weight-strong);white-space:nowrap}.user-permission-modal .permission-module-col{position:sticky!important;right:0;z-index:3!important;width:150px!important;min-width:150px;text-align:right!important;border-inline-start:0!important;background:var(--ui-card)!important}.user-permission-modal thead .permission-module-col{z-index:6!important;background:var(--ui-table-head-bg)!important}.user-permission-modal .permission-check-cell label{width:100%;height:100%;display:grid;place-items:center;cursor:pointer}.user-permission-modal .permission-matrix input[type=checkbox]{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--blue)}.permission-admin-note{position:sticky;bottom:0;margin:0;padding:5px 8px;border-top:1px solid var(--ui-line);background:var(--ui-info-bg);font-size:var(--ui-font-xs)}.user-modal-message{min-height:0;margin:0}.user-modal-actions{position:relative!important;bottom:auto!important;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:var(--ui-space-2);min-height:50px;margin:0;padding:var(--ui-space-2) var(--ui-space-3);border-top:1px solid var(--ui-line);background:var(--ui-card)}
@media(max-width:1180px){.report-filter-grid{grid-template-columns:repeat(3,minmax(130px,1fr))}.report-center-shell{grid-template-columns:minmax(250px,285px) minmax(0,1fr)}}
@media(max-width:1050px){#editorPage .editor-shell{grid-template-columns:1fr}.booking-side-panel{position:static!important;max-height:none!important}.booking-quick-nav-chips{grid-template-columns:repeat(2,minmax(0,1fr))}.report-center-shell{grid-template-columns:1fr}.report-catalog{position:static}.report-category-list{grid-template-columns:repeat(3,minmax(0,1fr))}.report-definition-list{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#basicSection .inline-checks{grid-template-columns:repeat(2,minmax(0,1fr))}.service-smart-card .service-dynamic-fields{grid-template-columns:1fr}.service-smart-card .service-field-notes{grid-column:auto}.notification-center .compact-alert-list{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.user-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#userModal.modal.modal-runtime-open>.user-permission-modal{width:calc(100vw - 16px);height:calc(100vh - 16px);max-height:calc(100vh - 16px)}.report-category-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.booking-quick-nav-chips{grid-template-columns:1fr}.booking-nav-health{display:none}#basicSection .inline-checks,.report-definition-list,.report-filter-grid{grid-template-columns:1fr}.report-category-list{grid-template-columns:repeat(2,minmax(0,1fr))}.report-center-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.omni-summary-groups{grid-template-columns:1fr}.user-profile-grid{grid-template-columns:1fr}.user-modal-title-wrap small,.user-permissions-head small{display:none}.user-permission-modal .permission-matrix table{min-width:620px}.user-permission-modal .permission-module-col{width:128px!important;min-width:128px}.report-filter-section-title{align-items:flex-start;flex-direction:column}}
.modern-voucher .mv-summary-table th,.modern-voucher .mv-summary-table td{width:auto}.modern-voucher .mv-trip-dates-row th{white-space:nowrap}.modern-voucher .mv-room-assignments{margin-top:var(--ui-space-2)}.modern-voucher .mv-room-assignments-title{font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-heading);margin-bottom:var(--ui-space-1)}.modern-voucher .mv-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-2)}.modern-voucher .mv-room-hotel{border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);padding:var(--ui-space-2);background:var(--ui-surface-subtle)}.modern-voucher .mv-room-hotel>b{font-size:var(--ui-font-xs);color:var(--ui-heading)}.modern-voucher .mv-room-hotel>div{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.modern-voucher .mv-room-hotel span{display:grid;gap:1px;padding:3px 6px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-card)}.modern-voucher .mv-room-hotel strong,.modern-voucher .mv-room-hotel small{font-size:calc(var(--ui-font-xs) - 1px)}@media(max-width:900px){.modern-voucher .mv-traveler-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.modern-voucher .mv-room-grid{grid-template-columns:1fr}}
@media(max-width:700px){.modern-voucher .mv-traveler-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.modern-voucher .mv-traveler-grid{grid-template-columns:1fr}}
/* Voucher screen parity for the 6.8.11 print refinements. */
.modern-voucher .mv-summary-table th,.modern-voucher .mv-summary-table td{vertical-align:middle}.modern-voucher .mv-traveler-item{direction:rtl;text-align:right;align-content:start}.modern-voucher .mv-traveler-item bdi{direction:ltr;unicode-bidi:isolate}.modern-voucher .mv-room-lines{display:grid;gap:2px;margin-top:4px;padding-top:4px;border-top:1px dotted var(--ui-line)}.modern-voucher .mv-room-lines small{display:block;font-size:calc(var(--ui-font-xs) - 1px);color:var(--ui-text-secondary)}

/* 6.8.11 wizard ownership hardening: non-current step content must not participate in layout. */
#editorPage .form-card.wizard-hidden{display:none!important}
/* Additional services: operational two-column edit grid. */
.service-smart-card .service-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-2);align-items:end}
.service-smart-card .service-edit-grid .service-field-type{grid-column:auto}
.service-smart-card .service-edit-grid .service-field-notes{grid-column:1/-1}
.service-smart-card>.service-range-note{margin-top:4px;padding:0;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);background:transparent;border:0}
@media(max-width:760px){.service-smart-card .service-edit-grid{grid-template-columns:1fr}.service-smart-card .service-edit-grid .service-field-notes{grid-column:auto}}

/* V2.5.0-dev.6.8.12 — booking final-density polish */
.flight-smart-card{padding:var(--ui-space-3)}
.flight-smart-card .flight-edit-row{display:grid;gap:var(--ui-space-2);align-items:end;margin-top:var(--ui-space-2)}
.flight-smart-card .flight-edit-row-1{grid-template-columns:repeat(2,minmax(140px,220px));justify-content:start}
.flight-smart-card .flight-edit-row-2{grid-template-columns:minmax(180px,1fr) 34px minmax(180px,1fr) minmax(155px,.65fr)}
.flight-smart-card .flight-edit-row-3{grid-template-columns:minmax(130px,.7fr) minmax(165px,.9fr) minmax(180px,1fr) minmax(110px,.55fr)}
.flight-smart-card .flight-edit-row-4{grid-template-columns:repeat(4,minmax(105px,1fr));max-width:760px}
.flight-smart-card .flight-edit-row-5{grid-template-columns:1fr}
.flight-smart-card .flight-secondary-row{display:flex;align-items:end;gap:var(--ui-space-2);margin-top:var(--ui-space-2);flex-wrap:wrap}
.flight-smart-card .flight-secondary-row>div{min-width:160px;max-width:340px;flex:0 1 260px}
.flight-smart-card .arrival-time-inline{display:grid;grid-template-columns:minmax(92px,1fr) auto;gap:5px;align-items:center}
.flight-smart-card .arrival-day-offset{min-width:120px;padding-inline:6px}
.flight-smart-card .route-swap-btn{align-self:end;margin-bottom:2px;width:34px;height:36px;padding:0}
.flight-smart-card textarea{min-height:58px}
.wizard-final-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--ui-space-2)}
.wizard-final-actions .btn{min-height:40px;padding-inline:18px}
.wizard-primary-save{font-weight:var(--ui-weight-strong)}
.flight-structured-baggage{display:grid;gap:6px;margin:6px 0 8px}.flight-baggage-presets{display:flex;flex-wrap:wrap;align-items:center;gap:5px}.flight-preset-label{font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-text-secondary);margin-inline-end:2px}
.flight-preset{min-height:28px;padding:2px 9px;font-size:var(--ui-font-xs)}.flight-preset.is-active{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,#fff);color:var(--blue-dark);font-weight:var(--ui-weight-strong)}
.flight-preset-check{display:inline-flex;align-items:center;gap:5px;margin-inline-start:6px;font-size:var(--ui-font-xs)}
.flight-special-services{margin-top:6px}
.standalone-line-service{margin-bottom:4px}
/* e-mail and notifications (Phase 4 / Round 3) - the shared settings card, nothing new in kind */
.email-settings{display:grid;gap:var(--ui-space-3)}.email-card .card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.email-mode-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:var(--ui-space-3)}.email-mode-option{display:inline-flex;align-items:center;gap:6px;font-weight:var(--ui-weight-strong)}.email-mode-option.is-disabled{opacity:.55}
.email-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--ui-space-3);margin-bottom:var(--ui-space-3)}
.email-inline-check{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:var(--ui-font-sm)}.email-note{margin:0 0 6px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.email-warn{display:block;margin-top:4px;color:var(--ui-danger);font-size:var(--ui-font-xs)}.email-actions{display:flex;justify-content:flex-start}
.email-template-list{display:flex;flex-wrap:wrap;gap:6px}.email-test-row{display:flex;flex-wrap:wrap;gap:8px}.email-test-row input{flex:1 1 220px;min-width:0}
.email-test-state{margin-top:8px;font-size:var(--ui-font-sm)}.email-ok{color:var(--ui-success,#15803d)}.email-fail{color:var(--ui-danger)}.email-sending{color:var(--ui-text-secondary)}
.email-log .email-error{max-width:260px;font-size:var(--ui-font-xs);color:var(--ui-danger);overflow-wrap:anywhere}
.email-preview-box{max-width:760px;width:calc(100vw - 24px)}.email-preview-stage{display:flex;justify-content:center;background:#f3f4f6;padding:12px}
.email-preview-stage iframe{width:100%;height:70vh;border:0;background:#fff;transition:width .2s}.email-preview-stage iframe.is-phone{width:375px;max-width:100%}
.email-settings label.email-mode-option,.email-settings label.email-inline-check{display:inline-flex;flex-direction:row;align-items:center;gap:6px;width:auto;white-space:nowrap;margin:0}
.email-settings label.email-inline-check{display:flex;margin:6px 0;white-space:normal}
.email-settings .email-mode-option input,.email-settings .email-inline-check input{width:auto;min-width:0;flex:0 0 auto;margin:0;height:auto}
.share-email{margin-top:10px}.share-email-form{display:grid;gap:6px}.share-email-form input,.share-email-form textarea{width:100%;min-width:0}
.auth-link-btn{border:0;background:none;padding:0;color:var(--blue,#1d4ed8);font:inherit;text-decoration:underline;cursor:pointer}
.auth-recovery-form{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.auth-recovery-form input{flex:1 1 180px;min-width:0}.auth-recovery-note,.auth-recovery-done{display:block;margin-top:4px}
.supplier-item-service{display:grid;gap:4px;min-width:0}.supplier-item-service select,.supplier-item-service input{min-width:0;width:100%}
.wizard-primary-save.has-unsaved::after{content:'';display:inline-block;width:7px;height:7px;margin-inline-start:7px;border-radius:50%;background:var(--ui-warning,#d97706);vertical-align:middle}
.btn-red-outline{background:transparent;color:var(--ui-danger);border:1px solid color-mix(in srgb,var(--ui-danger) 55%,var(--ui-line))}
.btn-red-outline:hover{background:var(--ui-danger-bg)}
.editor-header-status{align-items:center;color:var(--ui-text-secondary)}
@media(max-width:900px){
 .flight-smart-card .flight-edit-row-2,.flight-smart-card .flight-edit-row-3,.flight-smart-card .flight-edit-row-4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .flight-smart-card .flight-edit-row-1{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
 .flight-smart-card .flight-edit-row-1,.flight-smart-card .flight-edit-row-2,.flight-smart-card .flight-edit-row-3,.flight-smart-card .flight-edit-row-4{grid-template-columns:1fr}
 .wizard-bottom-actions{flex-wrap:wrap}
 .wizard-final-actions{width:100%;margin-inline-start:0;display:grid;grid-template-columns:1fr}
}

/* V2.5.0-dev.6.8.12 — RTL application shell */
:root{--app-sidebar-w:252px;--app-sidebar-collapsed-w:72px;--app-topbar-h:60px}
body{min-height:100vh;padding-top:var(--app-topbar-h);padding-right:var(--app-sidebar-w);transition:padding-right .18s ease}
.app-sidebar{position:fixed;inset:0 0 0 auto;width:var(--app-sidebar-w);z-index:120;display:flex;flex-direction:column;background:var(--ui-card);border-left:1px solid var(--ui-line);box-shadow:-6px 0 22px rgba(18,40,54,.05);overflow:visible;transition:width .18s ease}
.sidebar-brand{min-height:72px;display:grid;grid-template-columns:42px minmax(0,1fr) 30px;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid var(--ui-line);cursor:pointer}
.sidebar-brand img{width:40px;height:40px;object-fit:contain}.sidebar-brand-copy{min-width:0}.sidebar-brand-copy h1{margin:0;font-size:var(--ui-font-sm);line-height:1.35;color:var(--ui-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-brand-copy p{margin:2px 0 0;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-collapse-btn{width:28px;height:28px;padding:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-surface-subtle);color:var(--ui-text-secondary);cursor:pointer}
.sidebar-create-booking{margin:10px;min-height:42px;border:0;border-radius:var(--ui-radius-sm);background:var(--blue);color:#fff;font:inherit;font-weight:var(--ui-weight-bold);display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}.sidebar-create-booking span{font-size:18px}.sidebar-nav{display:grid;align-content:start;gap:2px;padding:2px 8px 12px;overflow-y:auto;overflow-x:visible;min-height:0;flex:1}.sidebar-nav-item,.sidebar-submenu :is(button,a){width:100%;min-height:38px;border:0;border-radius:var(--ui-radius-xs);background:transparent;color:var(--ui-text);font:inherit;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);cursor:pointer;text-align:right}.sidebar-nav-item{display:grid;grid-template-columns:25px minmax(0,1fr) 20px;align-items:center;gap:7px;padding:6px 9px}.sidebar-nav-item:hover,.sidebar-submenu :is(button,a):hover{background:var(--ui-row-hover)}.sidebar-nav-item.active,.sidebar-submenu :is(button,a).active{background:var(--ui-info-bg);color:var(--blue-dark);box-shadow:inset -3px 0 0 var(--blue)}.sidebar-nav-icon{display:grid;place-items:center;width:24px;height:24px;font-size:15px;color:var(--ui-text-secondary)}.sidebar-nav-item.active .sidebar-nav-icon,.active-group>.sidebar-group-toggle .sidebar-nav-icon{color:var(--blue)}.sidebar-group-caret{font-size:12px;transition:transform .15s ease}.sidebar-nav-group.group-open>.sidebar-group-toggle .sidebar-group-caret{transform:rotate(180deg)}.sidebar-nav-group{position:relative}.sidebar-submenu{display:none;gap:2px;padding:2px 31px 5px 5px}.sidebar-nav-group.group-open>.sidebar-submenu{display:grid}.sidebar-submenu :is(button,a){padding:6px 9px;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-medium)}.sidebar-subgroup{display:grid;gap:2px;border-radius:var(--ui-radius-xs);transition:background-color .15s ease}.sidebar-subgroup-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:7px 9px 4px!important;margin:0;background:transparent;color:var(--ui-text)!important;font-size:calc(var(--ui-font-xs) - 1px)!important;font-weight:var(--ui-weight-heavy)!important;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;border-radius:var(--ui-radius-xs)}.sidebar-subgroup:first-child .sidebar-subgroup-toggle{padding-top:2px!important}.sidebar-subgroup-toggle:hover{background:var(--ui-row-hover)}.sidebar-subgroup-caret{font-size:10px;color:var(--ui-text-secondary);transition:transform .15s ease}.sidebar-subgroup.subgroup-open>.sidebar-subgroup-toggle .sidebar-subgroup-caret{transform:rotate(180deg)}.sidebar-subgroup-items{display:none;gap:3px;padding-inline-start:8px}.sidebar-subgroup.subgroup-open>.sidebar-subgroup-items{display:grid}
/* Finance sidebar hierarchy — single-open accordion (AppShell.toggleSubgroup/openSubgroup close
   sibling subgroups) reduces clutter when both finance subgroups used to stay open together; the
   open subgroup gets a light surface tint + inset outline so its scope reads clearly at a glance,
   and its items get extra indentation so the parent/child relationship is visually unambiguous. */
.sidebar-subgroup.subgroup-open{background:var(--ui-surface-subtle);box-shadow:inset 0 0 0 1px var(--ui-line);padding-bottom:3px}
.sidebar-subgroup.subgroup-open>.sidebar-subgroup-toggle{color:var(--blue-dark)!important}
@media(prefers-reduced-motion:reduce){.sidebar-subgroup,.sidebar-subgroup-caret,.sidebar-group-caret{transition:none!important}}
.sidebar-bottom{position:relative;border-top:1px solid var(--ui-line);padding:8px;display:grid;gap:6px;background:var(--ui-card)}.sidebar-quick-create{position:relative}.sidebar-quick-toggle{width:100%;min-height:34px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-surface-subtle);color:var(--ui-text);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);cursor:pointer}.sidebar-quick-menu{position:absolute;right:calc(100% + 8px);bottom:0;width:190px;padding:6px;display:grid;gap:2px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);box-shadow:var(--ui-shadow-lg);z-index:150}.sidebar-quick-menu.hidden{display:none}.sidebar-quick-menu button{border:0;border-radius:var(--ui-radius-xs);background:transparent;color:var(--ui-text);font:inherit;font-size:var(--ui-font-xs);padding:7px 8px;text-align:right;cursor:pointer}.sidebar-quick-menu button:hover{background:var(--ui-row-hover)}
.sidebar-user-button{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:7px;padding:5px 6px;border:0;border-radius:var(--ui-radius-xs);background:transparent;color:var(--ui-text);font:inherit;text-align:right;cursor:pointer}.sidebar-user-button:hover{background:var(--ui-row-hover)}.sidebar-user-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ui-info-bg);color:var(--blue-dark);font-weight:var(--ui-weight-bold)}.sidebar-user-copy{display:grid;min-width:0}.sidebar-user-copy b,.sidebar-user-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-copy b{font-size:var(--ui-font-xs)}.sidebar-user-copy small{font-size:calc(var(--ui-font-xs) - 1px);color:var(--ui-text-secondary)}.sidebar-user-menu{right:calc(100% + 8px)!important;left:auto!important;bottom:0!important;top:auto!important;min-width:200px}
.app-topbar{position:fixed;top:0;right:var(--app-sidebar-w);left:0;height:var(--app-topbar-h);z-index:105;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 22px;background:color-mix(in srgb,var(--ui-card) 96%,transparent);border-bottom:1px solid var(--ui-line);backdrop-filter:blur(8px);transition:right .18s ease}.app-topbar h2{margin:0;font-size:var(--ui-section);line-height:1.2;color:var(--ui-heading)}.app-topbar-meta{display:flex;align-items:center;gap:8px}.main{max-width:none!important;margin:0!important;padding:22px 24px 46px!important}.global-footer{margin-right:0!important}.backup-top-alert{right:calc(var(--app-sidebar-w) + 12px)!important;top:calc(var(--app-topbar-h) + 8px)!important;transition:right .18s ease}
/* Header Quick Tools (Pre-Settings Productivity Round) — visually separated from system info
   (date/advisory-FX, .app-topbar-date) by living in .app-topbar-actions next to the user menu,
   not beside the clock. Reuses the sidebar icon system + the same border/radius/hover language as
   .sidebar-quick-toggle so it reads as one more topbar control, not a new visual language. */
.app-topbar-actions{display:flex;align-items:center;gap:10px}
.topbar-quick-tools{display:flex;align-items:center;gap:6px}
/* §Part A — Quick Tools read as live WORK actions, the context chip (.app-topbar-date) as muted
   ambient info: same border/radius language, but an info-tinted fill + accent icon/text color (the
   exact tokens .sidebar-nav-item.active already uses for "this is active/actionable") is the whole
   visual-hierarchy difference — no new palette. */
.topbar-quick-btn{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid transparent;border-radius:var(--ui-radius-xs);background:var(--ui-info-bg);color:var(--blue-dark);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);cursor:pointer;white-space:nowrap}
.topbar-quick-btn:hover{background:color-mix(in srgb,var(--ui-info-bg) 70%,var(--blue) 12%)}
.topbar-quick-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.topbar-quick-btn .sidebar-nav-icon{width:18px;height:18px;font-size:15px;color:var(--blue-dark)}
@media(max-width:980px){.topbar-quick-label{display:none}.topbar-quick-btn{padding:0;width:34px;justify-content:center}}
body.sidebar-collapsed{padding-right:var(--app-sidebar-collapsed-w)}body.sidebar-collapsed .app-sidebar{width:var(--app-sidebar-collapsed-w)}body.sidebar-collapsed .app-topbar{right:var(--app-sidebar-collapsed-w)}body.sidebar-collapsed .backup-top-alert{right:calc(var(--app-sidebar-collapsed-w) + 12px)!important}body.sidebar-collapsed .sidebar-brand{grid-template-columns:1fr;padding-inline:9px;justify-items:center}body.sidebar-collapsed .sidebar-brand-copy,body.sidebar-collapsed .sidebar-collapse-btn,body.sidebar-collapsed .sidebar-nav-item b,body.sidebar-collapsed .sidebar-nav-item .sidebar-group-caret,body.sidebar-collapsed .sidebar-create-booking b,body.sidebar-collapsed .sidebar-quick-toggle span,body.sidebar-collapsed .sidebar-user-copy,body.sidebar-collapsed .sidebar-user-button>span:last-child{display:none}body.sidebar-collapsed .sidebar-create-booking{margin-inline:8px;padding:0}body.sidebar-collapsed .sidebar-nav{padding-inline:7px;overflow:visible}body.sidebar-collapsed .sidebar-nav-item{grid-template-columns:1fr;padding-inline:5px;justify-items:center}body.sidebar-collapsed .sidebar-nav-icon{font-size:17px}body.sidebar-collapsed .sidebar-nav-group .sidebar-submenu{position:absolute;right:calc(100% + 7px);top:0;width:205px;padding:6px;z-index:170;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);box-shadow:var(--ui-shadow-lg)}body.sidebar-collapsed .sidebar-user-button{grid-template-columns:1fr;justify-items:center}body.sidebar-collapsed .sidebar-quick-menu,body.sidebar-collapsed .sidebar-user-menu{right:calc(100% + 8px)!important}
@media(max-width:860px){:root{--app-sidebar-w:72px}body{padding-right:72px}.app-sidebar{width:72px}.app-topbar{right:72px;padding-inline:12px}.backup-top-alert{right:82px!important}.sidebar-brand{grid-template-columns:1fr;padding-inline:8px;justify-items:center}.sidebar-brand-copy,.sidebar-collapse-btn,.sidebar-nav-item b,.sidebar-nav-item .sidebar-group-caret,.sidebar-create-booking b,.sidebar-quick-toggle span,.sidebar-user-copy,.sidebar-user-button>span:last-child{display:none}.sidebar-create-booking{margin-inline:8px;padding:0}.sidebar-nav{padding-inline:7px;overflow:visible}.sidebar-nav-item{grid-template-columns:1fr;padding-inline:5px;justify-items:center}.sidebar-nav-group .sidebar-submenu{position:absolute;right:calc(100% + 7px);top:0;width:205px;padding:6px;z-index:170;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);box-shadow:var(--ui-shadow-lg)}.sidebar-user-button{grid-template-columns:1fr;justify-items:center}.main{padding:16px 12px 38px!important}.app-topbar h2{font-size:var(--ui-font-lg)}}
@media(max-width:520px){.app-topbar-meta{display:none}.app-topbar{height:54px}.main{padding-top:12px!important}}

/* V2.5.0-dev.6.8.12 — final report/search/dashboard/list density */
.full-search-table{font-size:var(--ui-font-sm)}.full-search-table th,.full-search-table td{padding-block:6px!important}.full-search-table th:nth-child(1),.full-search-table td:nth-child(1){width:90px}.full-search-table th:nth-child(2),.full-search-table td:nth-child(2){width:170px}.full-search-table th:nth-child(4),.full-search-table td:nth-child(4){width:112px}.full-search-table th:nth-child(5),.full-search-table td:nth-child(5){width:115px}.full-search-table th:nth-child(6),.full-search-table td:nth-child(6){width:100px}.full-search-table th:nth-child(7),.full-search-table td:nth-child(7){width:76px}.full-search-table td:nth-child(3){min-width:260px}.full-search-table .ui-record-actions{min-width:0}
.central-report-table .report-col-currency{width:64px;min-width:58px;text-align:center}.central-report-table .report-col-passengers,.central-report-table .report-col-bookings,.central-report-table .report-col-current,.central-report-table .report-col-statusLabel,.central-report-table .report-col-count{width:1%;white-space:nowrap}.central-report-table .report-col-total,.central-report-table .report-col-paid,.central-report-table .report-col-balance,.central-report-table .report-col-amount,.central-report-table .report-col-opening,.central-report-table .report-col-closing,.central-report-table .report-col-externalIn,.central-report-table .report-col-externalOut{width:1%;white-space:nowrap}.central-report-table .report-col-customerDisplay,.central-report-table .report-col-customer,.central-report-table .report-col-partyName,.central-report-table .report-col-description,.central-report-table .report-col-title,.central-report-table .report-col-note{min-width:180px}.central-report-table .report-col-destination{min-width:125px}.report-group-row td{background:var(--ui-info-bg)!important;color:var(--ui-heading);font-weight:var(--ui-weight-strong);padding-block:7px!important}
.compact-monitor-list{display:grid;gap:5px}.notification-center .compact-alert-list{grid-template-columns:repeat(auto-fit,minmax(230px,320px));justify-content:start}.compact-alert-card{min-height:0}
#listsSettingsPage .settings-tabs{gap:3px;margin-bottom:var(--ui-space-2)}#listsSettingsPage .settings-tabs button{min-height:30px;padding:4px 8px;font-size:var(--ui-font-xs)}#listsSettingsPage .card-body{padding:var(--ui-space-3)}#listsSettingsPage .option-list{display:grid;gap:4px;margin-top:var(--ui-space-2)}#listsSettingsPage .option-list>div{min-height:36px;padding:5px 8px}#listsSettingsPage .grid2{gap:var(--ui-space-2)}
.central-print-preview-box{padding:0!important}.central-print-preview-box .modal-toolbar{position:relative;z-index:2}
@media(max-width:760px){.full-search-table td:nth-child(3){min-width:210px}}

/* V2.5.0-dev.6.8.13 — final UI/UX integration polish */
:root{--app-topbar-h:64px}
.app-sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 7%,var(--ui-card)) 0,var(--ui-card) 38%);border-left-color:color-mix(in srgb,var(--blue) 20%,var(--ui-line));box-shadow:-8px 0 26px rgba(15,34,45,.08)}
.sidebar-brand{min-height:78px;grid-template-columns:50px minmax(0,1fr) 32px;padding:10px 11px;background:color-mix(in srgb,var(--blue) 5%,transparent)}
.sidebar-brand img{width:48px;height:48px}.sidebar-brand-copy h1{font-size:var(--ui-font);font-weight:var(--ui-weight-bold)}.sidebar-brand-copy p{font-size:var(--ui-font-xs)}
.sidebar-collapse-btn{width:31px;height:31px;color:var(--blue-dark);border-color:color-mix(in srgb,var(--blue) 28%,var(--ui-line));background:var(--ui-card);font-weight:var(--ui-weight-bold)}
.sidebar-nav-item:hover,.sidebar-submenu :is(button,a):hover{background:color-mix(in srgb,var(--blue) 7%,var(--ui-row-hover))}.sidebar-nav-item.active,.sidebar-submenu :is(button,a).active{background:color-mix(in srgb,var(--blue) 13%,var(--ui-card));color:var(--blue-dark);box-shadow:inset -4px 0 0 var(--blue)}
.sidebar-create-booking{margin:10px 10px 6px;min-height:44px;box-shadow:0 4px 12px color-mix(in srgb,var(--blue) 18%,transparent)}
.sidebar-quick-create-top{margin:0 10px 8px}.sidebar-quick-create-top .sidebar-quick-toggle{min-height:38px;border-color:color-mix(in srgb,var(--blue) 24%,var(--ui-line));background:color-mix(in srgb,var(--blue) 5%,var(--ui-card));font-size:var(--ui-font-sm)}
.app-topbar{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(220px,1fr) auto;gap:14px;padding:7px 18px;background:color-mix(in srgb,var(--ui-card) 97%,transparent)}
.app-topbar-brand{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:0;min-width:0;cursor:pointer}.app-topbar-brand-copy{display:grid;min-width:0}/* line-height 1.5: a tighter line box clips the descenders of ج/ح/ة under overflow:hidden. The
   company name stays on one line by design — it is chrome, not content — but it is not cut. */
.app-topbar-brand-copy b,.app-topbar-brand-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}.app-topbar-brand-copy b{font-size:var(--ui-font-sm);color:var(--ui-heading)}.app-topbar-brand-copy small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.app-topbar-actions{display:flex;align-items:center;gap:7px;justify-self:end}.app-menu-toggle{min-height:38px;display:flex;align-items:center;gap:6px}.app-menu-toggle [data-shell-icon]{display:grid;place-items:center;width:18px}body.sidebar-collapsed .sidebar-collapse-btn{display:grid!important;place-items:center;position:absolute;right:calc(100% + 7px);top:22px;z-index:180;background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:var(--ui-shadow)}body.sidebar-collapsed .sidebar-brand{position:relative}body.sidebar-collapsed .sidebar-brand img{width:46px;height:46px}
body.sidebar-collapsed .sidebar-quick-create-top{margin-inline:8px}.sidebar-quick-create-top .sidebar-quick-menu{bottom:auto;top:0}

/* Booking: fixed actions and shared compact service layout */
#editorPage{padding-bottom:10px}.booking-fixed-actions{position:sticky;bottom:10px;z-index:78;display:flex;align-items:center;justify-content:flex-start;gap:8px;width:max-content;max-width:calc(100% - 24px);margin:10px 0 0 auto;padding:8px 10px;border:1px solid color-mix(in srgb,var(--blue) 24%,var(--ui-line));border-radius:var(--ui-radius);background:color-mix(in srgb,var(--ui-card) 94%,transparent);box-shadow:0 8px 24px rgba(18,40,54,.13);backdrop-filter:blur(10px)}.booking-fixed-actions .btn{min-height:42px;padding-inline:18px;font-weight:var(--ui-weight-strong)}.booking-fixed-actions .btn:disabled{opacity:.48;cursor:not-allowed}.booking-fixed-actions .btn-red-outline{min-width:92px}
.flight-smart-card,.hotel-smart-card,.service-smart-card{border-color:color-mix(in srgb,var(--blue) 13%,var(--ui-line));background:color-mix(in srgb,var(--ui-card) 98%,var(--ui-surface-subtle));box-shadow:none}.flight-smart-card .row-top,.hotel-smart-card .row-top,.service-smart-card .row-top{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--blue) 10%,var(--ui-line))}
.flight-smart-card .flight-edit-row{gap:8px;margin-top:8px}.flight-smart-card .flight-edit-row-1{grid-template-columns:minmax(112px,.6fr) minmax(112px,.6fr) minmax(190px,1.25fr) minmax(190px,1.25fr);max-width:none}.flight-smart-card .flight-edit-row-2{grid-template-columns:minmax(150px,.9fr) minmax(160px,1fr) minmax(105px,.55fr) minmax(110px,.58fr) minmax(145px,.75fr)}.flight-smart-card .flight-edit-row-3{grid-template-columns:repeat(5,minmax(100px,.72fr));max-width:820px}.flight-smart-card .flight-edit-row-4{grid-template-columns:1fr;max-width:none}.flight-smart-card .flight-secondary-row{margin-top:8px;display:grid;grid-template-columns:minmax(220px,420px);gap:8px}.flight-route-to-wrap{display:flex;align-items:flex-end;gap:6px;min-width:0}.flight-route-to-wrap .flight-airport-field{flex:1 1 auto;min-width:0}.flight-route-to-wrap .route-swap-btn{flex:0 0 auto;width:34px;height:36px;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs)}.flight-smart-card .flight-short-field input,.flight-smart-card .flight-short-field select{min-width:0}.flight-smart-card textarea{min-height:56px}.flight-arrival-field{min-width:0}.service-layout-row label{margin-bottom:4px}.hotel-smart-card .grid4,.hotel-smart-card .grid2{gap:8px}.service-smart-card .service-edit-grid{gap:8px}

/* Preview + WhatsApp */
.booking-preview-box{width:min(1080px,calc(100vw - 34px));max-width:1080px!important;max-height:calc(100vh - 30px);overflow:hidden;display:flex;flex-direction:column}.booking-preview-box>.modal-toolbar{flex:0 0 auto;gap:8px;padding:10px 12px}.booking-preview-box>.preview-area{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px}.booking-preview-box .modal-toolbar .btn{min-height:38px;padding-inline:13px}.btn-whatsapp,.ui-icon-btn.btn-whatsapp{background:#25D366!important;color:#fff!important;border-color:#1fb857!important}.btn-whatsapp:hover,.ui-icon-btn.btn-whatsapp:hover{background:#1fb857!important}.wa-action-icon{font-size:14px}
.whatsapp-compose-box{width:min(680px,calc(100vw - 28px));max-height:calc(100vh - 34px);overflow:hidden;display:flex;flex-direction:column}.whatsapp-compose-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--ui-line);flex:0 0 auto}.whatsapp-compose-head h3{margin:0}.whatsapp-compose-head small{display:block;margin-top:2px;color:var(--ui-text-secondary)}.whatsapp-compose-body{padding:12px 14px;display:grid;gap:9px;overflow-y:auto;min-height:0}.whatsapp-compose-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:9px}.whatsapp-compose-body textarea{min-height:150px}.whatsapp-compose-note{padding:8px 10px;border-radius:var(--ui-radius-xs);background:var(--ui-info-bg);color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.55}.whatsapp-compose-footer{display:flex;justify-content:flex-start;gap:8px;padding:10px 14px;border-top:1px solid var(--ui-line);background:var(--ui-card);flex:0 0 auto}.whatsapp-compose-footer .btn-primary{background:#25D366;border-color:#25D366}

/* Dashboard: same visual scale and preview area */
.alert-item .alert-state-badge{text-transform:none}

/* Search/reports/lists/template center final density */
.full-search-table{font-size:var(--ui-font-xs)}.full-search-table th,.full-search-table td{padding:5px 7px!important}.full-search-table .ui-icon-btn{width:30px;height:30px}.central-report-table th,.central-report-table td{padding-block:6px}.central-report-table .report-col-currency{width:58px!important;min-width:54px!important}.central-report-table .report-col-externalIn,.central-report-table .report-col-externalOut,.central-report-table .report-col-incoming,.central-report-table .report-col-outgoing{width:88px!important}.central-report-table .report-col-description{min-width:230px!important}
#listsSettingsPage .option-list>div{min-height:32px;padding:4px 7px}#listsSettingsPage .btn-sm{min-height:29px;padding:3px 7px}.whatsapp-template-tabs{gap:3px}.whatsapp-template-tabs button{min-height:31px;padding:4px 8px;font-size:var(--ui-font-xs)}.whatsapp-template-panel{padding-top:8px}.whatsapp-template-panel textarea{min-height:105px}.template-preview{padding:9px;margin-top:6px;font-size:var(--ui-font-xs)}

@media(max-width:1180px){.app-topbar{grid-template-columns:minmax(180px,.75fr) minmax(180px,1fr) auto}.app-topbar-brand-copy small{display:none}.flight-smart-card .flight-edit-row-1{grid-template-columns:repeat(2,minmax(0,1fr))}.flight-smart-card .flight-edit-row-2{grid-template-columns:repeat(3,minmax(0,1fr))}.flight-smart-card .flight-edit-row-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}
@media(max-width:860px){.app-topbar{grid-template-columns:minmax(0,1fr) auto}.app-topbar-brand{display:none}.app-menu-toggle b{display:none}.sidebar-collapse-btn{display:grid!important;place-items:center;position:absolute;right:calc(100% + 7px);top:22px;z-index:180;background:var(--blue);color:#fff;border-color:var(--blue)}.sidebar-brand{position:relative}.booking-fixed-actions{width:calc(100% - 16px);max-width:none;margin-inline:8px;justify-content:stretch}.booking-fixed-actions .btn{flex:1}.flight-smart-card .flight-edit-row-2,.flight-smart-card .flight-edit-row-3{grid-template-columns:repeat(2,minmax(0,1fr))}.whatsapp-compose-grid{grid-template-columns:1fr}}
@media(max-width:620px){.booking-fixed-actions{bottom:6px;display:grid;grid-template-columns:1fr 1fr}.booking-fixed-actions #wizardSave{grid-column:1/-1}.flight-smart-card .flight-edit-row-1,.flight-smart-card .flight-edit-row-2,.flight-smart-card .flight-edit-row-3{grid-template-columns:1fr}.flight-route-to-wrap{flex-direction:column;align-items:stretch}.flight-route-to-wrap .route-swap-btn{width:100%;margin-top:5px}.booking-preview-box{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.booking-preview-box>.modal-toolbar{flex-wrap:wrap}.booking-preview-box>.modal-toolbar .header-actions{width:100%;display:flex;flex-wrap:wrap}.booking-preview-box>.modal-toolbar .btn{flex:1}.whatsapp-compose-box{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}}
.financial-payment-context{display:flex;align-items:center;justify-content:flex-end;gap:6px}.financial-payment-context .ui-icon-btn{width:29px;height:29px}.alert-card-actions{display:flex;align-items:center;gap:6px;grid-column:2;justify-self:start}.alert-card-actions .ui-icon-btn{width:29px;height:29px}.notification-center .alert-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto}.notification-center .alert-countdown{grid-column:auto;margin-top:0}


/* V2.5.0-dev.6.8.14 — final branding/sidebar closure */
.app-topbar{right:0!important;padding-inline-start:18px!important;padding-inline-end:calc(var(--app-sidebar-w) + 18px)!important;transition:none!important}
body.sidebar-collapsed .app-topbar{right:0!important}
.app-sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 10%,var(--ui-card)) 0,var(--ui-card) 34%)!important;border-left-color:color-mix(in srgb,var(--blue) 28%,var(--ui-line))!important;transition:width .18s ease!important}
.sidebar-brand.sidebar-logo-only{position:relative!important;min-height:116px!important;display:grid!important;grid-template-columns:1fr!important;place-items:center!important;padding:12px 16px!important;background:color-mix(in srgb,var(--blue) 5%,transparent)!important;border-bottom:1px solid color-mix(in srgb,var(--blue) 18%,var(--ui-line))!important;overflow:hidden!important}
.sidebar-brand.sidebar-logo-only img{width:min(168px,86%)!important;height:88px!important;max-width:100%!important;object-fit:contain!important;transition:width .18s ease,height .18s ease!important}
.sidebar-edge-toggle{position:absolute;left:-16px;top:44px;z-index:190;width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid color-mix(in srgb,var(--blue) 35%,var(--ui-line));border-radius:50%;background:var(--blue);color:var(--ui-on-brand);box-shadow:0 6px 18px rgba(15,34,45,.18);cursor:pointer;transition:transform .18s ease,background .18s ease}
.sidebar-edge-toggle:hover{transform:scale(1.05);background:var(--blue-dark)}.sidebar-edge-toggle svg{width:17px;height:17px}
body.sidebar-collapsed .sidebar-brand.sidebar-logo-only{min-height:78px!important;padding:8px!important}
body.sidebar-collapsed .sidebar-brand.sidebar-logo-only img{width:54px!important;height:54px!important}
body.sidebar-collapsed .sidebar-edge-toggle{left:-15px;top:23px}
.app-topbar-brand img{width:46px!important;height:46px!important}.app-topbar-brand-copy b{color:var(--blue-dark)!important}

/* Booking core UI/UX round — neutral, content-aware form and document-first preview. */
#editorPage .editor-main{display:grid;gap:10px}#editorPage .form-card{border-color:var(--ui-line);box-shadow:none;background:var(--ui-card)}#editorPage .form-head{min-height:42px;padding:8px 12px;background:var(--ui-surface-subtle);border-bottom-color:var(--ui-line)}#editorPage .form-body{padding:10px 12px}#editorPage .grid2,#editorPage .grid3,#editorPage .grid4{gap:9px}#tripDetailsSection .grid4{grid-template-columns:minmax(190px,1.35fr) repeat(2,minmax(145px,.85fr)) minmax(90px,.45fr)}/* Created-date moved out of this row to the section header as record metadata, so the row now holds
 * the trip-nights field alone — sized to fit its hint on one line rather than leaving a dead column. */
#tripDetailsSection .grid2{grid-template-columns:minmax(240px,330px);justify-content:start;max-width:560px}.booking-derived-field output{min-height:38px;display:flex;align-items:center;padding:7px 10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-surface-subtle);color:var(--ui-heading);font-weight:var(--ui-weight-strong);direction:ltr;unicode-bidi:isolate}.booking-secondary-details{margin-top:9px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-surface-subtle)}.booking-secondary-details>summary{padding:8px 10px;cursor:pointer;color:var(--ui-heading);font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong)}.booking-secondary-details[open]{padding:0 9px 9px}.booking-secondary-details[open]>summary{margin-inline:-9px;margin-bottom:3px;border-bottom:1px solid var(--ui-line)}.row-title-icon{display:inline-grid;place-items:center;width:20px;color:var(--blue-dark);vertical-align:middle}.row-title-icon svg{width:17px;height:17px}.hotel-date-warning{border-color:var(--ui-warning)!important;background:color-mix(in srgb,var(--ui-warning-bg) 38%,var(--ui-card))!important}.hotel-date-warning .row-top{border-bottom-color:color-mix(in srgb,var(--ui-warning) 35%,var(--ui-line))!important}
/* The page keeps its true A4 layout width (794px = 210mm @96dpi) and is scaled down visually to sit
 * on a neutral desk with real breathing room. zoom (not transform) so the surrounding scroll box
 * still measures the page correctly; UI.updateVoucherPagination() reads offsetWidth, which is
 * unaffected by this scale, so print pagination stays identical to the unscaled document. */
.booking-preview-box{width:min(1100px,calc(100vw - 40px))!important;max-width:1100px!important}
/* THE DESK IS A CONSTANT; ONLY THE SHEET ON IT SCALES.
   The height is no longer a magic `calc(100vh - 172px)` — that 172 was a guess at the toolbar plus
   the modal chrome, and whenever the real chrome was taller the page was fitted to a box bigger
   than the one it was shown in. The modal now has a definite height (below) and this is its flex
   child, so the browser measures the remaining space and UI.previewMetrics() reads it.

   `safe center` rather than plain `center`: a centred grid whose content is TALLER than the box
   pushes the top out of the scroll range and makes it unreachable. `safe` falls back to start in
   exactly that case, so the sheet is centred when it fits and scrollable from the top when zoomed
   past the edges. */
.booking-preview-box>.preview-area{padding:var(--ui-space-5)!important;background:var(--ui-surface-muted);display:grid;justify-content:center;align-content:safe center;height:auto;overflow:auto;--preview-zoom:1}
/* The viewer controls: one compact group, no clutter. */
.preview-zoom{display:flex;align-items:center;gap:2px;margin-inline-start:auto;padding:3px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface-subtle)}
.preview-zoom>button{min-height:26px;padding-inline:10px;border:0;border-radius:999px;background:transparent;color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);cursor:pointer;white-space:nowrap}
.preview-zoom>button:hover{background:var(--ui-card);color:var(--ui-text)}
.preview-zoom>button.active{background:var(--ui-card);color:var(--blue);box-shadow:var(--ui-shadow)}
.preview-zoom>button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.preview-zoom-step{width:26px;padding-inline:0!important;font-size:var(--ui-font-sm)!important}
.preview-pager{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface-subtle)}
.preview-pager>button{border:0;border-radius:999px;background:transparent;color:var(--ui-text-secondary);font:inherit;cursor:pointer}
.preview-pager>button:hover{background:var(--ui-card);color:var(--ui-text)}
.preview-pager-label{min-width:92px;text-align:center;font-size:var(--ui-font-xs);color:var(--ui-text);white-space:nowrap}
.preview-zoom-pct{min-width:46px;text-align:center;font-size:var(--ui-font-xs);color:var(--ui-text);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
/* The non-standard `zoom` property this used to scale with computes CSS Grid's justify-content:center
 * against the PRE-zoom 794px box, then visually shrinks from a browser-chosen origin — the two disagree,
 * so the page renders off-center (measured live: ~15px slack on one side, ~0px on the other) and reads
 * as cropped on the tighter side even though nothing actually overflows. A wrapper sized to the ACTUAL
 * scaled footprint (JS-computed in UI.fitPreviewScale()) fixes this at the root: Grid centers a box that
 * already matches what's visually there, and the page inside it is a real transform:scale — standard,
 * origin-predictable, and (unlike zoom) confirmed not to leak into the Print clone (PrintService.print()
 * clones only #voucherPrintArea itself, never this wrapper, so Print is untouched either way). */
.booking-preview-box .preview-scale-wrap{position:relative;margin:0 auto;width:794px}
.booking-preview-box .modern-voucher{width:794px;max-width:none!important;background:#fff;box-shadow:0 10px 30px rgba(15,34,45,.15);border:1px solid var(--ui-line)}
.preview-scale-wrap .modern-voucher{position:absolute;top:0;left:0;transform:scale(var(--preview-zoom,1));transform-origin:top left}
/* The whole sheet must FIT, not be cropped. Later rules in this file cap the modal at 920px and hide
 * overflow; the wrapper above (not the page itself) now carries the width constraint, so the page keeps
 * its true A4 layout width (794px) at every modal size — print pagination (UI.updateVoucherPagination()
 * reads offsetWidth, unaffected by transform) stays identical to the unscaled document. */
#previewModal .booking-preview-box{width:min(1180px,calc(100vw - 40px))!important;max-width:1180px!important}
#previewModal .booking-preview-box>.preview-area{overflow-x:auto!important}
#previewModal .booking-preview-box .modern-voucher{width:794px!important;min-width:794px!important;max-width:none!important}
.booking-preview-box>.modal-toolbar{justify-content:flex-start;background:var(--ui-card);border-bottom:1px solid var(--ui-line)}
/* Arabic headings need real leading and vertical room: the ascenders/descenders of ت/ط/ج were being
 * visually clipped by a tight line-box, which reads as "eaten letters" rather than a font problem. */
.mv-section-head{line-height:1.6!important;padding-block:7px!important;overflow:visible!important}
.mv-section-head>div>b{line-height:1.75!important;display:inline-block;padding-block:1px}
.mv-section-head small{display:none!important}
/* ADAPTIVE DOCUMENT GRID (shared verbatim with print.css so Preview and Print group identically).
 * Two columns by default; an item that genuinely needs the room (transit itinerary, multi-room hotel)
 * opts in with .is-wide, and a lone trailing odd item spans so 1 -> full, 2 -> 2, 3 -> 2+1, 4 -> 2x2. */
/* P0.4 — PAIRED CARDS SHARE THE ROW HEIGHT.
   `align-items:start` let a transit segment — which carries a stop, a terminal and a second set
   of times — grow tall while the segment beside it stayed short and hugged the top, leaving a
   visible void in the middle of the document. `stretch` makes both cards as tall as the row, and
   the card is a column so its own content spreads through that height instead of pooling at the
   top. Nothing is truncated to achieve this: the transit detail still prints in full. */
.mv-flight-cards,.mv-hotel-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:stretch}
.mv-flight-cards>.mv-flight-card,.mv-hotel-cards>.mv-hotel-card{display:flex;flex-direction:column}
.mv-service-rows{display:grid;gap:5px}
.mv-flight-card.is-wide,.mv-hotel-card.is-wide{grid-column:1/-1}
.mv-flight-cards>.mv-flight-card:last-child:nth-child(odd),.mv-hotel-cards>.mv-hotel-card:last-child:nth-child(odd){grid-column:1/-1}
/* P2 — THE LAYOUT CONTRACT DEPENDS ON HOW MANY CARDS THERE ARE.
   One rule for every count is what caused the regression: fixing the transit/direct PAIR made the
   single card stretch from page edge to page edge, because `:last-child:nth-child(odd)` spans the
   row and the only thing constrained was the card's CHILDREN — so a lone flight became a very wide
   box with its content squeezed into the middle. The hotels never had that problem, because their
   rule caps the CARD.

     1 card   spans the row, but capped and centred — the hotel contract, applied to flights
     2 cards  two balanced columns, untouched: this is the owner-accepted transit/direct baseline
     3+       two per row, and a lone trailing card keeps its COLUMN width rather than spanning

   The third line is what stops a lone third card from becoming a full-width slab. It is written as
   :not(:only-child) so the single-card case above still spans-and-caps. */
/* P1.1/P1.4 — ONE CAP, SHARED, SO THE TWO LONE BLOCKS ARE THE SAME BLOCK.
   These were 600 and 620: two arbitrary numbers that made a single flight sit 20px narrower than a
   single hotel on the same sheet for no reason anyone could state. They are now one declaration,
   so the lone card reads as one component with two kinds of content rather than two components
   that happen to look similar. Padding (7px 9px), border (1px) and radius (7px) were already
   identical and are left alone.

   HEIGHT IS DELIBERATELY NOT EQUALISED. A flight card carries a head with tags, a two-airport
   route with its connector, and a facts row; a hotel card carries fewer rows. Measured at 1:1 that
   is 157px against 89px, and every gap inside both is already 1-7px — the difference is
   information, not slack. Forcing them equal would mean either deleting flight data or padding the
   hotel with the empty space this voucher was corrected for twice. */
.mv-flight-cards>.mv-flight-card:only-child,
.mv-hotel-cards>.mv-hotel-card:only-child{max-width:620px;margin-inline:auto;width:100%}
.mv-flight-cards>.mv-flight-card:last-child:nth-child(odd):not(:only-child){grid-column:auto}
.mv-flight-card,.mv-hotel-card,.mv-service-rows>div{border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:#fff;break-inside:avoid}
.mv-flight-card{padding:7px 9px}
/* Carrier identity and its role/route/cabin stay attached as one head, not pushed to opposite edges. */
.mv-flight-card-head{display:grid;gap:1px;padding-bottom:5px;border-bottom:1px solid var(--ui-line)}
.mv-flight-card-head>b{display:flex;align-items:center;gap:6px;font-size:var(--ui-font-sm);font-weight:800;color:var(--ui-heading);min-width:0}
.mv-flight-card-head>b>bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-flight-card-head strong{flex:0 0 auto;padding:1px 6px;border:1px solid color-mix(in srgb,var(--blue) 30%,var(--ui-line));border-radius:999px;color:var(--blue-dark);background:color-mix(in srgb,var(--blue) 7%,#fff);font-size:var(--ui-font-xs)}
.mv-flight-card-head>span{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
/* Restrained, print-friendly semantic accents on the values an operator scans first. Transit is the
 * only slightly stronger tone because it changes how the trip is handled operationally. */
.mv-tag{font-style:normal;font-size:var(--ui-font-xs);font-weight:700;line-height:1.5;padding:1px 6px;border-radius:999px;border:1px solid var(--ui-line);background:var(--ui-surface-subtle);color:var(--ui-text-secondary)}
.mv-tag.is-outbound,.mv-tag.is-return,.mv-tag.is-domestic{border-color:color-mix(in srgb,var(--blue) 26%,var(--ui-line));background:color-mix(in srgb,var(--blue) 6%,#fff);color:var(--blue-dark)}
.mv-tag.is-transit{border-color:color-mix(in srgb,var(--ui-warning) 52%,var(--ui-line));background:var(--ui-warning-bg);color:var(--ui-warning-text)}
.mv-tag.is-cabin{color:var(--ui-text)}
.mv-flight-no{font-size:var(--ui-font-sm)!important;letter-spacing:.2px}
.mv-flight-route{display:grid;grid-template-columns:minmax(58px,1fr) minmax(84px,1.05fr) minmax(58px,1fr);align-items:start;gap:6px;padding:7px 0 4px;direction:rtl}
.mv-flight-airport{display:grid;gap:1px;text-align:center;min-width:0}
.mv-flight-airport>bdi{font-size:17px;font-weight:800;line-height:1.15;color:var(--ui-heading)}
.mv-flight-airport small{font-size:var(--ui-font-xs);font-weight:600;color:var(--ui-text-secondary);line-height:1.3}
.mv-flight-airport>b{font-size:var(--ui-font-sm);font-weight:800;color:var(--ui-text);line-height:1.25;direction:ltr;unicode-bidi:isolate}
.mv-nextday{margin-inline-start:3px;padding:0 3px;border-radius:3px;background:var(--ui-warning-bg);color:var(--ui-warning-text);font-style:normal;font-weight:700}
.mv-route-line{position:relative;min-height:34px;display:grid;justify-items:center;align-content:start;gap:2px;direction:ltr;padding-top:1px}
.mv-route-line>bdi{font-size:var(--ui-font-xs);font-weight:800;color:var(--ui-heading);position:relative;z-index:1;background:#fff;padding:0 3px}
.mv-route-line i{position:absolute;right:14%;left:14%;top:23px;height:1px;background:var(--ui-line);z-index:0}
/* Subtle route end points so the line reads as a route rather than an empty rule. */
.mv-route-line:before,.mv-route-line:after{content:'';position:absolute;top:21px;width:4px;height:4px;border-radius:50%;background:var(--ui-line);z-index:1}
.mv-route-line:before{right:12%}.mv-route-line:after{left:12%}
/* The shared plane glyph points top-right; the RTL route travels right -> left, so it is mirrored here
 * (voucher route only) to move toward the destination instead of contradicting it. */
.mv-route-line svg{width:17px;height:17px;position:relative;z-index:1;padding:2px;box-sizing:content-box;border-radius:50%;background:#fff;color:var(--blue);transform:scaleX(-1)}
.mv-transit-row,.mv-flight-facts{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;padding-top:5px;border-top:1px dashed var(--ui-line)}
/* Content-sized and centred, not a full-width bar: width:fit-content (capped so it never overflows a
 * narrow card) shrinks it to its content while staying a block-level box, so margin:auto still centres
 * it — display stays flex (inline-flex is inline-level and ignores auto margins for centering). */
.mv-transit-row{display:flex;justify-content:center;width:fit-content;max-width:100%;margin:5px auto 0;background:color-mix(in srgb,var(--ui-warning) 7%,#fff);padding:4px 8px;border-radius:999px;border-top:0;border:1px solid color-mix(in srgb,var(--ui-warning) 30%,var(--ui-line))}
.mv-transit-row>b{font-size:var(--ui-font-xs);font-weight:800;color:var(--ui-warning-text)}
.mv-transit-row span{padding:1px 6px;border-radius:var(--ui-radius-xs);background:#fff;border:1px solid color-mix(in srgb,var(--ui-warning) 22%,var(--ui-line));font-size:var(--ui-font-xs);font-weight:700;color:var(--ui-text)}
.mv-flight-facts>span{display:inline-flex;align-items:baseline;gap:4px;font-size:var(--ui-font-xs);color:var(--ui-text);white-space:nowrap}
.mv-flight-facts>span>svg{align-self:center}
.mv-flight-facts svg{width:14px;height:14px;color:var(--blue-dark);flex:0 0 14px}
.mv-flight-facts bdi{font-weight:800}
.mv-flight-facts small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:600}
.mv-flight-facts small:after{content:':'}
.mv-flight-note{margin:5px 0 0;padding-top:4px;border-top:1px dotted var(--ui-line);font-size:var(--ui-font-xs);color:var(--ui-text)}
/* Hotel: name+city as one identity, stay facts as a compact second line, distribution only when present. */
.mv-hotel-card{display:grid;gap:2px;padding:7px 9px;align-content:start}
.mv-hotel-id{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 7px;min-width:0}
.mv-hotel-id>b{font-size:var(--ui-font-sm);font-weight:800;color:var(--ui-heading);min-width:0}
.mv-hotel-id>small{font-size:var(--ui-font-xs);font-weight:600;color:var(--ui-text-secondary)}
.mv-hotel-stay{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;font-size:var(--ui-font-xs);color:var(--ui-text)}
.mv-hotel-stay .mv-hotel-dates{display:inline-flex;align-items:baseline;gap:4px;font-weight:800;color:var(--ui-text)}
.mv-hotel-stay .mv-hotel-dates em{font-style:normal;font-size:var(--ui-font-xs);font-weight:700;color:var(--ui-text-secondary)}
.mv-hotel-rooms{display:flex;flex-wrap:wrap;gap:3px 6px;margin-top:2px;padding-top:3px;border-top:1px dotted var(--ui-line)}
.mv-hotel-rooms span{padding:1px 5px;border-radius:var(--ui-radius-xs);background:var(--ui-surface-subtle);font-size:var(--ui-font-xs);color:var(--ui-text)}
.mv-service-rows>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px;padding:5px 9px;font-size:var(--ui-font-xs)}
.mv-service-rows>div b{font-weight:800;color:var(--ui-heading);white-space:nowrap}
.mv-service-rows>div span{color:var(--ui-text);font-weight:600}
@media(max-width:860px){#tripDetailsSection .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.mv-hotel-card{grid-template-columns:1fr}.mv-hotel-card>span:last-child{grid-column:1/-1}}@media(max-width:620px){#tripDetailsSection .grid4,#tripDetailsSection .grid2{grid-template-columns:1fr;max-width:none}.mv-flight-route{grid-template-columns:62px minmax(110px,1fr) 62px;gap:4px}.mv-flight-airport>bdi{font-size:14px}.mv-hotel-card{grid-template-columns:1fr}.mv-service-rows>div{align-items:flex-start;flex-direction:column;gap:2px}}
.hotel-nights-warning{color:var(--ui-warning-text);background:var(--ui-warning-bg);border-color:color-mix(in srgb,var(--ui-warning) 45%,var(--ui-line))}

/* Booking correction round — managed-template suggestions, record metadata, overlap confirmation,
 * service row alignment, and A4-faithful preview composition. */
/* The managed-template fields are narrow, but their values (carrier and hotel names) are not, so the
 * popup is allowed to grow past the field instead of wrapping every row. It stays anchored to the
 * field's start edge in RTL and is capped so it can never run off-screen. */
.booking-suggest-box{max-height:264px;left:auto;min-width:min(292px,74vw);max-width:min(360px,88vw)}
.booking-suggest-box button{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px var(--ui-space-2);text-align:right}
.booking-suggest-box button>b{grid-row:1/3;min-width:38px;direction:ltr;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-heavy);color:var(--blue-dark)}
.booking-suggest-box button>span{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);unicode-bidi:isolate}
.booking-suggest-box button>small{grid-column:2;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.booking-suggest-group{position:sticky;top:0;z-index:1;padding:var(--ui-space-1) var(--ui-space-2);background:var(--ui-surface-subtle);color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong)}
.booking-suggest-empty{padding:var(--ui-space-3);color:var(--ui-text-secondary);font-size:var(--ui-font-sm);text-align:center}
.booking-created-meta{display:inline-flex;align-items:center;gap:6px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);white-space:nowrap}
.booking-created-meta bdi{unicode-bidi:isolate;font-weight:var(--ui-weight-strong);color:var(--ui-text)}
.booking-created-meta.hidden{display:none!important}
/* Form helpers/warnings live on their own full-width row so they can never change a field cell's
 * height and lift its label/input out of line with the rest of the row (§ helper/warning UI). */
.passenger-age-note,.booking-row-note{grid-column:1/-1;margin-top:6px;font-size:var(--ui-font-xs);line-height:1.5;color:var(--ui-text-secondary)}
.passenger-age-note.is-invalid,.booking-row-note{padding:5px 9px;border:1px solid color-mix(in srgb,var(--ui-danger) 42%,var(--ui-line));border-radius:var(--ui-radius-xs);background:var(--ui-danger-bg);color:var(--ui-danger);font-weight:var(--ui-weight-strong)}
.booking-row-note.is-advisory{border-color:color-mix(in srgb,var(--ui-warning) 45%,var(--ui-line));background:var(--ui-warning-bg);color:var(--ui-warning-text,var(--ui-warning))}
.booking-row-note.is-info{border-color:color-mix(in srgb,var(--blue) 34%,var(--ui-line));background:color-mix(in srgb,var(--blue) 7%,#fff);color:var(--blue-dark)}
.booking-row-note.hidden,.passenger-age-note.hidden{display:none!important}
.audit-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 6px}
.audit-stamp{flex:1 0 100%;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.audit-stamp bdi{unicode-bidi:isolate;font-weight:var(--ui-weight-strong);color:var(--ui-text)}
.arrival-day-offset option[disabled]{color:var(--ui-muted)}
.hotel-overlap-note{display:grid;gap:3px;margin-bottom:9px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--ui-warning) 42%,var(--ui-line));border-radius:var(--ui-radius-xs);background:var(--ui-warning-bg)}
.hotel-overlap-note>b{font-size:var(--ui-font-sm);color:var(--ui-heading);display:flex;align-items:center;gap:5px}
.hotel-overlap-note>b svg{width:15px;height:15px}
.hotel-overlap-note>small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.hotel-overlap-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hotel-overlap-note.is-confirmed{border-color:color-mix(in srgb,var(--ui-success,#2e7d5b) 38%,var(--ui-line));background:var(--ui-surface-subtle)}
.hotel-smart-card.hotel-overlap-confirmed{border-color:var(--ui-line)!important}
/* UI.enhanceDates() also injects a per-field trip-range hint. Inside this grid it added height to the
 * date cell only, and with align-items:end that lifted the date label/input ~20px above its row
 * neighbours. The trip period is stated once above the row instead; the out-of-range soft warning on
 * the field itself is untouched. */
.service-smart-card .service-edit-grid .date-range-hint{display:none}
.service-smart-card .service-edit-grid{grid-template-columns:minmax(150px,.85fr) minmax(140px,.8fr) repeat(2,minmax(150px,1fr))}
.service-smart-card>.service-range-note{margin:0 0 7px}
@media(max-width:1000px){.service-smart-card .service-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Five controls now share this row (classification, direct/transit, cabin class, from, to). Scoped to
 * #editorPage so it wins over the earlier four-column definition without another !important. */
#editorPage .flight-edit-row-1{grid-template-columns:minmax(104px,.55fr) minmax(104px,.55fr) minmax(120px,.64fr) minmax(168px,1.12fr) minmax(168px,1.12fr);max-width:none}
/* The departure-date cell carries an injected trip-period hint, so it is ~54px taller than its row
 * mates. With align-items:end that extra height pushed its label and input ABOVE the rest of the row.
 * Aligning to the start keeps every label/input on one baseline and lets the hint hang below, so the
 * trip-period context is kept rather than hidden. */
#editorPage .flight-edit-row-2{align-items:start}
/* The trip-range cell is a bordered box, so its label starts one padding+border lower than its plain
 * siblings. Offsetting the plain cells by the same amount puts every label and input in the row on
 * one baseline without unboxing that field or using negative margins. */
#editorPage .flight-edit-row-2>:not(.trip-range-field){padding-top:calc(var(--ui-space-2) + 1px)}
/* The transit row used to hold only the transit airport; it now carries the connecting flight number
 * and the wait duration beside it, so it needs a real three-column track instead of stacking. */
#editorPage .service-layout-row-transit{grid-template-columns:minmax(170px,1.1fr) minmax(112px,.75fr) repeat(2,minmax(98px,.62fr)) minmax(120px,.75fr);align-items:start}
#editorPage .transit-wait-input::placeholder{color:var(--ui-text);opacity:1}
@media(max-width:900px){#editorPage .service-layout-row-transit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){#editorPage .service-layout-row-transit{grid-template-columns:1fr}}
@media(max-width:1180px){#editorPage .flight-edit-row-1{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){#editorPage .flight-edit-row-1{grid-template-columns:repeat(2,minmax(0,1fr))}}
.account-system-info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 10px;border-bottom:1px solid var(--ui-line);color:var(--ui-text-secondary)}.account-system-info small{font-size:var(--ui-font-xs)}.account-system-info b{font-size:var(--ui-font-xs);color:var(--ui-text);font-weight:var(--ui-weight-strong)}
.btn-primary{background:var(--blue)!important;color:var(--ui-on-brand)!important}.btn-primary:hover{background:var(--blue-dark)!important}.ui-tabs button.active,.payments-view-tabs .pill.active{color:var(--blue-dark)!important}.ui-tabs button.active:after,.payments-view-tabs .pill.active:after{background:var(--blue)!important}
@media(max-width:860px){.app-topbar{padding-inline-end:84px!important}.sidebar-brand.sidebar-logo-only{min-height:78px!important;padding:8px!important}.sidebar-brand.sidebar-logo-only img{width:54px!important;height:54px!important}.sidebar-edge-toggle{left:-15px;top:23px}}


/* V2.5.0-dev.6.8.14 — manual UI bugfix closure */
.booking-action-group{display:flex;align-items:center;gap:7px;direction:rtl}.booking-action-group .btn{min-height:38px;padding-inline:14px}.booking-action-group .btn:disabled{opacity:.5;cursor:not-allowed;filter:saturate(.45)}
.modal.modal-stack-under{pointer-events:none!important}.modal.modal-stack-under>.modal-box{pointer-events:none!important}.system-confirm-modal.modal-runtime-open,.system-prompt-modal.modal-runtime-open{background:rgba(10,25,32,.46)!important}
#listsSettingsPage .lookup-admin-card .card-body,#listsSettingsPage .terms-admin-card .card-body{padding:12px!important}.lookup-add-row{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:7px;align-items:center;max-width:720px;margin:8px 0 10px}.lookup-add-row input{min-height:34px!important}.lookup-add-row .btn{min-width:92px;min-height:34px;padding:6px 12px!important}.lookup-admin-card .ui-tabs,.lookup-admin-card .settings-tabs{gap:5px!important;flex-wrap:wrap!important;margin-bottom:8px!important}.lookup-admin-card .ui-tabs button,.lookup-admin-card .settings-tabs button{min-height:30px!important;padding:5px 9px!important;font-size:12px!important}.lookup-admin-card .ui-data-table th,.lookup-admin-card .ui-data-table td,.lookup-admin-card .unified-table th,.lookup-admin-card .unified-table td{padding:6px 8px!important;height:auto!important}.lookup-admin-card .ui-icon-btn,.lookup-admin-card .icon-btn{width:28px!important;height:28px!important;min-width:28px!important}.lookup-admin-card .ui-table-wrap,.lookup-admin-card .unified-table-wrap{min-height:0!important}.terms-admin-card textarea{min-height:90px!important}.terms-admin-card .grid2{gap:8px!important}.terms-admin-card .btn{min-height:34px!important}.terms-admin-card label{margin-bottom:4px!important}
@media(max-width:700px){.booking-action-group{width:100%;justify-content:flex-start;flex-wrap:wrap}.lookup-add-row{grid-template-columns:1fr}.lookup-add-row .btn{width:max-content}}

.lookup-add-row input{height:36px!important;min-height:36px!important;padding-block:5px!important}.lookup-add-row .btn{height:36px!important;min-height:36px!important}


/* V2.5.0-dev.6.8.14.1 — UI/PRINT closure hotfix */
.app-topbar{grid-template-columns:minmax(260px,.95fr) minmax(140px,.65fr) auto;min-width:0;}

.app-topbar-actions{justify-self:start;display:flex;align-items:center;gap:8px;min-width:0;}
/* P6.3 — the bell, its badge, the shortcuts and the user box all sit on one centred baseline in
   RTL; the area no longer stretches, so the pill keeps its own height. */
.topbar-user-area{position:relative;display:flex;align-items:center;flex:0 0 auto;min-width:0;}
/* P6.2 — CONTENT-FIT, NOT A RESERVED LANE. The middle track was `minmax(70px,132px)`, so a short
   username like "imad" still held 70px of empty pill open beside it. `auto` lets the track measure
   what is actually in it, and the max-width keeps a long display name from pushing the bell and
   the shortcuts out of line. */
.topbar-user-button{display:grid;grid-template-columns:28px minmax(0,auto) 12px;align-items:center;gap:6px;min-height:34px;padding:3px 8px 3px 6px;max-width:190px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--ui-text);font:inherit;text-align:right;cursor:pointer;}
.topbar-user-button:hover{background:var(--ui-row-hover);border-color:color-mix(in srgb,var(--blue) 28%,var(--ui-line));}
/* P6.1 — the username and the role were on consecutive lines with no gap and a tight leading, so
   they read as one smudged block. A little air, and each line keeps its own baseline. */
.topbar-user-copy{display:grid;gap:2px;min-width:0;line-height:1.35}
/* The username is a technical token: isolated LTR so an ASCII handle sits correctly in an RTL
   header instead of drifting against the caret beside it. */
.topbar-user-copy b{font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-heading);direction:ltr;unicode-bidi:isolate;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-user-copy small{font-size:calc(var(--ui-font-xs) - 1px);color:var(--ui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-user-menu{left:0!important;right:auto!important;top:calc(100% + 7px)!important;bottom:auto!important;min-width:220px;z-index:220!important}
.sidebar-logo-only{cursor:pointer}.sidebar-bottom{display:none!important}
/* Header branding keeps a stable safe lane while Sidebar opens/closes. */
.app-topbar{right:0!important;padding-inline-start:18px!important;padding-inline-end:calc(var(--app-sidebar-w) + 18px)!important;transition:none!important}
body.sidebar-collapsed .app-topbar{right:0!important;padding-inline-end:calc(var(--app-sidebar-w) + 18px)!important}
.sidebar-edge-toggle{top:50%!important;transform:translateY(-50%);left:-16px!important;}
.sidebar-edge-toggle:hover{transform:translateY(-50%) scale(1.05)!important}
body.sidebar-collapsed .sidebar-edge-toggle{top:50%!important;left:-15px!important;transform:translateY(-50%)}
.sidebar-brand.sidebar-logo-only{min-height:122px!important;padding:14px 16px!important}.sidebar-brand.sidebar-logo-only img{width:min(182px,90%)!important;height:94px!important;object-fit:contain!important}
body.sidebar-collapsed .sidebar-brand.sidebar-logo-only{min-height:86px!important;padding:7px 5px!important}body.sidebar-collapsed .sidebar-brand.sidebar-logo-only img{width:62px!important;height:62px!important;max-width:none!important}
/* A DEFINITE height, so the flex child above receives an exact remainder to be measured. */
.booking-preview-box{width:min(920px,calc(100vw - 56px))!important;max-width:920px!important;height:calc(100vh - 42px)!important;max-height:calc(100vh - 42px)!important;overflow:hidden!important}.booking-preview-box>.preview-area{overflow-y:auto!important;overflow-x:hidden!important;max-width:100%;}
@media(max-width:860px){.app-topbar{grid-template-columns:minmax(0,1fr) auto;padding-inline-end:88px!important}.app-topbar-brand{display:none}.topbar-user-copy{display:none}.topbar-user-button{grid-template-columns:32px 12px;min-width:52px}.booking-preview-box{width:calc(100vw - 18px)!important;max-height:calc(100vh - 18px)!important}.sidebar-edge-toggle{top:50%!important}}
@media(max-width:620px){.topbar-user-caret{display:none}.topbar-user-button{grid-template-columns:32px;min-width:42px;padding-inline:4px}.app-topbar-actions{gap:5px}}


/* V2.5.0-dev.6.8.14.1 — shared report/financial summary RTL */
.report-center-summary,.report-summary-card,.treasury-report-summary,.finance-summary,.financial-summary,.report-summary{direction:rtl;text-align:right}
.report-summary-card small,.report-summary-card b,.treasury-report-summary small,.treasury-report-summary b,.finance-summary small,.finance-summary b,.financial-summary small,.financial-summary b{direction:rtl;text-align:right}
.report-summary-card b[dir="ltr"],.treasury-report-summary .money,.finance-summary .money,.financial-summary .money{direction:ltr;unicode-bidi:isolate;text-align:right}


/* V2.5.0-prestable.1 — pre-stable cleanup/hardening */
body{--shell-sidebar-current:var(--app-sidebar-w)}body.sidebar-collapsed{--shell-sidebar-current:var(--app-sidebar-collapsed-w)}
.app-topbar{right:0!important;padding-inline-start:18px!important;padding-inline-end:calc(var(--shell-sidebar-current) + 18px)!important;transition:padding-inline-end .18s ease!important}
body.sidebar-collapsed .app-topbar{padding-inline-end:calc(var(--shell-sidebar-current) + 18px)!important}
.app-topbar-actions{justify-self:start}/* P6.2 — CONTENT-FIT. `minmax(72px,128px)` reserved a lane that a short username never filled, so
   the pill was always wider than what was in it. `auto` measures the content; `width:max-content`
   stops the flex row from stretching it; the cap keeps a long display name from pushing the bell
   and the shortcuts out of line. */
.topbar-user-button{grid-template-columns:30px minmax(0,auto) 12px;width:max-content;max-width:190px;min-height:36px;padding:3px 8px 3px 6px;border-radius:999px;box-shadow:none}.topbar-user-button .sidebar-user-avatar{width:30px;height:30px}.topbar-user-copy b{font-size:11.5px}.topbar-user-copy small{font-size:10px}.topbar-user-caret{font-size:10px}body.auth-locked .app-sidebar,body.auth-locked .app-topbar,body.auth-locked .main,body.auth-locked .global-footer,body.auth-locked .backup-top-alert{visibility:hidden!important;pointer-events:none!important}.login-screen{z-index:2147483640!important}.auth-login-card{width:min(430px,calc(100vw - 24px));padding:22px!important;text-align:right!important}.login-brand-block{display:grid;grid-template-columns:98px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:8px}.login-brand-block img{width:98px!important;height:70px!important}.login-brand-block b{display:block;color:var(--blue-dark);font-size:15px}.login-brand-block h2{margin:3px 0!important;font-size:18px}.auth-login-form,.first-run-setup{display:grid;gap:7px}.auth-login-form label,.first-run-setup label{margin:0;font-size:12px;font-weight:800;color:var(--ui-heading)}.password-field-wrap{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:6px}.password-field-wrap input{min-width:0}.password-toggle-btn{border:1px solid var(--ui-line);background:var(--ui-card);border-radius:9px;display:grid;place-items:center;color:var(--ui-text-secondary);cursor:pointer}.password-toggle-btn svg{width:18px;height:18px}.auth-caps-hint{color:var(--ui-warning);font-size:11px;font-weight:800}.auth-login-error{background:var(--ui-danger-bg);border:1px solid color-mix(in srgb,var(--ui-danger) 24%,transparent);color:var(--ui-danger);padding:8px 10px;border-radius:9px;font-size:12px;font-weight:800}.auth-remember{margin-top:3px!important}.auth-login-submit{width:100%;margin-top:5px;position:relative}.auth-login-spinner{display:none;width:14px;height:14px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;animation:authSpin .7s linear infinite}.auth-login-submit.is-loading .auth-login-spinner{display:inline-block}.auth-login-submit.is-loading{opacity:.78;cursor:wait}@keyframes authSpin{to{transform:rotate(360deg)}}.auth-first-run-note{display:grid;gap:3px;padding:9px 10px;background:var(--ui-info-bg);border-radius:10px}.auth-first-run-note small{color:var(--ui-text-secondary);font-size:11px;line-height:1.6}
.booking-preview-box{display:flex!important;flex-direction:column!important;overflow:hidden!important}.booking-preview-box>.modal-toolbar{flex:0 0 auto!important}.booking-preview-box>.preview-area{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
body.sidebar-collapsed .sidebar-nav-group>.sidebar-submenu{display:none!important}body.sidebar-collapsed .sidebar-nav-group.flyout-open>.sidebar-submenu{display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}.sidebar-nav-group.flyout-open>.sidebar-group-toggle{background:color-mix(in srgb,var(--blue) 11%,var(--ui-card));color:var(--blue-dark)}
@media(max-width:860px){.app-topbar{padding-inline-end:calc(var(--shell-sidebar-current) + 12px)!important}.topbar-user-button{grid-template-columns:30px 12px;min-width:50px}.topbar-user-copy{display:none}.login-brand-block{grid-template-columns:74px minmax(0,1fr)}.login-brand-block img{width:74px!important;height:58px!important}}

/* V2.5.0-prestable.1 — shell-safe header lane (physical RTL geometry) */
:root{--shell-header-safe-gap:18px}
.app-topbar{
  right:0!important;
  left:0!important;
  width:auto!important;
  padding-right:calc(var(--shell-sidebar-current) + var(--shell-header-safe-gap))!important;
  padding-left:var(--shell-header-safe-gap)!important;
  transition:padding-right .18s ease!important;
}
body.sidebar-collapsed .app-topbar{
  padding-right:calc(var(--shell-sidebar-current) + var(--shell-header-safe-gap))!important;
}
@media(max-width:860px){
  :root{--shell-header-safe-gap:12px}
  .app-topbar{padding-right:calc(var(--shell-sidebar-current) + var(--shell-header-safe-gap))!important;padding-left:var(--shell-header-safe-gap)!important}
}

.lookup-manager-list{display:grid;gap:6px;margin-top:10px}.lookup-manager-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 8px;border-bottom:1px solid var(--ui-line)}.lookup-manager-row:last-child{border-bottom:0}

/* V2.5.0-prestable.2 — Stable Candidate header final alignment */
.app-topbar{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  grid-template-areas:"brand date user";
  align-items:center;
  column-gap:var(--ui-space-4);
}
.app-topbar-brand{grid-area:brand;justify-self:start;max-width:min(100%,430px)}
/* Final Pre-Settings Closure Round — date+advisory-FX become one compact "context chip" (subtle
   surface/border) so they read as secondary system info vs. the bolder Quick Tools buttons below.
   Pure presentation: refreshHeaderDate()/refreshHeaderReferenceFx() (app.js) are untouched, same
   ids, same text/RTL logic — only the visual container changed. */
.app-topbar-date{grid-area:date;justify-self:center;align-self:center;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-medium);white-space:nowrap;line-height:1.2;pointer-events:none;user-select:none;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--ui-surface-subtle);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:5px 16px}
.app-topbar-fx{font-size:calc(var(--ui-font-xs) - 1px);font-weight:var(--ui-weight-regular);color:var(--ui-text-secondary);white-space:nowrap;pointer-events:auto;cursor:default;opacity:.92}
.app-topbar-fx.hidden{display:none!important}
.reference-fx-section{margin-top:var(--ui-space-3);padding-top:var(--ui-space-3);border-top:1px solid var(--ui-line)}.reference-fx-section h4{margin:0 0 4px;font-size:var(--ui-font-sm);color:var(--ui-heading)}.reference-fx-section p{margin:0 0 var(--ui-space-2);color:var(--ui-text-secondary);line-height:1.6}
.app-topbar-actions{grid-area:user;justify-self:end!important;margin:0!important;min-width:0}
@media(max-width:980px){
  .app-topbar{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"brand user"!important}
  .app-topbar-date{display:none!important}
}
@media(max-width:860px){
  .app-topbar-brand{display:grid!important;min-width:0}
  .app-topbar-brand-copy small{display:none!important}
}
@media(max-width:560px){
  .app-topbar-brand{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  .app-topbar-brand-copy b{font-size:11px!important}
}
@media(max-width:450px){.app-topbar-brand-copy small{display:none!important}.app-topbar-brand-copy b{font-size:10.5px!important}}

/* V2.5.0-prestable.4 — final header micro-polish only */
.topbar-user-area{justify-self:start!important;margin-inline-start:0!important}.topbar-user-button .sidebar-user-avatar svg{width:17px;height:17px;stroke-width:1.9}.topbar-user-button .sidebar-user-avatar{font-size:0}
/* V2.5.0-prestable.4 — lock header physical lanes across sidebar state */
.app-topbar{direction:ltr!important;grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:"user date brand"!important}
.app-topbar-brand,.app-topbar-actions,.app-topbar-date{direction:rtl}
.app-topbar-actions{grid-area:user;justify-self:start!important}
.app-topbar-date{grid-area:date;justify-self:center!important}
.app-topbar-brand{grid-area:brand;justify-self:end!important}
@media(max-width:980px){.app-topbar{grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"user brand"!important}}



/* V2.5.0-prestable.4 — acceptance-only restore/login/dashboard density. */
.restore-review-section{display:grid;gap:8px;padding:10px 11px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);margin-bottom:8px}
.restore-review-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.restore-review-head small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.restore-summary-grid,.restore-success-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.restore-summary-grid>div,.restore-success-grid>div{display:grid;gap:2px;padding:7px 8px;border-radius:8px;background:var(--ui-surface-subtle);min-width:0}.restore-summary-grid b,.restore-success-grid b{font-size:var(--ui-font-sm);overflow-wrap:anywhere}.restore-summary-grid span,.restore-success-grid small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.restore-integrity-status{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:var(--ui-font-xs);font-weight:800}.restore-integrity-status.ok{background:var(--ui-success-bg);color:var(--ui-success)}.restore-integrity-status.warning{background:var(--ui-warning-bg);color:var(--ui-warning)}.restore-integrity-status.error{background:var(--ui-danger-bg);color:var(--ui-danger)}
.restore-integrity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-size:var(--ui-font-xs)}.restore-impact-note{background:var(--ui-warning-bg);border-color:color-mix(in srgb,var(--ui-warning) 25%,var(--ui-line))}.restore-impact-note p{margin:0;font-size:var(--ui-font-xs);line-height:1.6}.data-technical-details{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.data-technical-details summary{cursor:pointer;font-weight:800;color:var(--ui-text)}
.data-management-help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}.data-management-help>div{display:grid;gap:2px;padding:8px 9px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-surface-subtle)}.data-management-help b{font-size:var(--ui-font-xs)}.data-management-help span{font-size:calc(var(--ui-font-xs) - 1px);color:var(--ui-text-secondary);line-height:1.55}
.auth-remember{display:inline-flex!important;align-items:center!important;gap:7px!important;justify-self:start;width:auto!important;min-height:28px;padding:2px 3px!important;font-size:12px!important;cursor:pointer}.auth-remember input{appearance:auto!important;width:15px!important;height:15px!important;min-width:15px!important;margin:0!important;accent-color:var(--blue)}
.task-list{gap:5px;padding:6px 8px}.task-item{padding:6px 7px}.task-item input[type='checkbox']{width:15px;height:15px;vertical-align:middle}
@media(max-width:760px){.restore-summary-grid,.restore-success-grid,.restore-integrity-grid,.data-management-help{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.restore-summary-grid,.restore-success-grid,.restore-integrity-grid,.data-management-help{grid-template-columns:1fr}}



.payment-fx-meta{display:grid;gap:1px;margin-top:3px;color:var(--ui-text-secondary);font-size:calc(var(--ui-font-xs) - 1px);font-weight:var(--ui-weight-regular);line-height:1.35}
.payment-fx-meta span{display:block}
.invoice-pay-row .payment-fx-meta,.financial-receipt .payment-fx-meta{margin-top:2px}


.ui-data-table tr.is-open,.financial-detail-row.is-open{background:color-mix(in srgb,var(--blue) 9%,var(--ui-card));box-shadow:inset -3px 0 0 color-mix(in srgb,var(--blue) 65%,transparent)}
.invoice-party-link,.booking-customer-link{font-weight:var(--ui-weight-strong)}


/* V2.5.0-prestable.6 — final manual acceptance: booking toolbar remains one row on desktop and degrades without font shrink. */
@media(max-width:1180px) and (min-width:721px){
 .booking-toolbar{grid-template-columns:minmax(220px,1.2fr) repeat(3,minmax(105px,1fr))}
 .booking-toolbar .booking-search-box{grid-column:span 2}
}
@media(max-width:720px){
 .booking-toolbar{display:grid;grid-template-columns:1fr 1fr}
 .booking-toolbar .booking-search-box{grid-column:1/-1;min-width:0!important}
}
@media(max-width:480px){.booking-toolbar{grid-template-columns:1fr}}

/* V2.5.0-prestable.6 — canonical central report table semantics. Text is not globally centered. */
.central-report-table th,.central-report-table td{padding-inline:10px!important}
/* System-wide UI Consistency round — the same semantic cell system now also covers operational
   lists (.ui-data-table: bookings/invoices/customers/suppliers/treasury) so a money/date/status
   column looks and aligns the same way whether it's read on screen or in a printed report. Column
   order and row data are untouched — only the className on existing <th>/<td> changes. */
.central-report-table .report-cell--currency,
.central-report-table .report-cell--amount,
.central-report-table .report-cell--number,
.central-report-table .report-cell--reference,
.central-report-table .report-cell--date,
.central-report-table .report-cell--status,
.central-report-table .report-cell--entity,
.ui-data-table .report-cell--currency,
.ui-data-table .report-cell--amount,
.ui-data-table .report-cell--number,
.ui-data-table .report-cell--reference,
.ui-data-table .report-cell--date,
.ui-data-table .report-cell--status,
.ui-data-table .report-cell--entity,
.ui-data-table .report-cell--actions,
.central-report-table .report-cell--destination,
.ui-data-table .report-cell--destination,
.central-report-table .report-cell--label,
.ui-data-table .report-cell--label{vertical-align:middle;text-align:center}
/* A place name still WRAPS rather than being cut — centred and clipped would be worse than
   uncentred and whole. */
.central-report-table .report-cell--destination,
.ui-data-table .report-cell--destination,
.central-report-table .report-cell--label,
.ui-data-table .report-cell--label{white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.central-report-table .report-cell--reference,
.central-report-table .report-cell--currency,
.central-report-table .report-cell--date,
.ui-data-table .report-cell--reference,
.ui-data-table .report-cell--currency,
.ui-data-table .report-cell--date{unicode-bidi:isolate}
.central-report-table .report-cell--reference,
.ui-data-table .report-cell--reference{direction:ltr;min-width:88px;white-space:nowrap}
.central-report-table .report-cell--currency,
.ui-data-table .report-cell--currency{direction:ltr;white-space:nowrap}
.central-report-table .report-cell--date,
.ui-data-table .report-cell--date{direction:ltr;white-space:nowrap}
.central-report-table .report-cell--entity,
.ui-data-table .report-cell--entity{white-space:normal}
.central-report-table .report-cell--description,
.central-report-table .report-cell--text,
.ui-data-table .report-cell--description,
.ui-data-table .report-cell--text{text-align:right}
.ui-data-table .report-cell--actions .ui-record-actions,.ui-data-table .report-cell--actions .table-actions{justify-content:center}
.report-composite-cell{display:grid;justify-items:center;align-content:center;gap:2px;min-width:0;text-align:center;line-height:1.28}
.report-composite-line{display:block;max-width:100%;overflow-wrap:anywhere}
.report-composite-line.is-secondary{font-size:calc(var(--ui-font-xs) - 1px);color:var(--ui-text-secondary)}
.report-composite-link{min-height:0!important;padding:0!important;border:0!important;background:transparent!important;font:inherit!important;line-height:inherit!important}
/* P11.1 - THE COLLECTIONS REPORT WAS MADE TO "FIT" BY CROPPING ITSELF.
   Eight columns were forced into whatever width the result card happened to have: table-layout:fixed,
   min-width:0!important on every cell, and overflow-x:hidden on the wrap. Fixed layout then read the
   central `width:1%` shrink-to-content hint literally instead of as a minimum, so the reference, the
   invoice/booking pair, both amount columns and the credit column collapsed to 14px each - and
   because the wrap could not scroll, the 131px that did not fit were simply unreachable. The report
   was unreadable and truncated at the same time.

   The per-report override is gone. What governs now is the central semantic width system further
   down this file (.report-cell--reference / --date / --amount shrink to content, --entity and
   --description take the leftover width, references keep their 88px floor) together with the shared
   wrap contract: a horizontal scrollbar ONLY when the content genuinely does not fit, and no nested
   vertical scrolling. On the same data that produced 14px columns, all eight now measure 99-159px.

   The payment reference stays pinned to the start edge so a row can still be identified while the
   rest is scrolled. It is pinned with `right` rather than a logical property deliberately: that cell
   carries .ltr-cell, so its OWN inline-start is the left edge and inset-inline-start would pin it to
   the wrong side of an RTL table. Screen only - the printed report is a different element. */
.report-table-screen .report-table-collections .report-col-reference{position:sticky;right:0;left:auto;z-index:2;background:var(--ui-card);box-shadow:-1px 0 0 var(--ui-line)}
.report-table-screen .report-table-collections thead .report-col-reference{background:var(--ui-surface-subtle);z-index:3}
.report-table-screen .report-table-collections tbody tr:hover .report-col-reference{background:var(--ui-row-hover)}

/* pre-stable final entity financial / relation composition */
.ui-multi-currency-lines{display:grid;gap:3px;min-width:0}.ui-multi-currency-lines>b{display:block;font-weight:700;white-space:nowrap}.ui-financial-zero{color:var(--text-muted,#647981)}
.entity-financial-summary,.party-financial-summary{align-items:stretch}.entity-financial-summary .ui-financial-summary-item,.party-financial-summary .ui-financial-summary-item{min-width:0}
.customer-relation-group{border:1px solid var(--border-soft,#dbe4e7);border-radius:var(--radius-md,10px);padding:10px;margin-block:8px;background:var(--ui-card)}.customer-relation-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--ui-line)}.customer-relation-group-head h4{margin:0;font-size:var(--font-sm,14px);color:var(--ui-heading)}.customer-relation-group-head>span{min-width:26px;text-align:center;padding:2px 7px;border-radius:999px;background:var(--ui-surface-subtle);color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong)}.customer-relation-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
/* FIRST FIVE, THEN THE REST ON REQUEST — BY HIDING, NEVER BY SCROLLING.
   A scrollbox inside a section would give this modal a second vertical scroll, which is exactly what
   makes a long list unreachable: the reader scrolls the page, hits the box, and the page stops. */
.customer-relation-items.is-limited>*:nth-child(n+6){display:none}
.relation-more{margin-top:8px;padding:5px 10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);
 background:var(--ui-card);color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-xs);
 font-weight:var(--ui-weight-strong);cursor:pointer}
.relation-more:hover{color:var(--ui-text);border-color:color-mix(in srgb,var(--ui-primary,#55717a) 45%,var(--ui-line))}
/* The head is a <summary> now: it keeps its own layout and loses only the marker the browser adds. */
.customer-relation-group>summary.customer-relation-group-head{cursor:pointer;list-style:none}
.customer-relation-group>summary.customer-relation-group-head::-webkit-details-marker{display:none}
.customer-relation-group>summary.customer-relation-group-head::after{content:'⌄';margin-inline-start:auto;
 color:var(--ui-text-secondary);font-size:var(--ui-font-sm);transition:transform .15s ease}
.customer-relation-group[open]>summary.customer-relation-group-head::after{transform:rotate(180deg)}
.customer-relation-group>summary:focus-visible{outline:2px solid color-mix(in srgb,var(--ui-primary,#55717a) 55%,transparent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.customer-relation-group>summary.customer-relation-group-head::after{transition:none}}
/* Wide enough for two sections side by side; narrower stacks them. The sections themselves never
   scroll, so the modal body stays the only vertical scroll at every width. */
@media(min-width:1000px){
 #customerRelations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
 #customerRelations>.customer-relation-group{margin-block:0}
}.relation-compact{min-height:0!important;height:auto!important;padding:8px 10px!important;overflow:hidden}.relation-compact b,.relation-compact span,.relation-compact small{min-width:0;overflow-wrap:anywhere}
/* V2.5.0-prestable.10 — restore existing booking status drag affordance after table migration. */
.bookings-unified-table tbody tr[draggable="true"]{cursor:grab}.bookings-unified-table tbody tr[draggable="true"].is-dragging{opacity:.58}.bookings-unified-table tbody tr[draggable="true"]:active{cursor:grabbing}

/* V2.5.0-prestable.12 — final pre-stable presentation-only UX cleanup */
.backup-top-alert{position:fixed!important;z-index:160!important;left:18px!important;right:auto!important;top:calc(var(--app-topbar-h) + 10px)!important;width:min(410px,calc(100vw - var(--shell-sidebar-current,0px) - 34px))!important;display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);padding:9px 10px!important;border:1px solid color-mix(in srgb,var(--ui-warning) 25%,var(--ui-line));border-radius:var(--ui-radius-sm);background:color-mix(in srgb,var(--ui-card) 97%,var(--ui-warning) 3%);box-shadow:var(--ui-shadow);margin:0!important}
.backup-top-alert>div:first-child{display:grid;gap:1px;min-width:0}.backup-top-alert>div:first-child b{font-size:var(--ui-font-sm);color:var(--ui-heading)}.backup-top-alert>div:first-child span{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.45}.backup-top-alert .header-actions{flex:0 0 auto;gap:5px}.backup-top-alert .alert-close{width:28px;height:28px;border:0;border-radius:var(--ui-radius-xs);background:transparent;color:var(--ui-text-secondary);font:700 18px/1 inherit;cursor:pointer}.backup-top-alert .alert-close:hover{background:var(--ui-row-hover)}
body.sidebar-collapsed .backup-top-alert{right:auto!important}.settings-main-tabs{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:6px!important;box-shadow:var(--ui-shadow-xs)}.settings-panel>.card{border-radius:var(--ui-radius);overflow:hidden}.settings-panel>.card>.card-head{background:var(--ui-surface-subtle);padding-block:11px}.settings-panel>.card>.card-body{display:grid;gap:var(--ui-space-3)}.settings-panel .grid2,.settings-panel .grid4{gap:var(--ui-space-3)}.settings-panel label{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);color:var(--ui-heading)}.settings-panel textarea{min-height:86px}.settings-save-row{padding-top:var(--ui-space-3);border-top:1px solid var(--ui-line)}
.entity-daily-table td{vertical-align:middle}.entity-daily-table .ui-multi-currency-lines{justify-items:center}.ui-multi-currency-compact{display:grid;gap:2px}.ui-multi-currency-compact>b{font-size:var(--ui-font-xs);font-weight:800;line-height:1.35}.ui-muted-value{color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}.entity-name-link b{font-size:var(--ui-font-sm)}.customers-table td,.agents-table td{padding-block:7px!important}.customers-table th,.agents-table th{white-space:nowrap}
.inline-customer-modal{width:min(620px,calc(100vw - 24px))}.client-suggestion-empty{display:grid;gap:8px}.client-suggestion-add{border:1px dashed var(--ui-line);background:var(--ui-info-bg);color:var(--blue-dark);border-radius:var(--ui-radius-xs);padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-family:inherit}.client-suggestion-add svg{width:16px;height:16px}.inline-duplicate-warning{display:grid;gap:5px;padding:10px;border:1px solid color-mix(in srgb,var(--ui-warning) 28%,var(--ui-line));border-radius:var(--ui-radius-sm);background:var(--ui-warning-bg)}.inline-duplicate-warning span{font-size:var(--ui-font-sm);color:var(--ui-text-secondary)}
.ui-file-modal .file-identity{padding:12px 14px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);margin-bottom:var(--ui-space-3)}
/* The identity line is a row of facts, not one concatenated string: it wraps instead of stretching,
   a missing value simply is not there, and the phone keeps its own direction without moving the
   Arabic around it. */
.ui-file-modal .file-identity-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.ui-file-modal .file-identity-meta>span+span::before{content:'·';margin-inline-end:10px;color:var(--ui-muted)}
.ui-file-modal .file-identity-phone{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}.ui-file-modal .file-identity h2{margin:0 0 3px;font-size:var(--ui-section)}.ui-file-modal .file-identity p{margin:0;color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}.ui-file-modal .entity-financial-summary{margin-block:var(--ui-space-3)}.customer-file-modal .customer-overview-fields{padding:12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)}.customer-file-modal .customer-metrics{margin-top:var(--ui-space-3)}
@media(max-width:760px){.backup-top-alert{left:10px!important;right:10px!important;width:auto!important;top:64px!important}.backup-top-alert .btn{display:none}.settings-panel .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.entity-daily-table{min-width:780px}}
@media(max-width:520px){.settings-panel .grid2,.settings-panel .grid4{grid-template-columns:1fr}}

.inline-party-select-row{display:flex;align-items:center;gap:var(--space-2,8px)}.inline-party-select-row select{min-width:0;flex:1}.inline-party-select-row .btn{white-space:nowrap}

.financial-lifecycle-modal{max-width:720px}.financial-lifecycle-context{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:var(--space-3) 0}.financial-lifecycle-context>div{padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-soft);display:flex;flex-direction:column;gap:4px}.financial-lifecycle-context b{overflow-wrap:anywhere}.financial-lifecycle-modal textarea{resize:vertical}@media(max-width:720px){.financial-lifecycle-context{grid-template-columns:1fr}}
.cheque-summary-grid{margin-bottom:var(--space-4)}.cheque-toolbar{align-items:center}.cheque-operational-label{font-weight:700}.cheque-modal{max-width:920px}.cheque-detail-modal{max-width:900px}.cheque-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:var(--space-4) 0}.cheque-detail-grid section,.cheque-timeline{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--surface)}.cheque-detail-grid h4,.cheque-timeline h4{margin:0 0 var(--space-2)}.cheque-detail-grid p{margin:4px 0}.timeline-row{display:grid;grid-template-columns:minmax(140px,1fr) auto;gap:4px var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border-soft)}.timeline-row small{grid-column:1/-1}.multi-currency-stack{display:flex;flex-direction:column;gap:3px}.currency-stack-line{display:flex;justify-content:space-between;gap:var(--space-2);direction:ltr}.currency-stack-line small{font-weight:700}@media(max-width:800px){.cheque-detail-grid{grid-template-columns:1fr}.cheque-toolbar{flex-wrap:wrap}}
/* Tasks page summary strip + toolbar (still in active use). */
.tasks-summary-strip{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--ui-space-3)}
.tasks-toolbar{display:grid;grid-template-columns:minmax(260px,1.4fr) repeat(2,minmax(150px,.6fr));gap:var(--ui-space-2)}
.task-item.is-overdue{border-inline-start:3px solid var(--ui-danger)}
@media(max-width:720px){.tasks-summary-strip,.tasks-toolbar{grid-template-columns:1fr}}
/* V1.1 login presentation only — Auth behavior remains in App. */
.login-screen{background:radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--blue) 88%,white),transparent 38%),linear-gradient(135deg,color-mix(in srgb,var(--blue-dark) 92%,black),var(--blue))!important}
.auth-login-card{width:min(470px,calc(100vw - 24px));padding:28px!important;border:1px solid color-mix(in srgb,var(--blue) 13%,var(--ui-line));box-shadow:0 28px 70px rgba(13,40,49,.26)!important;position:relative;overflow:hidden}
.auth-login-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--blue)}
.login-brand-block{grid-template-columns:112px minmax(0,1fr);gap:16px;margin-bottom:12px}.login-brand-block img{width:112px!important;height:78px!important}.login-brand-block b{font-size:16px}.login-brand-block h2{font-size:20px;margin:4px 0!important}.login-system-description{display:block;color:var(--ui-text-secondary);font-size:12px;line-height:1.7;max-width:290px}
#loginLead{margin:8px 0 12px!important;font-size:13px!important;font-weight:var(--ui-weight-strong);color:var(--ui-heading)!important}.auth-login-form,.first-run-setup{gap:9px}.auth-login-form input,.first-run-setup input{min-height:44px}.password-toggle-btn{min-height:44px}.auth-login-submit{min-height:44px;font-weight:var(--ui-weight-heavy)}
@media(max-width:560px){.auth-login-card{padding:21px!important}.login-brand-block{grid-template-columns:82px minmax(0,1fr)}.login-brand-block img{width:82px!important;height:62px!important}.login-system-description{font-size:11px}}

.alert-type-icon .ui-action-icon{width:18px;height:18px}.alert-item.task{border-inline-start-color:var(--ui-warning)}.alert-item.cheque{border-inline-start-color:var(--ui-danger)}.alert-item.receivable,.alert-item.payable{border-inline-start-color:var(--ui-info)}

/* Cheques UX refinement */
.cheque-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}.cheque-summary-grid .finance-summary-item{min-height:96px;display:flex;flex-direction:column;justify-content:center}.inline-create-link{display:inline-flex;margin-top:6px;font-weight:700}.cheque-return-fee-panel{grid-column:1/-1;border-top:1px solid var(--border-soft);padding-top:var(--space-3)}.cheque-detail-grid section{min-width:0}.cheque-detail-grid p{line-height:1.7}.cheque-timeline{margin-top:var(--space-3)}@media(max-width:900px){.cheque-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.cheque-summary-grid{grid-template-columns:1fr}}

/* Standalone invoice service lines */
.standalone-service-editor{margin-top:var(--ui-space-4);padding-top:var(--ui-space-3);border-top:1px solid var(--ui-line)}.section-inline-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);margin-bottom:var(--ui-space-2)}.section-inline-head h4{margin:0}.standalone-service-line{display:grid;grid-template-columns:minmax(220px,2fr) minmax(90px,.55fr) minmax(120px,.8fr) minmax(120px,.8fr) auto;gap:var(--ui-space-3);align-items:end;padding:var(--ui-space-3) 0;border-bottom:1px solid var(--ui-line)}.service-line-total{min-height:42px;display:flex;flex-direction:column;justify-content:center;padding-inline-start:var(--ui-space-1)}.invoice-service-lines{margin-top:14px}.invoice-service-head,.invoice-service-row{display:grid;grid-template-columns:2fr .55fr 1fr 1fr;gap:8px;align-items:center;padding:8px 10px}.invoice-service-head{font-weight:700;background:var(--ui-surface-subtle);border-radius:8px}.invoice-service-row{border-bottom:1px solid var(--ui-line)}@media(max-width:760px){.standalone-service-line{grid-template-columns:1fr 1fr}.standalone-service-line>div:first-child{grid-column:1/-1}.invoice-service-head,.invoice-service-row{grid-template-columns:1.5fr .6fr 1fr 1fr}}
.invoice-edit-title{margin:0 0 var(--ui-space-2);font-size:var(--ui-section)}.invoice-edit-mode-notice{margin-bottom:var(--ui-space-3);padding:8px 12px;border-radius:var(--ui-radius-sm);background:var(--ui-info-bg);color:var(--ui-info);font-size:var(--ui-font-sm)}.invoice-edit-mode-notice p{margin:0}.invoice-edit-mode-notice p+p{margin-top:4px}.invoice-edit-mode-notice.hidden{display:none!important}
.invoice-discount-editor,.standalone-discount-panel{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:var(--ui-space-3);align-items:end;margin-top:var(--ui-space-4)}.invoice-discount-editor{grid-template-columns:repeat(4,minmax(130px,1fr))}.invoice-net-total input{font-weight:800;color:var(--brand-primary);background:color-mix(in srgb,var(--brand-primary) 7%,var(--ui-card))}.invoice-discount-summary{display:flex;gap:var(--ui-space-2);flex-wrap:wrap;margin-top:var(--ui-space-3);padding:8px 10px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.invoice-discount-summary span{display:inline-flex;align-items:center;gap:5px}.invoice-discount-summary span+span{padding-inline-start:var(--ui-space-2);border-inline-start:1px solid var(--ui-line)}.standalone-discount-panel{margin-top:var(--ui-space-4);padding:var(--ui-space-3);border-radius:var(--ui-radius);background:color-mix(in srgb,var(--brand-primary) 4%,var(--ui-surface-subtle))}.invoice-total-band-discount{grid-template-columns:repeat(5,minmax(0,1fr)) auto}.invoice-discount-summary+label{margin-top:var(--ui-space-4)}@media(max-width:900px){.invoice-discount-editor,.standalone-discount-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.invoice-total-band-discount{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.invoice-discount-editor,.standalone-discount-panel{grid-template-columns:1fr}.invoice-discount-summary{display:grid}.invoice-discount-summary span+span{padding-inline-start:0;border-inline-start:0}.standalone-service-line{gap:var(--ui-space-3)}.standalone-service-line .service-line-total{padding-inline-start:var(--ui-space-2);border-inline-start:2px solid color-mix(in srgb,var(--brand-primary) 20%,transparent)}.invoice-total-band-discount{grid-template-columns:1fr}}

.linked-context-note{margin-top:6px;min-height:18px}.linked-context-note .table-link{font-size:inherit}

/* Treasury source/reference refinement */
.treasury-source-stack{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.treasury-source-ref{display:block;max-width:100%;white-space:nowrap;font-size:var(--font-size-xs);color:var(--text-muted);direction:ltr;unicode-bidi:isolate}.treasury-source-ref .table-link{font-size:inherit;white-space:nowrap}.treasury-source-stack>.cell-note{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Lifecycle presentation refinement */
.lifecycle-history-note{display:flex;flex-direction:column;gap:4px}.payment-refund-history{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-soft);display:flex;flex-direction:column;gap:4px}.payment-refund-history>span{font-size:var(--font-size-xs);color:var(--text-muted)}

/* Still-referenced empty-state helper classes (kept from the retired dashboard-v5 CSS generation). */
.dashboard-compact-empty{padding:var(--ui-space-4);color:var(--ui-text-secondary);font-size:var(--ui-font-sm);text-align:center}
.dashboard-alert-empty{padding:var(--ui-space-3);font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}


/* Central action menus are portaled outside scroll containers. */
.ui-action-popover-floating{position:fixed!important;right:auto!important;bottom:auto!important;z-index:2147483200!important;min-width:190px;overflow-y:auto;overscroll-behavior:contain;transform-origin:top right}.ui-action-popover-floating.opens-upward{transform-origin:bottom right}.ui-action-popover-floating button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;background:var(--ui-surface-muted)}

/* Cheque detail presentation — hierarchy without changing lifecycle logic. */
.cheque-detail-modal{width:min(1020px,calc(100vw - 28px));max-width:1020px}.cheque-detail-modal #chequeDetailBody{padding:0 var(--ui-space-4) var(--ui-space-4)}

/* V1.1.0-dev.6.1 — final UI/UX closure; presentation only. */
.app-topbar-brand{max-width:min(42vw,470px)}
.app-topbar-brand-copy b{font-size:clamp(13px,.83vw,16px)!important;line-height:1.5;letter-spacing:-.01em}
.app-topbar-brand-copy small{font-size:clamp(10px,.65vw,12px);line-height:1.25;margin-top:1px}

.login-screen{padding:clamp(14px,3vw,34px);background:radial-gradient(circle at 15% 16%,color-mix(in srgb,var(--blue) 78%,white),transparent 36%),linear-gradient(145deg,color-mix(in srgb,var(--blue-dark) 94%,black),color-mix(in srgb,var(--blue) 90%,var(--blue-dark)))!important}
.auth-login-card{width:min(458px,calc(100vw - 28px));padding:clamp(23px,2.15vw,31px)!important;border-radius:18px!important;border-color:color-mix(in srgb,var(--blue) 15%,var(--ui-line));box-shadow:0 24px 64px rgba(9,38,48,.24),0 2px 8px rgba(9,38,48,.08)!important}
.auth-login-card:before{height:3px;background:color-mix(in srgb,var(--blue) 86%,white)}
.login-brand-block{grid-template-columns:104px minmax(0,1fr);gap:17px;margin-bottom:15px}.login-brand-block img{width:104px!important;height:74px!important;object-fit:contain}.login-brand-block b{font-size:clamp(15px,1.05vw,17px);line-height:1.4}.login-brand-block h2{font-size:clamp(19px,1.25vw,22px);line-height:1.3;margin:3px 0 2px!important}.login-system-description{font-size:12px;line-height:1.55;max-width:none}
#loginLead{margin:6px 0 14px!important;font-size:13px!important}.auth-login-form,.first-run-setup{gap:9px}.auth-login-form label,.first-run-setup label{font-size:12px}.auth-login-form input,.first-run-setup input{min-height:46px;border-radius:11px;padding-inline:12px;background:color-mix(in srgb,var(--ui-card) 97%,var(--ui-surface-subtle));transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.auth-login-form input:focus,.first-run-setup input:focus{border-color:color-mix(in srgb,var(--blue) 68%,var(--ui-line));box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent);background:var(--ui-card);outline:0}.password-field-wrap{grid-template-columns:minmax(0,1fr) 44px;gap:7px}.password-toggle-btn{min-height:46px;border-radius:11px}.password-toggle-btn:hover,.password-toggle-btn:focus-visible{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 42%,var(--ui-line));background:color-mix(in srgb,var(--blue) 5%,var(--ui-card))}.auth-remember{margin-top:1px!important}.auth-login-submit{min-height:47px;border-radius:11px;margin-top:6px;font-size:13px;box-shadow:0 8px 18px color-mix(in srgb,var(--blue) 20%,transparent)}

.dashboard-quick-menu{position:relative}.dashboard-quick-group{display:grid;padding:4px 0}.dashboard-quick-group+.dashboard-quick-group{border-top:1px solid var(--ui-line)}.dashboard-quick-group>small{padding:3px 9px 5px;color:var(--ui-text-secondary);font-size:10px;font-weight:800}.dashboard-quick-group>button{width:100%;min-height:34px;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:8px;padding:5px 8px;border:0;border-radius:8px;background:transparent;color:var(--ui-text);font:inherit;text-align:right;cursor:pointer}.dashboard-quick-group>button:hover,.dashboard-quick-group>button:focus-visible{background:var(--ui-row-hover);outline:0}.dashboard-quick-group>button>span{display:grid;place-items:center;color:var(--blue)}.dashboard-quick-group>button svg{width:16px;height:16px}.dashboard-quick-group>button b{font-size:11px}




@media(max-width:480px){.login-screen{padding:10px}.auth-login-card{width:calc(100vw - 20px);padding:20px!important;border-radius:15px!important}.login-brand-block{grid-template-columns:78px minmax(0,1fr);gap:12px}.login-brand-block img{width:78px!important;height:60px!important}}
@media(min-width:2200px){.auth-login-card{width:min(520px,calc(100vw - 48px));padding:34px!important}.login-brand-block{grid-template-columns:116px minmax(0,1fr);gap:19px}.login-brand-block img{width:116px!important;height:82px!important}.auth-login-form input,.first-run-setup input,.password-toggle-btn{min-height:48px}.auth-login-submit{min-height:49px}}
.cheque-detail-summary{display:grid;grid-template-columns:1.12fr 1fr 1fr 1fr;border-block:1px solid var(--ui-line);margin-bottom:var(--ui-space-4);background:var(--ui-surface-subtle)}.cheque-detail-summary>div{min-width:0;padding:12px 14px;border-inline-start:1px solid var(--ui-line)}.cheque-detail-summary>div:first-child{border-inline-start:0}.cheque-detail-summary small{display:block;margin-bottom:4px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.cheque-detail-summary b{overflow-wrap:anywhere}.cheque-summary-reference b{font-size:var(--ui-font-strong);color:var(--ui-heading)}
.cheque-detail-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:var(--ui-space-4)}.cheque-detail-layout>section,.cheque-detail-layout>aside{min-width:0}.cheque-section-heading{display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid var(--ui-line);margin-bottom:5px}.cheque-section-heading>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--ui-brand-soft);color:var(--blue)}.cheque-section-heading svg{width:16px;height:16px}.cheque-section-heading h4{margin:0;font-size:var(--ui-font-strong);color:var(--ui-heading)}.cheque-section-heading small{display:block;margin-top:1px;color:var(--ui-text-secondary);font-size:10px}
.cheque-detail-facts,.cheque-detail-links,.cheque-detail-settlement,.cheque-timeline{border:0;border-radius:0;padding:0;background:transparent}.cheque-detail-links{padding-inline-start:var(--ui-space-4);border-inline-start:1px solid var(--ui-line)}.cheque-facts-grid,.cheque-settlement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--ui-space-4)}.cheque-fact{min-width:0;padding:9px 2px;border-bottom:1px solid var(--ui-cell-line)}.cheque-fact.wide{grid-column:1/-1}.cheque-fact small{display:block;margin-bottom:3px;color:var(--ui-text-secondary);font-size:10px}.cheque-fact>div{min-height:20px;color:var(--ui-text);font-size:var(--ui-font-sm);overflow-wrap:anywhere}.cheque-link-list .cheque-fact:last-child{border-bottom:0}.cheque-detail-settlement{padding-top:var(--ui-space-2)}
.cheque-timeline{margin-top:var(--ui-space-2);padding-inline-start:var(--ui-space-4);border-inline-start:1px solid var(--ui-line)}.cheque-timeline-list{display:grid}.cheque-timeline .timeline-row{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:2px 7px;padding:8px 0;border-bottom:1px solid var(--ui-cell-line)}.cheque-timeline .timeline-row:last-child{border-bottom:0}.cheque-timeline .timeline-dot{grid-row:1/3;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--ui-brand-soft)}.cheque-timeline .timeline-row b{font-size:var(--ui-font-xs)}.cheque-timeline .timeline-row time{font-size:9px;color:var(--ui-text-secondary);direction:ltr}.cheque-timeline .timeline-row small{grid-column:2/-1;font-size:9px;color:var(--ui-text-secondary)}.cheque-compact-empty{padding:12px 2px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.cheque-detail-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-4);margin-top:var(--ui-space-4);padding:11px 2px 0;border-top:1px solid var(--ui-line)}.cheque-detail-actions>div:first-child b{display:block;font-size:var(--ui-font-sm)}.cheque-detail-actions>div:first-child small{display:block;color:var(--ui-text-secondary);font-size:10px}.cheque-detail-actions .ui-record-actions{flex-wrap:wrap;justify-content:flex-start}
@media(max-width:760px){.cheque-detail-modal{width:min(100vw - 16px,1020px)}.cheque-detail-modal #chequeDetailBody{padding-inline:var(--ui-space-3)}.cheque-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.cheque-detail-summary>div:nth-child(3){border-inline-start:0;border-top:1px solid var(--ui-line)}.cheque-detail-summary>div:nth-child(4){border-top:1px solid var(--ui-line)}.cheque-detail-layout{grid-template-columns:1fr}.cheque-detail-links,.cheque-timeline{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--ui-line);padding-top:var(--ui-space-3)}.cheque-detail-actions{align-items:flex-start;flex-direction:column}}
@media(max-width:460px){.cheque-detail-summary,.cheque-facts-grid,.cheque-settlement-grid{grid-template-columns:1fr}.cheque-detail-summary>div{border-inline-start:0!important;border-top:1px solid var(--ui-line)}.cheque-detail-summary>div:first-child{border-top:0}.cheque-fact.wide{grid-column:auto}.cheque-timeline .timeline-row{grid-template-columns:12px minmax(0,1fr)}.cheque-timeline .timeline-row time{grid-column:2}.cheque-detail-actions .table-actions{width:100%}}

/* Inventory preview modal — compact variant of the shared cheque-detail-* components (Round 2
 * correction pass). Same components/tokens as the cheque detail modal, only the spacing scale
 * shrinks a step (space-4/3 -> space-2/1) and the modal itself is narrower — this list has no
 * two-column aside layout, so the 1150px default modal-box width is far more than it needs. */
.inventory-preview-compact{width:min(680px,calc(100vw - 28px));max-width:680px}
.inventory-preview-compact #inventoryPreviewBody{padding:0 var(--ui-space-4) var(--ui-space-4)}
.inventory-preview-compact .cheque-detail-summary{margin-bottom:var(--ui-space-3)}
.inventory-preview-compact .cheque-detail-summary>div{padding:8px 10px}
.inventory-preview-compact .cheque-section-heading{padding-bottom:6px;margin-bottom:3px}
.inventory-preview-compact .cheque-section-heading>span{width:26px;height:26px}
.inventory-preview-compact .cheque-section-heading svg{width:14px;height:14px}
.inventory-preview-compact .cheque-fact{padding:6px 2px}
.inventory-preview-compact .cheque-fact>div{min-height:auto;line-height:1.4}
.inventory-preview-compact .cheque-fact b{color:var(--ui-heading)}
.inventory-preview-compact .cheque-timeline{margin-top:2px}
.inventory-preview-compact .cheque-timeline .timeline-row{padding:5px 0}
.inventory-preview-compact .cheque-compact-empty{padding:8px 2px}
@media(max-width:460px){.inventory-preview-compact{width:calc(100vw - 16px)}}
.trip-groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--ui-space-4)}
.trip-group-card{background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);padding:var(--ui-space-4);cursor:pointer;transition:box-shadow .15s,border-color .15s}
.trip-group-card:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(20,113,162,.14)}
.trip-group-card h3{margin:0 0 var(--ui-space-2) 0}
.trip-group-card.suggested-card{cursor:default;border-style:dashed}
.trip-group-meta{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);margin:var(--ui-space-1) 0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ui-space-1)}
.trip-group-counts{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin:var(--ui-space-2) 0}
.trip-kpi{background:var(--ui-surface-subtle);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:2px var(--ui-space-2);font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.trip-kpi.warning{background:#fff6e0;border-color:var(--yellow);color:#7a5b00}
.group-finance-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2) var(--ui-space-4);padding:var(--ui-space-3) 0;border-bottom:1px solid var(--ui-line)}
.group-finance-row:last-child{border-bottom:0}
.group-finance-row>span:last-child{margin-inline-start:auto;font-size:var(--ui-font-strong)}
/* Group modals (§8 correction pass) — scoped max-width modifiers, same convention as
   .emp-modal-sm/.unified-payment-modal etc.; never edit the shared .modal/.modal-box rules. */
.modal-box.group-modal-wide{max-width:min(1180px,calc(100vw - 32px))}
.modal-box.group-modal-md{max-width:min(820px,calc(100vw - 32px))}
.modal-box.group-modal-sm{max-width:min(520px,calc(100vw - 32px))}
.modal-box.group-modal-select{max-width:min(980px,calc(100vw - 32px))}
/* Vertical centering for Group dialogs only — the shared .modal is top-pinned (align-items:flex-start)
   by design for tall content-heavy modals elsewhere; these four are short/focused enough that top-pinning
   reads as an unbalanced blank band beneath them. Scoped by id, shared .modal rule untouched. */
#tripOpsModal.modal,#groupTripModal.modal,#groupActionModal.modal,#groupBookingSelectModal.modal,#groupPrintPickerModal.modal,#groupSharedCostModal.modal,#groupSharedCostSourceModal.modal,#groupSharedCostPreviewModal.modal,#groupTransportBlockModal.modal{align-items:center}
.trip-group-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);margin-bottom:var(--ui-space-1)}
.trip-group-card-head h3{margin:0;font-size:var(--ui-font-md,15px)}
.trip-group-ref{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);direction:ltr;display:inline-block}
.group-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--ui-space-4);margin-bottom:var(--ui-space-4)}
.group-overview-block{background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:var(--ui-space-4)}
.group-overview-block h4{margin:0 0 var(--ui-space-2);font-size:var(--ui-font-sm);color:var(--ui-text-secondary)}
/* §E6 — guide/escort list block reuses .group-overview-block/.row-card; only the heading needs a
   flex row to host its "+ إضافة مرشد" action inline. */
.group-guides-block h4{display:flex;align-items:center;justify-content:space-between;gap:8px}
.group-guides-list{display:grid;gap:var(--ui-space-2)}
.group-guide-row{padding:var(--ui-space-2) var(--ui-space-3)}
/* Label+value pairs sit close together (fixed-width label column) instead of being pushed to the
   two far edges of a wide card — a `justify-content:space-between` row stretched across a ~1180px
   modal reads as scattered/empty-in-the-middle; a compact aligned pair reads as one balanced field. */
.group-overview-row{display:flex;align-items:baseline;justify-content:flex-start;gap:var(--ui-space-3);padding:3px 0;font-size:var(--ui-font-sm)}
.group-overview-row span{flex:0 0 auto;min-width:112px;color:var(--ui-text-secondary)}
.group-overview-row b{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-weight:var(--ui-weight-strong)}
.nights-check-ok{color:#166b43;font-size:var(--ui-font-xs)}
.nights-check-warn{color:#b42336;font-size:var(--ui-font-xs)}
.group-booking-select-row.is-linked{opacity:.55}
.group-booking-select-owner{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
/* Shared Group Costs (Phase 2) — reuses .trip-group-card/.group-overview-block/.group-finance-row
   wholesale (see sharedCostCard()/renderFinanceTab()/renderSharedCostPreview() in trip-operations.js);
   only these two small additions are genuinely new. */
.checkbox-row{display:flex;align-items:center;gap:var(--ui-space-2);padding:3px 0;font-size:var(--ui-font-sm)}
tr.is-exempt{opacity:.55}


/* Reports & Statements Restructuring - report-name search + frequently-used rail.
   Reuses the existing control tokens and the .report-category-btn/.report-definition-btn shapes;
   no new design language, no new breakpoint. */
.report-search-wrap{padding:0 0 var(--ui-space-2)}
.report-search-wrap input{width:100%;height:var(--ui-control);padding-inline:var(--ui-space-2);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm,9px);background:var(--ui-card);color:var(--ui-text);font:inherit;font-weight:var(--ui-weight-filter)}
.report-search-wrap input::placeholder{color:var(--ui-muted)}
.report-search-wrap input:focus{outline:2px solid color-mix(in srgb,var(--ui-primary,#55717a) 45%,transparent);outline-offset:1px}
.report-recent-list:empty{display:none}
/* While a search is active the group rail is still usable, just visually de-emphasised: results span
   every group, so no single group is "current". */
.report-category-list.is-search-dimmed{opacity:.62}

.central-print-preview-box .modal-toolbar .print-preview-meta{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:600;margin-inline:auto}

/* ============================================================================================
   Reports & Statements — final UI refinement.
   EVERY selector below is scoped to a Reports-only ancestor (.report-*). system-ui.css is linked in
   index.html, so PrintService.styleMarkup() copies it into the BOOKING VOUCHER print document; the
   voucher markup uses only .mv-* / .v-section classes, so nothing here can match it. Do not add an
   unscoped element selector to this block.
   ============================================================================================ */

/* --- results workspace: identity, compact summary, then the table ------------------------- */
.report-result-card .card-head{align-items:flex-start;gap:var(--ui-space-3);flex-wrap:wrap}
/* The report's own name sits on its own line; any note that materially changes how its numbers
   are read follows underneath, muted, instead of being pressed against the title. */
.report-result-identity{min-width:0;flex:1 1 260px;display:flex;flex-direction:column;gap:3px}
.report-result-identity h3{margin:0}
.report-result-identity>.small{color:var(--ui-text-secondary);line-height:1.45;max-width:78ch}
.report-result-identity h3{margin:0;font-size:var(--ui-font-md,15px);line-height:1.3}
.report-result-identity .small{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.4;margin-top:2px}
.report-result-card .report-page-controls{display:flex;align-items:center;gap:var(--ui-space-2);flex:0 0 auto}
.report-record-count{white-space:nowrap;color:var(--ui-text-secondary)}
/* The summary is a compact strip between the identity and the table, never an oversized KPI wall. */
.report-center-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:6px;padding:var(--ui-space-2) var(--ui-space-3);border-bottom:1px solid var(--ui-line);direction:rtl;text-align:right}
.report-center-summary:empty{display:none;padding:0;border-bottom:0}
.report-summary-card{padding:6px 8px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-soft);min-width:0}
.report-summary-card small{display:block;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.3}
.report-summary-card b{display:block;margin-top:1px;font-size:var(--ui-font-sm);color:var(--ui-heading);overflow-wrap:anywhere}
.report-result-card>.card-body{padding-top:var(--ui-space-2)}

/* --- filter sidebar: quick filters visible, advanced collapsible ------------------------- */
.report-filter-sidebar .report-filter-section{margin:0 0 var(--ui-space-2)}
.report-filter-sidebar .report-filter-section:last-child{margin-bottom:0}
.report-filter-sidebar .report-filter-grid{grid-template-columns:1fr;gap:var(--ui-space-2)}
.report-filter-sidebar .report-quick-filters{display:flex;flex-wrap:wrap;gap:4px}
.report-advanced-filters>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.report-advanced-filters>summary::-webkit-details-marker{display:none}
.report-advanced-filters>summary::after{content:'▾';margin-inline-start:auto;color:var(--ui-text-secondary);font-size:11px;transition:transform .15s ease}
.report-advanced-filters[open]>summary::after{transform:rotate(180deg)}
.report-advanced-filters>summary:focus-visible{outline:2px solid color-mix(in srgb,var(--ui-primary,#55717a) 45%,transparent);outline-offset:2px}
.report-applied-filters:empty{display:none}

/* --- result table: semantic widths, central, not per-report hard-coding ------------------ */
/* Compact by meaning: a reference, a date, a currency code or a status never needs to be wide, and
   giving them a ceiling is what leaves room for the names and descriptions that actually get long. */
.report-table-screen .central-report-table .report-cell--reference,
.report-table-screen .central-report-table .report-cell--date,
.report-table-screen .central-report-table .report-cell--currency,
.report-table-screen .central-report-table .report-cell--number{width:1%;white-space:nowrap}
.report-table-screen .central-report-table .report-cell--status{width:1%;white-space:nowrap;max-width:132px;overflow-wrap:anywhere}
/* Amounts keep a stable numeric column so figures line up down the page. */
.report-table-screen .central-report-table .report-cell--amount{width:1%;white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums}
/* Names, parties and descriptions are the flexible ones — they get the leftover width. */
.report-table-screen .central-report-table .report-cell--entity{min-width:150px;white-space:normal}
.report-table-screen .central-report-table .report-cell--description,
.report-table-screen .central-report-table .report-cell--text{min-width:170px;white-space:normal;overflow-wrap:anywhere}
.report-table-screen .central-report-table th,
.report-table-screen .central-report-table td{padding-block:7px}
.report-table-screen .central-report-table td{line-height:1.45}

/* --- overflow discipline: a scrollbar only when something actually overflows -------------- */
.report-center-page,.report-center-shell,.report-viewer,.report-catalog-card,.report-result-card{max-width:100%;min-width:0}
.report-table-screen{overflow:visible}

@media(max-width:1180px){
  .report-definition-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
@media(max-width:1050px){
  /* The sidebar stops being a column and becomes a normal block above the results. */
  .report-filter-sidebar{position:static;max-height:none}
  .report-filter-sidebar .report-sidebar-body{overflow:visible;max-height:none}
  .report-filter-sidebar .report-filter-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

/* ==============================================================================================
   Annual / Period-End Report — SCREEN styles.
   WARNING: system-ui.css is linked in index.html, so PrintService.styleMarkup() copies it into the
   BOOKING VOUCHER print document. Every selector below is therefore scoped under a Period-End-only
   ancestor (.period-end-page / .pe-*), and the voucher markup uses only .mv-* / .v-section classes,
   so nothing here can match it. Do not add an unscoped element selector to this block.
   ============================================================================================== */
.period-end-page .pe-setup-body{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ui-space-3)}
.period-end-page .pe-setup-body label{display:flex;flex-direction:column;gap:3px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.period-end-page .pe-setup-body input[type=date]{min-width:160px}
.period-end-page .pe-quick{display:flex;flex-wrap:wrap;gap:4px}
.period-end-page .pe-kind{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ui-space-2);
 padding:var(--ui-space-2) var(--ui-space-3);border-top:1px solid var(--ui-line);font-size:var(--ui-font-sm)}
.period-end-page .pe-kind b{color:var(--ui-heading)}
.period-end-page .pe-kind span{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.period-end-page .pe-kind.is-interim b{color:#8a6b12}
.period-end-page .pe-kind.is-error b{color:var(--ui-danger,#a4343a)}
.period-end-page .pe-note{margin:0 0 var(--ui-space-3);padding:var(--ui-space-2) var(--ui-space-3);
 border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-soft);
 font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.6}
.period-end-page .pe-verdict{padding:5px 14px;border-radius:999px;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong)}
.period-end-page .pe-verdict-ready{background:#eef7ef;color:#2f5836;border:1px solid #4c8055}
.period-end-page .pe-verdict-ready_with_warnings{background:#fdf7e6;color:#5c4708;border:1px solid #c9a227}
.period-end-page .pe-verdict-blocked{background:#fbeced;color:#7d2328;border:1px solid #a4343a}
/* ACKNOWLEDGEMENT — one compact row. The label stretched the full width of the card, so the
   checkbox sat alone at the start of a 933px line with its sentence trailing away from it. Sized to
   its own content and boxed, the box and the sentence read as the single statement they are. */
.period-end-page .pe-ack-block{margin-top:var(--ui-space-3)}
.period-end-page .pe-ack{
 display:inline-flex;align-items:center;gap:8px;width:auto;max-width:100%;margin:0;
 padding:7px 11px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);
 background:var(--ui-soft);font-size:var(--ui-font-sm);line-height:1.5;cursor:pointer}
.period-end-page .pe-ack input{flex:0 0 auto;width:16px;height:16px;min-height:0;margin:0}
.period-end-page .pe-ack>span{min-width:0}
.period-end-page .pe-ack-block .pe-ack-hint{margin-top:6px}
.period-end-page .pe-actions{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin-top:var(--ui-space-3)}
/* ==============================================================================================
   PRELIMINARY DOCUMENTS — SCREEN styles (المستندات المبدئية).
   WARNING: system-ui.css is linked in index.html, so PrintService.styleMarkup() copies it into the
   BOOKING VOUCHER print document. Every selector below is therefore scoped under .predoc-page, and
   the voucher markup uses only .mv-* / .v-section classes, so nothing here can match it. Do not add
   an unscoped element selector to this block.
   The printed document has its own stylesheet (travel-document-print.css) which is fetched
   ONLY by the document iframe and is not linked here at all.
   ============================================================================================== */
.predoc-page .pd-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ui-space-3);align-items:start}
.predoc-page .pd-form-card,.predoc-page .pd-preview-card{margin:0;min-width:0}
.predoc-page .pd-preview-card{position:sticky;top:76px}
.predoc-page .pd-form{display:flex;flex-direction:column;gap:var(--ui-space-3)}

.predoc-page .pd-group{border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);padding:var(--ui-space-2) var(--ui-space-3) var(--ui-space-3)}
.predoc-page .pd-group-title{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);margin-bottom:var(--ui-space-2)}
.predoc-page .pd-group-title b{font-size:var(--ui-font-sm);color:var(--ui-heading)}

.predoc-page .pd-row{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);align-items:flex-end;margin-bottom:6px}
/* Fixed-column rows keep logically paired fields together instead of letting flex-wrap strand one of
   them on its own line — which is how Arrival Time ended up alone on a full-width row. */
.predoc-page .pd-row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.predoc-page .pd-row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.predoc-page .pd-row-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){
  .predoc-page .pd-row-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .predoc-page .pd-row-2,.predoc-page .pd-row-3,.predoc-page .pd-row-4{grid-template-columns:minmax(0,1fr)}
}
.predoc-page .pd-row:last-child{margin-bottom:0}
.predoc-page .pd-f{display:flex;flex-direction:column;gap:2px;flex:1 1 140px;min-width:0}
.predoc-page .pd-f-wide{flex:1 1 100%}
.predoc-page .pd-f small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.predoc-page .pd-f input,.predoc-page .pd-f textarea,.predoc-page .pd-f select{width:100%;min-width:0}
.predoc-page .pd-nights{flex:0 0 96px}
.predoc-page .pd-nights b{display:flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-soft);color:var(--ui-heading)}

.predoc-page .pd-seg{border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);padding:var(--ui-space-2);margin-bottom:var(--ui-space-2);background:var(--ui-soft)}
.predoc-page .pd-seg:last-child{margin-bottom:0}
.predoc-page .pd-seg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.predoc-page .pd-seg-head b{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.predoc-page .pd-row-pax{margin-bottom:6px}
.predoc-page .pd-del{flex:0 0 auto;line-height:1;padding:4px 10px}

/* TRANSIT: the selector is always present; its fields appear only when the answer is «نعم», inset
   behind an accent edge so they read as belonging to that segment rather than as a new section. */
.predoc-page .pd-transit-fields{
 margin-top:6px;padding:var(--ui-space-2) var(--ui-space-2) 2px;
 border-inline-start:3px solid var(--blue);border-radius:var(--ui-radius-xs);background:var(--ui-card)}
/* The waiting duration is computed, never typed — so it is presented as a read-only value cell, the
   same treatment the hotel's nights cell already uses, not as a disabled input. */
.predoc-page .pd-wait{flex:0 0 180px;max-width:180px}
.predoc-page .pd-wait b{
 display:flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid var(--ui-line);
 border-radius:var(--ui-radius-xs);background:var(--ui-soft);color:var(--ui-heading);
 font-variant-numeric:tabular-nums}
.predoc-page .pd-hint{margin:4px 0 0;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.6}
/* A hotel document may hold SEVERAL stays, each its own full block. The accent edge and the number
   in the title are what stop two stays reading as one long form. */
.predoc-page .pd-stay-group{border-inline-start:3px solid var(--blue)}
.predoc-page .pd-stay-group+.pd-stay-group{margin-top:var(--ui-space-2)}
/* «+ إقامة» sits after the last stay, not inside it — it adds a sibling, and putting it in a group
   title would read as adding something to that group. */
.predoc-page .pd-stay-add{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.predoc-page .pd-actions{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);padding:var(--ui-space-2) var(--ui-space-3);border-top:1px solid var(--ui-line)}
.predoc-page .pd-errors:empty{display:none}
.predoc-page .pd-errors{margin:0 var(--ui-space-3) var(--ui-space-3);padding:var(--ui-space-2) var(--ui-space-3);border:1px solid var(--ui-danger,#a4343a);border-radius:var(--ui-radius-xs);background:#fbeced;color:#7d2328;font-size:var(--ui-font-xs)}
.predoc-page .pd-errors ul{margin:0;padding-inline-start:18px}

/* The preview is the printed page at A4 proportion, never a second layout. */
.predoc-page .pd-preview-frame{padding:var(--ui-space-3);background:var(--ui-soft);border-top:1px solid var(--ui-line)}
.predoc-page .pd-preview-frame iframe{display:block;width:100%;aspect-ratio:210/297;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:#fff}
/* the preview frame stays blank (white page, same size) until its document is styled - never a raw flash */
.predoc-page .pd-preview-frame iframe.pd-preview-pending{visibility:hidden}

@media(max-width:1100px){
  .predoc-page .pd-shell{grid-template-columns:minmax(0,1fr)}
  .predoc-page .pd-preview-card{position:static}
}

/* --- Preliminary Documents: searchable central-list dropdown -------------------------------------
   The box reuses the app's EXISTING suggestion geometry (see .client-suggestions /
   .airport-suggestions above): absolutely positioned under the field, RTL-aligned, scrolling, high
   z-index. The native <datalist> it replaces is what rendered cramped and mis-aligned.
   Still scoped under .predoc-page, because system-ui.css reaches the voucher print document. */
/* Every suggest wrapper shares one z-index, so two of them tie and the LATER one in the DOM wins —
   which painted the From/To fields over an open airline list. The wrapper whose list is open is
   lifted above its peers for as long as it is open (PreliminaryDocsUI toggles .is-open). */
.predoc-page .predoc-suggest{position:relative;z-index:8}
.predoc-page .predoc-suggest.is-open{z-index:10060}
.predoc-page .predoc-suggest-box{
 z-index:10050;position:absolute;top:calc(100% + var(--ui-space-1));right:0;left:0;
 background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);
 box-shadow:var(--ui-shadow);max-height:260px;overflow:auto;padding:var(--ui-space-1)}
.predoc-page .predoc-suggest-box.hidden{display:none}
.predoc-page .predoc-suggest-box button{
 width:100%;border:0;background:var(--ui-card);text-align:right;padding:var(--ui-space-2);
 border-radius:var(--ui-radius-xs);font-family:inherit;font-size:var(--ui-font-sm);
 color:var(--ui-text);cursor:pointer;display:flex;flex-direction:column;gap:1px}
.predoc-page .predoc-suggest-box button:hover{background:var(--ui-row-hover)}
.predoc-page .predoc-suggest-box button b{font-weight:var(--ui-weight-strong);direction:ltr;text-align:right}
.predoc-page .predoc-suggest-box button small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
/* Time inputs stay 24-hour and LTR inside the RTL form. */
.predoc-page input[type=time],.predoc-page input[type=date]{direction:ltr;text-align:right}

/* Annual Report readiness — ONE compact table. Severity reads per row as a STATUS badge, and the
   category is a single heading with its count, so a thirteen-row list no longer repeats the same
   badge down its whole length. Scoped under .period-end-page like the rest of this feature's screen
   styles, because system-ui.css is copied into the Booking Voucher print document. */
/* A COMPACT CENTRED PANEL, not a full-width sheet. At 963px of card the table ran the whole width
   and the البند column alone took 523px, which is what turned three short columns into three
   columns separated by empty space. Capped and centred, the same three columns sit close enough to
   read across in one movement. `min(…)` keeps it readable on a narrow screen instead of shrinking
   below the text it holds. */
.period-end-page .pe-review-group{margin:0 auto var(--ui-space-3);width:min(100%,78%);max-width:760px}
.period-end-page .pe-review-group:last-child{margin-bottom:0}
.period-end-page .pe-review-group>h4{
 display:flex;align-items:center;gap:var(--ui-space-2);margin:0 0 6px;
 font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-text-secondary);
 text-transform:none;letter-spacing:0}
.period-end-page .pe-review-group>h4 span{
 min-width:20px;padding:1px 7px;border-radius:999px;background:var(--ui-soft);
 border:1px solid var(--ui-line);font-size:11px;text-align:center;color:var(--ui-text-secondary)}
.period-end-page .pe-review-table{font-size:var(--ui-font-xs)}
.period-end-page .pe-review-table th,
.period-end-page .pe-review-table td{vertical-align:middle;padding-top:5px;padding-bottom:5px}
/* The status column is sized to its badge so the item and note columns keep the width. */
/* Fixed layout so the three columns keep the proportions set here rather than being redistributed
   by whichever note happens to be longest. */
.period-end-page .pe-review-table{width:100%;table-layout:fixed}
.period-end-page .pe-review-table .pe-col-status{width:76px;white-space:nowrap;text-align:center}
.period-end-page .pe-review-table th:nth-child(1){width:42%}
.period-end-page .pe-review-table th:nth-child(2){width:76px}
.period-end-page .pe-review-table .pe-col-item{font-weight:var(--ui-weight-strong)}
.period-end-page .pe-review-table .pe-col-note{color:var(--ui-text-secondary);line-height:1.55}
/* A blocker still carries a quiet row tint: the badge says it, the row makes it findable at a
   glance without turning the table into a block of colour. */
.period-end-page .pe-review-table tr.pe-level-block>td{background:#fdf4f5}
.period-end-page .pe-status{
 display:inline-block;min-width:52px;padding:2px 10px;border-radius:999px;
 font-size:11px;font-weight:var(--ui-weight-strong);white-space:nowrap;text-align:center;
 border:1px solid transparent}
.period-end-page .pe-status.is-block{background:#fbeced;border-color:#a4343a;color:#7d2328}
.period-end-page .pe-status.is-warn{background:#fdf7e6;border-color:#c9a227;color:#5c4708}
.period-end-page .pe-status.is-ok{background:#eef7ef;border-color:#4c8055;color:#2f5836}
.period-end-page .pe-ack-hint{
 margin:var(--ui-space-3) 0 0;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.6}
/* A date range is one LTR run, so DD/MM/YYYY never visually inverts inside the RTL card. */
.period-end-page .pe-range{
 display:inline-block;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);
 font-variant-numeric:tabular-nums}

/* Reports Center — spacing only (Micro round). No definition, group, filter, export or permission
   behaviour is touched; these rules add breathing room between the title, the group rail, the
   search field and the catalog, now that the explanatory subtitle is gone. */
.report-center-page .report-center-title{margin-bottom:var(--ui-space-3)}
.report-center-page .report-group-bar{margin-bottom:var(--ui-space-4,20px)}
.report-center-page .report-catalog-head{padding:var(--ui-space-3)}
/* The search field is the main way into 40 reports, so it is sized like it: it GROWS into the width
   the group name does not need, instead of sitting in a 340px corner of an 844px header. */
.report-center-page .report-search-wrap input{min-height:42px;font-size:var(--ui-font);padding-inline:var(--ui-space-3)}
.report-center-page .report-catalog-head .report-search-wrap{flex:1 1 340px;min-width:220px}
.report-center-page .report-definition-list{padding-top:var(--ui-space-3)}
.report-center-page .report-result-card .card-head{padding-block:var(--ui-space-3)}

/* Header micro refinement — compact profile + notification bell.
   Reuses the existing .menu-wrap / .dropdown-menu foundation; no parallel dropdown system. */
/* P6.1 — TWO LINES, NOT ONE ROW. This rule is the real owner of the copy's layout (it is the last
   and most specific), and it said `display:flex` from when the button held only a name. With a
   role added, flex put the two on ONE line so they read as a single smudged string — which is
   what the owner saw. A two-row grid with a real gap gives each its own baseline. */
.topbar-user-button .topbar-user-copy{display:grid;gap:2px;align-items:center;min-width:0}
/* 1.6, not 1.45: the Cairo face's ascent/descent still exceeded a 1.45 line box at 12px under
   overflow:hidden, clipping 3px off the username. Same defect class as the alert chips. */
.topbar-user-button .topbar-user-copy b{font-size:var(--ui-font-xs);line-height:1.6;white-space:nowrap}
.topbar-user-button .topbar-user-copy small{line-height:1.55}
.account-role-line{padding:0 var(--ui-space-3) var(--ui-space-2)}
.account-role-line small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}

.topbar-bell-area{position:relative;display:flex;align-items:center}
.topbar-bell-btn{
 position:relative;display:flex;align-items:center;justify-content:center;
 width:34px;height:34px;padding:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);
 background:var(--ui-card);color:var(--ui-text-secondary);cursor:pointer}
.topbar-bell-btn:hover{background:var(--ui-row-hover);color:var(--ui-text)}
.topbar-bell-icon svg,.topbar-bell-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
 stroke-linecap:round;stroke-linejoin:round}
/* No badge at all when nothing is outstanding — a permanent zero is noise. */
.topbar-bell-badge{
 position:absolute;top:-6px;inset-inline-start:-6px;min-width:17px;height:17px;padding:0 4px;
 border-radius:999px;background:var(--ui-danger,#a4343a);color:#fff;
 font-size:10px;font-weight:var(--ui-weight-strong);line-height:17px;text-align:center;
 font-variant-numeric:tabular-nums}
.topbar-bell-panel{min-width:290px;max-width:340px;max-height:380px;overflow:auto}
.topbar-bell-panel .bell-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:right}
.topbar-bell-panel .bell-item-title{font-size:var(--ui-font-sm);color:var(--ui-text);overflow-wrap:anywhere}
.topbar-bell-panel .bell-item-meta{display:flex;flex-wrap:wrap;gap:2px var(--ui-space-2)}
.topbar-bell-panel .bell-item-meta small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.topbar-bell-panel .bell-empty,.topbar-bell-panel .bell-more-note{
 padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}

/* ===== Voucher presentation — passenger cards, labelled stay facts (Items 1 · 6 · 75) =====
 * One passenger is ONE compact card, three to a row: the name, then the type, the passport number
 * and the date of birth, each on its own line and each with its label, so a date is never read as
 * some other date. The tracks are fixed thirds — one or two passengers keep the same card width
 * instead of stretching across the page. */
.modern-voucher .mv-traveler-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ui-space-2)}
.modern-voucher .mv-traveler-item{display:grid;gap:2px;align-content:start;break-inside:avoid}
.modern-voucher .mv-traveler-item>b{min-width:0;overflow-wrap:anywhere;line-height:1.4}
.modern-voucher .mv-traveler-facts{margin:0;display:grid;gap:1px;font-size:var(--ui-font-xs);color:var(--ui-text);line-height:1.5;min-width:0}
.modern-voucher .mv-traveler-facts>span{display:block;min-width:0;overflow-wrap:anywhere;font-size:inherit;color:inherit}
.modern-voucher .mv-traveler-facts em{font-style:normal;color:var(--ui-text-secondary)}
.modern-voucher .mv-traveler-facts bdi{font-weight:700}
.modern-voucher .mv-traveler-facts .mv-traveler-type{font-weight:700;color:var(--ui-heading)}
@media(max-width:700px){.modern-voucher .mv-traveler-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mv-hotel-stay .mv-hotel-fact{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.mv-hotel-stay .mv-hotel-fact em{font-style:normal;font-size:var(--ui-font-xs);font-weight:700;color:var(--ui-text-secondary)}
.mv-hotel-stay .mv-hotel-fact b{font-weight:800;color:var(--ui-text)}

/* ===== Paged document preview — A4 sheets on a desk ============================================
 * One model for every document preview (booking voucher, reports, statements, the annual booklet).
 * Each sheet is the print document at its real A4 size; the stack is scaled as a whole, so zoom
 * is a way of looking and never a second layout. Geometry (page size, margins, where pages end)
 * is set inline by PrintService.pagedPreview() from the document's own @page rules. */
.pv-desk{position:relative;overflow:auto;padding:18px;background:var(--ui-surface-muted);min-height:0;display:block!important}
.pv-stack-wrap{position:relative;margin-inline:auto;max-width:none}
.pv-stack{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:18px;transform-origin:top left}
.pv-sheet{position:relative;flex:0 0 auto;overflow:hidden;background:#fff;border:1px solid #cfd9dd;box-shadow:0 2px 12px rgba(15,34,45,.2)}
.pv-sheet>iframe{position:absolute;border:0;background:#fff;pointer-events:none}
.pv-foot{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:center;direction:rtl;font-size:9.1px;font-weight:650;line-height:1.36;color:#354c55}
/* As on paper: each margin box spans the whole bottom margin, is ruled along its top edge and
   centres its own line — so the three rules meet as one line, whatever each box holds. */
.pv-foot{align-items:stretch}
.pv-foot>span{min-width:0;display:flex;flex-direction:column;justify-content:center;border-top:1px solid #c8d7dc;overflow:hidden}
.pv-foot-start{align-items:flex-start;text-align:start}.pv-foot-center{align-items:center;text-align:center}.pv-foot-end{align-items:flex-end;text-align:end}
.pv-foot-social{display:block}.pv-foot-social svg{width:10px;height:10px;vertical-align:middle}
.pv-loading{padding:48px 16px;text-align:center;color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}
.pv-loading.pv-error{color:var(--ui-danger,#b42336)}
.preview-source{position:absolute;inset-inline-start:-100000px;top:0;width:794px;visibility:hidden;pointer-events:none}
.preview-pager-label:empty{display:none}
.booking-preview-box>.preview-area.pv-desk{padding:18px!important;overflow:auto!important;align-content:initial;justify-content:initial}
/* The desk scrolls, not the modal: the box is a column with a definite height and the desk takes
   what the toolbar leaves, so «fit page» measures the space the sheet is actually shown in. */
.central-print-preview-box{display:flex!important;flex-direction:column!important;overflow:hidden!important;width:min(980px,calc(100vw - 24px))}
.central-print-preview-box>.modal-toolbar{flex:0 0 auto}
.central-print-preview-desk{flex:1 1 auto;min-height:0}
.central-print-preview-box .preview-zoom{margin-inline-start:0}

/* Quotation Builder — internal costing. Cost inputs sit on a tinted strip so they never read as
 * customer-facing fields; the summary is one compact list, the final price its strongest line. */
.offer-internal label{color:var(--ui-warning)}
.offer-cost-readout{align-self:end;padding-bottom:9px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);min-height:1.2em}
.offer-cost-eq b{color:var(--ui-text);font-weight:var(--ui-weight-strong)}
.offer-cost-missing{color:var(--ui-danger);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong)}
.offer-internal-note{font-size:var(--ui-font-xs);color:var(--ui-warning);background:var(--ui-warning-bg);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm,6px);padding:6px 10px;margin-bottom:var(--ui-space-3)}
.offer-cost-summary{display:grid;gap:4px;max-width:460px;margin-top:var(--ui-space-3)}
.offer-cost-line{display:flex;justify-content:space-between;gap:12px;font-size:var(--ui-font-sm)}
.offer-cost-line small{color:var(--ui-text-secondary);font-weight:400}
.offer-cost-line.is-total{border-top:1px solid var(--ui-line);padding-top:4px}
.offer-cost-line.is-final{font-size:var(--ui-font-md,15px);color:var(--ui-brand-primary)}
.offer-cost-parts{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.emp-form>.s1{grid-column:span 1}
/* The cost strip always opens its own line, so Cost | Currency | FX | Converted never splits. */
.emp-form>.offer-cost-start{grid-column:1/span 3}
@media(max-width:1024px){.emp-form>.offer-cost-start{grid-column:1/span 2}}
@media(max-width:640px){.emp-form>.offer-cost-start{grid-column:1/span 1}}
.offer-extra-row{margin-bottom:6px}
.offer-extra-remove{display:flex;justify-content:flex-end}

/* ============================================================================================
 * ROUND 8 — RESPONSIVE (Item 58). Corrections found by measuring the rendered app at 360–1440px.
 * Each one restores an intent an earlier rule already stated and a later rule overrode.
 * ============================================================================================ */
/* The finance toolbar was told to stack at 720px, then a 980px rule further down the file gave it
 * three fixed-minimum columns again — 480px of toolbar on a 375px phone, widening the whole page. */
@media(max-width:720px){.accounting-toolbar{grid-template-columns:minmax(0,1fr)}}
/* A dashboard list card asked for 340px even when the screen had less to give. */
@media(max-width:1179px){.dash-lists{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}}
/* Card grids whose minimum card was wider than a 360px phone leaves: never ask for more than 100%. */
.trip-groups-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.exec-cards{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
/* Report result head: count · print · page size sat on one unbreakable line (305px in a 277px card). */
@media(max-width:640px){.report-result-card .report-page-controls{flex:1 1 100%;flex-wrap:wrap;min-width:0}}
/* The shared 12-column form grid drops to two columns on a phone, and `>*{span 2}` was meant to make
 * every wide cell a full row — but `.s4`…`.s8` are more specific and kept their tablet spans (3 and
 * 6) inside a 2-column grid. The browser then invented extra columns and squeezed the real ones to
 * zero: fields 0px wide, the form wider than the screen. Wide cells take the full row, by name. */
@media(max-width:640px){
 .emp-form>.s4,.emp-form>.s5,.emp-form>.s6,.emp-form>.s7,.emp-form>.s8,.emp-form>.s12{grid-column:1/-1}
}
/* Quotation costing on a phone: the rate label («سعر الصرف 1 USD = ؟ JOD») may take two lines. */
.offer-internal label{white-space:normal}
/* A reversed payment is history, not money received: struck through and muted in the invoice drawer. */
.drawer-payment-card.is-reversed{background:var(--ui-surface-subtle)}
.drawer-payment-card.is-reversed b{text-decoration:line-through;color:var(--ui-muted)}
/* Tablet (721–1180px): the list toolbars kept fixed minimum columns (220/260px + 3×105…150px) that add
 * up to more than the content area beside the navigation rail, so Bookings, Tasks and the finance
 * lists scrolled sideways at 768 and 820px. Same columns, allowed to shrink. */
@media(max-width:1180px) and (min-width:721px){
 .booking-toolbar{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr))}
 .tasks-toolbar{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.6fr))}
}
@media(max-width:980px) and (min-width:721px){.accounting-toolbar{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}}
/* Quotation costing on a tablet: the form grid is six columns there, and a one-column currency
 * select was 45px wide. Cost | Currency | FX take a third each; the converted value its own line. */
@media(max-width:1024px) and (min-width:641px){
 .emp-form>.offer-internal.s2,.emp-form>.offer-internal.s3{grid-column:span 2}
 .emp-form>.offer-internal.offer-cost-start{grid-column:1/span 2}
 .emp-form>.offer-internal.offer-cost-readout{grid-column:1/-1}
 .offer-extra-row>.s3:first-child{grid-column:1/-1}
 .offer-extra-row>.offer-internal.offer-cost-readout{grid-column:span 5}
}
/* A date field keeps a 130px minimum; a half-row form cell on a phone can be narrower than that, and
 * the field then spilled over the cell beside it. Inside the form grid it follows its cell. */
@media(max-width:640px){.emp-form .date-input-wrapper.central-date-field{min-width:0}}
/* Item 82 — the rail's round toggle sits half outside the rail (15px into the page). With the phone's
 * 12px page padding it landed on the first letters of the field headings beside it. The page keeps
 * clear of it on phones only; nothing moves on a tablet or a desktop. */
@media(max-width:520px){.main{padding-inline-start:26px!important}}
/* Invoice value history (Items 36 / 86): one compact block per edit inside the existing drawer note. */
.invoice-value-history .invoice-value-change{display:grid;gap:2px;padding-block:6px;border-top:1px dashed var(--ui-line)}
.invoice-value-history .invoice-value-change:first-of-type{border-top:0}
.invoice-value-history .invoice-value-change>span{display:flex;justify-content:space-between;gap:10px}
.invoice-value-history .invoice-value-change>span>b{display:inline;width:auto}
/* Product identity in the top bar: the name carries the weight, the descriptor is quiet. */
.app-topbar-brand-copy{text-align:start}.app-topbar-brand-copy b{font-weight:800;letter-spacing:.01em}.app-topbar-brand-copy small{letter-spacing:.02em}
/* Company identity card (Settings): logo, Arabic name and English name read as one line of identity. */
.brand-settings-names{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}.brand-settings-names b{font-size:var(--ui-font-md,15px)}.brand-settings-names .small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.appearance-font-row input{flex:1 1 180px;min-width:0}
/* Central calendar: a day the field's own limits exclude is shown and cannot be picked. */
.ui-dp-cell.is-disabled,.ui-dp-cell:disabled{color:var(--ui-text-secondary);opacity:.38;cursor:not-allowed;text-decoration:line-through;background:none}
.ui-dp-cell.is-disabled:hover{background:none}.ui-dp-today:disabled{opacity:.4;cursor:not-allowed;text-decoration:none}
/* Back-dated entry note and the report freshness banner. */
.registration-note{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.report-freshness-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ui-space-2);margin:var(--ui-space-2) var(--ui-space-3) 0;padding:8px 12px;border:1px solid var(--ui-warning,#d9a400);border-radius:var(--ui-radius-sm);background:color-mix(in srgb,var(--ui-warning,#d9a400) 10%,var(--ui-card,#fff));font-size:var(--ui-font-sm)}
.report-freshness-note.hidden{display:none}
/* Balances overview - the category is short, the notes carry cheque and card detail, so the widths say so. */
.report-table-treasury-balances-overview .report-col-categoryLabel{width:14%}.report-table-treasury-balances-overview .report-col-sectionLabel{width:13%}.report-table-treasury-balances-overview .report-col-note{width:33%}
/* Notification Centre: view switch and the one-section focus chip. */
.notif-view-switch{display:inline-flex;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);overflow:hidden}
.notif-view-switch button{border:0;background:none;padding:5px 12px;font-size:var(--ui-font-xs);cursor:pointer;color:var(--ui-text-secondary)}
.notif-view-switch button.active{background:var(--blue);color:var(--ui-on-brand,#fff);font-weight:var(--ui-weight-strong,700)}
.notif-focus-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--ui-surface-muted);font-size:var(--ui-font-xs)}
.notif-focus-chip button{border:0;background:none;cursor:pointer;font-size:14px;line-height:1;color:inherit}
/* The time view has six sections, not four blocks: fewer, wider columns so a row keeps its sentence on one or two lines. */
.notif-grid.is-timeline{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}

/* ---- Header identity: the COMPANY (from Company Identity), then the product and its descriptor ---- */
.app-topbar-brand{display:grid;grid-template-columns:auto auto!important;align-items:center;justify-content:start;column-gap:12px!important}
.app-topbar-company{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(14px,.95vw,17px);font-weight:800;line-height:1.6;color:var(--blue-dark)}
.app-topbar-company:empty{display:none}
.app-topbar-company:not(:empty)+.app-topbar-brand-copy{padding-inline-start:12px;border-inline-start:1px solid var(--ui-line)}
.app-topbar-company+.app-topbar-brand-copy b{font-size:clamp(11.5px,.74vw,13.5px)!important;color:var(--ui-heading)!important}
.app-topbar-brand{max-width:min(52vw,620px)}
@media(max-width:560px){
  .app-topbar-brand{grid-template-columns:minmax(0,1fr)!important}
  .app-topbar-company{font-size:12.5px;line-height:1.35}
  .app-topbar-company:not(:empty)+.app-topbar-brand-copy{padding-inline-start:0;border-inline-start:0}
  .app-topbar-company+.app-topbar-brand-copy b{font-size:10px!important;font-weight:700;color:var(--ui-text-secondary)!important;line-height:1.3}
}

/* ---- Dashboard: the side column (operations alerts above the week ahead) ---- */
.dash-side{display:grid;gap:var(--ui-space-4);align-content:start;min-width:0}
.dash-side.is-gone{display:none}
.dash-lists.is-side-only{grid-template-columns:minmax(0,1fr)}
.dash-lists.is-side-only .dash-side{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));align-items:start}
.dash-alert-row .followup-vnext-dense-value{display:grid;justify-items:end;gap:1px;font-size:var(--ui-font-xs);font-weight:600;color:var(--ui-text-secondary);white-space:nowrap}
.dash-alert-when{font-style:normal;font-weight:800;color:var(--ui-heading)}
.dash-alert-row.is-due .dash-alert-when{color:var(--ui-danger)}

/* ---- Live name validation in the booking editor ---- */
.client-autocomplete>.name-live-note{margin-top:4px}

/* ---- Item 89: outside the trip period is a warning, not an error ---- */
.booking-row-note.is-warning{border-color:color-mix(in srgb,var(--ui-warning,#b7791f) 45%,var(--ui-line));background:color-mix(in srgb,var(--ui-warning,#b7791f) 9%,var(--ui-surface,#fff));color:var(--ui-warning-text,#8a5a0b)}
/* ---- Item 90: «الإعداد العام» / «تنبيه مخصص» on a flight or hotel ---- */
.alert-lead-control{display:flex;gap:6px;align-items:center;min-width:0}
.alert-lead-control select{flex:1 1 auto;min-width:0}
.alert-lead-control input{flex:0 0 72px;width:72px;text-align:center}

/* ---- Quotation Builder, text-first: content lines, quick phrases, compact costing, advanced details ---- */
.date-soft-warning{border-color:var(--ui-warning,#b7791f)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-warning,#b7791f) 14%,transparent)}
.offer-content-hint{margin:0 0 var(--ui-space-2);font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.offer-phrase-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--ui-space-3)}
.offer-phrase-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface,#fff);color:var(--ui-heading);font:inherit;font-size:var(--ui-font-xs);font-weight:600;cursor:pointer;white-space:nowrap}
.offer-phrase-chip:hover{border-color:var(--blue);color:var(--blue-dark)}
.offer-phrase-chip.is-custom{border-style:dashed}
.offer-phrase-chip.is-manage{border-color:transparent;color:var(--ui-text-secondary);font-weight:500}
.offer-phrase-chip svg{width:13px;height:13px}
.offer-content-lines{display:grid;gap:6px;margin-bottom:var(--ui-space-2)}
.offer-content-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:start}
.offer-content-line textarea{width:100%;min-height:38px;resize:none;overflow:hidden;font-family:inherit;line-height:1.6;padding-block:7px}
.offer-content-line textarea.has-placeholder{border-color:var(--ui-warning,#b7791f)}
.offer-line-tools{display:flex;gap:2px;align-items:center;padding-top:3px}
.offer-line-tools button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:var(--ui-radius-xs,6px);background:transparent;color:var(--ui-text-secondary);font-size:11px;cursor:pointer}
.offer-line-tools button:hover:not(:disabled){border-color:var(--ui-line);color:var(--ui-heading);background:var(--ui-surface,#fff)}
.offer-line-tools button:disabled{opacity:.3;cursor:default}
.offer-line-tools svg{width:14px;height:14px}
.offer-cost-row input[readonly]{background:var(--ui-surface-muted,#f3f6f8);color:var(--ui-text-secondary)}
.offer-cost-add{display:flex;flex-wrap:wrap;gap:6px;margin-block:var(--ui-space-2) var(--ui-space-3)}
.offer-advanced{border:1px dashed var(--ui-line);border-radius:var(--ui-radius);padding:0 var(--ui-space-3);margin-block:var(--ui-space-3)}
.offer-advanced>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 0;cursor:pointer;list-style-position:inside}
.offer-advanced>summary b{font-size:var(--ui-font-sm);color:var(--ui-heading)}
.offer-advanced>summary small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.offer-advanced[open]{padding-bottom:var(--ui-space-2)}
.offer-builder-preview label small{font-weight:400;color:var(--ui-text-secondary)}
@media(max-width:560px){.offer-content-line{grid-template-columns:minmax(0,1fr)}.offer-line-tools{justify-content:flex-end;padding-top:0}}
.offer-builder-form .date-range-hint{overflow-wrap:anywhere}

/* ADDITIONAL SERVICES - compact cards instead of one full-width row per service.
 * Up to four in a row where the width allows (never more), fewer on narrower widths; one or two
 * services simply share the row. Cards of a row share its height, and each card is only as tall as
 * its own content needs. General notes and terms stay in their own sections below. */
.mv-service-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(150px,calc((100% - 18px)/4)),1fr));gap:6px;align-items:stretch}
.mv-service-rows>div{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:6px 9px;min-width:0}
.mv-service-rows>div b{white-space:normal;overflow-wrap:anywhere}
.mv-service-rows>div span{display:grid;gap:1px}
.mv-service-rows>div span bdi{display:block;overflow-wrap:anywhere}
/* ONE additional service: a single compact line across the section (type, then its details side by side) -
   the natural height of its content, like a flight or hotel block, not a card with unused space. Two or
   more keep the card grid above untouched. */
.mv-service-rows>div:only-child{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding:5px 9px}
.mv-service-rows>div:only-child b{white-space:nowrap}
.mv-service-rows>div:only-child span{display:flex;flex-wrap:wrap;gap:2px 14px;min-width:0}
.mv-service-rows>div:only-child span bdi{display:inline}

#serviceInputs>.empty-state{grid-column:1/-1}
#serviceInputs>.service-smart-card{margin:0;min-width:0}

/* SIGN-IN / FIRST-RUN IDENTITY. The product mark sits on top (its artwork is opaque white, the card is
 * white), the OFFICE's own name beneath it, then the form. One mark only - nothing repeats the product
 * name beside it. The ownership line at the foot is a quiet link. */
.login-brand-block{display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center;gap:4px!important;margin-bottom:8px!important;text-align:center}
.login-brand-block img.login-product-mark{width:min(292px,84%)!important;height:auto!important;aspect-ratio:16/9;object-fit:contain;display:block}
.login-office-name{display:block;max-width:100%;color:var(--blue-dark);font-size:clamp(16px,1.2vw,19px)!important;font-weight:800;line-height:1.5;text-align:center;overflow-wrap:anywhere}
.login-office-name:empty{display:none}
.auth-login-card #loginLead{text-align:center;margin:2px 0 12px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* password fields: the revealed state is visible on the button itself; the Caps Lock notice takes its own line */
.password-toggle-btn[aria-pressed="true"]{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 55%,var(--ui-line));background:color-mix(in srgb,var(--blue) 9%,var(--ui-card))}
.password-toggle-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--blue) 70%,transparent);outline-offset:1px}
.auth-caps-hint{display:block;text-align:start}
.system-confirm-body .password-field-wrap{text-align:start}
.system-confirm-body .password-toggle-btn{min-height:42px}

/* NAVIGATION DESTINATIONS ARE LINKS - each has a real address, so the browser's own "open in new
 * tab / new window" works on them. They look and behave exactly like the buttons they replaced. */
.sidebar-nav a{text-decoration:none;box-sizing:border-box}
.sidebar-submenu a{display:flex;align-items:center}
a.table-link{text-decoration:none}
a.table-link:hover,a.table-link:focus-visible{text-decoration:underline}
/* ONLINE: this browser already has its share of Toura tabs open (see online-client.js) */
.online-tab-limit{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--blue-dark) 78%,#000);color:#fff;text-align:center}
.online-tab-limit>div{max-width:460px;display:grid;gap:10px;line-height:1.8}
.online-tab-limit b{font-size:18px}
.online-tab-limit small{opacity:.85;font-size:13px}
/* ONLINE: the booking in the editor was changed elsewhere - a notice, never a replacement of what was typed */
.editor-remote-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.editor-remote-notice span{flex:1 1 280px}

/* ADDITIONAL SERVICES IN THE EDITOR - the card grid and the fields inside a card, sized together.
 * A card is never narrower than its fields need (310px), and never more than four share a row: about
 * two on a laptop-width form, three on a desktop, four on a wide screen, one on a phone. A single
 * service keeps a card's width instead of stretching across the form. Inside a card the fields sit on
 * a six-part grid by what they hold: type + date, then from + to / kind + a short quantity, then notes
 * on the full width. Cards of one row share its height; rows do not affect each other. */
#serviceInputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(310px,calc((100% - 30px)/4)),1fr));gap:10px;align-items:stretch}
.service-smart-card .service-edit-grid{grid-template-columns:repeat(6,minmax(0,1fr));align-items:end}
.service-smart-card .service-edit-grid>.service-field{grid-column:span 3;min-width:0}
.service-smart-card .service-edit-grid>.service-field-kind{grid-column:span 4}
.service-smart-card .service-edit-grid>.service-field-qty{grid-column:span 2}
.service-smart-card .service-edit-grid>.service-field-notes{grid-column:1/-1}
.service-smart-card .service-edit-grid input,.service-smart-card .service-edit-grid select{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:560px){#serviceInputs{grid-template-columns:minmax(0,1fr)}}
@media(max-width:400px){.service-smart-card .service-edit-grid>.service-field{grid-column:1/-1}}

/* SIGN-IN / FIRST-RUN - compact. A narrower card, a smaller mark and slightly lower fields; the
 * hierarchy is unchanged: mark, office name, fields, remember, sign in. The ownership line is NOT part
 * of the office's card: it sits under it, on the page background, as a quiet link. */
.login-stack{display:grid;justify-items:center;gap:12px;width:100%;max-height:100%;overflow:auto;padding:4px 0}
.auth-login-card{width:min(392px,calc(100vw - 28px))!important;padding:20px 24px 22px!important}
.login-brand-block img.login-product-mark{width:min(232px,78%)!important;margin-block:-8px -6px}
.login-office-name{font-size:clamp(15px,1.05vw,17px)!important;line-height:1.4}
.auth-login-card #loginLead{margin:0 0 10px;font-size:12px}
.auth-login-form,.first-run-setup{gap:7px!important;margin:0}
.auth-login-form input:not([type=checkbox]),.first-run-setup input{min-height:40px!important}
.auth-login-card .password-toggle-btn{min-height:40px!important}
.auth-login-card .password-field-wrap{grid-template-columns:minmax(0,1fr) 40px}
.auth-login-submit{min-height:42px!important;margin-top:8px!important}
/* remember the USERNAME: a plain, modern check - not a boxed chip */
.auth-remember{display:inline-flex!important;align-items:center;gap:8px!important;justify-self:start;width:auto!important;min-height:26px;margin:4px 0 0!important;padding:0!important;border:0!important;background:none!important;font-size:12px!important;font-weight:700;color:var(--ui-text-secondary);cursor:pointer;user-select:none}
.auth-remember input{appearance:none!important;-webkit-appearance:none!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;margin:0!important;padding:0!important;border:1.5px solid color-mix(in srgb,var(--blue) 45%,var(--ui-line));border-radius:5px;background:var(--ui-card);display:grid;place-content:center;cursor:pointer;transition:background .12s ease,border-color .12s ease}
.auth-remember input::after{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-1px);opacity:0}
.auth-remember input:checked{background:var(--blue);border-color:var(--blue)}
.auth-remember input:checked::after{opacity:1}
.auth-remember input:focus-visible{outline:2px solid color-mix(in srgb,var(--blue) 60%,transparent);outline-offset:2px}
.auth-remember:hover{color:var(--ui-heading)}
.login-owner-link{display:block;text-align:center;font-size:11px;line-height:1.5;color:rgba(255,255,255,.72);text-decoration:none;unicode-bidi:isolate;padding:2px 10px}
.login-owner-link:hover,.login-owner-link:focus-visible{color:#fff;text-decoration:underline}
@media(max-width:480px){.auth-login-card{padding:18px 18px 20px!important}}
/* a dialog action that is switched off (a file opened to read only) looks switched off */
.modal-toolbar .btn:disabled{opacity:.5;cursor:not-allowed}
/* user dialog (Online): where the user is signed in - a compact strip under the permission matrix */
.user-sessions-section{min-width:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);overflow:hidden;background:var(--ui-card)}
.user-sessions-section .user-permissions-head{justify-content:space-between;gap:8px}
.user-sessions-section .user-permissions-head .btn{min-height:30px;padding-block:3px}
.user-sessions-list{max-height:96px;overflow:auto}
.user-sessions-list th,.user-sessions-list td{padding-block:4px!important}
.user-sessions-list>small{display:block;padding:8px 10px}
/* customer file: the source / referrer picker (a link by id to another party file) */
.customer-source-suggest{position:relative;display:block;min-width:0}
.customer-source-suggest>.booking-suggest-box{max-height:min(264px,40vh);overflow:auto}
.customer-source-suggest>.booking-suggest-box small{color:var(--ui-muted)}
.customer-source-state{min-height:1.4em}
.customer-source-state button{border:0;background:none;padding:0 4px;font:inherit;color:var(--ui-brand-primary);text-decoration:underline;cursor:pointer}
/* PUBLIC DOCUMENT LINK - the small dialog */
.document-share-modal .share-note{margin:0 0 var(--ui-space-3);font-size:var(--ui-font-sm);color:var(--ui-text-secondary);line-height:1.8}
.document-share-modal .share-note.is-warn{padding:6px 10px;border-radius:var(--ui-radius-sm);background:var(--ui-warning-bg);color:var(--ui-text)}
.document-share-modal #documentShareUrl{width:100%;font-variant-numeric:tabular-nums}
.document-share-modal .share-actions{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin-top:var(--ui-space-3)}
.document-share-modal .share-actions-end{justify-content:flex-end}
/* ADVISORY FX - two short statements side by side, stacking on a narrow screen */
.ref-fx-pairs{display:flex;flex-wrap:wrap;gap:var(--ui-space-3) var(--ui-space-6)}
.ref-fx-pair{display:grid;gap:var(--ui-space-1);min-width:0}
.ref-fx-pair>label{margin:0}
.ref-fx-line{display:inline-flex;align-items:center;gap:var(--ui-space-2);font-weight:var(--ui-weight-strong);color:var(--ui-heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.ref-fx-line input{width:112px;min-width:0;text-align:center}
/* AUTH BOOTSTRAP - «checking»: the session has not been confirmed or refused yet. Only the neutral product
   background and a quiet mark; the sign-in card is not drawn until the server says there is no session. */
.auth-checking .login-stack,.auth-checking .login-page-footer{visibility:hidden}
/* the session check (Phase 4): a quick answer shows nothing at all; only a slow one shows the quiet Toura mark and a thin line -
 * never a spinning wheel (both appear after 400ms, by CSS alone) */
.auth-checking .login-screen::after{content:'';position:fixed;inset:50% auto auto 50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:auth-checking-spin .9s linear infinite;animation-delay:.35s;opacity:0;animation-fill-mode:both}
@keyframes auth-checking-spin{from{opacity:1;transform:rotate(0)}to{opacity:1;transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.auth-checking .login-screen::after{animation:none;opacity:.6}}
.user-sessions-history{margin-top:var(--ui-space-3)}
.user-sessions-history>summary{cursor:pointer;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);color:var(--ui-text-secondary);padding:4px 0}
/* ALERTS - grouped by booking. Red is for what needs action; an event that is merely happening stays quiet. */
.notif-grid.is-grouped{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));align-items:start}
.notif-row.is-action{background:var(--ui-danger-bg)}
.notif-row.is-action:hover{background:color-mix(in srgb,var(--ui-danger-bg) 82%,var(--ui-danger) 8%)}
.notif-row.is-action .notif-row-dot{background:var(--ui-danger)}
.notif-row.is-now{background:color-mix(in srgb,var(--blue) 6%,transparent)}
.notif-row.is-scheduled .notif-row-dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ui-muted)}
.notif-booking{min-width:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}
.notif-booking.has-action{border-inline-start:3px solid var(--ui-danger)}
.notif-booking>summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--ui-space-2);align-items:start;padding:8px 10px;cursor:pointer;border-radius:inherit}
.notif-booking>summary::-webkit-details-marker{display:none}
.notif-booking>summary:hover{background:var(--ui-row-hover)}
.notif-booking>summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.notif-booking.is-read>summary .notif-row-dot{background:transparent}
.notif-booking-main{display:flex;align-items:baseline;gap:var(--ui-space-2);min-width:0;flex-wrap:wrap}
.notif-booking-main b{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-heavy);color:var(--ui-heading);unicode-bidi:isolate}
.notif-booking-main small{min-width:0;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);overflow-wrap:anywhere}
.notif-booking-chips,.notif-booking-next{grid-column:2;display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;min-width:0;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.notif-booking-next small{color:var(--ui-muted)}
.notif-booking-next span{color:var(--ui-text);font-weight:var(--ui-weight-strong)}
.notif-booking-next time{font-size:10px;color:var(--ui-muted);white-space:nowrap}
.notif-booking-rows{display:grid;gap:var(--ui-space-1);padding:4px 6px 6px;border-top:1px solid var(--ui-line)}
.notif-chip{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-style:normal}
.notif-chip i{font-style:normal;font-weight:var(--ui-weight-strong);color:var(--ui-text);font-variant-numeric:tabular-nums}
.notif-chip.is-action,.notif-toolbar-action,.dash-alert-action{padding:1px 8px;border-radius:999px;background:var(--ui-danger-bg);color:var(--ui-danger);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);font-style:normal;white-space:nowrap}
.notif-empty-blocks{margin:var(--ui-space-3) 0 0;color:var(--ui-muted);font-size:var(--ui-font-xs)}
.notif-note{margin:0 0 var(--ui-space-3);padding:6px 10px;border:1px solid color-mix(in srgb,var(--blue) 34%,var(--ui-line));border-radius:var(--ui-radius-sm);background:color-mix(in srgb,var(--blue) 7%,transparent);color:var(--ui-heading);font-size:var(--ui-font-xs)}
.notif-empty-all p{margin:0 0 var(--ui-space-2)}
.notif-empty-all .btn{margin:0 var(--ui-space-1)}
/* DASHBOARD READABILITY - the dense rows only (alerts by booking, trips, the week ahead). One step up for the
   line a person reads first and half a step for the line under it; the rest of the application is untouched. */
#dashboardPage .followup-vnext-dense-row{padding-block:5px}
#dashboardPage .followup-vnext-dense-copy b{font-size:var(--ui-font-sm);line-height:1.5}
#dashboardPage .followup-vnext-dense-copy small,#dashboardPage .followup-vnext-dense-value{font-size:12.5px}
#dashboardPage .dash-alert-when{font-size:var(--ui-font-sm)}
#dashboardPage .dash-alert-booking .notif-chip,#dashboardPage .dash-alert-action{font-size:12.5px}
/* dashboard: one line per booking */
.dash-alert-booking .dash-alert-chips{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;overflow:visible;-webkit-line-clamp:unset}
.dash-alert-booking.is-action .followup-vnext-dense-icon{color:var(--ui-danger)}
/* ONLINE edit state: who is editing the record a view shows - a contextual strip, and a note in list rows */
.edit-state{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin:8px 16px 0;padding:7px 12px;border:1px solid;border-radius:var(--ui-radius-sm);font-size:var(--ui-font-sm);line-height:1.5}
.edit-state.is-locked{color:#7a4b00;background:#fff4d6;border-color:#e6c36a}
.edit-state.is-free{color:#14532d;background:#e8f7ee;border-color:#9bd3b0}
.edit-state .btn{min-height:28px;padding-block:2px;margin-inline-start:auto}
.edit-state-badge{color:#8a5a00!important;font-weight:var(--ui-weight-strong)}
/* customer list: category tabs over one list, and where a search result is */
.customer-tabs{margin-bottom:var(--ui-space-2)}
.customer-tabs button small{font-weight:var(--ui-weight-regular,400);color:var(--ui-muted);margin-inline-start:2px}
.customer-tabs-note{margin:0 0 var(--ui-space-2);padding:6px 10px;border:1px solid color-mix(in srgb,var(--blue) 34%,var(--ui-line));border-radius:var(--ui-radius-sm);background:color-mix(in srgb,var(--blue) 7%,#fff);color:var(--blue-dark);font-size:var(--ui-font-sm)}
.customer-tabs-note button{border:0;background:none;padding:0 4px;font:inherit;font-weight:var(--ui-weight-strong);color:var(--ui-brand-primary);text-decoration:underline;cursor:pointer}
/* customer file: quick add of a source party, beside the label */
/* the label is a label; the action beside it is a separate button (a button INSIDE a label is activated by a click on the label text) */
.customer-source-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:var(--ui-space-2,8px) 0 var(--ui-space-1,4px)}
.customer-source-label>label{margin:0}
.customer-source-add{border:0;background:none;padding:0;font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-brand-primary);cursor:pointer}
.customer-source-add:hover{text-decoration:underline}
.customer-source-quick{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:6px;margin-top:6px;padding:8px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)}
.customer-source-quick>#customerSourceQuickPhone,.customer-source-quick-actions,.customer-source-quick-msg{grid-column:1/-1}
.customer-source-quick-actions{display:flex;gap:6px}
.customer-source-quick-msg{color:var(--ui-danger)}
.customer-source-quick-msg:empty{display:none}
/* sign-in / first-run page: a column - the card centred in the free space, the ownership footer at the true
   bottom of the page. Short page: the footer sits at the bottom of the viewport. Tall page (small screen, long
   form): the page scrolls and the footer follows the content. No absolute positioning, so nothing overlaps. */
.login-screen{flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-y:auto}
.login-screen>.login-stack{flex:1 0 auto;align-content:center;max-height:none;overflow:visible;padding:4px 0 12px}
.login-page-footer{flex:0 0 auto;display:flex;justify-content:center;padding:6px 12px 0}
/* USER FORM - permissions are summarised here (role, how many are on, which areas); the matrix has its own
   large surface. With the matrix gone the dialog is as tall as its content. */
#userModal.modal.modal-runtime-open>.user-permission-modal{height:auto}
#userModal .user-modal-content{grid-template-rows:none;grid-auto-rows:auto;overflow:auto}
.user-permissions-summary{min-width:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);overflow:hidden}
.user-permissions-summary .user-permissions-head{justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.user-permissions-summary .user-permissions-head small{display:block}
.user-permission-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
.user-permission-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface-subtle);font-size:var(--ui-font-sm);color:var(--ui-text)}
.user-permission-chip small{color:var(--ui-muted);font-size:var(--ui-font-xs)}
#userModal .user-sessions-list{max-height:176px}
/* PERMISSION MANAGEMENT SURFACE - wide and tall enough to read the structure; the matrix scrolls inside it,
   the title, the search and Save / Cancel stay in place. Full screen on a narrow one. */
#userPermissionsModal.modal.modal-runtime-open>.user-permissions-surface{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;width:min(1180px,calc(100vw - 32px));max-width:1180px;height:min(880px,calc(100vh - 32px));max-height:calc(100vh - 32px);overflow:hidden!important}
.user-permissions-body{grid-template-rows:auto minmax(0,1fr)}
.user-permissions-tools{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.user-permissions-tools .ui-search{flex:1 1 260px;max-width:420px}
.user-permissions-count{white-space:nowrap;font-size:var(--ui-font-sm)}
.user-permissions-note{color:var(--ui-muted)}
.user-permissions-surface .user-permission-matrix-host{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}
.user-permissions-surface .permission-action-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.user-permissions-surface .permission-module-group.hidden,.user-permissions-surface .permission-action-chip.hidden{display:none!important}
@media(max-width:720px){#userPermissionsModal.modal.modal-runtime-open>.user-permissions-surface{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0}}
/* TOURA PRODUCT IDENTITY - fixed. Toura Blue #2F80ED and Toura Navy #0B2D5B belong to the PRODUCT and are
   not an office setting. The office's own colours (Settings > identity) are written on :root and drive the
   office's working screens and its documents - vouchers, invoices, quotations. PRODUCT surfaces - sign-in,
   first-run setup, the one-time password form, the "too many tabs" notice - redefine those same variables
   for their own subtree, so whatever theme an office chooses, the product looks like Toura there. */
:root{--toura-blue:#2F80ED;--toura-navy:#0B2D5B}
.login-screen,.online-tab-limit{--blue:var(--toura-blue);--blue-dark:var(--toura-navy);--blue-soft:color-mix(in srgb,var(--toura-blue) 10%,white);--brand-primary:var(--toura-blue);--brand-primary-dark:var(--toura-navy);--brand-primary-soft:color-mix(in srgb,var(--toura-blue) 10%,white);--ui-brand-primary:var(--toura-blue);--ui-brand-primary-dark:var(--toura-navy);--ui-brand-soft:color-mix(in srgb,var(--toura-blue) 10%,white)}
/* office settings - contact: [country code | local WhatsApp number] as one control, with the general
   contact username beside it; stacked on a narrow screen */
.office-contact-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-3);align-items:start}
.office-contact-row input{min-width:0}
.office-contact-phone-control{display:grid;grid-template-columns:auto minmax(58px,84px) minmax(0,1fr);align-items:stretch;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);overflow:hidden}
.office-contact-phone-control:focus-within{border-color:var(--ui-brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-brand-primary) 18%,transparent)}
.office-contact-plus{display:grid;place-items:center;padding-inline:10px 2px;color:var(--ui-muted);font-weight:var(--ui-weight-strong)}
.office-contact-phone-control input{border:0!important;border-radius:0!important;box-shadow:none!important;min-width:0;background:transparent;text-align:left}
.office-contact-phone-control #settingDefaultCountryCode{padding-inline-start:2px;border-inline-end:1px solid var(--ui-line)!important}
@media(max-width:760px){.office-contact-row{grid-template-columns:1fr}}
/* ONLINE / LOCAL markers. data-online-only: what only the server application offers (hidden in the local one).
   data-offline-only: a part of a module that is not online yet (hidden in the Online application). */
:root:not(.toura-online) [data-online-only]{display:none!important}
.toura-online [data-offline-only]{display:none!important}
/* users list: presence (approximate; never a permission). Only a disabled account is shown as a problem. */
.user-presence{display:flex;align-items:center;gap:6px}
.presence-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#9aa5ad}
.user-presence[data-presence=active] .presence-dot{background:#1f9d55}
.user-presence[data-presence=idle] .presence-dot{background:#f59e0b}
.user-presence[data-presence=offline] .presence-dot{background:#9aa5ad}
.user-presence[data-presence=disabled] .presence-dot{background:#d92d20}
.auth-recovery-hint{display:block;margin-top:10px;text-align:center;color:var(--ui-muted);font-size:var(--ui-font-xs);line-height:1.6}
#passwordResetForm .auth-login-submit+.auth-login-submit{margin-top:8px}
/* user dialog: the employee this account represents */
.user-employee-suggest{position:relative;display:block;min-width:0}
.user-employee-suggest>.booking-suggest-box{max-height:min(240px,38vh);overflow:auto}
.user-employee-suggest>.booking-suggest-box small{color:var(--ui-muted)}
.user-employee-state{display:block;min-height:1.3em}
.user-employee-state button{border:0;background:none;padding:0 4px;font:inherit;color:var(--ui-brand-primary);text-decoration:underline;cursor:pointer}
/* Booking invoice: the five amounts of the sale on ONE row, read right to left (currency -> before discount -> discount type -> value -> net). Same modal width; below 901px the existing 2-column / 1-column rules apply in the same order. */
@media(min-width:901px){.invoice-discount-editor.invoice-amounts-row{grid-template-columns:repeat(5,minmax(110px,1fr))}}
/* Booking invoice dialog (Round 1B UX): one compact document row - number, issue date, due date, status - in
 * balanced columns so the number no longer takes two thirds of the width; two per row, then one, when narrow. */
.invoice-editor-head{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.invoice-editor-head{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.invoice-editor-head{grid-template-columns:minmax(0,1fr)}}
/* the booking context on top: label/value pairs in two balanced columns (customer | booking, destination | trip
 * date), each pair label at the start and value at the end; one column when narrow */
.invoice-prefill-context{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-2) var(--ui-space-5);padding:var(--ui-space-3) var(--ui-space-4);margin-bottom:var(--ui-space-4);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)}
.invoice-prefill-context>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ui-space-3);min-width:0}
.invoice-prefill-context small{color:var(--ui-muted);font-weight:var(--ui-weight-strong);white-space:nowrap}
.invoice-prefill-context b,.invoice-prefill-context .table-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.invoice-prefill-context{grid-template-columns:minmax(0,1fr)}}
/* «النسخ الاحتياطي والبيانات» Online (Phase 4 / Round 4): the last action stays above the fixed page footer */
#onlineDataHost{display:grid;gap:var(--ui-space-3,12px);padding-bottom:calc(var(--page-footer-h,32px) + 24px)}

/* ============================================================================================
 * PHASE 4 / ROUND 5 — RESPONSIVE FOUNDATION (one block; shared causes, not page patches)
 * ============================================================================================ */
/* PHONE NAVIGATION DRAWER (≤640px). The 72px icon rail used to stay beside the content on a phone and its
 * floating toggle sat over the page. On a phone the menu now leaves the screen and opens on demand from the
 * header, with its labels, over a backdrop. Tablets (641–860px) keep the compact icon rail. */
.app-drawer-toggle,.app-drawer-backdrop{display:none}
@media(max-width:640px){
 body,body.sidebar-collapsed{padding-right:0!important}
 .app-topbar,body.sidebar-collapsed .app-topbar{right:0!important;padding-inline:10px!important;display:flex!important;align-items:center;gap:8px}
 .app-topbar>.app-topbar-date{display:none!important}.app-topbar>.app-topbar-actions{margin-inline-start:auto}
 .app-drawer-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;padding:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);color:var(--blue-dark);cursor:pointer}
 .app-drawer-toggle svg{width:20px;height:20px}
 .app-drawer-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
 .app-sidebar,body.sidebar-collapsed .app-sidebar{width:min(280px,86vw)!important;transform:translateX(105%);transition:transform .2s ease;z-index:1300;visibility:hidden}
 body.sidebar-drawer-open .app-sidebar{transform:none;visibility:visible;box-shadow:-12px 0 32px rgba(15,40,52,.22)}
 .app-drawer-backdrop{position:fixed;inset:0;z-index:1290;background:rgba(15,34,45,.38)}
 body.sidebar-drawer-open .app-drawer-backdrop{display:block}
 body.sidebar-drawer-open{overflow:hidden}
 .sidebar-edge-toggle{display:none!important}
 /* inside the drawer the menu reads as on a desktop: icon + label, groups open in place */
 .app-sidebar .sidebar-nav{padding-inline:8px;overflow-y:auto}
 .app-sidebar .sidebar-nav-item{grid-template-columns:25px minmax(0,1fr) 20px!important;justify-items:stretch;padding:9px 10px!important;min-height:44px}
 .app-sidebar .sidebar-nav-item b,.app-sidebar .sidebar-nav-item .sidebar-group-caret{display:inline!important}
 .app-sidebar .sidebar-nav-group .sidebar-submenu,body.sidebar-collapsed .app-sidebar .sidebar-nav-group>.sidebar-submenu{position:static!important;width:auto!important;padding:2px 31px 5px 5px!important;border:0!important;box-shadow:none!important;background:transparent!important;display:none!important}
 .app-sidebar .sidebar-nav-group.group-open>.sidebar-submenu{display:grid!important}
 .app-sidebar .sidebar-submenu a,.app-sidebar .sidebar-subgroup-toggle{min-height:40px;display:flex;align-items:center}
 .app-sidebar .sidebar-brand.sidebar-logo-only{min-height:72px!important}
 .main{padding-inline-start:12px!important}
}
@media(max-width:640px) and (prefers-reduced-motion:reduce){.app-sidebar{transition:none}}
/* PHONE HEADER (≤640px) — final composition (Phase 4 / Round 5 owner review): menu · office identity · actions.
 * The identity takes the remaining width and ends in an ellipsis (the full name stays in its title); the actions are
 * fixed 40px touch targets that never shrink into each other (38px at ≤400px); the account button is the avatar only;
 * the bell and account menus open as sheets inside the screen. Desktop is unchanged. From 860px down (tablet rail and phone)
 * the account button is the avatar only - a later rule had brought the name / role back into a 40px-wide button. */
@media(max-width:860px){
 body .app-topbar .topbar-user-button{display:grid!important;grid-template-columns:32px!important;place-items:center;flex:0 0 auto;width:40px;height:40px;min-width:40px!important;min-height:40px;max-width:none;padding:0!important;border-radius:999px}
 body .app-topbar .topbar-user-copy,body .app-topbar .topbar-user-caret{display:none!important}
}
@media(max-width:640px){
 body .app-topbar{gap:6px;padding-inline:8px!important}
 body .app-topbar>.app-topbar-brand{display:grid!important;grid-template-columns:minmax(0,1fr)!important;row-gap:1px!important;column-gap:0!important;flex:1 1 auto;min-width:0;max-width:none;justify-self:auto!important;overflow:hidden}
 body .app-topbar .app-topbar-company{display:block;min-width:0;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body .app-topbar .app-topbar-brand-copy{display:block!important;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right;line-height:1.2}
 body .app-topbar .app-topbar-brand-copy b{font-size:11px;font-weight:700;color:var(--ui-muted)}
 body .app-topbar .app-topbar-brand-copy small{display:none!important}
 body .app-topbar>.app-topbar-actions{flex:0 0 auto;margin-inline-start:0;gap:4px;min-width:0}
 body .app-topbar .topbar-quick-tools{gap:4px}
 body .app-topbar .topbar-quick-label{display:none!important}
 body .app-topbar .topbar-quick-btn,body .app-topbar .topbar-bell-btn{flex:0 0 auto;width:40px;height:40px;padding:0;justify-content:center;border-radius:var(--ui-radius-sm)}
 body .app-topbar .topbar-bell-badge{top:-4px;inset-inline-start:-4px}
 body .app-topbar .topbar-bell-panel,body .app-topbar .topbar-user-menu{position:fixed!important;top:60px!important;left:8px!important;right:8px!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:calc(100dvh - 76px);overflow:auto}
}
@media(max-width:400px){
 body .app-topbar .topbar-quick-btn,body .app-topbar .topbar-bell-btn,body .app-topbar .topbar-user-button{width:38px;height:38px;min-width:38px!important;min-height:38px}
 body .app-topbar>.app-topbar-actions,body .app-topbar .topbar-quick-tools{gap:3px}
}
/* PHONE FILTERS — the «فلترة» button (added by AppShell to every multi-filter .ui-toolbar) exists only on a phone */
.ui-filter-toggle{display:none}
@media(max-width:640px){
 .ui-toolbar-collapsible{flex-wrap:wrap}
 .ui-toolbar-collapsible:not(.hidden){display:flex!important}
 .ui-toolbar-collapsible>[data-filter-keep]{flex:1 1 0;min-width:0}
 .ui-filter-toggle{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:var(--ui-control);padding:0 14px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);color:var(--ui-text);font:inherit;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-medium);cursor:pointer;position:relative}
 .ui-filter-toggle svg{width:17px;height:17px;color:var(--blue-dark)}
 .ui-filter-toggle[aria-expanded="true"]{background:var(--ui-info-bg);border-color:color-mix(in srgb,var(--blue) 35%,var(--ui-line))}
 .ui-filter-dot{display:none;width:8px;height:8px;border-radius:50%;background:var(--blue)}
 .ui-filter-toggle.has-active .ui-filter-dot{display:inline-block}
 .ui-toolbar-collapsible:not(.filters-open):has(>.ui-filter-toggle)>*:not([data-filter-keep]):not(.ui-filter-toggle){display:none!important}
 .ui-toolbar-collapsible.filters-open>*:not([data-filter-keep]):not(.ui-filter-toggle){flex:1 1 100%}
}
/* MODALS — the closing save row of a long form stays in reach while the form scrolls (the header is sticky already) */
.modal-box .settings-save-row:last-child{position:sticky;bottom:0;z-index:2;background:var(--ui-card);padding-bottom:var(--ui-space-3);margin-bottom:calc(-1 * var(--ui-space-3))}
/* SUMMARY CARDS — one compact pattern for every summary row (Phase 4 / Round 5). The pages keep their own markup and
 * renderers (booking stats, finance / accounting summaries, tasks, cheques, payment summaries); this block gives them one
 * height, padding and number scale, and on a phone two compact columns instead of a stack of full-width cards. */
body .booking-stat-card{min-height:58px;padding:8px 12px;gap:10px}
body .booking-stat-icon{width:34px;height:34px;flex:0 0 34px}
body .booking-stat-icon svg{width:18px;height:18px}
body .booking-stat-card strong{font-size:20px;line-height:1.15}
body .booking-stat-card small{font-size:var(--ui-font-xs);line-height:1.35}
body .finance-summary-item,body .accounting-summary-item,body .ui-financial-summary-item{min-height:64px;padding:8px 12px}
@media(max-width:640px){
 body .booking-stats-grid,body .finance-summary-grid,body .accounting-summary-strip,body .tasks-summary-strip,body .cheque-summary-grid,body .central-payment-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
 body .booking-stat-card{min-height:52px;padding:7px 9px;gap:8px}
 body .booking-stat-icon{width:28px;height:28px;flex-basis:28px}
 body .booking-stat-card strong{font-size:18px}
 body .finance-summary-item,body .accounting-summary-item,body .ui-financial-summary-item{min-height:54px;padding:7px 9px}
 /* page intros: the title and the main action first; the explanatory line is for wide screens */
 .page-title>div>p{display:none}
}
/* SUMMARY CARD STANDARD (Phase 4 / Round 6) — UIComponents.kpi(): the booking cards' language for every list page.
 * A 32px tinted icon, the value, the label under it; tone colours stay quiet (only the icon chip is tinted). The row fits
 * its cards into one balanced line on a desktop (no lone card on a second line) and two columns on a phone. */
body .ui-kpi{display:flex;align-items:center;gap:10px;min-width:0;min-height:58px;padding:8px 12px;margin:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card);color:var(--ui-text);font:inherit;text-align:start;box-shadow:none}
body button.ui-kpi{cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
body button.ui-kpi:hover{border-color:color-mix(in srgb,var(--blue) 35%,var(--ui-line));background:var(--ui-row-hover)}
body button.ui-kpi:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ui-kpi-icon{flex:0 0 32px;width:32px;height:32px;border-radius:var(--ui-radius-sm);display:grid;place-items:center;background:var(--ui-info-bg);color:var(--ui-info)}
.ui-kpi-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-kpi.tone-success .ui-kpi-icon{background:var(--ui-success-bg);color:var(--ui-success)}
.ui-kpi.tone-warning .ui-kpi-icon{background:var(--ui-warning-bg);color:var(--ui-warning)}
.ui-kpi.tone-danger .ui-kpi-icon{background:var(--ui-danger-bg);color:var(--ui-danger)}
.ui-kpi.tone-neutral .ui-kpi-icon{background:var(--ui-surface-muted);color:var(--ui-text-secondary)}
.ui-kpi-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.ui-kpi-value{display:block;min-width:0;font-size:19px;line-height:1.2;font-weight:var(--ui-weight-heavy);color:var(--ui-text);font-variant-numeric:tabular-nums}
.ui-kpi-label{display:block;font-size:var(--ui-font-xs);line-height:1.35;color:var(--ui-text-secondary);overflow-wrap:anywhere} /* Arabic is never clipped (UI_UX_RULES) - a long label wraps */
/* money values: several currencies sit on one wrapping line, each amount with its code */
.ui-kpi-value .multi-currency-stack{display:flex;flex-wrap:wrap;gap:0 10px;font-size:16px}
.ui-kpi-value .multi-currency-stack{justify-content:flex-start}
.ui-kpi-value .currency-stack-line{display:inline-flex!important;align-items:baseline;justify-content:flex-start!important;gap:4px;width:auto!important;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.ui-kpi-value .currency-stack-line small,.ui-kpi-value small{font-size:var(--ui-font-xs);font-weight:var(--ui-weight-medium);color:var(--ui-muted)}
.ui-kpi-value .expense-summary-currencies{display:flex;flex-wrap:wrap;gap:0 10px;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-medium);color:var(--ui-text-secondary)}
.ui-kpi-value .expense-summary-currencies b{color:var(--ui-text);font-weight:var(--ui-weight-heavy)}
body :is(.accounting-summary-strip,.finance-summary-grid,.finance-summary-strip,.tasks-summary-strip,.cheque-summary-grid):has(>.ui-kpi){display:flex!important;flex-wrap:wrap;gap:var(--ui-space-2)!important;align-items:stretch}
body :is(.accounting-summary-strip,.finance-summary-grid,.finance-summary-strip,.tasks-summary-strip,.cheque-summary-grid)>.ui-kpi{flex:1 1 190px;max-width:320px}
@media(max-width:640px){
 body :is(.accounting-summary-strip,.finance-summary-grid,.finance-summary-strip,.tasks-summary-strip,.cheque-summary-grid):has(>.ui-kpi){gap:8px!important}
 body :is(.accounting-summary-strip,.finance-summary-grid,.finance-summary-strip,.tasks-summary-strip,.cheque-summary-grid)>.ui-kpi{flex:1 1 calc(50% - 4px);max-width:none}
 body .ui-kpi{min-height:52px;padding:7px 9px;gap:8px}
 .ui-kpi-icon{flex-basis:28px;width:28px;height:28px}
 .ui-kpi-value{font-size:17px}
}
/* SYSTEM-GENERATED IDENTIFIERS (VCH, INV, SINV …) look locked, not editable: read-only text fields (numbers the server gives)
 * share one muted, left-to-right, code-like treatment. Date display fields and number totals keep their own styles. */
:is(#invoiceEditNumber,#standaloneInvoiceNumber,#agentInvoiceNumber,#guaranteeCurrency,.ui-code-field)[readonly]{background:var(--ui-surface-muted)!important;border-style:dashed!important;border-color:color-mix(in srgb,var(--ui-line) 80%,var(--ui-muted))!important;color:var(--ui-text);font-weight:var(--ui-weight-strong);letter-spacing:.02em;text-align:center;cursor:default;box-shadow:none!important}
:is(#invoiceEditNumber,#standaloneInvoiceNumber,#agentInvoiceNumber,#guaranteeCurrency,.ui-code-field)[readonly]:focus{outline:none}
/* FLIGHT EXTRAS (Phase 4 / Round 5) — checked baggage and cabin side by side, then the special services; chips are quick
 * input. The selected chip is clearly filled. Numbers/units read left-to-right inside the Arabic layout (bdi dir=ltr). */
.flight-extras{display:grid;gap:10px;padding:10px 0 4px}
.flight-extras-baggage{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:10px}
.flight-extras-col,.flight-extras-services{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);padding:8px 10px;display:grid;gap:8px;min-width:0}
.flight-extras-head{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);color:var(--ui-heading)}
.flight-chip-row{display:flex;flex-wrap:wrap;gap:5px}
.flight-chip-row .flight-preset{height:28px;padding:0 9px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--ui-text);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-medium);cursor:pointer}
.flight-chip-row .flight-preset:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--ui-line))}
.flight-chip-row .flight-preset.is-active{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.flight-chip-row .flight-preset:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.flight-extras-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr));gap:8px;align-items:end}
.flight-extras-fields label{font-size:var(--ui-font-xs)}
.flight-extras-fields .flight-extras-wide{grid-column:span 2}
.flight-extras-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:8px;align-items:end}
@media(max-width:860px){.flight-extras-baggage{grid-template-columns:1fr}.flight-extras-fields .flight-extras-wide{grid-column:1/-1}}
/* FLIGHT EXTRAS — Phase 4 / Round 6: row A (special services) and row B (tickets · meal · reminder) as two framed groups,
 * like the baggage columns; the reminder carries a quiet accent because it is what reaches the office in time. */
.flight-extras-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;align-items:start}
.flight-extras-cell{display:grid;gap:4px;min-width:0}
.flight-extras-cell>label,.flight-extras-cell .alert-lead-field>label{font-size:var(--ui-font-xs)}
.flight-alert-cell .alert-lead-field{padding:4px 8px 6px;border-inline-start:3px solid var(--ui-warning);border-radius:var(--ui-radius-xs);background:var(--ui-warning-bg)}
.flight-alert-cell .alert-lead-control{display:flex;gap:6px}.flight-alert-cell .alert-lead-control>*{min-width:0;flex:1 1 0}
.flight-chip-row .flight-preset-custom{border-style:dashed}
.flight-chip-row .flight-preset-clear{color:var(--ui-muted);background:transparent}
.flight-bag-custom{padding-top:8px;border-top:1px dashed var(--ui-line)}
@media(max-width:760px){.flight-extras-row3{grid-template-columns:1fr}}
/* CUSTOMER INVOICE FORM (Phase 4 / Round 6) — two balanced rows: number · customer · purpose, then currency · issue · due;
 * the system number sits first (on the right in RTL) and reads locked. The service line is ONE row: the catalog service
 * («اسم الخدمة»), the visa type when it is a visa, the printed description (wider), quantity, price, total, delete. */
.invoice-kind-line{display:flex;justify-content:flex-start;margin:-4px 0 10px}
.invoice-form-head{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.5fr) minmax(0,1.3fr);gap:var(--ui-space-3);align-items:end}
@media(max-width:760px){.invoice-form-head{grid-template-columns:repeat(2,minmax(0,1fr))}.invoice-form-head .ifh-customer,.invoice-form-head .ifh-purpose{grid-column:1/-1}}
body .standalone-service-line{grid-template-columns:minmax(140px,1fr) minmax(190px,1.9fr) 80px 116px 116px 36px;gap:var(--ui-space-2) var(--ui-space-3)}
body .standalone-service-line.has-visa{grid-template-columns:minmax(130px,1fr) minmax(130px,.9fr) minmax(160px,1.5fr) 80px 116px 116px 36px}
body .standalone-service-line>div:first-child{grid-column:auto}
body .standalone-service-line .service-line-total b{display:block;min-height:var(--ui-control);line-height:var(--ui-control);white-space:nowrap;font-variant-numeric:tabular-nums}
body .standalone-service-line>.ui-icon-btn{align-self:end;margin-bottom:4px}
@media(max-width:900px){body .standalone-service-line,body .standalone-service-line.has-visa{grid-template-columns:repeat(2,minmax(0,1fr)) 36px}body .standalone-service-line .sl-desc{grid-column:1/-1}}
/* invoice context (Phase 4 / Round 6): customer · booking · destination · trip date on ONE compact row, label over value */
body .invoice-prefill-context{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px var(--ui-space-4);padding:8px 12px}
body .invoice-prefill-context>div{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1px}
body .invoice-prefill-context small{font-size:var(--ui-font-xs);font-weight:var(--ui-weight-medium)}
@media(max-width:760px){body .invoice-prefill-context{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* POST-MERGE (owner): a column cell sizes its value to the text, so a long name (nowrap) ran under the booking reference - each value
 * is bounded by its own cell; the customer gets the wider area and wraps (never cut); the reference stays one LTR line */
body .invoice-prefill-context{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
body .invoice-prefill-context>div>*{max-width:100%}
body .invoice-prefill-context b{white-space:normal;overflow-wrap:anywhere;line-height:1.45}
body .invoice-prefill-context .table-link{white-space:nowrap;unicode-bidi:isolate}
@media(max-width:760px){body .invoice-prefill-context{grid-template-columns:repeat(2,minmax(0,1fr))}body .invoice-prefill-context>div:first-child{grid-column:1/-1}}
/* expense list (Phase 4 / Round 6): the statement column is centred */
.expenses-table th.expense-desc-cell,.expenses-table td.expense-desc-cell{text-align:center}
/* tasks (Phase 4 / Round 6): the customer's name, then the phone under it */
.task-customer-cell{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px}.task-customer-cell .cell-note{direction:ltr;unicode-bidi:isolate}
/* inventory list (Phase 4 / Round 6): a short list is as tall as its rows - the shared shell's reserved height left a large
 * empty card under one or two records here */
#inventoryList>.ui-list-shell{min-height:0}
/* inventory record preview (Phase 4 / Round 6): denser facts - as many short columns as fit, tighter rows */
#inventoryPreviewModal .cheque-facts-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));column-gap:var(--ui-space-4)}
#inventoryPreviewModal .cheque-fact{padding-block:6px}
/* SETTINGS HUB (Phase 4 / Round 6): one sidebar entry; the five sections as a quiet bar at the top of each settings page */
[data-nav-group="settings"] .sidebar-submenu{display:none!important}
.settings-hub{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--ui-space-3);padding:6px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card)}
.settings-hub-link{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:var(--ui-radius-sm);color:var(--ui-text-secondary);font-size:var(--ui-font-sm);font-weight:var(--ui-weight-medium);text-decoration:none;white-space:nowrap}
.settings-hub-link:hover{background:var(--ui-row-hover);color:var(--ui-text)}
.settings-hub-link.is-active{background:var(--ui-brand-soft);color:var(--blue-dark);font-weight:var(--ui-weight-strong)}
.settings-hub-link:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
@media(max-width:640px){.settings-hub{flex-wrap:nowrap;overflow-x:auto}}
.session-ip{font-variant-numeric:tabular-nums}
/* advisory FX (Phase 4 / Round 6): the derived third relationship reads as a computed value, not an input */
/* share by e-mail (Phase 4 / Round 6): a refused send (mail off, bad address) reads as a red status line, not a grey note */
.share-note.is-danger{margin-top:6px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--ui-danger) 35%,var(--ui-line));border-radius:var(--ui-radius-sm);background:var(--ui-danger-bg);color:var(--ui-danger);font-weight:var(--ui-weight-strong)}
/* DOCUMENT CLOSE (Phase 4 / Round 6): every document preview closes from one clear «× إغلاق» (the × is drawn, the text stays
 * «إغلاق»); a screen control only - never printed */
.doc-close::before{content:'×';margin-inline-end:6px;font-size:1.2em;line-height:1;font-weight:var(--ui-weight-regular)}
@media print{.doc-close,.pd-close{display:none!important}}
/* customer tags (Phase 4 / Round 6): quiet chips under the name; the field's suggestions are the office's own tags */
.customer-tag-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.customer-tag-chip{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface-subtle);color:var(--ui-text-secondary);font-size:11px;font-weight:var(--ui-weight-medium);line-height:1.6;white-space:nowrap}
.customer-tag-chip.is-more{color:var(--ui-muted)}
.customer-tag-suggestions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.customer-tag-suggestions:empty{display:none}
button.customer-tag-chip.is-suggestion{cursor:pointer;font:inherit;font-size:11px}button.customer-tag-chip.is-suggestion:hover{border-color:var(--blue);color:var(--blue-dark)}
/* passport guidance (Phase 4 / Round 6): one quiet line under the travellers; the validity warning stays per traveller */
.passport-guidance{margin:6px 2px 0;font-size:var(--ui-font-xs);color:var(--ui-muted);line-height:1.5}
/* TRAVELER ROW (Phase 4 / Round 5) — category, name, passport, birth date and passport expiry on one balanced row on a
 * desktop/laptop (each as wide as its value); stacked on a phone. */
.passenger-fields-grid{display:grid;grid-template-columns:minmax(96px,.75fr) minmax(170px,2.2fr) minmax(120px,1.2fr) minmax(150px,1.15fr) minmax(150px,1.15fr);gap:8px;align-items:end}
.passenger-fields-grid>*{min-width:0}
.passenger-fields-grid .date-display-input,.passenger-fields-grid input[type=date]{text-align:center}
@media(max-width:1100px){.passenger-fields-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1.3fr)}.passenger-fields-grid .pf-date{grid-column:span 1}}
@media(max-width:640px){.passenger-fields-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.passenger-fields-grid .pf-name{grid-column:1/-1}}
.passenger-row-card .row-body{padding-block:8px}
.flight-extras-col,.flight-extras-services{align-content:start}
.flight-extras-fields{grid-template-columns:repeat(auto-fill,minmax(min(108px,100%),1fr))}
/* GUARANTEE / INSURANCE FORM (Phase 4 / Round 5) — two balanced rows on a desktop: what and where (type, method, party, account),
 * then the money and the dates (amount, currency, start, end, reference). */
.guarantee-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.guarantee-form-grid:has(> :nth-child(5)){grid-template-columns:repeat(20,minmax(0,1fr))}
.guarantee-form-grid>.gf-wide{grid-column:span 5}.guarantee-form-grid>:not(.gf-wide){grid-column:span 4}
@media(max-width:860px){.guarantee-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.guarantee-form-grid>*{grid-column:auto!important}}
@media(max-width:480px){.guarantee-form-grid{grid-template-columns:1fr!important}}
/* E-MAIL SETTINGS (Phase 4 / Round 5) — grouped recipients, switches, template chips and an inline live preview */
.email-recipients{display:grid;gap:12px}
.email-group{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)}
.email-group-head{font-size:var(--ui-font-sm);font-weight:var(--ui-weight-strong);color:var(--ui-heading)}
.email-settings label.email-toggle{display:flex;align-items:center;gap:10px;width:auto;margin:0;cursor:pointer;font-weight:var(--ui-weight-medium)}
.email-toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;width:38px;height:22px;flex:0 0 38px;border-radius:999px;background:var(--ui-line);position:relative;cursor:pointer;margin:0;transition:background .15s}
.email-toggle input[type=checkbox]::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:inset-inline-start .15s}
.email-toggle input[type=checkbox]:checked{background:var(--blue)}
.email-toggle input[type=checkbox]:checked::after{inset-inline-start:19px}
.email-toggle input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.email-template-list{display:flex;flex-wrap:wrap;gap:6px}
.email-template-chip{height:30px;padding:0 12px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);font:inherit;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-medium);color:var(--ui-text);cursor:pointer}
.email-template-chip.is-active{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.email-live-preview{display:grid;gap:6px}
.email-live-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.email-live-subject{font-weight:var(--ui-weight-strong);font-size:var(--ui-font-sm);min-width:0;overflow-wrap:anywhere}
.email-live-stage{background:#eef2f5;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:10px;display:flex;justify-content:center;overflow:hidden}
.email-live-stage iframe{width:100%;max-width:680px;height:560px;border:0;background:#f3f4f6;border-radius:6px;transition:max-width .2s}
.email-live-stage iframe.is-phone{max-width:375px}
@media(max-width:640px){.email-live-stage iframe{height:480px}}
/* GROUP CREATE / EDIT (Phase 4 / Round 5) — one layout for tourist and Umrah groups: a 12-column grid whose fields are as wide as
 * their values, the type as a badge, 24-hour times, notes that start one line high; a compact live summary on the left
 * (RTL) on a desktop, above the form on narrower screens. */
.group-modal-lg{width:min(1060px,calc(100vw - 32px))!important;max-width:min(1060px,calc(100vw - 32px))!important}
.group-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:14px;align-items:start}
.group-form-layout>.group-form-grid{grid-column:1;grid-row:1}
.group-form-layout>.group-form-summary{grid-column:2;grid-row:1;position:sticky;top:64px}
.group-form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;align-items:end}
.group-form-grid>*{min-width:0}
.gfg-type{grid-column:span 2}.gfg-name{grid-column:span 6}.gfg-dest{grid-column:span 4}
.gfg-date{grid-column:span 3}.gfg-time{grid-column:span 2}.gfg-num{grid-column:span 2}
.gfg-split{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gfg-mode{grid-column:span 3}.gfg-ref{grid-column:span 5}.gfg-person{grid-column:span 5}.gfg-phone{grid-column:span 4}
.gfg-note{grid-column:span 6}.gfg-note textarea{min-height:42px;resize:vertical}
.group-form-grid input[data-time-field]{text-align:center}
.group-form-hint{grid-column:1/-1;margin:0;font-size:var(--ui-font-xs);color:var(--ui-muted)}
.group-type-badge{display:inline-flex;align-items:center;height:var(--ui-control);padding:0 12px;border-radius:var(--ui-radius-sm);background:var(--ui-info-bg);color:var(--blue-dark);font-weight:var(--ui-weight-strong);font-size:var(--ui-font-sm);white-space:nowrap;max-width:100%}
.group-type-badge.is-umrah{background:#eef7ef;color:#1d6b3b}
.group-form-summary{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);font-size:var(--ui-font-xs)}
.group-form-summary .group-type-badge{height:28px;justify-self:start}
.gfs-row{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--ui-line);padding-bottom:4px}
.gfs-row:last-child{border-bottom:0}.gfs-row span{color:var(--ui-muted)}.gfs-missing{color:var(--ui-warning);font-weight:var(--ui-weight-medium)}
@media(max-width:980px){.group-form-layout{grid-template-columns:1fr}.group-form-layout>.group-form-summary{grid-column:1;grid-row:1;position:static;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.group-form-layout>.group-form-grid{grid-row:2}
 .gfg-type,.gfg-num,.gfg-time{grid-column:span 3}.gfg-name,.gfg-dest,.gfg-date,.gfg-mode,.gfg-ref,.gfg-person,.gfg-phone,.gfg-note{grid-column:span 6}}
@media(max-width:560px){.group-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.group-form-grid>*{grid-column:1/-1!important}.group-form-grid>.gfg-date,.group-form-grid>.gfg-time,.group-form-grid>.gfg-num,.group-form-grid>.gfg-type{grid-column:span 1!important}.gfg-split{grid-template-columns:1fr 1fr}}
/* GLOBAL SEARCH (Phase 4 / Round 5) — the context column no longer takes half the table; references and dates stay LTR-isolated */
.full-search-table .search-context-col,.full-search-table td:nth-child(3){max-width:240px;width:20%}
/* the context cell (final owner corrections): name on one line, the context on at most two - each isolated (bidi-safe), full text in the title */
.search-context-cell{display:grid;gap:1px;min-width:0}.search-context-cell>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-context-cell>.cell-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;overflow-wrap:anywhere}
.full-search-table td:nth-child(3) b,.full-search-table td:nth-child(3) .cell-note{display:block;overflow-wrap:anywhere}
/* EMPLOYEES — «إجراءات سريعة» shares the page action row */
.page-title .header-actions>.emp-quick-host{display:inline-flex;margin:0}
/* DATA PAGE (Phase 4 / Round 5) — one status line, then the three steps; the restore warning stays visible and serious */
.data-status-strip{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);font-size:var(--ui-font-xs);color:var(--ui-muted)}
.data-status-strip b,.data-status-strip bdi{color:var(--ui-text);font-weight:var(--ui-weight-strong)}
/* Online «إدارة البيانات» status (Phase 4 closure): four compact facts, the office data counts, one scope line - one panel, no dead space */
.data-status-panel{display:grid;gap:10px;padding:12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}
.data-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.data-status-tile{display:grid;gap:2px;align-content:start;min-width:0;padding:8px 10px;border-radius:var(--ui-radius-xs);background:var(--ui-soft);border-inline-start:3px solid var(--ui-line)}
.data-status-tile>span{font-size:var(--ui-font-xs);color:var(--ui-muted)}
.data-status-tile>b{font-size:var(--ui-font-sm);color:var(--ui-text);overflow-wrap:anywhere}
.data-status-tile>small{font-size:var(--ui-font-xs);color:var(--ui-muted);overflow-wrap:anywhere}
.data-status-tile[data-tone='ok']{border-inline-start-color:var(--ui-success,#16a34a)}
.data-status-counts{display:flex;flex-wrap:wrap;gap:6px}
.data-status-counts .data-count-chip{padding:3px 9px;border:1px solid var(--ui-line);border-radius:999px;font-size:var(--ui-font-xs);color:var(--ui-muted);background:var(--ui-card)}
.data-status-counts .data-count-chip b{color:var(--ui-text)}
.data-status-note{margin:0;font-size:var(--ui-font-xs);color:var(--ui-muted)}
@media (max-width:900px){.data-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.data-danger-note{padding:8px 12px;border-radius:var(--ui-radius-sm);background:var(--ui-danger-bg);color:var(--ui-danger);border:1px solid color-mix(in srgb,var(--ui-danger) 25%,transparent);font-size:var(--ui-font-sm);margin-bottom:8px}
#onlineDataHost .card-body>p.small{margin:0 0 8px}
/* DATE-TIME CELL (Phase 4 / Round 5) — two compact centred lines; numbers never reorder inside Arabic */
.ui-datetime{display:inline-grid;justify-items:center;line-height:1.25;unicode-bidi:isolate;white-space:nowrap}
.ui-datetime b{font-weight:var(--ui-weight-medium);font-size:var(--ui-font-sm)}
.ui-datetime small{font-size:var(--ui-font-xs);color:var(--ui-muted)}
.audit-central-table td:first-child,.email-log td:first-child{text-align:center}
.audit-retention-note{margin-bottom:10px;padding:8px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-info-bg);color:var(--ui-info);font-size:var(--ui-font-xs);line-height:1.7}
.audit-retention-note .ui-datetime{display:inline-flex;gap:4px}
/* SYSTEM STATES (Phase 4 / Round 5) — the session check shows the Toura mark above the existing small spinner; the window-limit
 * notice carries the same mark. Nothing large, nothing looping beyond the spinner. */
.auth-checking .login-screen::before{content:'';position:fixed;inset:50% auto auto 50%;width:56px;height:56px;margin:-82px 0 0 -28px;background:url('../branding/toura/toura-icon.png') center/contain no-repeat;opacity:.92}
.online-tab-limit-logo{display:block;width:44px;height:44px;margin:0 auto 8px;object-fit:contain}
/* BACK + PHONE HEADER — final composition (Phase 4 / Round 6, owner): on a phone, physically left: the menu and the account
 * beside it; centre: the office's name with «Toura System» under it (an ellipsis; the full name in its title); right: the
 * bell and, when there is a Toura page to return to, Back. The header quick tools move into the drawer. The header grid is
 * left-to-right by design (its lanes are physical), so the columns read left to right here. */
.app-back-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;padding:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);background:var(--ui-card);color:var(--ui-text-secondary);cursor:pointer}
.app-back-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-back-btn:hover{background:var(--ui-row-hover);color:var(--ui-text)}.app-back-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sidebar-phone-tools{display:none}
@media(max-width:640px){
 body .app-topbar{display:grid!important;direction:ltr!important;grid-template-columns:auto auto minmax(0,1fr) auto auto!important;grid-template-areas:none!important;column-gap:4px!important;align-items:center}
 body .app-topbar>.app-topbar-actions{display:contents!important}
 body .app-topbar .topbar-quick-tools{display:none!important}
 body .app-topbar>.app-drawer-toggle{grid-column:1;grid-row:1}
 body .app-topbar .topbar-user-area{grid-column:2;grid-row:1;justify-self:start!important}
 body .app-topbar>.app-topbar-brand{grid-column:3;grid-row:1;justify-self:stretch!important;justify-items:center;direction:rtl;padding-inline:4px}
 body .app-topbar .app-topbar-company,body .app-topbar .app-topbar-brand-copy{text-align:center!important;width:100%}
 body .app-topbar .topbar-bell-area{grid-column:4;grid-row:1}
 body .app-topbar .app-back-btn{grid-column:5;grid-row:1;width:40px;height:40px}
 .app-sidebar .sidebar-phone-tools{display:grid;gap:2px;padding:6px 8px;border-bottom:1px solid var(--ui-line)}
 .app-sidebar .sidebar-phone-tools .sidebar-nav-item{grid-template-columns:25px minmax(0,1fr)!important;justify-items:stretch;padding:9px 10px!important;min-height:44px;width:100%;border:0;background:transparent;font:inherit;text-align:start;cursor:pointer}
 .app-sidebar .sidebar-phone-tools .sidebar-nav-item b{display:inline!important}
}
@media(max-width:400px){body .app-topbar .app-back-btn{width:38px;height:38px}}
/* DESKTOP HEADER room (Phase 4 / Round 6): with the Back control and the three advisory rates the header lanes were too full
 * below ~1280px - the quick tools become icons (their names stay in title / aria), and the date / rate block may shrink and
 * truncate inside its own lane instead of running under the office's name */
@media(max-width:1280px) and (min-width:641px){.topbar-quick-label{display:none}.topbar-quick-btn{padding:0;width:34px;justify-content:center}}
@media(min-width:641px){.app-topbar>.app-topbar-date{min-width:0;max-width:100%;overflow:hidden}.app-topbar>.app-topbar-date>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* ==== FINAL OWNER CORRECTIONS (Phase 4, post-Round-6) ==================================================================== */
/* BACK: the header Back control is a phone affordance only (owner decision) - Desktop / Laptop / Tablet use the browser's own */
@media(min-width:641px){.app-back-btn{display:none!important}}
/* TABLET RAIL (641-860px): the toggle opens the full menu OVER the page; labels and groups read as on a desktop */
@media(min-width:641px) and (max-width:860px){
 body.sidebar-rail-open .app-sidebar{width:min(268px,70vw)!important;z-index:1300;box-shadow:-12px 0 32px rgba(15,40,52,.22)}
 body.sidebar-rail-open .app-sidebar .sidebar-nav{padding-inline:8px;overflow-y:auto}
 body.sidebar-rail-open .app-sidebar .sidebar-nav-item{grid-template-columns:25px minmax(0,1fr) 20px!important;justify-items:stretch!important;padding:8px 10px!important;min-height:42px}
 body.sidebar-rail-open .app-sidebar .sidebar-nav-item b,body.sidebar-rail-open .app-sidebar .sidebar-nav-item .sidebar-group-caret{display:inline!important}
 body.sidebar-rail-open .app-sidebar .sidebar-nav-group .sidebar-submenu{position:static!important;width:auto!important;padding:2px 31px 5px 5px!important;border:0!important;box-shadow:none!important;background:transparent!important;display:none!important}
 body.sidebar-rail-open .app-sidebar .sidebar-nav-group.group-open:not([data-nav-group="settings"])>.sidebar-submenu{display:grid!important}
 body.sidebar-rail-open .app-sidebar .sidebar-submenu a,body.sidebar-rail-open .app-sidebar .sidebar-subgroup-toggle{min-height:40px;display:flex;align-items:center}
}
/* PRODUCT FONT: Cairo everywhere - form controls do not inherit a font by default, so they are told to (inputs, selects and
 * their options, text areas, buttons); the identity screen no longer offers a font field */
input,select,textarea,button,option,optgroup{font-family:var(--ui-font-family)}
/* COMPANY IDENTITY: the logo row (preview at its own aspect ratio, change action, the preliminary-documents switch), then the
 * names row and the locations row */
.identity-card-body{display:grid;gap:10px}
/* one compact row: the saved logo (its own aspect ratio, no oversized frame) · names, change action + short hint, the switch */
.identity-logo-row{align-items:center!important;flex-wrap:wrap;gap:12px!important;padding:8px 10px!important}
.identity-logo-frame{flex:0 0 auto;width:88px;height:52px;display:grid;place-items:center;padding:3px;border-radius:var(--ui-radius-xs);background:var(--ui-card)}
.identity-logo-row .identity-logo-frame img{width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain}
.identity-logo-row .brand-settings-names{flex:1 1 220px;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 10px;align-content:center}
.identity-logo-row .brand-settings-names>b{font-size:var(--ui-font)}
.identity-logo-row .brand-settings-names>span{min-width:0;text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.identity-logo-row .identity-logo-actions,.identity-logo-row .identity-switch{grid-column:1/-1}
.identity-logo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.identity-logo-actions .btn{min-height:30px;padding-inline:12px}
.identity-logo-hint{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.4}
.identity-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.identity-file-input:focus-visible+label{outline:2px solid var(--blue);outline-offset:2px}
.identity-switch{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;font-weight:var(--ui-weight-strong);font-size:var(--ui-font-sm);cursor:pointer;justify-self:start}
/* ON / OFF SWITCH - a native checkbox (keyboard, form state and role=switch kept), drawn as a track and a knob */
input.ui-switch{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:36px;height:20px;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--ui-text-secondary,#61757e) 38%,transparent);cursor:pointer;transition:background .15s ease}
input.ui-switch::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:inset-inline-start .15s ease}
input.ui-switch:checked{background:var(--blue)}
input.ui-switch:checked::after{inset-inline-start:18px}
input.ui-switch:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(prefers-reduced-motion:reduce){input.ui-switch,input.ui-switch::after{transition:none}}
/* HELPER / VALIDATION TEXT under a field (final owner corrections): one spacing for all of them - a small gap from the field, a
 * readable line height, and it never sticks to the next label (the grids keep their own gaps). `.hidden` still wins (!important). */
.field-help,.field-hint,.field-error,.exchange-hint,.payment-due-hint,.fx-hint,.flight-time-warning{display:block;margin-top:5px;margin-bottom:2px;font-size:var(--ui-font-xs);line-height:1.6}
.field-help,.field-hint{color:var(--ui-text-secondary,var(--muted));font-weight:var(--ui-weight-normal,500)}
.field-error{color:var(--ui-danger)}
/* the office's Arabic location under «للمساعدة والاستفسار» on customer-facing documents (voucher, invoices) */
.print-office-location{display:block;margin-top:2px;font-size:.92em;font-weight:500;line-height:1.5}
/* voucher flight card (final owner corrections): a labelled 12-hour time («إقلاع» / «وصول»), and the extras as a quieter second row */
.mv-flight-airport>b.mv-clock{direction:rtl;display:grid;gap:0;justify-items:center}
.mv-clock>em{font-style:normal;font-size:var(--ui-font-xs);font-weight:600;color:var(--ui-text-secondary);line-height:1.2}
.mv-flight-extras{opacity:.92}
/* standalone itinerary / hotel reservation: a past date is a note (warning tone), never an error */
.predoc-page .pd-warnings:empty{display:none}
.predoc-page .pd-warnings{margin:0 var(--ui-space-3) var(--ui-space-3);padding:var(--ui-space-2) var(--ui-space-3);border:1px solid color-mix(in srgb,var(--ui-warning,#b7791f) 45%,transparent);border-radius:var(--ui-radius-xs);background:color-mix(in srgb,var(--ui-warning,#b7791f) 9%,var(--ui-card,#fff));color:var(--ui-text);font-size:var(--ui-font-xs)}
.predoc-page .pd-warnings ul{margin:0;padding-inline-start:18px}
/* referral commission dialog (final owner corrections): a title naming the kind, and the % / amount pair side by side */
.commission-title{display:grid;gap:2px;margin:0 0 10px}.commission-title h3{margin:0;font-size:var(--ui-font-lg)}
.commission-calc-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.commission-calc-pair input[readonly]{background:var(--ui-surface-muted,#f4f7f8);color:var(--ui-text-secondary)}
/* the preview's share link is offered for a SAVED booking only */
.booking-preview-modal #previewShareBtn.is-unsaved-hidden{display:none!important}
/* «المسار المالي للحجز» (final owner corrections): a compact summary + the finance actions that exist */
.bfp-box{width:min(560px,calc(100vw - 24px));padding:14px 16px;display:grid;gap:12px}.toura-online .bfp-box{width:min(940px,calc(100vw - 24px));max-width:940px}
.bfp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.bfp-head h3{margin:0;font-size:var(--ui-font-lg)}.bfp-head small{color:var(--ui-text-secondary)}
.bfp-summary{display:grid;gap:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);overflow:hidden}
.bfp-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 12px;border-bottom:1px solid var(--ui-line);font-size:var(--ui-font-sm)}.bfp-row:last-child{border-bottom:0}
.bfp-row>span{color:var(--ui-text-secondary)}.bfp-row>b{text-align:end;min-width:0;overflow-wrap:anywhere}
.bfp-row.is-due>b{color:var(--ui-danger)}.bfp-row.is-profit{background:color-mix(in srgb,var(--blue) 6%,transparent)}
.bfp-actions{display:flex;flex-wrap:wrap;gap:6px}.bfp-actions .btn{display:inline-flex;align-items:center;gap:6px}.bfp-actions .btn svg{width:16px;height:16px}
.bfp-note{margin:8px 12px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
/* «مراجعة الربحية»: a small state chip beside each part, the confirm action under the list */
.bfp-state{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;font-size:var(--ui-font-xs);font-weight:600;background:var(--ui-soft);color:var(--ui-muted);white-space:nowrap}
.bfp-state[data-tone='success']{background:var(--ui-success-bg);color:var(--ui-success)}.bfp-state[data-tone='info']{background:var(--ui-info-bg);color:var(--ui-info)}
.bfp-state[data-tone='warning']{background:var(--ui-warning-bg);color:var(--ui-warning)}.bfp-state[data-tone='danger']{background:var(--ui-danger-bg);color:var(--ui-danger)}
.bfp-note[data-tone='warning']{color:var(--ui-warning)}.bfp-note[data-tone='danger']{color:var(--ui-danger)}
.bfp-review-action{display:flex;justify-content:flex-start;padding:2px 0}
/* a payment just recorded from the dashboard quick action, marked for a moment in the payments list */
tr.is-just-saved>td{background:color-mix(in srgb,var(--blue) 12%,var(--ui-card,#fff))!important;transition:background .6s ease}
/* customer file (final owner corrections): the tags sit in the free cell of the identity rows (one row less), the chips centre
 * under a centred name in the list, the bookings tab never scrolls inside itself, and «لكل صفحة» stays on one line */
.customers-table .report-cell--entity .customer-tag-chips{justify-content:center}
.customer-file-modal #customerBookingsTab .ui-empty{padding:22px 12px}
.ui-page-size>span{white-space:nowrap}
/* LIVE FINANCIAL SUMMARY ON THE LEFT (final owner corrections): on a wide screen the invoice forms read as the form (right) and
 * its running summary (left, sticky while the lines are edited); narrower screens keep the summary in the flow under the lines.
 * Layout only - the figures are the same live preview, and the server's figures replace them after the save. */
@media(min-width:1180px){
 #standaloneCustomerInvoiceModal .card-body,#invoiceEditModal .card-body,#agentInvoiceModal .card-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:18px;align-items:start}
 #standaloneCustomerInvoiceModal .card-body>*,#invoiceEditModal .card-body>*,#agentInvoiceModal .card-body>*{grid-column:1;min-width:0}
 #standaloneInvoiceDiscountSummary,#invoiceEditDiscountSummary,#agentInvoiceLiveSummary{grid-column:2!important;grid-row:1/span 30;position:sticky;top:0;align-self:start}
 #standaloneInvoiceDiscountSummary,#invoiceEditDiscountSummary{display:grid!important;gap:6px;padding:12px!important}
 #standaloneInvoiceDiscountSummary>span,#invoiceEditDiscountSummary>span{display:flex;justify-content:space-between;gap:8px;border:0!important;padding:0!important}
 #standaloneInvoiceDiscountSummary>span:last-child,#invoiceEditDiscountSummary>span:last-child{padding-top:6px!important;border-top:1px solid var(--ui-line)!important;font-weight:var(--ui-weight-strong)}
 #standaloneCustomerInvoiceModal .modal-box,#invoiceEditModal .modal-box,#agentInvoiceModal .modal-box{max-width:min(1180px,calc(100vw - 32px))!important;width:min(1180px,calc(100vw - 32px))!important}
}
@media(min-width:1180px){#standaloneInvoiceDiscountSummary::before,#invoiceEditDiscountSummary::before{content:'ملخص الفاتورة';font-weight:var(--ui-weight-strong);color:var(--ui-heading,var(--ui-text));margin-bottom:2px}}
/* RESPONSIVE DATA TABLES (final owner corrections) - one shared behaviour for every UIComponents.table (finance lists, statements,
 * balances, treasury, expenses, payments, customer / supplier financial tables, report results):
 *   desktop: unchanged (dense);
 *   tablet (641-1180): a word or an amount is never broken letter by letter - the table keeps its natural width and the wrap
 *                      scrolls sideways when it must;
 *   phone (<=640): each row becomes a compact card - the column's name beside its value (UIComponents.table labels every cell),
 *                  the actions at the foot of the card. A table can opt out with `.no-card-table`. */
/* ...and the rule is about the AVAILABLE WIDTH, not the device: a laptop with the sidebar open, a window that is not maximised or
 * a split screen gives the table the same narrow box as a tablet. So on every screen wider than a phone: the columns size to their
 * content (no fixed layout that can squeeze a column below its longest word), Arabic and English wrap by WORDS only, short semantic
 * values (codes, dates, amounts, currencies, statuses) never wrap, and when the columns do not fit, the table's own wrap scrolls
 * sideways - the page never does. Screen only: printed documents keep their own print stylesheets. */
@media screen and (min-width:641px){
 .ui-data-table{table-layout:auto!important;max-width:none!important;min-width:100%}
 .ui-data-table th,.ui-data-table td,.ui-data-table td *{word-break:normal!important;overflow-wrap:normal!important}
 .ui-data-table td.report-cell--amount,.ui-data-table td.report-cell--date,.ui-data-table td.report-cell--reference,.ui-data-table td.report-cell--currency,.ui-data-table td.report-cell--status,.ui-data-table td.report-cell--actions,.ui-data-table .ui-money,.ui-data-table .ui-badge{white-space:nowrap!important}
 .ui-data-table th{white-space:normal}
}
@media(max-width:640px){
 .ui-table-wrap:has(>.ui-data-table:not(.no-card-table)){overflow-x:visible!important;border:0;background:transparent;box-shadow:none}
 .ui-data-table:not(.no-card-table){display:block;width:100%!important;min-width:0!important;border:0;background:transparent}
 .ui-data-table:not(.no-card-table)>thead{display:none}
 .ui-data-table:not(.no-card-table)>tbody{display:grid;gap:8px}
 .ui-data-table:not(.no-card-table)>tbody>tr{display:block;padding:8px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}
 .ui-data-table:not(.no-card-table)>tbody>tr>td{display:block;width:auto!important;max-width:none!important;min-width:0!important;padding:4px 0!important;border:0!important;text-align:left!important;direction:rtl;white-space:normal;word-break:normal;overflow-wrap:anywhere}
 .ui-data-table:not(.no-card-table)>tbody>tr>td::after{content:'';display:block;clear:both}
 .ui-data-table:not(.no-card-table)>tbody>tr>td>*{text-align:left!important;margin-inline-start:auto}
 .ui-data-table:not(.no-card-table)>tbody>tr>td[data-label]:not([data-label=""])::before{content:attr(data-label);float:right;max-width:45%;margin-inline-end:10px;text-align:start;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong,600);line-height:1.9}
 .ui-data-table:not(.no-card-table)>tbody>tr>td:first-child{font-size:var(--ui-font-sm)}
 .ui-data-table:not(.no-card-table)>tbody>tr>td.report-cell--actions{margin-top:4px;padding-top:6px!important;border-top:1px solid var(--ui-line)!important}
 .ui-data-table:not(.no-card-table)>tbody>tr>td.report-cell--actions::before{display:none}
 .ui-data-table:not(.no-card-table)>tbody>tr>td.report-cell--actions .table-actions{justify-content:flex-end}
 .ui-data-table:not(.no-card-table)>tbody>tr>td[colspan]{text-align:center!important}
 .ui-data-table:not(.no-card-table) .report-cell--amount,.ui-data-table:not(.no-card-table) .report-cell--amount *{white-space:nowrap}
}
/* SUMMARY CARDS - proven gap (final owner corrections): a card whose value is a group of figures (e.g. total / paid / remaining
 * of one currency) takes the whole row on a phone and reads its figures on one line, instead of squeezing into half a row */
@media(max-width:640px){
 body .ui-kpi:has(.expense-summary-currencies,.ui-kpi-value>span>span+span){flex:1 1 100%!important;max-width:none!important}
 .ui-kpi .expense-summary-currencies{display:flex;flex-wrap:wrap;gap:2px 12px}
}
.ui-kpi .expense-summary-currencies b{white-space:nowrap}
/* suggestion lists (final owner corrections): RTL, the product font, internal scroll that never scrolls the page behind it, and
 * an upward opening when the list would leave the screen (AppShell.fitSuggestionLists) */
.booking-suggest-box,.client-suggestions,.airport-suggestions,.predoc-suggest-box{direction:rtl;text-align:start;font-family:var(--ui-font-family);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.booking-suggest-box.opens-up,.client-suggestions.opens-up,.airport-suggestions.opens-up,.predoc-suggest-box.opens-up{top:auto!important;bottom:calc(100% + var(--ui-space-1,4px))!important}
/* advisory FX in the header (Online, final owner corrections): smaller and quieter, foldable per device */
.app-topbar-fx.is-compact{cursor:pointer;font-size:10.5px;letter-spacing:0;opacity:.85}
.app-topbar-fx.is-compact:hover,.app-topbar-fx.is-compact:focus-visible{opacity:1;text-decoration:underline dotted}
.app-topbar-fx.is-folded{opacity:.7}
/* the office location line in the preview page footer (same line the printed margin box carries) */
.pv-foot .pv-foot-location{display:block;font-weight:500;opacity:.9}
/* financial path groups (Phase 4, profitability closure): billing & collections, then costs / commissions / profitability */
.bfp-group{display:grid;gap:6px}.bfp-group>h4{margin:0;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong);color:var(--ui-text-secondary)}
/* BOOKINGS | DIRECT SALES workspace (Phase 4, profitability closure): the direct-sales tab replaces the booking content below the title */
/* the two daily modes as one segmented control: a clear active segment, a quiet inactive one (item 7) - not the page's thin sub-tabs */
#bookingsWorkspaceTabs.bookings-workspace-tabs{display:inline-flex;gap:4px;padding:4px;margin:0 0 var(--ui-space-3);border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-soft)}
#bookingsWorkspaceTabs.bookings-workspace-tabs button{min-height:38px;padding:0 20px;border-radius:9px!important;font-family:inherit;font-size:var(--ui-font-sm);font-weight:700;color:var(--ui-text-secondary)!important;background:transparent!important;transition:background-color .15s,color .15s}
#bookingsWorkspaceTabs.bookings-workspace-tabs button:hover{color:var(--ui-text)!important;background:color-mix(in srgb,var(--blue) 6%,transparent)!important}
#bookingsWorkspaceTabs.bookings-workspace-tabs button.active{background:var(--ui-card)!important;color:var(--blue-dark)!important;font-weight:800;box-shadow:0 1px 3px rgba(15,40,55,.12),inset 0 -2px 0 var(--blue)}
#bookingsWorkspaceTabs.bookings-workspace-tabs button.active:after{display:none}
#bookingsWorkspaceTabs.bookings-workspace-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:640px){#bookingsWorkspaceTabs.bookings-workspace-tabs{display:flex;width:100%}#bookingsWorkspaceTabs.bookings-workspace-tabs button{flex:1 1 0;padding:0 10px}}
/* in the direct-sales mode the booking-only create action steps aside; the card has its own */
#bookingsPage.is-direct-sales .booking-title-add{display:none!important}
#bookingsPage.is-direct-sales>:not(.page-title):not(#bookingsWorkspaceTabs):not(#directSalesHost){display:none!important}
.direct-sales-card .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.direct-sales-card .card-head h3{margin:0}
.direct-sales-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.direct-sales-filters{display:flex;flex-wrap:wrap;align-items:end;gap:8px 10px;padding:0 var(--ui-space-4,16px) var(--ui-space-3,12px)}
.direct-sales-filters>input[type=search]{flex:1 1 260px;min-width:0}
.direct-sales-filters label{display:grid;gap:3px;flex:0 1 150px;min-width:0;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.direct-sales-filters label>input,.direct-sales-filters label>select{width:100%;min-width:0}
.direct-sales-table tr.is-new-row>td{background:color-mix(in srgb,var(--ui-success) 9%,transparent)}
@media (max-width:640px){.direct-sales-filters label{flex:1 1 calc(50% - 5px)}.direct-sales-actions{width:100%;justify-content:stretch}.direct-sales-actions>.btn{flex:1 1 auto}}
/* PASSWORD RECOVERY DIALOG (login) - compact, Cairo, above the sign-in screen */
/* above the sign-in screen (z 2147483640), which a runtime modal (2147483000) would sit behind */
#passwordRecoveryModal.modal{z-index:2147483646!important}
.recovery-box{width:min(420px,calc(100vw - 32px));padding:18px 20px}
.recovery-form{display:grid;gap:8px}.recovery-form h3{margin:0 0 4px;font-size:var(--ui-font-lg)}
.recovery-form input{width:100%}
.recovery-state:empty{display:none}.recovery-state{margin:2px 0 0;font-size:var(--ui-font-sm);line-height:1.6;color:var(--ui-text-secondary)}
.recovery-state[data-tone=ok]{color:var(--ui-success,#1d7a4c)}.recovery-state[data-tone=warning]{color:var(--ui-warning-text,#8a5a00)}
.recovery-actions{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap;margin-top:6px}
/* FINANCIAL DIALOG SUMMARY / PREVIEW LINES (Phase 4 closure, owner items 4-5): every «label + value» pair in a dialog's highlight or
 * live preview reads as a small muted label ABOVE its value - never glued on one line («المصروفEXP-…», «الحسابلا يوجد…») - the amount
 * stays readable, a long reference wraps instead of colliding with the remaining amount, and a sentence-length value is not set in
 * the amount's display size. Shared: .financial-highlight, .payment-preview-grid, .transfer-preview-grid. Desktop density kept. */
.financial-highlight{flex-wrap:wrap;gap:8px 18px}
.financial-highlight>div,.financial-highlight>span,.payment-preview-grid>span,.transfer-preview-grid>span{display:grid;gap:2px;align-content:start;min-width:0}
.financial-highlight small,.payment-preview-grid small,.transfer-preview-grid small{display:block;font-size:var(--ui-font-xs);font-weight:600;color:var(--ui-text-secondary,var(--ui-muted));line-height:1.3}
.financial-highlight b{font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.payment-live-preview.financial-highlight{display:grid;gap:8px}
.payment-live-preview b{font-size:var(--ui-font-sm)}
@media (max-width:640px){.financial-highlight{padding:10px 12px;gap:8px 14px}.financial-highlight b{font-size:15px}}
/* ONLINE side menu: the second kind of a single entry keeps its address but not a line of its own (AppShell.onlineNav) */
#appSidebar .sidebar-alias-link{display:none!important}
/* the two kinds of a page (preliminary documents, groups), switched inside the page */
.page-type-tabs{margin:0 0 var(--ui-space-3,12px)}
/* a page action menu never wider than the screen (it is then kept in view by UIComponents.keepInView) */
.ui-page-action-popover,.financial-add-dropdown{max-width:calc(100vw - 16px)}
/* FIRST LOAD (Phase 4, owner): the session check is usually answered at once - then nothing is drawn. Only a slow answer shows,
 * after 400ms, the quiet Toura mark with one thin moving line under it (no spinning wheel). Neutral product chrome. */
.auth-checking .login-screen::before{opacity:0;animation:auth-checking-in .3s ease .4s both}
.auth-checking .login-screen::after{width:72px;height:3px;margin:-6px 0 0 -36px;border:0;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent) 0 0/200% 100% no-repeat;opacity:0;animation:auth-checking-line 1.3s ease-in-out .4s infinite both}
@keyframes auth-checking-in{to{opacity:.92}}
@keyframes auth-checking-line{0%{opacity:.85;background-position:150% 0}100%{opacity:.85;background-position:-50% 0}}
@media(prefers-reduced-motion:reduce){.auth-checking .login-screen::after{animation:auth-checking-in .3s ease .4s both;opacity:0}}
/* SUPPLIER / AGENT SERVICE E-MAIL (Phase 4) - composer, sent message, service indicators, the supplier's «المراسلات».
 * The office's tokens only: Cairo, its line / card / brand colours, the existing radii. Compact; one column on a phone. */
.supplier-mail-modal .sm-box{width:min(880px,calc(100vw - 24px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.supplier-mail-view-modal .sm-view-box{width:min(820px,calc(100vw - 24px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.sm-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--ui-line)}
.sm-toolbar h3{margin:0;font-size:var(--ui-font-lg)}.sm-toolbar small{display:block;margin-top:2px}
.sm-body,.sm-view-body{display:grid;gap:12px;padding:14px 18px 18px;overflow:auto;min-height:0}
.sm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sm-section{display:grid;gap:5px;min-width:0}
.sm-section>label,.sm-label{margin:0;font-size:var(--ui-font-xs);font-weight:800;color:var(--ui-heading,var(--ui-text))}
.sm-section input:not([type=checkbox]),.sm-section select,.sm-section textarea{width:100%;min-width:0}
.sm-service input[type=checkbox],.sm-check input[type=checkbox]{width:auto;min-width:0;height:auto;margin:3px 0 0;flex:0 0 auto}
.sm-check{justify-content:flex-start}.sm-check span{flex:0 1 auto}
.sm-section textarea{min-height:220px;line-height:1.7;font-family:inherit;resize:vertical}
.sm-hint{font-size:var(--ui-font-xs);color:var(--ui-text-secondary,var(--ui-muted))}
.sm-seg{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-soft);width:max-content}
.sm-seg button{min-height:34px;padding:0 16px;border:0;border-radius:8px;background:transparent;color:var(--ui-text-secondary);font:inherit;font-weight:700;cursor:pointer}
.sm-seg button.active{background:var(--ui-card);color:var(--blue-dark);box-shadow:0 1px 3px rgba(15,40,55,.12)}
.sm-seg button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sm-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.sm-service{display:flex;align-items:flex-start;gap:8px;margin:0;padding:9px 11px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);cursor:pointer;font-weight:500}
.sm-service.is-on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,var(--ui-card))}
.sm-service input{margin-top:3px;flex:0 0 auto}.sm-service span{display:grid;gap:2px;min-width:0}.sm-service b{font-size:var(--ui-font-sm)}
.sm-service small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);overflow-wrap:anywhere}
.sm-check{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;font-size:var(--ui-font-sm)}
.sm-follow{padding:10px 12px;border:1px dashed var(--ui-line);border-radius:var(--ui-radius-sm)}
.sm-follow-fields{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}.sm-follow-fields label{margin:0 0 3px}
.sm-off{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 12px;border-radius:var(--ui-radius-sm);background:var(--ui-warning-bg);color:var(--ui-warning)}
.sm-feedback{margin:0;min-height:1em;font-size:var(--ui-font-sm);color:var(--ui-danger)}
.sm-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.sm-result{display:grid;gap:12px}.sm-result-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sm-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0;padding:10px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-soft)}
.sm-meta>div{display:grid;gap:2px;min-width:0}.sm-meta dt{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.sm-meta dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.sm-meta .sm-meta-wide{grid-column:1/-1}
.sm-chip{display:inline-block;margin:0 0 4px 4px;padding:2px 9px;border:1px solid var(--ui-line);border-radius:999px;font-size:var(--ui-font-xs);background:var(--ui-card)}
.sm-view-frame{width:100%;min-height:420px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:#fff}
.sm-slot:empty{display:none}
.sm-slot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--ui-line)}
.sm-indicator{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;font-size:var(--ui-font-sm)}
.sm-indicator small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.sm-send-btn{margin-inline-start:auto}
.sm-file-tabs{margin:10px 0}
.sm-file-panel{display:grid;gap:8px}
.sm-card{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}
.sm-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.sm-card-head b{overflow-wrap:anywhere}
.sm-card-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.sm-card-meta span{overflow-wrap:anywhere}
.sm-card .table-link{justify-self:start}
@media (max-width:760px){.sm-grid,.sm-follow-fields,.sm-meta{grid-template-columns:minmax(0,1fr)}.sm-toolbar,.sm-body,.sm-view-body{padding-inline:12px}.sm-send-btn{margin-inline-start:0}.sm-actions .btn{flex:1 1 auto}}
#agentFileBody .sm-file-hidden{display:none!important}
/* FOCUSED E-MAIL ROUND (Phase 4) - supplier request composer, SMTP settings, sign-in «نسيت كلمة المرور؟». Toura tokens only. */
/* composer: narrower, centred, comfortable; one column on a phone */
.supplier-mail-modal .sm-box{width:min(760px,calc(100vw - 24px));margin-inline:auto}
.sm-services{grid-template-columns:repeat(auto-fit,minmax(190px,232px));justify-content:center;gap:10px}
.sm-service{align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;transition:border-color .15s,background-color .15s,box-shadow .15s}
.sm-service:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--ui-line))}
.sm-service.is-on{box-shadow:inset 0 0 0 1px var(--blue)}
.sm-service input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue);cursor:pointer}
.sm-service input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sm-service-kind{justify-self:start;font-style:normal;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--ui-soft);color:var(--blue-dark)}
.sm-service b{font-size:var(--ui-font-sm);overflow-wrap:anywhere}
.sm-seg{padding:4px;border-radius:12px}.sm-seg button{min-height:34px;padding:0 18px;border-radius:9px}
.sm-seg button.active{box-shadow:0 1px 3px rgba(15,40,55,.12),inset 0 -2px 0 var(--blue)}
.sm-grid{align-items:start}
/* a checkbox with role switch, drawn as a compact switch (same control, same keyboard behaviour) */
.sm-switch{gap:10px;cursor:pointer}
.sm-switch input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:36px;height:20px;margin:0;border-radius:999px;background:var(--ui-line);transition:background-color .15s;cursor:pointer;flex:0 0 auto}
.sm-switch input[type=checkbox]::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,40,55,.25);transition:inset-inline-start .15s}
.sm-switch input[type=checkbox]:checked{background:var(--blue)}
.sm-switch input[type=checkbox]:checked::after{inset-inline-start:18px}
.sm-switch input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sm-switch span small{display:block;font-weight:500}
@media (prefers-reduced-motion:reduce){.sm-switch input[type=checkbox],.sm-switch input[type=checkbox]::after,.sm-service{transition:none}}
@media (max-width:760px){.sm-services{grid-template-columns:minmax(0,1fr)}}
/* SMTP settings: the state chip, the missing-key state, the save under the card, the test card right below */
.email-card .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.email-smtp-state:empty{display:none}
.email-key-missing{margin:0 0 10px;padding:8px 12px;border-radius:var(--ui-radius-sm);background:var(--ui-danger-bg);color:var(--ui-danger);font-size:var(--ui-font-sm);font-weight:600}
.email-remote-note{margin:8px 0 0;font-size:var(--ui-font-xs);color:var(--ui-warning)}.email-remote-note:empty{display:none}
.email-actions-top{margin-top:12px;padding-top:12px;border-top:1px solid var(--ui-line)}
/* sign-in: «نسيت كلمة المرور؟» as a quiet Toura secondary action - no underline, a real touch target */
.auth-link-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:6px 14px;border:0;border-radius:10px;background:transparent;color:var(--blue-dark,var(--blue));font:inherit;font-family:inherit;font-weight:700;font-size:var(--ui-font-sm);text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.auth-link-btn:hover{background:color-mix(in srgb,var(--blue) 9%,transparent);text-decoration:none}
.auth-link-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* the runtime modal rule (.modal.modal-runtime-open > .modal-box, min(1150px…)) outranks a plain class pair: these dialogs name
 * themselves at the same strength so their own width applies */
.modal.supplier-mail-modal>.modal-box.sm-box{width:min(760px,calc(100vw - 24px))}
.modal.supplier-mail-view-modal>.modal-box.sm-view-box{width:min(820px,calc(100vw - 24px))}
.modal.password-recovery-modal>.modal-box.recovery-box{width:min(420px,calc(100vw - 32px))}
/* the e-mail settings column is the page's width - a wide child (the send log, the live preview) scrolls inside its card, never widens the page */
#emailSettingsHost.email-settings{grid-template-columns:minmax(0,1fr)}
#emailSettingsHost.email-settings>*{min-width:0}
#emailSettingsHost .ui-table-wrap{overflow-x:auto}

/* ==== FINAL CONSOLIDATED OWNER CORRECTIONS V2 (Phase 4) - Toura tokens only ==== */
/* ONE BOOKING HEADER (Dashboard + Alert Center): voucher number compact and left-to-right, the customer once and flexible
 * (two lines at most, whole words - the full name in the tooltip), the date on the opposite side, the badges in one area */
.alert-booking-id{display:flex;align-items:baseline;gap:8px;min-width:0}
.alert-vch{flex:0 0 auto;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-heavy,800);color:var(--ui-heading);white-space:nowrap;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.alert-customer{flex:1 1 auto;min-width:0;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-medium,500);color:var(--ui-text);overflow-wrap:normal;word-break:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-align:start}
.alert-badges{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;min-width:0}
.notif-booking>summary{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot id when" ". badges badges" ". next next";align-items:baseline;gap:3px 10px}
.notif-booking>summary>.notif-row-dot{grid-area:dot;align-self:center;margin-top:0}
.notif-booking>summary>.alert-booking-id{grid-area:id}
.notif-booking>summary>.notif-booking-when{grid-area:when;font-size:var(--ui-font-xs);color:var(--ui-muted);white-space:nowrap;text-align:end}
.notif-booking>summary>.notif-booking-chips{grid-area:badges}
.notif-booking>summary>.notif-booking-next{grid-area:next}
.notif-booking[open]>summary>.notif-booking-next{display:none}
.notif-booking-rows .notif-row{align-items:baseline}
.notif-booking-rows .notif-row-main small{overflow-wrap:normal;word-break:normal}
.dash-alert-booking .followup-vnext-dense-copy{display:grid;gap:3px;min-width:0}
.dash-alert-booking .followup-vnext-dense-copy .alert-badges{-webkit-line-clamp:unset;overflow:visible}
@media (max-width:420px){.notif-booking>summary{grid-template-areas:"dot id id" ". when when" ". badges badges" ". next next"}.notif-booking>summary>.notif-booking-when{text-align:start}}

/* SEND LOG: data-aware widths - compact state / tries, medium time / reference, flexible recipient / type; an error is one short
 * office line (its technical text one click away) and never widens the table; a phone gets the shared card rows */
.email-log{table-layout:auto;width:100%}
.email-log .email-col-time{width:96px}.email-log .email-col-status{width:88px}.email-log .email-col-tries{width:64px}.email-log .email-col-ref{width:130px}
.email-log .email-col-error{width:24%}.email-log .email-col-actions{width:1%}
.email-log td{vertical-align:top}
.email-log .email-cell-recipient{overflow-wrap:anywhere;min-width:150px}
.email-log .email-cell-tries{text-align:center;white-space:nowrap}
.email-log .email-error{max-width:none;min-width:0}
.email-error-detail{min-width:0}
.email-error-detail>summary{cursor:pointer;list-style:none;color:var(--ui-danger);font-size:var(--ui-font-xs);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.email-error-detail>summary::-webkit-details-marker{display:none}
.email-error-detail>summary::after{content:' ▾';color:var(--ui-muted);font-weight:400}
.email-error-detail[open]>summary::after{content:' ▴'}
.email-error-detail>code{display:block;margin-top:4px;padding:6px 8px;border-radius:var(--ui-radius-sm);background:var(--ui-soft);color:var(--ui-text-secondary);font-size:11px;white-space:normal;overflow-wrap:anywhere;text-align:left}
.email-log .report-cell--actions .table-actions{flex-wrap:nowrap;justify-content:flex-end}
.ui-datetime-inline{display:inline-flex;gap:6px;align-items:baseline}
.ui-datetime-inline small{font-size:inherit;color:inherit}

/* SMTP: after a successful test of the saved settings, one summary line and «إعادة الاختبار» */
.email-test-ok{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.email-test-ok-text{display:grid;gap:2px;flex:1 1 220px;min-width:0}
.email-test-ok-text b{font-size:var(--ui-font-sm)}
.email-test-ok-text small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);overflow-wrap:anywhere}

/* SUPPLIER REQUEST SENT: a compact confirmation in its own narrow box */
.modal.supplier-mail-modal>.modal-box.sm-box.is-result{width:min(520px,calc(100vw - 24px))}
.sm-box.is-result .sm-body{padding:12px 16px 16px}
.sm-result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sm-result-head h4{margin:0;font-size:var(--ui-font-md,15px);color:var(--ui-heading)}
.sm-result-meta{display:grid;gap:0;margin:0;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);overflow:hidden}
.sm-result-meta>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:7px 12px;border-top:1px solid var(--ui-line)}
.sm-result-meta>div:first-child{border-top:0}
.sm-result-meta dt{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);align-self:center}
.sm-result-meta dd{margin:0;font-weight:600;font-size:var(--ui-font-sm);overflow-wrap:anywhere;min-width:0}
.sm-result-note{margin:0;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.sm-result-actions{justify-content:flex-end}

/* THE SENT MESSAGE: compact metadata (short fields side by side, long ones on their own row), the message as the main content,
 * one scroll for the whole dialog (the frame takes the message's height) */
.sm-view-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px;margin:0;padding:10px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-soft)}
.sm-view-meta>div{display:grid;gap:2px;min-width:0}
.sm-view-meta dt{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.sm-view-meta dd{margin:0;font-weight:600;font-size:var(--ui-font-sm);overflow-wrap:anywhere;min-width:0}
.sm-view-meta .sm-vm-mid{grid-column:span 2}
.sm-view-meta .sm-vm-wide{grid-column:1/-1}
.sm-chips{display:flex;flex-wrap:wrap;gap:4px}
.sm-chips .sm-chip{margin:0}
.sm-view-frame{min-height:0;height:320px;overflow:hidden}
@media (max-width:760px){.sm-view-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.sm-result-meta>div{grid-template-columns:64px minmax(0,1fr)}}
/* a narrow card (an Alert Center time column, a phone): the date moves under the booking, the event's date under the event -
 * decided by the card's own width, so the same booking reads the same in every column */
.alert-booking-id{flex-wrap:wrap;row-gap:0}
.alert-customer{flex:1 1 9em}
.notif-booking,.notif-block-body{container-type:inline-size}
@container (max-width:360px){
 .notif-booking>summary{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"dot id" ". when" ". badges" ". next"}
 .notif-booking>summary>.notif-booking-when{text-align:start}
 .notif-row{flex-wrap:wrap;row-gap:2px}
 .notif-row-main{flex:1 1 calc(100% - 20px)}
 .notif-row-side{flex:1 1 100%;justify-items:start;text-align:start;padding-inline-start:15px}
}
/* SHARED FINANCIAL FORM GRID (owner corrections V2): twelve columns, each field spans what its data needs - currency, percent,
 * dates and short states compact; parties, references, accounts and notes flexible. Two columns on a tablet, one on a phone. */
.fin-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px 12px;align-items:start}
.fin-grid>*{min-width:0;grid-column:span 6}
.fin-grid>.fin-span-2{grid-column:span 2}.fin-grid>.fin-span-3{grid-column:span 3}.fin-grid>.fin-span-4{grid-column:span 4}
.fin-grid>.fin-span-5{grid-column:span 5}.fin-grid>.fin-span-6{grid-column:span 6}.fin-grid>.fin-span-12{grid-column:1/-1}
.fin-grid>.hidden{display:none}
.fin-grid input,.fin-grid select{width:100%;min-width:0}
.commission-grid input[readonly]{background:var(--ui-surface-muted,#f4f7f8);color:var(--ui-text-secondary)}
@media (max-width:900px){.fin-grid>*,.fin-grid>.fin-span-2,.fin-grid>.fin-span-3,.fin-grid>.fin-span-4,.fin-grid>.fin-span-5,.fin-grid>.fin-span-6{grid-column:span 6}.fin-grid>.fin-span-12{grid-column:1/-1}}
@media (max-width:600px){.fin-grid>*,.fin-grid>[class*="fin-span-"]{grid-column:1/-1}}
/* touch screens: the shared row action keeps a full finger-size target (mouse layouts unchanged) */
@media (pointer:coarse){.ui-record-actions .ui-icon-btn{min-width:40px;min-height:40px}}

/* LONG NAMES (owner corrections V2): a record's code compact, its party's name flexible and wrapped by words */
.party-line{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;max-width:100%}
.party-code{flex:0 0 auto;white-space:nowrap;font-weight:700;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.party-name{flex:1 1 12em;min-width:0;overflow-wrap:normal;word-break:normal;unicode-bidi:isolate}

/* A BOOKING IS A GROUP (owner corrections V2): its header is the parent; opened, its events sit on one softly tinted panel with an
 * accent edge, so they read as belonging to that voucher - Dashboard and Alert Center alike */
.notif-booking[open]{border-color:color-mix(in srgb,var(--blue) 28%,var(--ui-line))}
.notif-booking[open]>summary{border-bottom:1px solid color-mix(in srgb,var(--blue) 18%,var(--ui-line));border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}
.notif-booking-rows,.dash-alert-children{background:color-mix(in srgb,var(--blue) 4%,var(--ui-card));border-inline-start:3px solid color-mix(in srgb,var(--blue) 30%,transparent);border-radius:0 0 var(--ui-radius-sm) var(--ui-radius-sm)}
.notif-booking-rows .notif-row{background:transparent}
.dash-alert-group{border-bottom:1px solid #edf3f5}
.dash-alert-group>summary{list-style:none;cursor:pointer}
.dash-alert-group>summary::-webkit-details-marker{display:none}
.dash-alert-group>summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.dash-alert-group[open]>summary{background:color-mix(in srgb,var(--blue) 5%,transparent)}
.dash-alert-children{display:grid;gap:2px;padding:4px 8px 8px;margin:0 8px 8px}
.dash-alert-open{justify-self:start;font-size:var(--ui-font-xs);padding:4px 2px}
/* an event's parts: each isolated, the route flexible, a code compact - they never reorder into each other */
.ev-part{unicode-bidi:isolate}
.ev-part[dir="ltr"]{white-space:nowrap;font-variant-numeric:tabular-nums}
.ev-sep{color:var(--ui-muted)}
/* a Latin name isolated with dir=auto would align to ITS start (left): in the RTL layout every name keeps the right edge */
.alert-customer,.party-name{text-align:right}

/* ===== ROUND A (pre-assistant owner corrections) ===== */
/* A1 ONE DIALOG CLOSE CONTROL: title on the right, «إغلاق ×» at the end of the header (left in RTL); quiet, secondary, a real
 * touch target - never danger red, never a link. ModalManager.decorateClose gives every dialog / drawer / preview this class. */
.modal-toolbar>.ui-dialog-close,.accounting-drawer-head>.ui-dialog-close,.modal-head>.ui-dialog-close,button.ui-dialog-close{order:99;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;height:36px;min-height:36px;padding:0 12px;border:1px solid color-mix(in srgb,var(--blue-dark) 22%,var(--ui-line));border-radius:10px;background:var(--ui-card);color:var(--blue-dark);font:inherit;font-size:var(--ui-font-sm);font-weight:700;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:none;transition:background-color .15s,border-color .15s}
/* exactly ONE «×»: the control's own; any older close glyph (e.g. `.doc-close::before`) is switched off */
button.ui-dialog-close::before{content:none!important;display:none!important}
button.ui-dialog-close::after{content:'×';font-size:19px;font-weight:700;line-height:1;color:currentColor}
button.ui-dialog-close:hover{background:color-mix(in srgb,var(--blue-dark) 7%,var(--ui-card));border-color:color-mix(in srgb,var(--blue-dark) 38%,var(--ui-line))}
button.ui-dialog-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (pointer:coarse){button.ui-dialog-close{min-height:40px}}
.accounting-drawer-head{display:flex;align-items:center;gap:10px}

/* A2-A4 ALERT EVENTS: a row is a button - its text starts on the right like any RTL text (buttons centre by default); the group's
 * own width decides when the date drops under the event; the open group's events sit on its tinted panel */
.notif-row,.notif-row-main,.followup-vnext-dense-row,.followup-vnext-dense-copy{text-align:start}
.dash-alert-children{container-type:inline-size}
.notif-row-main small,.ev-line{display:block;line-height:1.6}
.ev-line{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);margin-top:2px}
.followup-vnext-upcoming-row .followup-vnext-dense-copy{display:grid;gap:2px;min-width:0}

/* A5 CONNECTION NOTICE: a system state, not a form error - dark, calm, top centre; one at a time */
.connection-notice{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:2147483600;display:grid;gap:2px;max-width:min(460px,calc(100vw - 24px));padding:10px 16px;border-radius:12px;background:#17323d;color:#fff;box-shadow:0 10px 28px rgba(10,30,40,.28);font-size:var(--ui-font-sm);text-align:center;direction:rtl}
.connection-notice b{font-weight:800}
.connection-notice span{opacity:.85;font-size:var(--ui-font-xs)}
.connection-notice[data-state="restored"]{background:#1f6f4a}
.connection-notice[hidden]{display:none}

/* A7 a traveler linked to a saved customer: the name reads as the customer record's, with the way to change it */
input[data-linked-customer]{background:var(--ui-soft);color:var(--ui-text);cursor:default}
.pf-linked-note{display:block;margin-top:3px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.5}
.pf-linked-note .table-link{font-size:inherit;padding:0 2px}

/* A10 adaptive passenger cards (Online voucher): four to a row when every name is short, three otherwise; two compact lines */
.modern-voucher .mv-traveler-grid[data-density="4"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.modern-voucher .mv-traveler-grid[data-density="3"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.modern-voucher .mv-traveler-grid[data-density] .mv-traveler-item>b{overflow-wrap:normal;word-break:normal;line-height:1.35}
.modern-voucher .mv-traveler-compact{display:grid;gap:.2em;margin:0}
.modern-voucher .mv-traveler-compact>span{display:block;line-height:1.45}
@media(max-width:700px){.modern-voucher .mv-traveler-grid[data-density]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:480px){.modern-voucher .mv-traveler-grid[data-density]{grid-template-columns:1fr!important}}
/* A11 the office logo a little larger and crisp: its own uploaded image, contained, never upscaled past its box */
.modern-voucher .mv-brand img{width:108px;height:56px;object-fit:contain;image-rendering:auto}

/* A13-A15 HOTEL FORM: one compact row sized by what each field holds; the alert and the note easy to find; the room allocation in
 * its own fold; the nights control line with room to breathe and its numbers stand out */
.hotel-compact-grid{display:grid;grid-template-columns:minmax(64px,.55fr) minmax(64px,.55fr) minmax(130px,1.4fr) minmax(110px,1fr) minmax(110px,1fr) minmax(150px,1.2fr);gap:10px 12px;align-items:end;margin-top:10px}
.hotel-compact-grid>*{min-width:0}
.hotel-compact-grid .hc-alert .alert-lead-field{margin:0}
.hotel-compact-grid .hc-alert label{color:var(--blue-dark,var(--blue))}
.hotel-note-field{margin-top:10px;padding:8px 10px;border:1px dashed color-mix(in srgb,var(--blue) 35%,var(--ui-line));border-radius:var(--ui-radius-sm);background:color-mix(in srgb,var(--blue) 4%,var(--ui-card))}
.hotel-note-field label{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.hotel-note-field label small{font-weight:500;color:var(--ui-text-secondary)}
.hotel-note-field textarea{width:100%;min-height:44px;resize:vertical}
.hotel-allocation-details{margin-top:10px}
.hotel-nights-summary{padding:8px 12px!important;margin:4px 0 10px!important;line-height:1.7;border-radius:var(--ui-radius-sm);font-size:var(--ui-font-sm);text-align:start}
@media (max-width:1100px){.hotel-compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.hotel-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hotel-compact-grid .hc-lg,.hotel-compact-grid .hc-alert{grid-column:1/-1}}
.mv-hotel-note{margin:4px 0 0;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.5}
.mv-hotel-note-shared{margin-top:6px;padding:4px 8px;border-inline-start:3px solid var(--ui-line)}
/* A20 a tour template's English name, edited in place beside its Arabic name */
.tour-en-field{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.tour-en-field input{max-width:220px;min-height:30px;padding:3px 8px;font-size:var(--ui-font-xs)}
/* A24 the preview is revealed once ready: while preparing, its document is not painted (a quiet line says so) */
#previewModal .preview-area.is-preparing{position:relative;min-height:240px}
#previewModal .preview-area.is-preparing>*{visibility:hidden}
#previewModal .preview-area.is-preparing::before{content:'جارٍ تجهيز المعاينة…';position:absolute;top:48px;left:0;right:0;text-align:center;color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}
/* A25-A26 sent services as compact cards (3 / 2 / 1 per row by the space they have); the sent-message summary quieter than the body */
.sm-chips,.sm-card-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;container-type:inline-size}
.sm-service-chip{display:grid;gap:1px;margin:0;padding:5px 8px;border-radius:8px;border:1px solid var(--ui-line);background:var(--ui-card);min-width:0;text-align:center}
.sm-service-chip em{font-style:normal;font-size:10.5px;color:var(--ui-text-secondary)}
.sm-service-chip b{font-size:var(--ui-font-xs);font-weight:700;overflow-wrap:anywhere;line-height:1.35}
.sm-service-chip small{font-size:10.5px;color:var(--ui-text-secondary)}
@media (max-width:900px){.sm-chips,.sm-card-services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.sm-chips,.sm-card-services{grid-template-columns:minmax(0,1fr)}}
.sm-view-meta{gap:6px 12px;padding:8px 10px;font-size:var(--ui-font-xs)}
.sm-view-meta dt{font-size:10.5px}
.sm-view-meta dd{font-size:var(--ui-font-xs);font-weight:600}
/* A31 PERMISSIONS: compact chips sized by their words, the module's meaningful actions first, the rest folded */
.permission-action-grid{display:flex!important;flex-wrap:wrap;gap:6px!important}
.permission-action-chip{flex:0 0 auto;width:auto;padding:4px 10px;border-radius:999px;background:var(--ui-card);white-space:nowrap;min-height:30px}
.permission-action-chip:has(input:checked){border-color:color-mix(in srgb,var(--blue) 45%,var(--ui-line));background:color-mix(in srgb,var(--blue) 8%,var(--ui-card))}
.permission-action-chip input{width:14px;height:14px}
.permission-capability-chip{border-style:dashed}
@media (pointer:coarse){.permission-action-chip{min-height:38px}}
/* A32 direct sale lines: every cell on one baseline - the service name and its description the same height and type size */
body .standalone-service-line{align-items:end}
body .standalone-service-line .standalone-line-service{margin-bottom:0}
body .standalone-service-line label{display:block;min-height:1.5em;margin-bottom:4px;font-size:var(--ui-font-xs);line-height:1.5}
body .standalone-service-line input,body .standalone-service-line select{min-height:var(--ui-control);height:var(--ui-control);font-size:var(--ui-font-sm);box-sizing:border-box}
/* ROUND A ADDENDUM - «المراسلات» on a supplier's file: the panel shows ONLY under its tab (the hidden attribute wins over the panel's
   grid), and each sent message is one compact row - the subject first, a quiet meta line, small service chips, status + «عرض الرسالة» */
#smFilePanel[hidden]{display:none!important}
.sm-rows{display:grid;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);overflow:hidden}
.sm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:9px 12px;min-width:0}
.sm-row+.sm-row{border-top:1px solid var(--ui-line)}
.sm-row:hover{background:var(--ui-row-hover)}
.sm-row-main{display:grid;gap:3px;min-width:0}
.sm-row-subject{font-size:var(--ui-font-sm);font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.sm-row-meta{display:flex;flex-wrap:wrap;gap:2px 0;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);min-width:0}
.sm-row-meta>span{overflow-wrap:anywhere}
.sm-row-meta>span+span::before{content:'·';margin:0 7px;color:var(--ui-text-secondary);opacity:.6}
.sm-row-services{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
.sm-row-count{font-size:10.5px;color:var(--ui-text-secondary);margin-inline-end:2px}
.sm-mini-chip{display:inline-flex;align-items:baseline;gap:3px;max-width:100%;padding:1px 8px;border:1px solid var(--ui-line);border-radius:999px;font-size:11px;line-height:1.6;background:var(--ui-surface-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-mini-chip em{font-style:normal;color:var(--ui-text-secondary);font-size:10.5px}
.sm-mini-more{color:var(--ui-text-secondary)}
.sm-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
.sm-row-open{font-size:var(--ui-font-xs)}
@media (max-width:620px){.sm-row{grid-template-columns:minmax(0,1fr)}.sm-row-side{flex-direction:row;align-items:center;justify-content:space-between}.sm-mini-chip{white-space:normal}}
/* «مساعد تورا» (Phase 4): ONE entry - the last item of the side menu - with a quiet dismissible hint; the panel sits at the
   end corner (left in RTL), never over the topbar, a bottom sheet on a phone. Answers: title, «أين تجده», short steps, one
   readable action - spacing and one navy accent, nothing decorative. */
.assistant-nav-wrap{position:relative;margin-top:6px;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--ui-line) 70%,transparent)}
.assistant-nav-item .sidebar-nav-icon svg{width:18px;height:18px}
.assistant-nav-item.has-hint .sidebar-nav-icon{position:relative}
.assistant-nav-item.has-hint .sidebar-nav-icon::after{content:'';position:absolute;top:-2px;inset-inline-start:-2px;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px var(--ui-card);animation:assistantPulse 2.4s ease-out infinite}
.assistant-hint{display:flex;align-items:center;gap:6px;margin:4px 12px 2px;padding:3px 4px 3px 8px;border-radius:999px;background:color-mix(in srgb,var(--blue) 9%,var(--ui-card));color:var(--blue-dark);font-size:var(--ui-font-xs);width:max-content;max-width:calc(100% - 24px)}
.assistant-hint-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.assistant-hint-text{border:0;background:none;padding:0;font:inherit;font-weight:700;color:inherit;cursor:pointer}
.assistant-hint-close{border:0;background:none;width:22px;height:22px;border-radius:50%;font:inherit;font-size:14px;line-height:1;color:var(--ui-text-secondary);cursor:pointer}
.assistant-hint-close:hover{background:color-mix(in srgb,var(--blue-dark) 8%,transparent)}
body.sidebar-collapsed .assistant-hint{display:none}
@keyframes assistantPulse{0%{box-shadow:0 0 0 2px var(--ui-card),0 0 0 2px color-mix(in srgb,var(--blue) 45%,transparent)}70%{box-shadow:0 0 0 2px var(--ui-card),0 0 0 8px transparent}100%{box-shadow:0 0 0 2px var(--ui-card),0 0 0 8px transparent}}
@media (prefers-reduced-motion:reduce){.assistant-nav-item.has-hint .sidebar-nav-icon::after{animation:none}}
.assistant-panel{position:fixed;inset-inline-end:16px;bottom:16px;z-index:1200;width:min(400px,calc(100vw - 32px));max-height:min(660px,calc(100vh - 96px));display:flex;flex-direction:column;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:14px;box-shadow:0 18px 44px rgba(11,45,91,.18);font-family:inherit;overflow:hidden}
.assistant-panel[hidden]{display:none!important}
.assistant-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ui-line);background:color-mix(in srgb,var(--blue-dark) 4%,var(--ui-card))}
.assistant-head-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--blue-dark);color:#fff;flex:0 0 auto}
.assistant-head-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.assistant-head>div:not(.assistant-head-actions){flex:1 1 auto;min-width:0}
.assistant-head h3{margin:0;font-size:var(--ui-font-md,15px);font-weight:700;color:var(--blue-dark)}
.assistant-head small{display:block;margin-top:1px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.assistant-head-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.assistant-clear{border:0;background:none;padding:4px 6px;border-radius:6px;font:inherit;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);cursor:pointer}
.assistant-clear:hover{color:var(--blue-dark);background:color-mix(in srgb,var(--blue-dark) 6%,transparent)}
.assistant-log{flex:1 1 auto;min-height:140px;overflow-y:auto;padding:14px;display:grid;gap:10px;align-content:start}
.assistant-q{justify-self:end;max-width:85%;padding:6px 12px;border-radius:14px 14px 4px 14px;background:var(--blue-dark);color:#fff;font-size:var(--ui-font-sm);line-height:1.6;overflow-wrap:anywhere}
.assistant-a{display:grid;gap:8px;max-width:100%;padding:12px 14px;border:1px solid var(--ui-line);border-radius:4px 14px 14px 14px;background:var(--ui-card);font-size:var(--ui-font-sm);line-height:1.85;overflow-wrap:anywhere}
.assistant-a p{margin:0}
.assistant-title{font-weight:700;color:var(--blue-dark);line-height:1.6}
.assistant-text{color:var(--ui-text,inherit)}
.assistant-where{display:grid;gap:1px;padding:7px 10px;border-inline-start:3px solid var(--blue);border-radius:6px;background:color-mix(in srgb,var(--blue) 6%,var(--ui-card))}
.assistant-where small{font-size:10.5px;font-weight:700;color:var(--ui-text-secondary)}
.assistant-steps{margin:0;padding:0;list-style:none;counter-reset:as;display:grid;gap:6px}
.assistant-steps li{counter-increment:as;display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start}
.assistant-steps li::before{content:counter(as);display:grid;place-items:center;width:22px;height:22px;margin-top:2px;border-radius:50%;background:color-mix(in srgb,var(--blue-dark) 9%,var(--ui-card));color:var(--blue-dark);font-size:11px;font-weight:700}
.assistant-note{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.7}
.assistant-open{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid color-mix(in srgb,var(--blue-dark) 30%,var(--ui-line));border-radius:8px;background:var(--ui-card);color:var(--blue-dark);font:inherit;font-size:var(--ui-font-xs);font-weight:700;cursor:pointer}
.assistant-open:hover{background:color-mix(in srgb,var(--blue-dark) 6%,var(--ui-card))}
.assistant-open svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.assistant-welcome{border-style:dashed}
.assistant-related,.assistant-quick>div{display:flex;flex-wrap:wrap;gap:6px}
.assistant-quick{display:grid;gap:4px;padding:8px 14px 0;border-top:1px solid var(--ui-line)}
.assistant-quick>small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.assistant-chip{padding:3px 10px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--blue-dark);font:inherit;font-size:var(--ui-font-xs);line-height:1.6;cursor:pointer;text-align:start}
.assistant-chip:hover{background:var(--ui-row-hover)}
.assistant-chip:focus-visible,.assistant-form input:focus-visible,.assistant-open:focus-visible,.assistant-clear:focus-visible,.assistant-hint button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.assistant-form{display:flex;gap:8px;padding:10px 14px}
.assistant-form input{flex:1 1 auto;min-width:0;height:var(--ui-control,38px);padding:0 10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-xs);font:inherit;font-size:var(--ui-font-sm);direction:rtl;text-align:right}
.assistant-form input::placeholder{text-align:right}
.assistant-foot{margin:0;padding:0 14px 10px;font-size:10.5px;color:var(--ui-text-secondary)}
@media (max-width:620px){.assistant-panel{inset-inline:0;bottom:0;width:100%;max-height:85vh;border-radius:16px 16px 0 0}}
@media (pointer:coarse){.assistant-chip{min-height:36px}.assistant-hint-close{width:32px;height:32px}}
/* POST-ASSISTANT MICRO CORRECTIONS */
/* passenger type («بالغ») bold on the voucher cards */
.modern-voucher .mv-traveler-kind,body.voucher-print-document .mv-traveler-kind{font-weight:800;color:inherit}
/* FORM DIRECTION: an empty `dir=auto` field (a hotel name, a city …) starts from the right like every Arabic field - typing Latin
   text still turns it left-to-right. Structured left-to-right fields (e-mail, URL, phone, codes, passport, flight number) carry
   dir=ltr or their own type and are not touched. */
:is(input,textarea)[dir="auto"]:placeholder-shown:not([type=email]):not([type=url]):not([type=tel]):not([type=number]){direction:rtl;text-align:right}
/* a hotel the office has not used yet: the city is typed, never guessed */
.hotel-new-note{display:block;margin-top:4px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.5}
/* «تفاصيل الخدمة»: the supported fields grouped by meaning, compact chips with a clear checked state */
#serviceSchemaFields.schema-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:620px){#serviceSchemaFields.schema-field-grid{grid-template-columns:1fr}}
.schema-group{margin:0;padding:8px 10px 10px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface-subtle);min-width:0}
.schema-group>legend{padding:0 6px;font-size:var(--ui-font-xs);font-weight:700;color:var(--ui-text-secondary)}
.schema-group-options{display:flex;flex-wrap:wrap;gap:6px}
.schema-group .schema-field-option{position:relative;display:inline-flex;align-items:center;gap:7px;width:auto;padding:5px 10px;border-radius:999px;background:var(--ui-card);cursor:pointer;font-weight:400}
.schema-group .schema-field-option input{position:absolute;opacity:0;width:1px;height:1px}
.schema-field-check{width:16px;height:16px;flex:0 0 auto;border:1.5px solid color-mix(in srgb,var(--blue) 45%,var(--ui-line));border-radius:5px;background:var(--ui-card);display:grid;place-items:center}
.schema-field-option.is-selected .schema-field-check{background:var(--blue);border-color:var(--blue)}
.schema-field-option.is-selected .schema-field-check::after{content:'';width:8px;height:4px;border:2px solid #fff;border-top:0;border-inline-end:0;transform:translateY(-1px) rotate(-45deg)}
.schema-field-text{display:grid;line-height:1.3}
.schema-field-text b{font-size:var(--ui-font-sm)}
.schema-field-text small{font-size:10.5px;color:var(--ui-text-secondary);font-weight:400}
.schema-group .schema-field-option:focus-within{outline:2px solid var(--blue);outline-offset:1px}
@media (pointer:coarse){.schema-group .schema-field-option{min-height:38px}}
/* «مساعد تورا»: a how-to whose action this user may not perform says so quietly; the product owner's contact */
.assistant-restricted{padding:6px 10px;border-radius:6px;background:var(--ui-surface-subtle);color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.7}
.assistant-contact{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.assistant-contact a{font-weight:700;color:var(--blue-dark);unicode-bidi:isolate}
/* supplier / agent invoice from the customer invoice (final corrections R01): sections in the order of the work, the customer
 * invoice services as a compact checklist, the services a line pays for above it, and the save at the end of the dialog */
.agent-invoice-box{display:flex;flex-direction:column}
.agent-invoice-box>.card-body{flex:1 1 auto;min-height:0}
.agent-invoice-title{margin:0;font-size:var(--ui-font-md);color:var(--ui-heading)}
.agent-invoice-section{padding-block:var(--ui-space-2);border-bottom:1px solid var(--ui-line)}
.agent-invoice-services{display:grid;gap:var(--ui-space-2)}
.agent-invoice-services-head b{display:block;color:var(--ui-heading);font-size:var(--ui-font-sm)}
.agent-invoice-services-head small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.agent-invoice-service-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;max-height:240px;overflow:auto}
.agent-invoice-service{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:4px 8px;padding:6px 8px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);cursor:pointer;margin:0}
.agent-invoice-service input{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--blue)}
.agent-invoice-service-group{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);white-space:nowrap}
.agent-invoice-service-label{min-width:0;overflow-wrap:anywhere;font-size:var(--ui-font-sm)}
.agent-invoice-service small{grid-column:2/-1;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.agent-invoice-service.is-off{cursor:default;background:var(--ui-surface-subtle)}
.agent-invoice-service[data-state="held"] small,.agent-invoice-service[data-state="stock-other"] small{color:var(--ui-warning)}
.agent-invoice-service-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-3)}
.agent-invoice-service-actions label{display:inline-flex;align-items:center;gap:5px;font-size:var(--ui-font-sm);margin:0}
.agent-invoice-service-actions .btn{margin-inline-start:auto}
.supplier-item-refs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px}
.supplier-item-ref{padding:1px 8px;border-radius:999px;background:var(--ui-info-bg);color:var(--blue-dark);font-size:var(--ui-font-xs);overflow-wrap:anywhere}
.supplier-item-refs em{font-style:normal;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.agent-invoice-actions{position:sticky;bottom:0;z-index:3;display:flex;justify-content:flex-end;gap:var(--ui-space-2);padding:var(--ui-space-2) var(--ui-space-3);border-top:1px solid var(--ui-line);background:var(--ui-card)}
@media(max-width:760px){.agent-invoice-service-list{grid-template-columns:1fr}.agent-invoice-service-actions .btn{margin-inline-start:0;width:100%}}
.field-help.warning-text{color:var(--ui-warning)}
/* «المسار المالي»: the supplier invoices and fees behind a summary row - one line each, opened on demand (R01.8 / R01.10) */
.bfp-details{border-bottom:1px solid var(--ui-line);font-size:var(--ui-font-sm)}
.bfp-details>summary{padding:6px 12px;cursor:pointer;color:var(--blue-dark);font-size:var(--ui-font-xs)}
.bfp-detail-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;padding:6px 12px;border-top:1px dashed var(--ui-line)}
.bfp-detail-row>span{min-width:0;overflow-wrap:anywhere}
.bfp-detail-row>small{grid-column:1/-1}
.bfp-row b>small.cell-note{display:inline;margin-inline-start:4px}
/* «متابعة التنفيذ» service cards (Online, R02.11): one compact line, a quiet tone by state, details on demand */
.exec-service-card{display:grid;gap:4px;padding:8px 10px;border-inline-start:4px solid var(--ui-line)}
.exec-service-card[data-exec-tone="progress"]{border-inline-start-color:var(--ui-warning);background:var(--ui-warning-bg)}
.exec-service-card[data-exec-tone="done"]{border-inline-start-color:var(--ui-success);background:var(--ui-success-bg)}
.exec-service-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,170px);align-items:center;gap:8px}
.exec-service-what{min-width:0}.exec-service-what b{display:block;overflow-wrap:anywhere}.exec-service-what small{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);overflow-wrap:anywhere}
.exec-service-more>summary{cursor:pointer;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exec-service-more[open]>summary{margin-bottom:4px}
/* the booking's status as text, where Offline still has its selector (Online, R02.2); the real flight duration (R02.10) */
.voucher-status-text{min-height:38px;display:flex;align-items:center;padding:0 10px;border:1px dashed var(--ui-line);border-radius:var(--ui-radius-sm);color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}
.flight-duration-note{display:block;margin-top:4px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.flight-duration-note.is-unknown{color:var(--ui-warning)}
.booking-cancel-reason,.booking-post-trip-note{display:block;max-width:260px;overflow-wrap:anywhere}
@media(max-width:620px){.exec-service-line{grid-template-columns:1fr}}
/* the expense's optional payee (R03): a simple field keeps a readable width instead of spanning the dialog */
.expense-beneficiary-row{grid-template-columns:minmax(0,440px)!important}
.beneficiaries-table td small.cell-note{display:block}
/* central templates (R04): suggested defaults, a booking's several destinations, the hotel order handle */
.settings-suggest-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ui-space-2);margin-bottom:var(--ui-space-2);padding:8px 12px;border:1px dashed var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-info-bg);font-size:var(--ui-font-sm)}
.dest-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dest-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 4px 2px 10px;border-radius:999px;background:var(--ui-info-bg);color:var(--blue-dark);font-size:var(--ui-font-sm)}
.dest-chip>span{overflow-wrap:anywhere}.dest-chip small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.dest-chip button{border:0;background:transparent;color:inherit;font-size:16px;line-height:1;cursor:pointer;padding:0 4px;border-radius:999px}
.dest-chip button:hover,.dest-chip button:focus-visible{background:var(--ui-card)}
.row-drag-handle{cursor:grab;color:var(--ui-text-secondary);padding:0 6px;letter-spacing:-3px;user-select:none}
.row-drag-handle:active{cursor:grabbing}
#vDestination{overflow-wrap:anywhere}
/* a supplier's specializations (R04.14): a readable field in the dialog, one quiet line in the directory */
.agent-spec-row{margin-bottom:var(--ui-space-2)}.agent-spec-row select{max-width:420px}
.agent-spec-note{max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the required fields of a service (R04.10): one compact row of choices under the field groups */
.schema-required-group{grid-column:1/-1}.schema-required-group .schema-group-options{display:flex;flex-wrap:wrap;gap:6px 14px}
.schema-required-option{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:var(--ui-font-sm);cursor:pointer}.schema-required-option input{margin:0}
/* the on-screen financial path (R06.1): figures at a glance, then two columns - the invoice and the costs beside the review */
.bfp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.bfp-kpi{display:grid;gap:2px;padding:8px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);min-width:0}
.bfp-kpi>small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.bfp-kpi>b{font-size:var(--ui-font-md);overflow-wrap:anywhere}
.bfp-kpi[data-tone='due']>b{color:var(--ui-danger)}.bfp-kpi[data-tone='profit']{background:color-mix(in srgb,var(--blue) 6%,var(--ui-card))}
.bfp-kpi[data-tone='review']>b{color:var(--ui-warning);font-size:var(--ui-font-sm)}
.bfp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}.bfp-col{display:grid;gap:12px;min-width:0}
.bfp-row .bfp-sub{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:400}
.bfp-row.has-due .bfp-sub{color:var(--ui-danger)}
@media(max-width:760px){.bfp-cols{grid-template-columns:1fr}}
/* R06.2 - an inline field message never lifts its own input above its neighbours: a form row holding one aligns to the top
   (labels and inputs stay on one line; the message hangs below its field) */
.toura-online :is(.grid2,.grid3,.grid4,.emp-form,.service-dynamic-fields,.service-edit-grid,.flight-edit-row,.passenger-fields-grid,.hotel-compact-grid,.invoice-form-head,.group-form-grid,.guarantee-form-grid,.standalone-service-line):has(.validation-message){align-items:start!important}
.toura-online .validation-message{display:block;margin-top:3px;line-height:1.45}
/* R06.4 - the booking's sections: compact toggles; on = filled, off = quiet. Choosing a section is not completing it (the progress
   panel says that) */
.toura-online #basicSection .inline-checks{display:flex;flex-wrap:wrap;gap:6px}
.toura-online #basicSection .check-chip{flex:0 1 auto;gap:6px;min-height:34px;padding:4px 12px;border-radius:999px;background:var(--ui-card);color:var(--ui-text-secondary);font-size:var(--ui-font-sm);cursor:pointer;transition:background .15s,border-color .15s}
.toura-online #basicSection .check-chip input{position:absolute;opacity:0;width:1px;height:1px}
.toura-online #basicSection .check-chip::before{content:'';width:14px;height:14px;flex:0 0 auto;border:1.5px solid color-mix(in srgb,var(--blue) 45%,var(--ui-line));border-radius:4px;background:var(--ui-card)}
.toura-online #basicSection .check-chip:has(input:checked){border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--ui-card));color:var(--blue-dark);font-weight:var(--ui-weight-strong)}
.toura-online #basicSection .check-chip:has(input:checked)::before{background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;border-color:var(--blue)}
.toura-online #basicSection .check-chip:focus-within{outline:2px solid var(--blue);outline-offset:1px}
.toura-online #basicSection .check-chip .toggle-card-icon{font-size:13px;opacity:.75}
/* R06.6 - the service-details dialog: even groups, one control height, aligned choices */
.toura-online #serviceSchemaFields.schema-field-grid{align-items:stretch}
.toura-online .schema-group-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.toura-online .schema-group .schema-field-option{min-height:36px;border-radius:8px;padding:5px 9px;width:100%}
.toura-online .schema-required-group .schema-group-options{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.toura-online .schema-required-option{min-height:30px;padding:3px 8px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-card)}
.toura-online .schema-required-option:has(input:checked){border-color:var(--ui-danger);color:var(--ui-danger)}
.toura-online .schema-required-option:has(input:disabled){opacity:.45;cursor:not-allowed}
/* R06.7 - a long list scrolls inside its card on a desktop (header kept in view); a phone keeps one page scroll */
@media(min-width:761px){.toura-online #settingsOptions .ui-table-wrap{max-height:min(62vh,640px);overflow:auto}.toura-online #settingsOptions .ui-table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--ui-card)}}
/* master templates round: a long reference list scrolls inside its own card at a controlled height - the search, the add row and the
 * actions above it stay in view (expense categories too); below 761px the rows are cards and the page scrolls (no nested scrollbar) */
@media(min-width:761px){.toura-online #settingsOptions .ui-table-wrap,.toura-online #expenseCategorySettingsList .ui-table-wrap{max-height:min(56vh,520px);overflow:auto;overscroll-behavior:contain}.toura-online #expenseCategorySettingsList .ui-table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--ui-card)}}
/* R06.8 - an amount per currency per line inside a summary tile */
.kpi-money-lines{display:grid;gap:1px;font-weight:var(--ui-weight-strong)}
/* R06.9 - the beneficiary's record: a readable width, one card per currency */
.toura-online .ben-box{width:min(760px,calc(100vw - 24px))}
.ben-curs{display:grid;gap:8px}.ben-cur{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}
.ben-cur-code{font-size:var(--ui-font-sm);color:var(--blue-dark)}.ben-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px 12px}
.ben-figs>span{display:grid;gap:1px}.ben-figs small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.ben-figs [data-tone='due'] bdi{color:var(--ui-danger)}
.ben-box .bfp-head h3 .ui-badge{vertical-align:middle;margin-inline-start:6px}
/* R06.11 - the follow-up header: reference and customer, then destination and dates, the state beside them */
.toura-online .exec-service-modal .modal-toolbar>div:first-child{flex:1 1 auto;min-width:0}
.toura-online #executionFollowupServiceSubtitle{display:flex;flex-wrap:wrap;gap:6px;color:var(--ui-text-secondary);margin-top:2px}.exec-head-sep{opacity:.6}
/* OWNER CORRECTIONS A01 - the side menu: compact rows under each group */
.toura-online #appSidebar .sidebar-submenu>a{min-height:32px;height:auto;padding-block:5px;line-height:1.35}
/* OWNER CORRECTIONS A02 - the bookings page: the open list is unmistakable; the filters show their whole label */
.toura-online #bookingsWorkspaceTabs.bookings-workspace-tabs button.active{background:var(--blue)!important;color:#fff!important;box-shadow:0 1px 4px color-mix(in srgb,var(--blue) 35%,transparent)}
.toura-online #bookingsWorkspaceTabs.bookings-workspace-tabs button:not(.active):hover{color:var(--blue-dark)!important}
.toura-online .bookings-page-title .direct-sales-header-actions{display:flex;flex-wrap:wrap;gap:8px}.toura-online .bookings-page-title .direct-sales-header-actions[hidden]{display:none}
.toura-online #bookingsPage .booking-toolbar{grid-template-columns:minmax(240px,1.6fr) repeat(auto-fill,minmax(150px,1fr))}.toura-online #bookingsPage .booking-toolbar>select{width:100%;min-width:0}
.toura-online #bookingsPage .booking-status-dock:not(:has(.booking-data-tools:not([hidden]))) .dock-label{display:none}
/* A02 - the bookings list fits its card: compact row actions, a destination cell no wider than its text needs */
.toura-online .bookings-unified-table .ui-record-actions{gap:3px;flex-wrap:nowrap}
.toura-online .bookings-unified-table .ui-record-actions .ui-icon-btn{width:30px;height:30px;min-width:30px}
.toura-online .bookings-unified-table td:nth-child(3),.toura-online .bookings-unified-table th:nth-child(3){min-width:96px;max-width:150px;width:auto}
.toura-online .bookings-unified-table tbody tr[draggable="true"]{cursor:pointer}
.toura-online .bookings-unified-table td:nth-child(2),.toura-online .bookings-unified-table th:nth-child(2){min-width:136px}
/* OWNER CORRECTIONS A04 - the day's figures: the number on the same (right) edge as its label, and clearly the stronger line */
.toura-online .dash-stat-copy b{text-align:right;font-size:18px;line-height:1.25}
.toura-online .dash-stat{align-items:center;min-height:58px}
.toura-online .dash-stat-icon{width:32px;height:32px}
.toura-online .dash-block-count{white-space:nowrap}
/* A01 (continuation) - the direct costs tab of the accounting page: only its own list under the page's tabs */
.toura-online #paymentsPage.is-direct-costs>:not(.page-title):not(.payments-view-tabs):not(#directCostsPanel){display:none!important}
.toura-online #paymentsPage:not(.is-direct-costs) #directCostsPanel{display:none}
.direct-costs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--ui-space-2)}.direct-costs-note{margin:0 0 0 auto;color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}
/* the sidebar's treasury subgroup: its caret and its items indented one step */
.toura-online #appSidebar .sidebar-subgroup-items>a{min-height:32px;padding-block:5px}
/* owner's continuation §3 - the assistant's introduction: one small bubble anchored under its entry, an obvious close */
.toura-online .assistant-nav-wrap{position:relative}
.toura-online .assistant-hint.assistant-hint-pop{position:relative;display:block;width:auto;max-width:none;margin:8px 10px 4px;padding:9px 12px 8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--blue) 30%,var(--ui-line));background:var(--ui-card);color:var(--ui-text);box-shadow:0 6px 18px rgba(15,40,55,.12)}
.toura-online .assistant-hint-pop::before{content:'';position:absolute;top:-6px;inset-inline-start:22px;width:10px;height:10px;background:var(--ui-card);border-top:1px solid color-mix(in srgb,var(--blue) 30%,var(--ui-line));border-inline-start:1px solid color-mix(in srgb,var(--blue) 30%,var(--ui-line));transform:rotate(45deg)}
.toura-online .assistant-hint-copy{margin:0 0 6px;font-size:var(--ui-font-xs);line-height:1.6;color:var(--ui-text)}
.toura-online .assistant-hint-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.toura-online .assistant-hint-pop .assistant-hint-text{color:var(--blue);font-weight:700;font-size:var(--ui-font-xs)}
.toura-online .assistant-hint-pop .assistant-hint-close{width:26px;height:26px;border-radius:50%;font-size:16px}
/* OWNER CORRECTIONS A11 - the service-details dialog at the system's density: one header line, compact groups and choices, the
   actions in a footer that stays in view (Save bottom-left, Cancel beside it on the right); a phone gets one column */
.toura-online #serviceSchemaModal .modal-box{width:min(640px,calc(100vw - 24px));max-width:640px!important;max-height:calc(100dvh - 32px)!important;display:flex!important;flex-direction:column;padding:0!important;overflow:hidden!important}
.toura-online .ssm-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 4px}
.toura-online .ssm-head h3{margin:0;font-size:15px;font-weight:var(--ui-weight-strong);color:var(--ui-heading)}
.toura-online .ssm-x{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ui-text-secondary);font-size:18px;line-height:1;cursor:pointer}
.toura-online .ssm-x:hover,.toura-online .ssm-x:focus-visible{background:var(--ui-surface-subtle);color:var(--ui-text)}
.toura-online #serviceSchemaModal .card-body{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 16px 12px}
.toura-online .ssm-head,.toura-online .ssm-foot{flex:0 0 auto}
.toura-online .ssm-help{margin:0 0 8px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.toura-online #serviceSchemaFields.schema-field-grid{gap:8px;margin-top:0}
.toura-online #serviceSchemaModal .schema-group{padding:4px 8px 8px;border-radius:8px}
.toura-online #serviceSchemaModal .schema-group>legend{font-size:11px;padding:0 4px}
.toura-online #serviceSchemaModal .schema-group-options{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px}
.toura-online #serviceSchemaModal .schema-group .schema-field-option{min-height:30px;padding:3px 8px;gap:6px;border-radius:7px}
.toura-online #serviceSchemaModal .schema-field-text b{font-size:12px;font-weight:600}
.toura-online #serviceSchemaModal .schema-field-text small{font-size:10px}
.toura-online #serviceSchemaModal .schema-field-check{width:14px;height:14px;border-radius:4px}
.toura-online #serviceSchemaModal .schema-required-group .field-help{display:block;margin:0 0 4px;font-size:10.5px}
.toura-online #serviceSchemaModal .schema-required-option{min-height:26px;padding:2px 7px;font-size:11.5px;gap:5px}
.toura-online .ssm-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--ui-line);background:var(--ui-card)}
.toura-online .ssm-foot .btn{min-height:34px}
@media(max-width:620px){.toura-online #serviceSchemaModal .schema-group-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* OWNER CORRECTIONS A05 (Online) - the alert blocks sit in even pairs: two equal columns whose cards share a row height, never
   a 3 + 1 wrap with a lone block underneath; one column on a narrow screen */
.toura-online .notif-grid.is-grouped{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.toura-online .notif-grid.is-grouped>.notif-block:only-child{grid-column:1/-1}
@media(max-width:900px){.toura-online .notif-grid.is-grouped{grid-template-columns:minmax(0,1fr)}}
/* OWNER CORRECTIONS B03 / B04 (Online) - a reversed / refunded payment inside a document: named, its amount kept, quietly set apart */
.toura-online .pay-doc-state{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--ui-text-secondary)}
.toura-online .pay-doc-state.is-reversed b{color:var(--ui-danger)}
.toura-online .pay-doc-state.is-partial-refund b,.toura-online .pay-doc-state.is-refunded b{color:var(--ui-warning,#a15c00)}
.toura-online .invoice-pay-row.is-reversed{background:var(--ui-surface-subtle,rgba(0,0,0,.03))}
.toura-online .invoice-pay-row.is-reversed>span{color:var(--ui-text-secondary)}
.toura-online .pay-doc-state-row.is-reversed b{color:var(--ui-danger)}
.toura-online .pay-direction{display:block}
/* OWNER CORRECTIONS B07 (Online) - the payments list carries both dates; it stays inside its card: compact row actions, and the
   amount's explanatory line wraps under the figure instead of widening the column */
.toura-online #paymentsPage .accounting-table .ui-record-actions .ui-icon-btn{width:30px;height:30px;min-width:30px}
.toura-online #paymentsPage .accounting-table .ui-record-actions{gap:2px}
.toura-online #paymentsPage .accounting-table td.report-cell--amount{max-width:150px}
.toura-online #paymentsPage .accounting-table td.report-cell--amount small{white-space:normal}
.toura-online #paymentsPage .accounting-table th{white-space:normal;line-height:1.25}
.toura-online #paymentsPage .accounting-table th,.toura-online #paymentsPage .accounting-table td{padding-inline:8px}
/* FINAL ACCEPTANCE §3 (Online) - «الحجوزات والمبيعات»: one search in the header, the filters on one row on a wide screen, the list's
   count, filters in force and actions above the table, the status as a lifecycle badge + the invoice's state, then quiet tags */
.toura-online #bookingsPage .booking-search-box,.toura-online #directSalesSearch{display:none!important}
.toura-online .bookings-page-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toura-online .bookings-global-search{flex:1 1 320px;max-width:560px;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-card)}
.toura-online .bookings-global-search svg{width:16px;height:16px;flex:0 0 auto;stroke:var(--ui-text-secondary);fill:none;stroke-width:2;stroke-linecap:round}
.toura-online .bookings-global-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;color:var(--ui-text)}
.toura-online .bookings-global-search:focus-within{border-color:var(--ui-primary,#0e5c8a);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary,#0e5c8a) 14%,transparent)}
.toura-online .bookings-page-title .booking-title-add,.toura-online .bookings-page-title .direct-sales-header-actions{margin-inline-start:auto}
.toura-online #bookingsPage .booking-toolbar{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.toura-online #bookingsPage .booking-status-dock{display:none}
.toura-online .bookings-list-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.toura-online .bookings-list-count{font-size:var(--ui-font-sm);color:var(--ui-heading);white-space:nowrap}
.toura-online .bookings-active-filters{flex:1 1 auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--ui-text-secondary)}
.toura-online .bookings-active-filters .filter-chip{padding:2px 8px;border-radius:999px;background:var(--ui-surface-subtle,#eef3f7);color:var(--ui-text)}
.toura-online .bookings-list-actions{display:flex;gap:6px;margin-inline-start:auto}
.toura-online .bookings-list-actions .btn{display:inline-flex;align-items:center;gap:6px;min-height:32px}
.toura-online .bookings-list-actions .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.toura-online .booking-status-cell.is-layered{display:flex;flex-direction:column;align-items:center;gap:3px}
.toura-online .booking-status-cell.is-layered .booking-status-badges{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.toura-online .booking-trip-dates{white-space:nowrap}
.toura-online #bookingsWorkspaceTabs .tab-count{margin-inline-start:4px;font-size:11px;opacity:.85}
@media(max-width:720px){.toura-online .bookings-global-search{order:3;flex-basis:100%;max-width:none}}
/* FINAL ACCEPTANCE §5.1 (Online) - a count reads as Arabic does: «1 حجز», «16 حدثًا · 2 يحتاج إجراء» (the number stays isolated) */
.toura-online .dash-block-count{direction:rtl}
/* §5.3 / §6 - the follow-up actions under an alert or a booking group: small, quiet, one line */
.toura-online .notif-actions{display:flex;flex-wrap:wrap;gap:6px;padding:4px 8px 8px}
.toura-online .notif-act{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:2px 9px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--ui-text);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.toura-online .notif-act svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.toura-online .notif-act:hover,.toura-online .notif-act:focus-visible{background:var(--ui-surface-subtle,#eef3f7)}
.toura-online .notif-act.is-whatsapp{color:#128c4a;border-color:color-mix(in srgb,#128c4a 35%,var(--ui-line))}
.toura-online .notif-act.is-done{color:var(--ui-success,#1a7f4b);border-color:color-mix(in srgb,var(--ui-success,#1a7f4b) 35%,var(--ui-line))}
/* FINAL ACCEPTANCE §7.3 (Online) - the reversal / refund / correction dialog: reference, amount and state as three framed, labelled
   blocks, right-aligned, each value isolated (a PAY code can no longer run into the amount) */
.toura-online .financial-lifecycle-context{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:8px;margin:10px 0}
.toura-online .financial-lifecycle-context>div{min-width:0;padding:8px 10px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-surface-subtle,#f5f8fa);text-align:right}
.toura-online .financial-lifecycle-context>div>small{display:block;margin-bottom:3px;font-size:11px;color:var(--ui-text-secondary)}
.toura-online .financial-lifecycle-context b{display:block;text-align:right;overflow-wrap:anywhere;font-size:13px;color:var(--ui-heading)}
.toura-online #financialLifecycleReference{unicode-bidi:isolate}
.toura-online #financialLifecycleAmount small{display:block;margin-top:2px;font-size:11px;font-weight:500;color:var(--ui-text-secondary)}
@media(max-width:560px){.toura-online .financial-lifecycle-context{grid-template-columns:minmax(0,1fr)}}
/* FINAL ACCEPTANCE §8.1 / §8.2 (Online) - the payee's name and phone centred in their cell; the payee's file sized to its content */
.toura-online .beneficiaries-table td.report-cell--entity,.toura-online .beneficiaries-table th.report-cell--entity{text-align:center}
.toura-online .ben-name-cell{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.toura-online .ben-name-cell .cell-note{font-size:11px;color:var(--ui-text-secondary)}
.toura-online #beneficiaryProfileModal .ben-box{width:min(640px,calc(100vw - 24px));max-width:640px}
.toura-online #beneficiaryProfileModal .ben-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
/* FINAL ACCEPTANCE §10.7 (Online preview) - hotels and services read as comfortably as the flights (which carry 13px headings and
   17px codes); the notes a step darker. Nothing else on the voucher changes size */
.toura-online .modern-voucher .mv-hotel-id>b{font-size:14px;font-weight:800}
.toura-online .modern-voucher .mv-hotel-id>small{font-size:12.5px}
.toura-online .modern-voucher .mv-hotel-stay,.toura-online .modern-voucher .mv-hotel-stay bdi,.toura-online .modern-voucher .mv-hotel-stay em{font-size:12.5px}
.toura-online .modern-voucher .mv-service-card>b{font-size:13px;font-weight:800}
.toura-online .modern-voucher .mv-service-card bdi{font-size:12.5px;color:#26363d}
.toura-online .modern-voucher .mv-note-box{font-size:12.5px;color:#26363d}
.toura-online .modern-voucher .v-terms{color:#33454c}
/* FINAL ACCEPTANCE §4.1 (Online) - the booking form sizes a field by what it holds: a traveller's or a hotel's long name gets the
   room (it was cut at ~265px / ~200px), a category, a passport number and a date only what they need; the customer's name twice the
   phone. Narrow screens keep their existing stacked layouts. */
@media(min-width:1101px){
 .toura-online .passenger-fields-grid{grid-template-columns:84px minmax(220px,3fr) minmax(110px,1fr) 140px 140px}
 .toura-online #editorPage .grid3:has(#customer){grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
 .toura-online .hotel-smart-card .grid4:has(.hotel-name-field){grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) minmax(150px,1fr) minmax(150px,1fr)}
}
/* PRE-MERGE ADDENDUM (owner, Online) - the statement / report tables: «البيان» and the other text columns are centred like every other
   column, header and body, so the table reads as one tidy grid. Shared rule of the central report table (the semantic classes) - not a
   per-report patch; wrapping and widths unchanged. Offline keeps its documented start alignment. */
.toura-online .central-report-table th.report-cell--description,.toura-online .central-report-table td.report-cell--description,
.toura-online .central-report-table th.report-cell--text,.toura-online .central-report-table td.report-cell--text{text-align:center}
/* POST-MERGE (owner): the in-page tables' «البيان» (UIComponents.table tags it report-cell--description Online) - centred the same way,
 * header and every line of a wrapped description */
.toura-online .ui-data-table th.report-cell--description,.toura-online .ui-data-table td.report-cell--description{text-align:center}
.toura-online .ui-data-table td.report-cell--description{white-space:normal;overflow-wrap:anywhere}
/* a description cell's link is often a BLOCK button (.expense-title-link): text-align centres its lines but not the box - which kept a
 * short description on the right edge; the box is centred in the column too */
.toura-online .ui-data-table td.report-cell--description :is(.table-link,button){text-align:center;margin-inline:auto;max-width:100%}
/* PRE-MERGE (owner, alert follow-up) - «متابعة مجدولة · date»: the follow-up an alert already has, quiet, beside its actions */
.toura-online .notif-followup-chip{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--ui-primary,#0e5c8a) 10%,transparent);color:var(--ui-primary,#0e5c8a);font-size:11.5px;font-weight:700}
.toura-online .notif-followup-chip svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
/* PRE-MERGE (owner) - «الحجوزات والمبيعات» header: title right, «إنشاء حجز جديد» left, the search centred between them at about its
   former width with a balanced gap on both sides (grid, no margins); on a phone the search takes its own row */
/* both tabs share the header: the two side columns are equal and at least as wide as the title and either tab's primary action
   («إنشاء حجز جديد» / «إضافة فاتورة بدون حجز»), so the search stays on the page's centre and does not move when the tab changes -
   nor when one list is long enough for a scrollbar and the other is not (the gutter is kept on this page) */
html.toura-online:has(#bookingsPage:not(.hidden)){scrollbar-gutter:stable}
.toura-online .bookings-page-title{display:grid;grid-template-columns:minmax(15rem,1fr) minmax(0,480px) minmax(15rem,1fr);align-items:center;column-gap:24px;row-gap:12px}
.toura-online .bookings-page-title>div:first-child{grid-column:1;grid-row:1;min-width:0}
.toura-online .bookings-page-title .bookings-global-search{grid-column:2;grid-row:1;justify-self:center;width:100%;max-width:none}
.toura-online .bookings-page-title .booking-title-add,.toura-online .bookings-page-title .direct-sales-header-actions{grid-column:3;grid-row:1;margin-inline-start:0;justify-self:end}
.toura-online .bookings-page-title .booking-title-add,.toura-online .bookings-page-title .direct-sales-header-actions .btn{white-space:nowrap;min-height:var(--ui-control);padding-inline:var(--ui-space-4);font-weight:var(--ui-weight-heavy)}
.toura-online .bookings-page-title .direct-sales-header-actions{display:flex}
/* narrower (tablet, a laptop with the sidebar open): organised rows before the search is squeezed - the title on the right and the
   tab's primary action on the left, the search at full width under them; the tabs stay below the header */
@media(max-width:1279px){
 .toura-online .bookings-page-title{grid-template-columns:minmax(0,1fr) auto}
 .toura-online .bookings-page-title .bookings-global-search{grid-column:1/-1;grid-row:2}
 .toura-online .bookings-page-title .booking-title-add,.toura-online .bookings-page-title .direct-sales-header-actions{grid-column:2;grid-row:1}
}
/* phone: one column - the title, the search, then the primary action at full width (never beside the title) */
@media(max-width:600px){
 .toura-online .bookings-page-title{grid-template-columns:minmax(0,1fr)}
 .toura-online .bookings-page-title .bookings-global-search{grid-column:1}
 .toura-online .bookings-page-title .booking-title-add,.toura-online .bookings-page-title .direct-sales-header-actions{grid-column:1;grid-row:3;justify-self:stretch;justify-content:center}
 .toura-online .bookings-page-title .direct-sales-header-actions .btn{flex:1;justify-content:center}
}
/* the list's count: one compact caption + value beside the filters in force, level with the actions on the other side */
.toura-online .list-count{display:inline-flex;align-items:baseline;gap:6px;padding:4px 11px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);white-space:nowrap}
.toura-online .list-count small{font-size:11.5px;color:var(--ui-text-secondary)}
.toura-online .list-count b{font-size:13px;color:var(--ui-heading)}
/* PRE-MERGE (owner) - the list toolbar: the count on the right, the actions on the left, one row while it fits; every button keeps its
   label on one line and, when the row is too narrow, the buttons wrap whole (main.css's full-width / flex:1 rules are Offline's) */
.toura-online .bookings-list-head .bookings-list-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0;margin-inline-start:auto;padding:0;border:0;background:transparent;width:auto}
.toura-online .bookings-list-head .bookings-list-actions .btn{flex:0 0 auto;min-height:34px;padding-inline:12px;font-size:13px;font-weight:600;white-space:nowrap}
/* PRE-MERGE (owner) - suggestion lists (airports, airlines, hotels, cities, suppliers, customers: one shared component). Each field's
   wrapper is its own stacking context (z-index 8), so a field further down painted over the list of the field above it. The field
   being used rises above its neighbours - only while it is in use, not a global escalation; the list keeps clear of sticky chrome
   (App.fitSuggestionLists / chromeEdge) and the airport list is wide enough for a full airport name without a sideways scrollbar. */
.toura-online .client-autocomplete:focus-within,.toura-online .airport-autocomplete:focus-within,.toura-online .booking-suggest:focus-within{z-index:30}
.toura-online .airport-suggestions{left:auto;min-width:min(300px,calc(100vw - 32px));max-width:min(380px,calc(100vw - 32px));overflow-x:hidden}
/* the booking editor on a phone: its single grid column took the min-content width of the services step (523px at 375) and the
   whole page scrolled sideways under the suggestion lists - a grid item may shrink to its column */
.toura-online #editorPage .editor-main>*{min-width:0}
.toura-online .airport-suggestions button.is-active{background:var(--ui-row-hover)}
/* PRE-MERGE (owner) - «الحجز ملغي» above the booking editor (the voucher says «حجز ملغي» in its own status field only) */
.toura-online .editor-void-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 12px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--ui-danger,#b42336) 45%,transparent);border-inline-start:4px solid var(--ui-danger,#b42336);border-radius:10px;background:color-mix(in srgb,var(--ui-danger,#b42336) 7%,var(--ui-card,#fff))}
.toura-online .editor-void-banner b{color:var(--ui-danger,#b42336);font-size:15px}
.toura-online .editor-void-banner span{color:var(--ui-text);font-size:13px}
.toura-online .editor-void-banner small{flex-basis:100%;color:var(--ui-text-secondary);font-size:12px}
/* a confirmation that lists reasons (one per line) keeps its lines; messages without line breaks read as before */
.toura-online .system-confirm-body p{white-space:pre-line}
/* PRE-MERGE (owner) - the voucher flight card: the tickets badge beside the cabin badge, the same quiet tag */
.mv-tag.is-tickets{border-color:#d9b65c;background:#fbf0cf;color:#3d2e05;font-weight:800;white-space:nowrap}
/* FINAL PRE-MERGE MICRO-CORRECTIONS (owner) - the two «إلغاء الحجز» dialogs: a structured body (ModalManager `extra`) read from the
   start of the line, the figures as a short list, the reason's label on its own line above a full-width field */
.system-dialog-extra{margin:-8px 0 16px;text-align:start}
.system-prompt-label{display:block;margin:0 0 6px;text-align:start;font-weight:700;font-size:13.5px;color:var(--ui-text)}
.system-confirm-box[data-variant='booking-cancel'],.system-confirm-box[data-variant='booking-cancel-blocked']{width:min(560px,calc(100vw - 24px));max-width:560px}
.system-confirm-box[data-variant='booking-cancel'] [data-prompt-input]{width:100%;min-height:44px;margin-bottom:16px}
.system-confirm-box[data-variant='booking-cancel-blocked'] [data-confirm-message]{margin-bottom:14px}
.bc-impact{border:1px solid var(--ui-line);border-radius:10px;overflow:hidden}
.bc-impact>h4{margin:0;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--ui-text-secondary);background:var(--ui-soft,#f4f7f8);border-bottom:1px solid var(--ui-line)}
.bc-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.bc-fig{display:grid;gap:2px;padding:8px 12px;border-bottom:1px solid var(--ui-line);min-width:0}
.bc-fig:nth-child(odd){border-inline-end:1px solid var(--ui-line)}
.bc-fig dt{font-size:12px;color:var(--ui-text-secondary)}
.bc-fig dd{margin:0;font-size:14.5px;font-weight:700;color:var(--ui-text);overflow-wrap:anywhere}
.bc-fig dd small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--ui-text-secondary)}
.bc-fig[data-tone='due'] dd{color:var(--ui-danger,#b42336)}.bc-fig[data-tone='loss'] dd{color:var(--ui-danger,#b42336)}
.bc-fig[data-tone='profit'],.bc-fig[data-tone='loss'],.bc-fig[data-tone='review']{grid-column:1/-1;border-inline-end:0;border-bottom:0;background:color-mix(in srgb,var(--blue,#0e5c8a) 6%,transparent)}
.bc-fig[data-tone='review'] dd{color:var(--ui-warning,#a15c00);font-size:13.5px}
.bc-guide{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:10px;padding:9px 12px;border-radius:10px;background:var(--ui-info-bg,#eaf3f8)}
.bc-guide p,.system-confirm-body .bc-guide p{margin:0;max-width:none;flex:1 1 220px;font-size:13px;line-height:1.6;text-align:start;color:var(--ui-text)}
.bc-guide .btn{display:inline-flex;align-items:center;gap:6px}.bc-guide .btn svg{width:15px;height:15px}
.system-confirm-body .bc-note,.bc-note{margin:8px 0 0;max-width:none;font-size:12.5px;line-height:1.6;text-align:start;color:var(--ui-text-secondary)}
.bc-blockers{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.bc-blocker{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--ui-danger,#b42336) 30%,var(--ui-line));border-inline-start:4px solid var(--ui-danger,#b42336);border-radius:10px;background:var(--ui-card,#fff)}
.bc-blocker>div{display:grid;gap:2px;min-width:0}
.bc-blocker b{font-size:14px;color:var(--ui-text);overflow-wrap:anywhere}
.bc-blocker small{font-size:12px;color:var(--ui-text-secondary);line-height:1.5}
.bc-blocker .btn{flex:0 0 auto}
.bc-more{margin-top:10px}
.bc-more>summary{cursor:pointer;padding:6px 2px;font-size:13px;font-weight:700;color:var(--ui-text-secondary)}
.bc-more[open]>summary{margin-bottom:6px}
.bc-more .bc-blocker{border-inline-start-color:var(--ui-warning,#a15c00);border-color:var(--ui-line)}
@media(max-width:480px){.bc-blocker{flex-direction:column;align-items:stretch}.bc-blocker .btn{justify-content:center}}
@media(max-width:340px){.bc-figures{grid-template-columns:1fr}.bc-fig:nth-child(odd){border-inline-end:0}}
/* PRE-MERGE (owner) - «المسار المالي للحجز», the approved layout: a clear title over «VCH | العميل» on one row; the invoice reference in
   its total; the invoice's money actions under «الفاتورة والتحصيل»; the supplier invoice on its own; commissions and costs compact;
   the profitability print as a report; the cost-completeness confirmation with room around it. Presentation only. */
.toura-online .bfp-head h3{font-size:20px;font-weight:800;line-height:1.3}
.toura-online .bfp-head>div:first-child{flex:1 1 auto;min-width:0}
.toura-online .bfp-head .party-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:2px;font-size:13px}
.toura-online .bfp-head .party-name{min-width:0;overflow-wrap:anywhere}
.toura-online .bfp-head .party-code{font-weight:700;color:var(--ui-heading)}
.toura-online .bfp-head .party-code+.party-name::before{content:'|';margin-inline-end:8px;color:var(--ui-line-strong,#b8c4c9)}
/* FINAL PRE-MERGE MICRO-CORRECTIONS (owner) - four balanced, centred tiles with a quiet icon; the invoice reference centred under its total */
.toura-online .bfp-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.toura-online .bfp-kpi{justify-items:center;text-align:center;align-content:start;padding:10px 10px 9px}
.toura-online .bfp-kpi-label{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.toura-online .bfp-kpi-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--ui-soft,#f1f5f7);color:var(--ui-text-secondary)}
.toura-online .bfp-kpi-icon svg{width:13px;height:13px}
.toura-online .bfp-kpi[data-tone='due'] .bfp-kpi-icon{background:var(--ui-danger-bg,#fdecee);color:var(--ui-danger,#b42336)}
.toura-online .bfp-kpi-ref{font-size:11.5px;color:var(--ui-text-secondary);unicode-bidi:isolate;text-align:center}
@media(max-width:599px){.toura-online .bfp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the profitability print alone at the bottom: a report action (a quiet report tint), never among the money actions */
.toura-online .bfp-foot{display:flex;justify-content:flex-end;padding-top:10px;border-top:1px solid var(--ui-line)}
.toura-online .bfp-foot .btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding-inline:14px;font-weight:700;border-color:color-mix(in srgb,var(--ui-info,#2f6f9f) 35%,var(--ui-line));background:var(--ui-info-bg,#eaf3f8);color:var(--ui-info,#2f6f9f)}
.toura-online .bfp-foot .btn svg{width:15px;height:15px}
@media(max-width:600px){.toura-online .bfp-foot .btn{flex:1;justify-content:center}}
.toura-online .bfp-cols{margin-top:4px}
.toura-online .bfp-act-pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.toura-online .bfp-act-pay .btn{flex:1 1 auto;justify-content:center;min-height:34px}
/* «الموردون والتكاليف» in the invoice column: the supplier action on its own line, the commissions and costs a compact grid */
.toura-online .bfp-ops{gap:8px;margin-top:14px}
.toura-online .bfp-ops .bfp-details{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm)}
.toura-online .bfp-act-supplier{display:flex;flex-wrap:wrap;gap:6px}
.toura-online .bfp-act-supplier .btn{flex:1 1 auto;justify-content:center;min-height:36px;padding-inline:14px;border-color:color-mix(in srgb,var(--ui-primary,#0e5c8a) 40%,var(--ui-line));background:color-mix(in srgb,var(--ui-primary,#0e5c8a) 7%,var(--ui-card));color:var(--ui-primary,#0e5c8a);font-weight:700}
.toura-online .bfp-act-costs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.toura-online .bfp-act-costs .btn{justify-content:center;min-height:32px;padding-inline:8px;font-size:12.5px}
.toura-online .bfp-review .bfp-details{margin-top:6px}
/* «تأكيد اكتمال التكاليف» belongs to the review: centred under it, with room above and below */
.toura-online .bfp-review .bfp-review-action{justify-content:center;margin-top:8px;padding:0}
.toura-online .bfp-review .bfp-review-action .btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding-inline:18px;font-weight:700}
.toura-online .bfp-review .bfp-review-action .btn svg{width:16px;height:16px}
@media(max-width:380px){.toura-online .bfp-act-costs{grid-template-columns:1fr}}
/* ADDENDUM (owner) - the two cancellation fees: one compact, centred dialog each over the existing commands */
.cf-box{width:min(520px,calc(100vw - 24px));max-width:520px;padding:0!important;display:grid}
.cf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 10px;border-bottom:1px solid var(--ui-line)}
.cf-head h3{margin:0;font-size:18px;font-weight:800}
.cf-body{display:grid;gap:12px;padding:14px 18px}
.cf-ref{margin:0;font-size:13.5px;color:var(--ui-text-secondary)}.cf-ref bdi,.cf-ref b{white-space:nowrap}.cf-ref b{color:var(--ui-heading,var(--ui-text))}
.cf-tag{display:inline-block;padding:0 8px;border-radius:999px;background:var(--ui-danger-bg,#fdecee);color:var(--ui-danger,#b42336);font-size:12px;font-weight:700}
.cf-now{border:1px solid var(--ui-line);border-radius:10px;overflow:hidden}
.bc-figures.cf-now{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.cf-now .bc-fig{border-bottom:0;border-inline-end:1px solid var(--ui-line)}.cf-now .bc-fig:last-child{border-inline-end:0}
.cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.cf-grid label{display:grid;gap:4px;font-size:12.5px;font-weight:700;color:var(--ui-text);min-width:0}
.cf-grid input,.cf-grid select{width:100%;min-height:38px}
.cf-grid .cf-wide{grid-column:1/-1}
.cf-preview{font-size:13px;line-height:1.6;color:var(--ui-text)}.cf-preview:empty{display:none}
.cf-preview p{margin:0 0 4px;padding:8px 10px;border-radius:8px;background:var(--ui-info-bg,#eaf3f8)}.cf-preview span{color:var(--ui-text-secondary)}
.cf-error{margin:0;padding:8px 10px;border-radius:8px;background:var(--ui-danger-bg,#fdecee);color:var(--ui-danger,#b42336);font-size:13px}
.cf-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--ui-line)}
.cf-actions .btn{min-width:110px;justify-content:center}
.bc-guide p small{display:block;margin-top:2px;font-size:12px;color:var(--ui-text-secondary)}
@media(max-width:480px){.cf-actions .btn{flex:1}.cf-body{padding:12px 14px}.cf-head{padding:12px 14px 8px}}
@media(max-width:340px){.cf-grid{grid-template-columns:1fr}.cf-grid .cf-wide{grid-column:auto}}
/* BV-6 - the customer's final charge confirmed in so many words; a note that is a financial fact, not a hint */
.bc-warn,.system-confirm-body .bc-warn{margin:10px 0 0;max-width:none;padding:8px 10px;border-radius:8px;background:var(--ui-warning-bg,#fff4e0);color:var(--ui-warning,#8a5300);font-size:12.5px;line-height:1.6;text-align:start}
.bc-confirm{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:9px 11px;border:1px solid var(--ui-line);border-radius:10px;font-size:13px;line-height:1.6;text-align:start;cursor:pointer}
.bc-confirm input{margin-top:4px;flex:0 0 auto;width:16px;height:16px}
/* POST-MERGE (owner) - the place an alert opened: marked for a moment, never moved or re-laid-out */
.alert-focus-target{outline:2px solid var(--ui-warning,#c77c02);outline-offset:3px;border-radius:8px;transition:outline-color .6s ease}
@media (prefers-reduced-motion: reduce){.alert-focus-target{transition:none}}
/* POST-MERGE (owner) - the Notification Centre header: the view switch on the right; «غير مقروء من» and «قراءة الكل» together on the left
   (the «يحتاج إجراء» count is on each block and each booking, not repeated above them) */
.toura-online .notif-toolbar{justify-content:flex-start}
.toura-online .notif-toolbar .notif-toolbar-count{margin-inline-start:auto}

/* POST-MERGE (owner) - «الرحلات الجارية» stays (an overview, not an alert): ONE trip is one balanced row across the block - name and
   state, destination, dates, travellers, reference - not a narrow card lost in an empty panel; SEVERAL are an even grid; phones stack */
.toura-online [data-block="trips"] .dash-cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.toura-online [data-block="trips"] .dash-cards>.followup-vnext-booking:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto auto auto;align-items:center;column-gap:18px;row-gap:4px;text-align:start}
.toura-online [data-block="trips"] .dash-cards>.followup-vnext-booking:only-child>*{margin:0;min-width:0}
.toura-online [data-block="trips"] .dash-cards>.followup-vnext-booking:only-child>header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toura-online [data-block="trips"] .followup-vnext-empty{padding:14px 12px;text-align:center}
@media(max-width:700px){.toura-online [data-block="trips"] .dash-cards>.followup-vnext-booking:only-child{grid-template-columns:1fr;row-gap:2px}}
.toura-online [data-block="trips"] .followup-vnext-booking header b{white-space:normal;overflow-wrap:anywhere;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
/* POST-MERGE (owner) - «إرسال طلب للوكيل»: compact one-line service rows (kind · name · dates · checkbox), and the send action in the
 * dialog's own footer, outside the scrolling body, so it stays reachable however long the message is */
/* ModalManager writes display:block + overflow:auto on every box inline (the #serviceSchemaModal footer meets it the same way) */
.modal.supplier-mail-modal>.modal-box.sm-box{display:flex!important;flex-direction:column;overflow:hidden!important;max-height:calc(100dvh - 32px)!important}
.sm-box>.sm-body{flex:1 1 auto}
.sm-foot{flex:0 0 auto;display:grid;gap:6px;padding:10px 18px;border-top:1px solid var(--ui-line);background:var(--ui-card)}
.sm-foot:empty{display:none}
.sm-foot .sm-feedback:empty{display:none}
.sm-foot .sm-actions{justify-content:flex-end}
.sm-services{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));justify-content:stretch;gap:6px}
.sm-service{align-items:center;gap:8px;padding:6px 10px;border-radius:10px;min-height:40px}
.sm-service>span{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;min-width:0}
.sm-service-kind{flex:0 0 auto;padding:0 7px;line-height:1.6}
.sm-service b,.sm-service small{line-height:1.4}
.sm-service input[type=checkbox]{margin:0}
.sm-section textarea{min-height:180px}
.sm-pending-note{flex-basis:100%;color:var(--ui-warning,#a35f00)!important}
.sm-again-btn{margin-inline-start:auto}
.sm-sum-state{display:inline-block;margin-inline-start:8px;padding:0 8px;border-radius:999px;font-size:10.5px;font-weight:700;line-height:1.7;background:var(--ui-soft);color:var(--ui-text-secondary)}
.sm-sum-state[data-status=sent]{background:var(--ui-success-bg,#e7f6ee);color:var(--ui-success,#17794a)}
.sm-sum-state[data-status=failed]{background:var(--ui-danger-bg);color:var(--ui-danger)}
@media (max-width:760px){.sm-foot{padding-inline:12px}.sm-services{grid-template-columns:minmax(0,1fr)}.sm-again-btn{margin-inline-start:0}}
/* POST-MERGE (owner, Online) - the traveller row reads name · category · passport · birth · expiry; the category is wide enough for its
 * label, the name no longer takes half the row, and the cells align at the top: the linked-customer note under the name (align-items:end)
 * lifted that one input above the others */
.toura-online .passenger-fields-grid{align-items:start}
.toura-online .passenger-fields-grid>.pf-name{order:-1}
@media(min-width:1101px){.toura-online .passenger-fields-grid{grid-template-columns:minmax(200px,2.1fr) 116px minmax(120px,1.1fr) 150px 150px}}
@media(min-width:641px) and (max-width:1100px){.toura-online .passenger-fields-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.3fr)}}
/* POST-MERGE (owner) - «منشئ العروض» / «متابعة التنفيذ» are links now (an address: new tab, deep link); they keep their button look */
a.topbar-quick-btn,.sidebar-phone-tools a.sidebar-nav-item{text-decoration:none;box-sizing:border-box}
.sidebar-phone-tools a.sidebar-nav-item{color:inherit}
/* POST-MERGE (owner, Online) - the voucher's status field in restrained semantic colours (screen, print and PDF): no stamp, no banner */
.mv-status[data-tone]{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mv-status[data-tone=confirmed],.mv-status[data-tone=paid]{color:var(--ui-success,#166b43)}
.mv-status[data-tone=unpaid]{color:#9a5b05}
.mv-status[data-tone=partial]{color:#b4400c}
.mv-status[data-tone=void]{color:var(--ui-danger,#b42336)}
/* POST-MERGE (owner, Online) - «إضافة موظف»: compact RTL groups - A identity / contact on one row, B classification and dates on one row
 * (no lone «الحالة»), C contract / salary / currency / leave, D system account, E bank transfer, F notes; Arabic placeholders read from
 * the right even in an LTR field; no number spinners over the salary; and the form dialogs' save action at the lower LEFT */
.toura-online #employeeModal .emp-form>.emp-subhead{grid-column:1/-1;margin:var(--ui-space-2) 0 0;padding-top:var(--ui-space-2);border-top:1px solid var(--ui-line);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-filter);color:var(--ui-muted)}
.toura-online #employeeModal .emp-form>div:has(>#employeeName){grid-column:span 5}
.toura-online #employeeModal .emp-form>div:has(>#employeePhone){grid-column:span 3}
.toura-online #employeeModal .emp-form>div:has(>#employeeJobTitle){grid-column:span 3}
.toura-online #employeeModal .emp-form>div:has(>.emp-pillset #employeeIsOwner){grid-column:span 4}
.toura-online #employeeModal .emp-form>div:has(#employeeJoinDate){grid-column:span 3}
.toura-online #employeeModal .emp-form>div:has(>#employeeStatus){grid-column:span 2}
.toura-online #employeeModal .emp-form{align-items:end;row-gap:10px}
.toura-online #employeeModal .emp-collapse>summary{font-size:var(--ui-font-xs)}
.toura-online #employeeModal input[dir=ltr]:placeholder-shown{direction:rtl;text-align:right}
.toura-online #employeeModal input::placeholder,.toura-online #employeeModal textarea::placeholder{text-align:right}
.toura-online #employeeModal input[type=number]{-moz-appearance:textfield;appearance:textfield}
.toura-online #employeeModal input[type=number]::-webkit-inner-spin-button,.toura-online #employeeModal input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.toura-online .modal .settings-save-row{justify-content:flex-end}
@media(max-width:760px){.toura-online #employeeModal .emp-form>div:is(:has(>#employeeName),:has(>#employeePhone),:has(>#employeeJobTitle),:has(>.emp-pillset #employeeIsOwner),:has(#employeeJoinDate),:has(>#employeeStatus)){grid-column:1/-1}}
/* POST-MERGE (owner, Online) - the expense form reads in the office's order: date · beneficiary · category, the description across the row,
 * currency · total (· how it is recorded), the tax fields, then notes; short selectors narrow, the description and notes wide. The rows
 * are one grid (display:contents) so the order is visual only - the same fields, ids, validation and saving; a phone stacks them */
.toura-online #expenseModal .expense-form-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 12px;align-items:start}
.toura-online #expenseModal .expense-form-row{display:contents}
.toura-online #expenseModal .expense-form-row>div{min-width:0}
.toura-online #expenseModal .expense-form-row>div.hidden{display:none}
.toura-online #expenseModal .expense-form-row>div:has(#expenseDate){order:1}
.toura-online #expenseModal .expense-form-row>div:has(#expenseBeneficiary){order:2}
.toura-online #expenseModal .expense-form-row>div:has(#expenseCategory){order:3}
.toura-online #expenseModal .expense-form-row>div:has(#expenseTitle){order:4}
.toura-online #expenseModal .expense-form-row>div:has(#expenseCurrency){order:5}
.toura-online #expenseModal .expense-form-row>div:has(#expenseAmount){order:6}
.toura-online #expenseModal .expense-form-row>#expenseRecordModeWrap{order:7}
.toura-online #expenseModal .expense-form-row>div:has(#expenseTaxAmount){order:8}
.toura-online #expenseModal .expense-form-row>div:has(#expenseTaxCurrency){order:9}
.toura-online #expenseModal .expense-form-row>#expenseTaxFxWrap{order:10}
.toura-online #expenseModal .expense-form-row>div:has(#expenseTaxNote){order:11}
.toura-online #expenseModal .expense-form-row>div:has(#expenseNote){order:12}
@media(min-width:761px){
 .toura-online #expenseModal .expense-form-rows{grid-template-columns:repeat(12,minmax(0,1fr))}
 .toura-online #expenseModal .expense-form-row>div{grid-column:span 4}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseDate){grid-column:span 3}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseBeneficiary){grid-column:span 5}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseTitle),.toura-online #expenseModal .expense-form-row>div:has(#expenseNote){grid-column:1/-1}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseCurrency),.toura-online #expenseModal .expense-form-row>div:has(#expenseTaxCurrency){grid-column:span 2}
 .toura-online #expenseModal .expense-form-row>#expenseRecordModeWrap,.toura-online #expenseModal .expense-form-row>div:has(#expenseTaxNote){grid-column:span 6}
 .toura-online #expenseModal .expense-form-row>#expenseTaxFxWrap{grid-column:span 3}
}
/* POST-MERGE (owner, Online) - «تسجيل دفعة المصروف» in the approved form-with-summary pattern (the unified payment dialog's proportions):
 * the entry form on the RIGHT, the expense header and the live financial preview as one compact summary column on the LEFT (sticky);
 * the same elements, ids and calculations - one column under 900px, in the original order */
.toura-online #expensePaymentModal>.modal-box{max-width:min(980px,calc(100vw - 24px))!important;width:min(980px,calc(100vw - 24px))}
@media(min-width:901px){
 .toura-online #expensePaymentModal .card-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr);column-gap:var(--ui-space-4);row-gap:var(--ui-space-2);align-items:start}
 .toura-online #expensePaymentModal .card-body>*{grid-column:1;min-width:0}
 .toura-online #expensePaymentModal .card-body>#expensePaymentHeader{grid-column:2;grid-row:1;margin:0}
 .toura-online #expensePaymentModal .card-body>#expensePaymentPreview{grid-column:2;grid-row:2/span 4;position:sticky;top:0;margin:0}
 .toura-online #expensePaymentModal .card-body>.grid2{grid-row:1/span 2}
 .toura-online #expensePaymentModal #expensePaymentPreview{grid-template-columns:minmax(0,1fr)}
 .toura-online #expensePaymentModal #expensePaymentPreview .ui-financial-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
/* POST-MERGE (owner, Online) - the expenses summary cards (count · recorded · paid · remaining): the icon and the figure centred as one group,
 * the label under the figure, the same compact card; the totals and filters are untouched */
.toura-online #expensesSummary .ui-kpi{justify-content:center;text-align:center;gap:10px}
.toura-online #expensesSummary .ui-kpi-body{display:grid;justify-items:center;text-align:center;flex:0 1 auto;min-width:0}
.toura-online #expensesSummary .ui-kpi-value{font-variant-numeric:tabular-nums;unicode-bidi:isolate}
/* POST-MERGE (owner, Online) - a task's due date and time in the system's own date field (its calendar) and HH:MM field, side by side */
.datetime-native-hidden{display:none!important}
.datetime-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(86px,.7fr);gap:8px;align-items:center;min-width:0}
.datetime-split>input[data-time-field]{text-align:center;font-variant-numeric:tabular-nums}
/* POST-MERGE ADDENDUM (owner, Online) - Office Expenses: the search on its own wide row, every filter (category · currency · payment status ·
 * from · to) in ONE row under it on a desktop, wrapping (never shrinking or overflowing) on a tablet or phone; the table's amounts and their
 * headers centred, the reference LTR, long descriptions and beneficiary names wrapping */
@media(min-width:761px){
 .toura-online #expensesPanel>.finance-toolbar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px 8px;align-items:center}
 .toura-online #expensesPanel>.finance-toolbar>.exp-period-host{display:contents}
 .toura-online #expensesPanel>.finance-toolbar select,.toura-online #expensesPanel>.finance-toolbar .date-input-wrapper input{min-height:36px;padding-inline:8px;font-size:var(--ui-font-sm)}
 .toura-online #expensesPanel>.finance-toolbar>.ui-search{grid-column:1/-1;width:min(100%,640px);max-width:none;justify-self:start}
 .toura-online #expensesPanel>.finance-toolbar>:is(select,.date-input-wrapper){width:100%;min-width:0;max-width:none}
 .toura-online #expensesPanel>.finance-toolbar>.ui-filter-toggle,.toura-online #expensesPanel>.finance-toolbar>.date-range-hint{display:none}
}
@media(min-width:761px) and (max-width:1250px){.toura-online #expensesPanel>.finance-toolbar{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.toura-online #expensesPanel>.finance-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.toura-online #expensesPanel>.finance-toolbar>.ui-search{grid-column:1/-1}}
.expenses-table--online th.report-cell--amount,.expenses-table--online td.report-cell--amount{text-align:center}
.expenses-table--online td.report-cell--reference{white-space:nowrap}
.expenses-table--online .expense-number{unicode-bidi:isolate;font-variant-numeric:tabular-nums;font-size:var(--ui-font-xs)}
.expenses-table--online td.expense-desc-cell,.expenses-table--online td.expense-party-cell{white-space:normal;overflow-wrap:anywhere;min-width:120px}
.expenses-table--online .expense-title-link{text-align:center}
.expenses-table--online td.report-cell--status .ui-badge{white-space:nowrap}
.expenses-table--online th.expense-party-cell,.expenses-table--online td.expense-party-cell{text-align:center}
/* the ten columns fit a desktop card: each amount's currency code sits under its figure (still beside it in meaning, never dropped), a
 * category may take two lines, and the description gets the room so a long one wraps in a few lines rather than a narrow column */
.expenses-table--online td.report-cell--amount .ui-money{display:inline-grid;justify-items:center;line-height:1.25;white-space:nowrap}
.expenses-table--online th.expense-category-cell,.expenses-table--online td.expense-category-cell{text-align:center;white-space:normal;min-width:64px}
.expenses-table--online td.expense-desc-cell{min-width:190px}
.expenses-table--online td.expense-party-cell{min-width:120px}
.expenses-table--online td.report-cell--date{white-space:nowrap}
.expenses-table--online th,.expenses-table--online td{padding-inline:8px}

/* POST-MERGE (owner, Online) - the record dialogs' submission in a footer at the bottom-LEFT, in view while the form scrolls (the box
 * is the scroll container ModalManager sets); it takes its own room at the end, so it never covers the last field */
.modal-action-footer{position:sticky;bottom:0;z-index:3;display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:8px;padding:10px 16px;border-top:1px solid var(--ui-line);background:var(--ui-card);border-radius:0 0 var(--ui-radius,12px) var(--ui-radius,12px)}
.modal-action-footer .btn{min-height:38px}
@media(max-width:640px){.modal-action-footer{padding-inline:12px}.modal-action-footer .btn{flex:1 1 auto}}
.modal-action-footer:not(:has(button:not(.hidden):not([hidden]))){display:none}

/* POST-MERGE ADDENDUM (owner, Online) - supplier / agent invoice: compact booking services, the cost method as ONE segmented row, one
 * compact row per line (service · cost in the invoice currency · note), and the invoice summary in a LEFT column; a phone stacks */
.toura-online .modal.agent-invoice-modal-host>.modal-box,.toura-online #agentInvoiceModal>.modal-box{max-width:min(1140px,calc(100vw - 24px))!important;width:min(1140px,calc(100vw - 24px))}
.toura-online #agentInvoiceModal .agent-invoice-service-list{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;max-height:none}
.toura-online #agentInvoiceModal .agent-invoice-service{grid-template-columns:auto auto minmax(0,1fr);padding:5px 9px;gap:2px 8px;min-height:36px}
.toura-online #agentInvoiceModal .agent-invoice-service-label{font-size:var(--ui-font-xs);line-height:1.35}
.toura-online #agentInvoiceModal .agent-invoice-service-actions{flex-wrap:nowrap;gap:8px}
.toura-online #agentInvoiceModal .agent-invoice-service-actions label{display:inline-flex;flex:0 0 auto;width:auto;white-space:nowrap;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);font-weight:600;cursor:pointer}
.toura-online #agentInvoiceModal .agent-invoice-service-actions label:has(input:checked){border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--ui-card));color:var(--blue-dark)}
.toura-online #agentInvoiceModal .agent-invoice-service-actions input[type=radio]{width:14px;height:14px;margin:0;accent-color:var(--blue)}
.toura-online #agentInvoiceModal .sir-cols,.toura-online #agentInvoiceModal .sir-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(150px,1fr) minmax(0,1.1fr) auto;gap:8px;align-items:center}
.toura-online #agentInvoiceModal .sir-cols{padding:0 6px 4px;font-size:var(--ui-font-xs);font-weight:700;color:var(--ui-text-secondary);border-bottom:1px solid var(--ui-line)}
.toura-online #agentInvoiceModal .sir-cols span:nth-child(2){text-align:center}
.toura-online #agentInvoiceModal .sir-row{padding:6px;border-bottom:1px solid var(--ui-cell-line,var(--ui-line));margin:0}
.toura-online #agentInvoiceModal .sir-what{display:grid;gap:3px;min-width:0}
.toura-online #agentInvoiceModal .sir-what b{font-size:var(--ui-font-sm)}.toura-online #agentInvoiceModal .sir-what small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.toura-online #agentInvoiceModal .sir-refs{display:flex;flex-wrap:wrap;gap:4px}
.toura-online #agentInvoiceModal .sir-free{grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:6px}
.toura-online #agentInvoiceModal .sir-free-tag{font-style:normal;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--ui-warning-bg);color:var(--ui-warning)}
.toura-online #agentInvoiceModal .sir-amount{display:flex;align-items:center;gap:6px}
.toura-online #agentInvoiceModal .sir-amount input{flex:1 1 auto;min-width:0;text-align:center;font-variant-numeric:tabular-nums}
.toura-online #agentInvoiceModal .sir-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.toura-online #agentInvoiceModal .sir-code{flex:0 0 auto;font-size:var(--ui-font-xs);font-weight:700;color:var(--ui-text-secondary)}
.toura-online #agentInvoiceModal .sir-amount select{flex:0 0 84px}
.toura-online #agentInvoiceModal .sir-acts{display:flex;gap:6px;justify-content:flex-end}
.toura-online #agentInvoiceModal .aisum{display:grid;gap:8px;padding:12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-surface-subtle)}
.toura-online #agentInvoiceModal .aisum h4{margin:0;font-size:var(--ui-font-sm)}
.toura-online #agentInvoiceModal .aisum-meta{display:grid;gap:6px;margin:0}
.toura-online #agentInvoiceModal .aisum-meta>div{display:flex;justify-content:space-between;gap:8px;font-size:var(--ui-font-xs)}
.toura-online #agentInvoiceModal .aisum-meta dt{color:var(--ui-text-secondary)}.toura-online #agentInvoiceModal .aisum-meta dd{margin:0;font-weight:700;text-align:end}
.toura-online #agentInvoiceModal .aisum .ui-financial-summary{grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){
 .toura-online #agentInvoiceModal .modal-box>.card-body{display:grid;grid-template-columns:minmax(0,1fr) 270px;column-gap:16px;row-gap:0;align-items:start}
 .toura-online #agentInvoiceModal .modal-box>.card-body>*{grid-column:1;min-width:0}
 .toura-online #agentInvoiceModal .modal-box>.card-body>#agentInvoiceLiveSummary{grid-column:2;grid-row:1/span 14;position:sticky;top:0;margin:0}
}
@media(max-width:760px){.toura-online #agentInvoiceModal .sir-cols{display:none}.toura-online #agentInvoiceModal .sir-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.toura-online #agentInvoiceModal .sir-what{grid-column:1/-1}.toura-online #agentInvoiceModal .sir-free{grid-template-columns:minmax(0,1fr)}.toura-online #agentInvoiceModal .agent-invoice-service-actions{flex-wrap:wrap}}
/* POST-MERGE ADDENDUM (owner, Online) - «تسجيل دفعة»: the title at the dialogs' heading size; payment cards as label / value rows (the
 * label RTL, the amount / date / rate one LTR unit) */
.toura-online #centralPaymentModal .central-payment-title{display:block;font-size:var(--ui-font-lg,18px);font-weight:800;color:var(--ui-heading,var(--ui-text))}
.toura-online #centralPaymentModal .central-payment-note-cell textarea{min-height:42px;resize:vertical}
.pay-kv{display:grid;gap:3px 12px;margin:0;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pay-kv>div{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:var(--ui-font-sm)}
.pay-kv dt{flex:0 0 auto;color:var(--ui-text-secondary);font-weight:600}
.pay-kv dt::after{content:':'}
.pay-kv dd{margin:0;min-width:0;font-weight:700;overflow-wrap:anywhere}
.pay-kv dd bdi{unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.pay-kv-reversed{color:var(--ui-danger);font-weight:800}
.drawer-payment-kv{display:grid;gap:6px;min-width:0;flex:1 1 auto}
body.online-report .invoice-payments-print-table td.payment-note-cell{white-space:normal;overflow-wrap:anywhere}
/* FINANCIAL FOLLOW-UP §1 (owner, Online) - «الفواتير والمحاسبة»: ONE search in the header, between the title (right) and the actions
 * (left), above the summary cards - the Bookings header's grid; its results list under it */
.toura-online .accounting-page .accounting-title{display:grid;grid-template-columns:minmax(15rem,1fr) minmax(0,480px) minmax(15rem,1fr);align-items:center;column-gap:24px;row-gap:12px}
.toura-online .accounting-page .accounting-title>div:first-child{grid-column:1;grid-row:1;min-width:0}
.toura-online .accounting-page .accounting-title .accounting-unified-search{grid-column:2;grid-row:1;position:relative;width:100%;min-width:0;flex:none}
.toura-online .accounting-page .accounting-title .payments-page-actions{grid-column:3;grid-row:1;justify-self:end}
.toura-online .accounting-page .accounting-toolbar{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.accounting-search-results{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:60;display:grid;gap:8px;max-height:min(420px,60vh);overflow:auto;padding:8px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-card);box-shadow:0 12px 28px rgba(15,35,50,.14)}
.accounting-search-results.hidden{display:none}
.accounting-search-tabs{display:flex;flex-wrap:wrap;gap:6px}
.accounting-search-tab{border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-soft);padding:3px 10px;font:inherit;font-size:var(--ui-font-sm);cursor:pointer;color:var(--ui-text)}
.accounting-search-tab.is-current{border-color:var(--blue);color:var(--blue)}
.accounting-search-list{display:grid;gap:2px}
.accounting-search-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:var(--ui-radius-sm);background:transparent;font:inherit;text-align:start;cursor:pointer;color:var(--ui-text)}
.accounting-search-item:hover,.accounting-search-item:focus-visible{background:var(--ui-soft)}
.accounting-search-type{color:var(--ui-text-secondary,var(--ui-muted));font-size:var(--ui-font-sm)}
.accounting-search-ref{font-weight:700;unicode-bidi:isolate}
.accounting-search-party{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accounting-search-item small{color:var(--ui-muted)}
.accounting-search-empty{padding:10px;color:var(--ui-muted);text-align:center}
@media(max-width:1279px){
 .toura-online .accounting-page .accounting-title{grid-template-columns:minmax(0,1fr) auto}
 .toura-online .accounting-page .accounting-title .accounting-unified-search{grid-column:1/-1;grid-row:2}
 .toura-online .accounting-page .accounting-title .payments-page-actions{grid-column:2;grid-row:1}
}
@media(max-width:600px){
 .toura-online .accounting-page .accounting-title{grid-template-columns:minmax(0,1fr)}
 .toura-online .accounting-page .accounting-title .accounting-unified-search{grid-column:1;grid-row:2}
 .toura-online .accounting-page .accounting-title .payments-page-actions{grid-column:1;grid-row:3;justify-self:stretch}
 .accounting-search-item{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
}
/* «هل توجد رسوم مالية؟» (Online) - the compact fee block of the payment dialog */
.toura-online #centralPaymentModal .central-payment-fee-toggle .ui-segmented{display:inline-flex;width:auto}
.toura-online #centralPaymentModal .central-payment-fee-toggle .ui-segmented button{min-width:72px}
.toura-online #centralPaymentModal .central-payment-fee-toggle .ui-segmented button.active{background:var(--blue);color:#fff}
/* «إجمالي الرسوم المالية» in the profitability review (Online) */
.bfp-fee-details>summary bdi{font-weight:800}
.bfp-fee-split{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0;font-size:var(--ui-font-sm);color:var(--ui-text-secondary,var(--ui-muted))}
/* the payments table: one settlement line per row (Online) */
.settlement-components.is-lines{display:grid;gap:1px;justify-items:center;min-width:170px}
.settlement-components.is-lines bdi{unicode-bidi:isolate;font-variant-numeric:tabular-nums}.settlement-components.is-lines>span{white-space:normal}.settlement-components.is-lines bdi{white-space:nowrap}.settlement-components.is-lines>span.is-wrap bdi{white-space:normal}.settlement-components.is-lines>span.is-wrap{white-space:normal;overflow-wrap:anywhere;max-width:260px}
/* AGENT PROFILE (owner addendum, Online) - the dialog in four groups; three chip pickers; the list's «التخصصات» column; the file's profile */
.toura-online #agentModal .modal-box{max-width:860px}
.toura-online #agentModal .agent-form-group{border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:var(--ui-space-3);margin-bottom:var(--ui-space-3)}
.toura-online #agentModal .agent-form-group>h4{margin:0 0 var(--ui-space-2);font-size:var(--ui-font);font-weight:800}
.toura-online #agentModal .agent-form-profile .grid2{grid-template-columns:repeat(3,minmax(0,1fr))}
.toura-online #agentModal .agent-form-notes{grid-template-columns:1fr}
.toura-online #agentModal .agent-form-basics .grid2{grid-template-columns:repeat(3,minmax(0,1fr))}
.toura-online #agentModal .agent-modal-title{font-size:var(--ui-font-lg,18px);font-weight:800;color:var(--ui-heading,var(--ui-text))}
.toura-online #agentModal .agent-form-notes textarea{min-height:64px}
.agent-pick-input{display:flex;gap:6px;align-items:center}
.agent-pick-input input{flex:1 1 auto;min-width:0}
/* master templates round: the agent's destinations / services - one searchable multi-select (chips, a scrolled list, Toura's own field) */
.agent-ms{position:relative;display:grid;gap:6px}
.agent-ms-chips{margin-top:0}.agent-ms-chips:empty{display:none}
.agent-ms-list{position:absolute;top:calc(100% + 4px);inset-inline:0;z-index:40;max-height:min(232px,36vh);overflow:auto;overscroll-behavior:contain;padding:4px;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
.agent-ms-opt{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:6px 10px;border:0;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text);font:inherit;font-size:var(--ui-font-sm);text-align:start;cursor:pointer}
.agent-ms-opt:hover,.agent-ms-opt.is-active{background:var(--ui-surface-subtle)}
.agent-ms-opt.is-selected{color:var(--blue-dark);font-weight:var(--ui-weight-strong)}
.agent-ms-check{flex:0 0 16px;width:16px;height:16px;border:1.5px solid var(--ui-line-strong,var(--ui-line));border-radius:4px;display:grid;place-items:center;background:var(--ui-card)}
.agent-ms-opt.is-selected .agent-ms-check{background:var(--blue-dark);border-color:var(--blue-dark)}
.agent-ms-opt.is-selected .agent-ms-check::after{content:'';width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.agent-ms-empty{padding:10px;color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}
.agent-ms-help{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.agent-legacy-phone{grid-column:1/-1;color:var(--ui-text-secondary,var(--ui-muted))}
.agent-spec-cell{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center}
.agent-spec-chip{display:inline-block;max-width:180px;padding:2px 8px;border-radius:999px;background:var(--ui-info-bg);color:var(--blue-dark);font-size:var(--ui-font-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-spec-more{border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);padding:1px 8px;font:inherit;font-size:var(--ui-font-sm);cursor:pointer;color:var(--blue)}
.agent-spec-popover{position:fixed;inset:auto;margin:0;max-height:min(320px,60vh);overflow:auto;border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:10px;background:var(--ui-card);box-shadow:0 12px 28px rgba(15,35,50,.16);display:none;gap:6px;max-width:320px}
.agent-spec-popover:popover-open{display:grid}
.agent-spec-popover .agent-spec-chip{max-width:none;white-space:normal}
.keyed-type-search{margin-bottom:var(--ui-space-2);max-width:420px}
@media(max-width:900px){.toura-online #agentModal .agent-form-profile .grid2,.toura-online #agentModal .agent-form-basics .grid2{grid-template-columns:1fr}}
/* «التخصص والخدمات» (owner correction): specialization, services, destinations - one compact line each */
.agent-profile-cell{display:grid;gap:2px;justify-items:start;text-align:start;font-size:var(--ui-font-sm);line-height:1.5;min-width:200px}
.agent-profile-line>span{color:var(--ui-text-secondary,var(--ui-muted))}
.agent-profile-line.is-spec b{font-weight:800;color:var(--ui-text)}
/* THE AGENT FILE'S HEADER (owner addendum, Online): one compact card - name / type / specialization, WhatsApp / e-mail, services /
 * destinations - content height, no empty right-only cluster */
.toura-online .file-identity.agent-file-identity{display:block;padding:12px 14px;margin:0 0 var(--ui-space-2)}
.agent-file-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 18px;align-items:start}
.agent-file-grid .afg-item{display:grid;gap:2px;min-width:0;grid-column:span 2}
.agent-file-grid .afg-wa,.agent-file-grid .afg-mail,.agent-file-grid .afg-offer,.agent-file-grid .afg-dest{grid-column:span 3}
.agent-file-grid .afg-notes{grid-column:1/-1}
.agent-file-grid .afg-item>span:first-child{color:var(--ui-text-secondary,var(--ui-muted));font-size:var(--ui-font-sm)}
.agent-file-grid h2{margin:0;font-size:var(--ui-font-lg,18px);line-height:1.3;overflow-wrap:anywhere}
.agent-file-grid b{font-weight:800;overflow-wrap:anywhere}
.agent-file-grid .afg-ltr{unicode-bidi:isolate;overflow-wrap:anywhere;font-weight:700}
.agent-file-grid .afg-ltr{justify-self:start}
.agent-file-grid .afg-note{white-space:pre-line;overflow-wrap:anywhere}
.agent-file-chips{margin-top:2px;gap:4px}
.agent-file-chips .dest-chip{padding:1px 10px}
.toura-online #agentFileBody .entity-financial-summary{margin-block:var(--ui-space-2)}
@media(max-width:900px){.agent-file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.agent-file-grid .afg-item{grid-column:span 1}.agent-file-grid .afg-name,.agent-file-grid .afg-notes{grid-column:1/-1}}
@media(max-width:600px){.agent-file-grid{grid-template-columns:1fr}.agent-file-grid .afg-item{grid-column:1/-1}}
/* a long e-mail wraps in the agents list instead of squeezing the name column (Online) */
.agents-table .agent-email{unicode-bidi:isolate;overflow-wrap:anywhere;display:inline-block;max-width:240px}
/* mixed Arabic / English / numbers in one cell (owner RTL addendum, Online): one line per detail, each value isolated; a person's note
 * keeps its direction and line breaks and wraps inside its cell */
.cell-lines{display:inline-grid;gap:1px;justify-items:center}
.cell-line{display:block;line-height:1.45}
.cell-line>span{color:var(--ui-text-secondary,var(--ui-muted))}
.cell-line bdi{unicode-bidi:isolate}
.cell-note-text{white-space:pre-line;overflow-wrap:anywhere}
/* the treasury movements (owner RTL addendum, Online - PMU-3): «المصدر» wraps its party name instead of growing to the name's width and squeezing «البيان»; references stay whole */
.toura-online .treasury-movements-table td:has(>.treasury-source-stack){white-space:normal;min-width:170px;max-width:260px}
.toura-online .treasury-movements-table .treasury-source-stack,.toura-online .treasury-movements-table .treasury-source-stack .cell-note{white-space:normal;overflow-wrap:anywhere}
.toura-online .treasury-movements-table .treasury-source-ref{white-space:nowrap}
.toura-online .treasury-movements-table td.report-cell--description{min-width:170px}
.accounting-search-restricted{padding:6px 8px;border-top:1px solid var(--ui-line);color:var(--ui-text-secondary,var(--ui-muted));font-size:var(--ui-font-sm)}
/* PMU-3: two references stacked in one cell */
.ref-stack{display:grid;gap:2px;justify-items:center}
/* PMU-3 (Online): the two wide financial tables (treasury movements, the accounting tabs) read as the shared phone cards up to a
 * tablet / narrow-laptop width too - between 641 and 1100px nine-plus columns could only scroll inside their frame. The same card
 * rules as the 640px breakpoint above, for these two tables only */
@media(min-width:641px) and (max-width:1100px){
 .toura-online .ui-table-wrap:has(>:is(.treasury-movements-table,#paymentsCenterList .accounting-table)){overflow-x:visible!important;border:0;background:transparent;box-shadow:none}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table){display:block;width:100%!important;min-width:0!important;border:0;background:transparent}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>thead{display:none}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody>tr{display:block;padding:8px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody>tr>td{display:block;width:auto!important;max-width:none!important;min-width:0!important;padding:4px 0!important;border:0!important;text-align:left!important;direction:rtl;white-space:normal;word-break:normal;overflow-wrap:anywhere}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody>tr>td::after{content:'';display:block;clear:both}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody>tr>td>*{text-align:left!important;margin-inline-start:auto}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody>tr>td[data-label]:not([data-label=""])::before{content:attr(data-label);float:right;max-width:45%;margin-inline-end:10px;text-align:start;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-strong,600);line-height:1.9}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody>tr>td.report-cell--actions{margin-top:4px;padding-top:6px!important;border-top:1px solid var(--ui-line)!important}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody>tr>td.report-cell--actions::before{display:none}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody>tr>td.report-cell--actions .table-actions{justify-content:flex-end}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table)>tbody>tr>td[colspan]{text-align:center!important}
 .toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table) .ref-stack,.toura-online :is(.treasury-movements-table,#paymentsCenterList .accounting-table) .settlement-components.is-lines{justify-items:end;min-width:0}
}

/* ==== CONSOLIDATED POST-MARKETING CORRECTIONS (owner round) ==== */
/* an optional field says so in small secondary text beside its label, not in a long parenthesis */
.field-optional{font-size:11px;font-weight:600;color:var(--muted,#6b7a85);margin-inline-start:4px}
/* RTL placeholders: an LTR value field (a reference, a number typed by hand) shows its Arabic placeholder from the right while empty;
 * typed values stay LTR. Email / URL / phone / number keep their own direction. */
.toura-online .modal input[dir=ltr]:placeholder-shown:not([type=email]):not([type=url]):not([type=tel]):not([type=number]){direction:rtl;text-align:right}
/* the invoice's total settlement: label and amount centred together, the amount prominent but not oversized */
.toura-online .payment-settlement-line{text-align:center;padding:var(--ui-space-2) var(--ui-space-3)}
.toura-online .payment-settlement-line b{font-size:calc(var(--ui-font-strong) + 2px);unicode-bidi:isolate}
/* no customer / supplier credit in any currency: one quiet line instead of the credit fields */
.toura-online .payment-credit-empty{margin:0;padding:var(--ui-space-2) var(--ui-space-3);border:1px dashed var(--ui-line);border-radius:var(--ui-radius-sm);text-align:center}
/* ONE section search in the header (SectionSearch - «مصروفات المكتب», «المجموعات السياحية / العمرة»): title right, search centre,
 * actions left, above the summary cards; the tab-local boxes it replaces are not shown (their filters stay) */
.toura-online .page-title.has-section-search{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(0,460px) minmax(14rem,1fr);align-items:center;column-gap:24px;row-gap:12px}
.toura-online .page-title.has-section-search>div:first-child{grid-column:1;grid-row:1;min-width:0}
.toura-online .page-title.has-section-search>.section-unified-search{grid-column:2;grid-row:1;position:relative;width:100%;min-width:0;margin:0}
.toura-online .page-title.has-section-search>.header-actions{grid-column:3;grid-row:1;justify-self:end}
.toura-online .has-section-search :is(.ui-search,.omni-search-shell).section-search-replaced,
.toura-online #expensesPage.has-section-search :is(#expensesPanel .finance-toolbar>.ui-search,#beneficiariesPanel .ui-search),
.toura-online #tripOperationsPage.has-section-search>.omni-search-shell{display:none}
@media(max-width:1279px){
 .toura-online .page-title.has-section-search{grid-template-columns:minmax(0,1fr) auto}
 .toura-online .page-title.has-section-search>.section-unified-search{grid-column:1/-1;grid-row:2}
 .toura-online .page-title.has-section-search>.header-actions{grid-column:2;grid-row:1}
}
@media(max-width:600px){
 .toura-online .page-title.has-section-search{grid-template-columns:minmax(0,1fr)}
 .toura-online .page-title.has-section-search>.section-unified-search{grid-column:1;grid-row:2}
 .toura-online .page-title.has-section-search>.header-actions{grid-column:1;grid-row:3;justify-self:stretch}
}
/* Dashboard (Online): the right column holds «الرحلات الجارية» and «المغادرة خلال ٧ أيام» stacked at their natural heights */
.dash-main{display:grid;gap:var(--ui-space-4);align-content:start;min-width:0}
.dash-main.is-gone{display:none}
.dash-lists.is-main-only{grid-template-columns:minmax(0,1fr)}
/* the bell (Online): each line names its booking; several alerts of one booking are one compact group */
.bell-item-head,.bell-group-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bell-item-ref{font-weight:800;unicode-bidi:isolate;direction:ltr;color:var(--ui-text)}
.bell-group{border-bottom:1px solid var(--ui-line);padding:6px 0}
.bell-group-head{padding:4px 12px}
.bell-group-head em{font-style:normal;font-size:var(--ui-font-xs);color:var(--ui-danger,#b42318);margin-inline-start:auto}
.bell-subitem{padding-inline-start:24px}
.bell-subitem .bell-item-title{font-weight:600}
.bell-group-more{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.bell-title small{font-weight:600;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);margin-inline-start:6px}
/* supplier invoice - the customer invoice's services as compact cards (Online): kind, what it is, its dates, its state; the card shows
 * selected / held, the native checkbox stays for the keyboard */
.toura-online .agent-invoice-service-list{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:8px;max-height:280px;padding:2px}
.toura-online .agent-invoice-service.si-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:10px 12px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-card);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;margin:0}
.toura-online .si-card .si-check{position:absolute;inset-block-start:10px;inset-inline-end:10px;width:16px;height:16px;margin:0;accent-color:var(--blue)}
.toura-online .si-card .si-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--ui-soft);color:var(--blue)}
.toura-online .si-card .si-icon .ui-action-icon{width:16px;height:16px}
.toura-online .si-card .si-body{display:grid;gap:3px;min-width:0;padding-inline-end:22px}
.toura-online .si-card .si-top{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.toura-online .si-card .si-kind{font-style:normal;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.toura-online .si-card .si-title{font-size:var(--ui-font-sm);overflow-wrap:anywhere}
.toura-online .si-card .si-detail,.toura-online .si-card .si-dates{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);overflow-wrap:anywhere}
.toura-online .si-card .si-dates{color:var(--ui-text);font-variant-numeric:tabular-nums}
.toura-online .si-card .si-note{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.toura-online .si-card:hover:not(.is-off){border-color:var(--blue)}
.toura-online .si-card:has(.si-check:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.toura-online .si-card:has(.si-check:checked){border-color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,var(--ui-card));box-shadow:inset 3px 0 0 var(--blue)}
.toura-online .si-card.is-off{cursor:default;background:var(--ui-surface-subtle,var(--ui-soft));opacity:.85}
.toura-online .si-card[data-state="added"]{border-color:var(--ui-success,#1e8e5a);background:color-mix(in srgb,var(--ui-success,#1e8e5a) 6%,var(--ui-card))}
.toura-online .si-card[data-state="held"] .si-note,.toura-online .si-card[data-state="stock-other"] .si-note{color:var(--ui-warning)}
/* final UX round (owner): the same cards, compact - tighter padding, a small icon, detail and dates on one line that wraps when long */
.toura-online .agent-invoice-service-list{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:6px;max-height:300px}
.toura-online .agent-invoice-service.si-card{gap:7px;padding:6px 9px;border-radius:8px;line-height:1.3}
.toura-online .si-card .si-check{inset-block-start:7px;inset-inline-end:8px;width:15px;height:15px}
.toura-online .si-card .si-icon{width:22px;height:22px;border-radius:6px}.toura-online .si-card .si-icon .ui-action-icon{width:13px;height:13px}
.toura-online .si-card .si-body{gap:1px;padding-inline-end:20px}
.toura-online .si-card .si-meta{display:flex;flex-wrap:wrap;column-gap:6px;row-gap:0;min-width:0}
.toura-online .si-card .si-meta>.si-detail+.si-dates::before{content:'·';margin-inline-end:6px;color:var(--ui-text-secondary)}
.toura-online .si-card .si-note{line-height:1.25}
/* multi-currency KPI cards (Online, owner review): ONE currency per line, each «amount CODE» one isolated left-to-right unit that never
 * breaks inside; no sum across currencies (the figures are the summary's own). Treasury's per-account cards are single-currency already. */
.toura-online .ui-kpi-value:has(>span+span){display:flex;flex-direction:column;gap:2px;line-height:1.25}
.toura-online .ui-kpi-value>span{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:4px;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.toura-online .ui-kpi-value>span>b{font-size:.78em;font-weight:700;color:var(--ui-text-secondary)}
/* «الفواتير والمحاسبة»: labels and values centred in their cards */
.toura-online .accounting-summary-strip .ui-kpi{align-items:center}
.toura-online .accounting-summary-strip .ui-kpi-body{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 auto;min-width:0}
.toura-online .accounting-summary-strip .ui-kpi-value{align-items:center;justify-content:center}
.toura-online .accounting-summary-strip .ui-kpi-value>span{justify-content:center}
/* agent / supplier file (Online, owner review): the name is the card's title on the RIGHT whatever its script (an RTL heading holding an
 * isolated name - its letters keep their own order); then one compact row of type · specialization · WhatsApp · email, and the
 * offered services beside the destinations. No empty third column, no tall gaps. */
.toura-online .agent-file-identity{padding:12px 14px}
.toura-online .agent-file-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 16px}
.toura-online .agent-file-grid .afg-item{grid-column:span 1}
.toura-online .agent-file-grid .afg-name{grid-column:1/-1;padding-bottom:6px;border-bottom:1px solid var(--ui-line)}
.toura-online .agent-file-grid .afg-name>span:first-child{display:none}
.toura-online .agent-file-grid .afg-name h2{text-align:start;direction:rtl}
.toura-online .agent-file-grid .afg-offer,.toura-online .agent-file-grid .afg-dest{grid-column:span 2}
@media(max-width:760px){.toura-online .agent-file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toura-online .agent-file-grid .afg-offer,.toura-online .agent-file-grid .afg-dest{grid-column:1/-1}}
/* RecordDetail (Online): the shared compact record-detail layout - inventory record, cheque */
.toura-online #inventoryPreviewModal .modal-box,.toura-online #chequeDetailModal .modal-box{max-width:min(980px,96vw)}
.rec-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:12px}
.rec-tile{display:grid;justify-items:center;align-content:start;gap:3px;padding:10px 8px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-card);text-align:center;min-width:0}
.rec-tile-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--ui-soft);color:var(--blue)}
.rec-tile-icon .ui-action-icon{width:15px;height:15px}
.rec-tile small{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.rec-tile-value{font-weight:700;min-width:0;overflow-wrap:anywhere}
.rec-tile.is-num .rec-tile-value{font-size:calc(var(--ui-font-strong) + 2px);font-variant-numeric:tabular-nums}
.rec-tile[data-tone="ok"]{border-color:color-mix(in srgb,var(--ui-success,#1e8e5a) 40%,var(--ui-line))}
.rec-tile[data-tone="warn"]{border-color:color-mix(in srgb,var(--ui-warning,#b7791f) 45%,var(--ui-line))}
.rec-tile[data-tone="danger"]{border-color:color-mix(in srgb,var(--ui-danger,#b42318) 45%,var(--ui-line))}
.rec-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rec-section{border:1px solid var(--ui-line);border-radius:10px;padding:10px 12px;background:var(--ui-card);min-width:0}
.rec-section.rec-wide{grid-column:1/-1}
.rec-section h4{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:var(--ui-font-md,15px)}
.rec-section h4>span{display:grid;place-items:center;color:var(--blue)}
.rec-section h4 .ui-action-icon{width:15px;height:15px}
.rec-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0}
.rec-row{min-width:0}
.rec-row.is-wide{grid-column:1/-1}
.rec-row dt{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);margin-bottom:2px}
.rec-row dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.rec-note{white-space:pre-line}
.rec-timeline{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rec-timeline li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:6px 10px;border-inline-start:3px solid var(--blue);background:var(--ui-soft);border-radius:6px}
.rec-timeline li time{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);white-space:nowrap}
.rec-timeline li small{grid-column:1/-1;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
@media(max-width:760px){.rec-sections,.rec-dl{grid-template-columns:minmax(0,1fr)}.rec-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* record-detail dialogs (Online): the standard dialog heading - a prominent title, a smaller reference / status line under it */
.toura-online :is(#chequeDetailModal,#inventoryPreviewModal) .modal-toolbar>div:first-child>b{display:block;font-size:var(--ui-font-lg,19px);font-weight:800;line-height:1.3}
.toura-online :is(#chequeDetailModal,#inventoryPreviewModal) .modal-toolbar>div:first-child>.small{font-size:var(--ui-font-sm);color:var(--ui-text-secondary);margin-top:2px}
/* the cheque's print moved to the actions at the bottom; the header keeps the title and «إغلاق» */
.toura-online #chequeDetailModal #chequeDetailPrintBtn{display:none}
.rec-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:1px solid var(--ui-line)}
.rec-actions .btn{display:inline-flex;align-items:center;gap:6px;min-height:38px}
.rec-actions .btn .ui-action-icon{width:17px;height:17px}
@media(max-width:600px){.rec-actions .btn{flex:1 1 calc(50% - 8px);justify-content:center}}
/* group detail (Online): standard heading; overview in two balanced columns - facts on the right, the financial summary on the LEFT */
.toura-online #tripOpsModal .group-detail-heading{display:grid;gap:2px;min-width:0;margin-inline-end:auto}
.toura-online #tripOpsModal .group-detail-heading h3{margin:0;font-size:var(--ui-font-lg,19px);font-weight:800;line-height:1.3}
.toura-online #tripOpsModal .group-detail-heading small{color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}
.toura-online #tripOpsModal [data-group-panel]{padding-top:12px}
.group-ov{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:12px;align-items:start}
.group-ov-main{display:grid;gap:10px;min-width:0}
.group-ov-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.group-ov .rec-section h4{justify-content:space-between}
.group-ov-finance{display:grid;gap:8px;align-content:start}
.group-ov-finance>h4{margin-bottom:0}
.group-fin-cur{display:grid;gap:4px;padding-top:6px;border-top:1px solid var(--ui-line)}
.group-fin-code{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.group-fin-rows{display:grid;gap:4px;margin:0}
.group-fin-rows .rec-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.group-fin-rows .rec-row dt{margin:0;font-size:var(--ui-font-sm)}
.group-fin-rows .rec-row dd{font-weight:700;white-space:nowrap}
.group-fin-net{padding-top:6px;border-top:1px dashed var(--ui-line)}
.group-fin-net dt{font-weight:800;color:var(--ui-text)}
@media(max-width:900px){.group-ov{grid-template-columns:minmax(0,1fr)}.group-ov-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* group tabs: room between the tabs, the tab's actions, its search and its table */
.toura-online #groupBookingsHost,.toura-online #groupProgramHost,.toura-online #groupFinanceHost,.toura-online #groupReportsHost,.toura-online #groupOperationsHost{display:grid;gap:12px}
.toura-online #groupBookingsHost>.header-actions{justify-content:flex-start;margin:0}
.toura-online #groupBookingsHost>.ui-search{margin:0;max-width:520px}
/* group reports: a compact card per report with its icon */
.toura-online .group-report-cards .finance-starter-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:start;text-align:start}
.toura-online .group-report-cards .group-report-icon{grid-row:1/span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--ui-soft);color:var(--blue)}
.toura-online .group-report-cards .group-report-icon .ui-action-icon{width:16px;height:16px}
.toura-online .group-hotel-list{display:grid;gap:2px;justify-items:end;text-align:start}
.toura-online #groupProgramHost .group-overview-row b{text-align:start;min-width:0;overflow-wrap:anywhere}
/* bookings list on a phone (Online, owner review): «تصدير الحجوزات | استيراد الحجوزات» on one row, «طباعة الحجوزات» centred under them,
 * balanced widths, full labels; desktop keeps its row */
@media(max-width:600px){
 .toura-online .bookings-list-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;justify-items:stretch;width:100%;max-width:420px;margin-inline:auto}
 .toura-online .bookings-list-actions>button{justify-content:center;width:100%;min-width:0}
 .toura-online .bookings-list-actions>button[onclick*="openExportSelection"]{order:1}
 .toura-online .bookings-list-actions>button[onclick*="importVoucherFile"]{order:2}
 .toura-online .bookings-list-actions>button[onclick*="printBookingsList"]{order:3;grid-column:1/-1;justify-self:center;width:calc(50% - 4px)}
}
/* MOBILE DIALOG HEIGHT (owner: the bottom of «المسار المالي» and its «طباعة» could not be reached on a phone). 100vh on a phone is the
 * height WITHOUT the browser's own address / tool bars, so a dialog sized to it reached under them and its last rows and footer
 * buttons could not be scrolled into view. The dynamic viewport (dvh) is the visible area; browsers without it keep vh. One scrolling
 * container (the dialog box) as before; the bottom keeps the device's safe-area inset. */
@supports (height:100dvh){
 .toura-online .modal.modal-runtime-open>.modal-box{max-height:calc(100dvh - 32px)!important}
 @media(max-width:720px){.toura-online .modal.modal-runtime-open>.modal-box{max-height:calc(100dvh - 16px)!important}}
}
@media(max-width:720px){.toura-online .modal.modal-runtime-open>.modal-box{padding-bottom:max(var(--ui-space-3,12px),env(safe-area-inset-bottom))}}
/* a phone scrolls the supplier invoice dialog once: the service list is not a second scroll area there */
@media(max-width:600px){.toura-online .agent-invoice-service-list{max-height:none;overflow:visible}}

/* ============ FINAL FINANCIAL & OPERATIONAL COMPLETION ROUND (owner) ============ */
/* the Financial Path: an action a draft cannot take stays visible, disabled, with its reason; a loss in a restrained danger tone;
 * the last cost-completeness confirmation as label: value lines; a supplier invoice's own payment action */
.toura-online .bfp-box .btn.is-unavailable{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}
.toura-online .bfp-loss,.toura-online .report-loss{color:var(--ui-danger);font-weight:var(--ui-weight-bold)}
.toura-online .bfp-row.is-loss>span{color:var(--ui-danger)}
.toura-online .bfp-state[data-tone='muted']{background:var(--ui-surface-muted);color:var(--ui-text-secondary)}
.toura-online .bfp-audit{display:grid;gap:2px;margin-top:8px;padding:8px 10px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);font-size:var(--ui-font-xs);color:var(--ui-text-secondary);line-height:1.6}
.toura-online .bfp-audit b{color:var(--ui-text);font-weight:var(--ui-weight-bold)}
.toura-online .bfp-audit bdi{color:var(--ui-text);font-weight:var(--ui-weight-medium)}
.toura-online .bfp-detail-row .bfp-row-pay{justify-self:start;margin-top:4px}
.toura-online .btn-xs{min-height:26px;padding:2px 8px;font-size:var(--ui-font-xs)}
/* the supplier invoice FX: «سعر الصرف» then «1 JOD = [rate] USD» on one line, read left-to-right as written */
.toura-online .fx-rate-field{display:flex;align-items:center;gap:6px}
.toura-online .fx-rate-field input{flex:1;min-width:0;text-align:left}
.toura-online .fx-rate-field .fx-rate-unit{flex:none;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-bold);color:var(--ui-text-secondary);white-space:nowrap}
.toura-online .fx-rate-field .fx-rate-unit:empty{display:none}
/* the loss warning in the supplier invoice summary - informational (the invoice can still be saved) */
.toura-online .aisum-loss{margin-top:10px;padding:10px 12px;border-radius:var(--ui-radius-sm);border:1px solid var(--ui-warning);background:var(--ui-warning-bg);font-size:var(--ui-font-sm)}
.toura-online .aisum-loss>b{display:block;color:var(--ui-warning);margin-bottom:6px;line-height:1.6}
.toura-online .aisum-loss dl{display:grid;gap:3px;margin:0}
.toura-online .aisum-loss dl>div{display:flex;justify-content:space-between;gap:10px}
.toura-online .aisum-loss dt{color:var(--ui-text-secondary)}
.toura-online .aisum-loss dd{margin:0;font-weight:var(--ui-weight-bold)}
.toura-online .aisum-loss .is-net{border-top:1px solid var(--ui-line);padding-top:3px}
.toura-online .aisum-loss .is-loss dd{color:var(--ui-danger)}
.toura-online .aisum-loss>small{display:block;margin-top:6px;color:var(--ui-text-secondary)}
/* the printed supplier invoice: one readable service line - kind, what, where, dates; words wrap, identifiers never break */
.print-service-cell .psvc{display:inline;line-height:1.7}
.print-service-cell .psvc-kind{font-weight:700}
.print-service-cell .psvc-sep,.print-service-cell .psvc-join{color:#888}
.print-service-cell .psvc-dates{white-space:nowrap;unicode-bidi:isolate}
.print-service-cell .psvc-total{font-weight:700}
.print-service-cell bdi{overflow-wrap:normal;word-break:keep-all}
/* a summary card that leads somewhere («المتبقي علينا» → the invoices that make it up) */
.ui-financial-summary-item.is-link{font:inherit;text-align:inherit;cursor:pointer;border:1px solid var(--ui-line);background:var(--ui-card);color:inherit;transition:border-color .15s,box-shadow .15s}
.ui-financial-summary-item.is-link:hover,.ui-financial-summary-item.is-link:focus-visible{border-color:var(--ui-brand-primary);box-shadow:0 0 0 3px var(--ui-brand-soft);outline:none}
.ui-financial-summary-item .ui-financial-summary-go{display:block;margin-top:4px;font-style:normal;font-size:var(--ui-font-xs);color:var(--ui-brand-primary);font-weight:var(--ui-weight-bold)}
/* the supplier file: the invoices filter, the open invoices and their per-currency reconciliation, a summary that says something */
.toura-online .party-invoice-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
.toura-online .party-invoice-filter h4{margin:0}
.toura-online .party-invoice-filter .party-invoice-seg{margin:0}
.toura-online .party-invoice-filter .party-bulk-pay{margin-inline-start:auto}
.toura-online .party-invoice-seg button{display:inline-flex;align-items:center;gap:6px;transition:background .15s,color .15s}
.toura-online .party-invoice-seg button:hover:not(:disabled):not(.active){background:var(--ui-row-hover);color:var(--ui-text)}
.toura-online .party-invoice-seg button:focus-visible{outline:2px solid var(--ui-brand-primary);outline-offset:1px}
.toura-online .party-invoice-seg button:disabled{opacity:.5;cursor:not-allowed}
.toura-online .party-invoice-seg .seg-count{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 5px;border-radius:999px;background:var(--ui-surface-muted);color:var(--ui-text-secondary);font-size:var(--ui-font-xs);font-weight:var(--ui-weight-bold);line-height:1}
.toura-online .party-invoice-seg button.active .seg-count{background:var(--ui-brand-soft);color:var(--ui-brand-primary)}
@media(max-width:600px){.toura-online .party-invoice-filter .party-invoice-seg{width:100%;flex-wrap:nowrap;align-items:stretch}.toura-online .party-invoice-seg button{flex:1 1 auto;justify-content:center;white-space:nowrap;padding-inline:8px;font-size:var(--ui-font-xs)}.toura-online .party-invoice-filter .party-bulk-pay{width:100%;justify-content:center;margin-inline-start:0}}
.toura-online .party-open-totals{display:grid;gap:6px;margin-top:10px}
.toura-online .party-open-total{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:8px 10px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);font-size:var(--ui-font-sm)}
.toura-online .party-open-total b{margin-inline-start:auto}
.toura-online .party-open-total.is-credit{background:var(--ui-info-bg)}
.toura-online .party-summary-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.toura-online .party-summary-fact{padding:8px 10px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);display:grid;gap:2px}
.toura-online .party-summary-fact small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .party-summary-fact.is-warn b{color:var(--ui-warning)}
.toura-online .party-summary-actions{margin-top:10px;display:flex;justify-content:flex-end}
/* «سداد فواتير متعددة»: right - the invoices and their allocation; left - the payment and its live settlement summary */
.toura-online .sbp-box{width:min(1180px,calc(100vw - 32px));max-width:none}
.toura-online .sbp-head{align-items:flex-start}
.toura-online .sbp-head h3{margin:0}
.toura-online .sbp-head small{color:var(--ui-text-secondary)}
.toura-online .sbp-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:16px;align-items:start}
.toura-online .sbp-pick-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.toura-online .sbp-currency{display:flex;gap:10px}
.toura-online .sbp-chip{padding:2px 10px;border-radius:999px;background:var(--ui-surface-muted);font-weight:var(--ui-weight-bold);font-size:var(--ui-font-sm)}
.toura-online .sbp-list{display:grid;gap:8px}
.toura-online .sbp-row{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(110px,.8fr) minmax(130px,1fr) minmax(110px,.8fr);gap:8px 12px;align-items:center;padding:10px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}
.toura-online .sbp-row.is-on{border-color:var(--ui-brand-primary);box-shadow:inset 3px 0 0 var(--ui-brand-primary)}
.toura-online .sbp-check{display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0}
.toura-online .sbp-check input{width:18px;height:18px;flex:none}
.toura-online .sbp-ref,.toura-online .sbp-dates,.toura-online .sbp-due{display:grid;gap:2px;min-width:0}
.toura-online .sbp-ref small,.toura-online .sbp-dates small,.toura-online .sbp-due small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .sbp-eq{color:var(--ui-info)!important}
.toura-online .sbp-alloc{display:flex;align-items:center;gap:6px}
.toura-online .sbp-alloc input{width:100%;min-width:0;text-align:left}
.toura-online .sbp-side{position:sticky;top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:12px;border-radius:var(--ui-radius);background:var(--ui-surface-subtle);min-width:0}
.toura-online .sbp-pick{min-width:0}
.toura-online .sbp-cols{padding:12px 16px 16px}.toura-online .sbp-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.toura-online .sbp-fields .sbp-wide,.toura-online .sbp-fields #sbpRateWrap{grid-column:1/-1}
.toura-online .sbp-fee{grid-column:1/-1;margin:4px 0 0;padding:8px 10px 10px;border:1px dashed var(--ui-line);border-radius:var(--ui-radius-sm);min-width:0}
.toura-online .sbp-fee legend{padding:0 6px;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-bold)}
.toura-online .sbp-fee legend small{font-weight:var(--ui-weight-normal);color:var(--ui-text-secondary)}
.toura-online .sbp-fee-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.toura-online .sbp-fee-fx{display:grid;gap:6px;margin-top:8px}
.toura-online .sbp-fee-fx:empty{display:none}
@media(max-width:560px){.toura-online .sbp-fee-grid,.toura-online .sbp-fields{grid-template-columns:1fr}}
.toura-online .sbp-fields label{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.toura-online .sbp-fields input,.toura-online .sbp-fields select{width:100%}
.toura-online .sbp-lines{display:grid;gap:4px}
.toura-online .sbp-line{display:flex;justify-content:space-between;gap:10px;font-size:var(--ui-font-sm)}
.toura-online .sbp-line>span{color:var(--ui-text-secondary)}
.toura-online .sbp-line.is-total{border-top:1px solid var(--ui-line);padding-top:6px;font-size:var(--ui-font)}
.toura-online .sbp-line.is-warn b{color:var(--ui-danger)}
.toura-online .sbp-preview summary{cursor:pointer;font-weight:var(--ui-weight-bold);font-size:var(--ui-font-sm)}
.toura-online .sbp-table-wrap{overflow-x:auto}
.toura-online .sbp-table{width:100%;border-collapse:collapse;font-size:var(--ui-font-xs);margin-top:6px}
.toura-online .sbp-table th,.toura-online .sbp-table td{padding:5px 6px;border-bottom:1px solid var(--ui-line);text-align:center;white-space:nowrap}
.toura-online .sbp-message:empty{display:none}
.toura-online .sbp-foot{display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:space-between;gap:8px}
.toura-online .sbp-foot .btn-primary{min-width:160px}
@media(max-width:900px){
 .toura-online .sbp-cols{grid-template-columns:1fr}
 .toura-online .sbp-side{position:static}
}
@media(max-width:600px){
 .toura-online .sbp-box{width:calc(100vw - 16px)}
 .toura-online .sbp-row{grid-template-columns:1fr 1fr}
 .toura-online .sbp-check{grid-column:1/-1}
 .toura-online .sbp-fields{grid-template-columns:1fr}
 .toura-online .sbp-foot{flex-direction:column}
 .toura-online .sbp-foot .btn{width:100%}
}
/* the traveler lookup (owner addendum): the name field searches the office's customers - a compact, scrollable list layered above the
 * form, a clear «+ إضافة عميل جديد»; English names read left-to-right */
.toura-online .traveler-lookup{position:relative}
.toura-online .traveler-lookup>input{background-image:linear-gradient(transparent,transparent);padding-inline-start:10px}
.toura-online .traveler-lookup-box{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:10050;max-height:300px;overflow-y:auto;overscroll-behavior:contain;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow);padding:4px;display:grid;gap:2px;min-width:260px}
.toura-online .traveler-lookup-head{padding:4px 8px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);font-weight:var(--ui-weight-bold)}
.toura-online .traveler-lookup-item,.toura-online .traveler-lookup-add{display:grid;gap:2px;width:100%;text-align:start;padding:7px 9px;border:0;border-radius:var(--ui-radius-xs);background:transparent;cursor:pointer;font:inherit;color:inherit}
.toura-online .traveler-lookup-item b{text-align:left;font-weight:var(--ui-weight-bold)}
.toura-online .traveler-lookup-item small{display:flex;flex-wrap:wrap;gap:4px 6px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .traveler-lookup-item small i{font-style:normal;opacity:.6}
.toura-online .traveler-lookup-item:hover,.toura-online .traveler-lookup-item.is-active,.toura-online .traveler-lookup-add:hover,.toura-online .traveler-lookup-add.is-active{background:var(--ui-row-hover)}
.toura-online .traveler-lookup-item.is-off{opacity:.55;cursor:not-allowed}
.toura-online .traveler-lookup-item.is-off em{font-style:normal;color:var(--ui-warning)}
.toura-online .traveler-lookup-add{grid-template-columns:auto 1fr;align-items:center;column-gap:8px;border-top:1px dashed var(--ui-line);margin-top:2px;color:var(--ui-brand-primary)}
.toura-online .traveler-lookup-add small{grid-column:2;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .traveler-new-box .grid2{gap:10px}
@media(max-width:600px){.toura-online .traveler-lookup-box{min-width:0;max-height:240px}}
/* «الأرصدة» in the customer / supplier file (owner addendum): compact rows - description right, the available amount left, details small */
.toura-online .credit-rows{display:grid;gap:6px}
.toura-online .credit-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:8px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card)}
.toura-online .credit-row-main{display:grid;gap:3px;min-width:0}
.toura-online .credit-row-title{justify-self:start;text-align:start;font-weight:var(--ui-weight-bold);overflow-wrap:anywhere;line-height:1.5}
.toura-online .credit-row-meta{display:flex;flex-wrap:wrap;gap:2px 14px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .credit-row-links{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--ui-font-xs)}
.toura-online .credit-row-links .detail-secondary-link{padding:0;min-height:0}
.toura-online .credit-row-amount{display:grid;justify-items:end;gap:3px;text-align:end}
.toura-online .credit-row-amount b{font-size:var(--ui-font);white-space:nowrap}
.toura-online .credit-rows-section .ui-pager,.toura-online .credit-rows-section .pager{margin-top:6px}
@media(max-width:600px){.toura-online .credit-row{grid-template-columns:1fr}.toura-online .credit-row-amount{justify-items:start;grid-auto-flow:column;align-items:center;justify-content:start;gap:8px}}

/* POST-AUDIT FINAL CORRECTIONS (owner, Online) - «سداد فواتير متعددة»: invoices on the right, payment and summary on the left; a short
 * heading, one compact row per invoice (reference · booking · due | outstanding · invoice / booking currency | cost equivalent by the
 * invoice's SAVED rate | allocation), the allocation preview as stacked rows (no table, no horizontal scroll), the confirmation at the
 * bottom-left and in view on a phone. Layout only - every figure and the command are unchanged. */
.toura-online .sbp-title{margin:0;font-size:var(--ui-font);font-weight:var(--ui-weight-bold)}
.toura-online .sbp-pick-head{margin-bottom:8px}
.toura-online .sbp-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr) minmax(128px,.8fr);padding:8px 10px}
.toura-online .sbp-alloc input{min-width:84px;padding-inline:8px}
.toura-online .sbp-due,.toura-online .sbp-cost{display:grid;gap:2px;min-width:0}
.toura-online .sbp-due small,.toura-online .sbp-cost small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .sbp-due .ui-badge{margin-inline-start:4px;vertical-align:middle}
.toura-online .sbp-cost .sbp-eq{font-size:var(--ui-font-sm);overflow-wrap:anywhere}
.toura-online .sbp-alloc input{min-height:36px}
.toura-online .sbp-pv-list{display:grid;gap:6px;margin-top:6px}
.toura-online .sbp-pv{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:6px 8px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);font-size:var(--ui-font-xs);min-width:0}
.toura-online .sbp-pv>b{flex:0 0 100%;font-size:var(--ui-font-sm)}
.toura-online .sbp-pv>span{display:inline-grid;gap:1px;min-width:0}
.toura-online .sbp-pv>span>small{color:var(--ui-text-secondary)}
.toura-online .sbp-line>b{text-align:end;overflow-wrap:anywhere;min-width:0}
.toura-online .sbp-foot{position:sticky;bottom:0;z-index:2;padding-top:8px;background:var(--ui-surface-subtle)}
@media(max-width:600px){
 .toura-online .sbp-row{grid-template-columns:1fr 1fr}
 .toura-online .sbp-foot{flex-direction:row-reverse;flex-wrap:nowrap;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
 .toura-online .sbp-foot .btn{width:auto;flex:1 1 0;min-height:44px;white-space:normal;line-height:1.25}
}

/* «ملاحظات الرحلات» on the customer file (Online): a compact list, the actions at the row's end; its dialog follows the action footer */
.toura-online .ctn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.toura-online .ctn-head h4{margin:0 0 2px;font-size:var(--ui-font)}
.toura-online .ctn-list{display:grid;gap:8px}
.toura-online .ctn-row{display:grid;gap:4px;padding:8px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);min-width:0}
.toura-online .ctn-row-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.toura-online .ctn-trip{color:var(--ui-text-secondary);font-size:var(--ui-font-sm);min-width:0;overflow-wrap:anywhere}
.toura-online .ctn-actions{display:flex;gap:6px;margin-inline-start:auto}
.toura-online .ctn-note{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.toura-online .ctn-delete{color:var(--ui-danger)}
.toura-online .ctn-box{width:min(560px,calc(100vw - 24px))}
.toura-online .ctn-form{display:grid;gap:6px;padding:12px 16px}
.toura-online .ctn-form select,.toura-online .ctn-form textarea{width:100%}
.toura-online .ctn-form textarea{resize:vertical;min-height:120px}
@media(max-width:600px){.toura-online .ctn-head{flex-direction:column;align-items:stretch}.toura-online .ctn-actions{margin-inline-start:0}}

/* MOBILE DIALOGS (owner, post-audit round, Online): on a phone the action footer's buttons are full touch targets. The dynamic-viewport
 * height above now wins over the inline 100vh ModalManager sets (it did not before: an inline style beats a stylesheet rule). */
@media(max-width:640px){
 .toura-online .modal-action-footer .btn{min-height:44px}
 .toura-online .modal-toolbar .doc-close{min-height:40px}
}
.toura-online .sbp-fixed-currency{display:flex;align-items:center;min-height:38px;padding:0 10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-muted);font-weight:var(--ui-weight-bold)}

/* YEAR / MONTH NAVIGATION in the customer and supplier / agent files (owner addendum, Online): one compact row - year, month, «N من M» -
 * a discovery line when the period is empty but other years hold rows, small month headings, a labelled period subtotal */
.toura-online .pp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 8px}
.toura-online .pp-field select{min-height:34px;padding-block:2px;font-size:var(--ui-font-sm);min-width:0;max-width:100%}
.toura-online .pp-count{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .pp-discover{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px;padding:8px 10px;border:1px dashed var(--ui-line);border-radius:var(--ui-radius-sm);font-size:var(--ui-font-sm)}
.toura-online .pp-year-link{border:1px solid var(--ui-line);background:var(--ui-card);border-radius:999px;padding:2px 10px;min-height:30px;cursor:pointer;font:inherit}
.toura-online .pp-year-link:hover{border-color:var(--ui-brand-primary)}
.toura-online .pp-month{display:flex;align-items:baseline;gap:8px;margin:10px 0 4px;padding-bottom:2px;border-bottom:1px solid var(--ui-line);font-size:var(--ui-font-sm);color:var(--ui-text-secondary)}
.toura-online .pp-month small{font-size:var(--ui-font-xs)}
.toura-online .pp-total{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin:0 0 8px;padding:6px 10px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);font-size:var(--ui-font-sm)}
.toura-online .pp-total>span{color:var(--ui-text-secondary)}
.toura-online .pp-note{display:block;margin:-4px 0 6px}
@media(max-width:600px){.toura-online .pp-bar{display:grid;grid-template-columns:1fr 1fr}.toura-online .pp-count{grid-column:1/-1}}

/* SCROLLABLE CUSTOMER AND SUPPLIER / AGENT LISTS (owner addendum, post-audit round, Online). The title, actions, search, filters and the
 * pager stay outside; only the rows scroll, inside a box bounded by the VISIBLE viewport (no fixed pixel height), the column headings
 * stay on top while scrolling. A short list keeps its own height (no reserved empty space). Phones (<=760px) keep the natural page
 * scroll - no nested touch scrolling. Row «المزيد» menus float on the page (they close on any scroll), so nothing is clipped. */
@media(min-width:761px){
 .toura-online #customersList .ui-list-shell:not(.ui-list-shell-empty),.toura-online #agentsList .ui-list-shell:not(.ui-list-shell-empty){min-height:0}
 .toura-online #customersList .ui-table-wrap,.toura-online #agentsList .ui-table-wrap{max-height:max(300px,calc(100vh - 400px));overflow:auto;overscroll-behavior:contain}
 .toura-online #customersList .ui-table-wrap thead th,.toura-online #agentsList .ui-table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--ui-card);box-shadow:inset 0 -1px 0 var(--ui-line)}
}
@supports (height:100dvh){@media(min-width:761px){.toura-online #customersList .ui-table-wrap,.toura-online #agentsList .ui-table-wrap{max-height:max(300px,calc(100dvh - 400px))}}}

/* OFFICE EXPENSES (owner corrections addendum, post-audit round, Online) ------------------------------------------------------------
 * KPI cards: one currency per line inside «الإجمالي المسجَّل» / «المدفوع» / «المتبقي» (a later rule made the list inline-flex) */
.toura-online #expensesSummary .kpi-money-lines{display:grid!important;justify-items:center;gap:2px;line-height:1.35;white-space:nowrap}
.toura-online #expensesSummary .kpi-money-lines bdi{display:block;font-variant-numeric:tabular-nums}
/* «تسجيل دفعة مصروف»: a title, the fields in two balanced columns (date · currency / account · amount / rate · reference / fee · type),
 * the note across, the no-account notice under the account */
.toura-online #expensePaymentModal .epo-title{margin:0;margin-inline-end:auto;font-size:var(--ui-font-lg)}
.toura-online #expensePaymentModal .modal-toolbar{display:flex;align-items:center;gap:8px}
.toura-online #expensePaymentModal .card-body>.grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.toura-online #expensePaymentModal .grid2>.epo-wide{grid-column:1/-1}
.toura-online #expensePaymentModal .grid2 input,.toura-online #expensePaymentModal .grid2 select{width:100%}
.toura-online #expensePaymentModal #expensePaymentNoAccount{display:block;margin-top:4px}
.toura-online #expensePaymentModal #expensePaymentNoAccount.hidden{display:none}
@media(max-width:640px){.toura-online #expensePaymentModal .card-body>.grid2{grid-template-columns:1fr}}
/* a reversed payment stays in the history, marked and muted */
.toura-online .expense-modal-ledger tr[data-reversed] td{color:var(--ui-text-secondary)}
.toura-online .expense-modal-ledger tr[data-reversed] td b{text-decoration:line-through;text-decoration-thickness:1px}
.toura-online .expense-pay-reversed{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-bottom:2px}
.toura-online .expense-pay-reversed small{font-size:var(--ui-font-xs)}
/* the list: year / month bar, the period subtotal, month headings */
.toura-online .exp-period-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin:0 0 8px}
.toura-online .exp-period-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.toura-online .exp-period-pick select{width:auto!important;min-width:130px;max-width:190px;min-height:34px;padding-block:2px;font-size:var(--ui-font-sm);flex:0 0 auto}
.toura-online .exp-period-count,.toura-online .exp-period-note{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .exp-period-totals{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:5px 10px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);font-size:var(--ui-font-sm)}
.toura-online .exp-period-totals>small{color:var(--ui-text-secondary)}
.toura-online .exp-period-cur bdi{font-weight:var(--ui-weight-bold)}
.toura-online .exp-period-note{flex-basis:100%}
.toura-online .expenses-table--online tr[data-month-start] td{border-top:2px solid var(--ui-line)}
.toura-online .exp-month-chip{display:block;margin-bottom:2px;font-size:var(--ui-font-xs);font-weight:var(--ui-weight-bold);color:var(--ui-brand-primary);white-space:nowrap}
/* the expense records scroll inside the list above 760px (the shared customers / suppliers rule); headings stay; phones scroll the page */
@media(min-width:761px){
 .toura-online #expensesList .ui-list-shell:not(.ui-list-shell-empty){min-height:0}
 .toura-online #expensesList .ui-table-wrap{max-height:max(300px,calc(100vh - 420px));overflow:auto;overscroll-behavior:contain}
 .toura-online #expensesList .ui-table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--ui-card);box-shadow:inset 0 -1px 0 var(--ui-line)}
}
@supports (height:100dvh){@media(min-width:761px){.toura-online #expensesList .ui-table-wrap{max-height:max(300px,calc(100dvh - 420px))}}}
/* the beneficiary's file: a compact header, the position and activity, the lists */
.toura-online .ben-head{align-items:flex-start;flex-wrap:wrap}
.toura-online .ben-ident h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.toura-online .ben-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px;font-size:var(--ui-font-sm);color:var(--ui-text-secondary)}
.toura-online .ben-kind{padding:1px 8px;border-radius:999px;background:var(--ui-surface-muted);font-size:var(--ui-font-xs)}
.toura-online .ben-activity{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px;font-size:var(--ui-font-sm)}
.toura-online .ben-activity span{display:inline-flex;align-items:baseline;gap:6px}
.toura-online .ben-activity small{color:var(--ui-text-secondary)}
.toura-online #beneficiaryProfileModal>.modal-box.ben-box{width:min(940px,calc(100vw - 24px))!important;max-width:min(940px,calc(100vw - 24px))!important}
.toura-online .ben-box .ui-list-shell{min-height:0;padding-inline:0}
.toura-online .ben-box .ui-table-wrap{max-width:100%;overflow-x:auto}
.toura-online #beneficiaryProfileModal .ben-figs>span{justify-items:start;text-align:start}
.toura-online #beneficiaryProfileModal .ben-figs bdi,.toura-online #beneficiaryProfileModal .ben-figs b{justify-self:start;font-variant-numeric:tabular-nums}
@media(max-width:600px){.toura-online #beneficiaryProfileModal .ben-figs{grid-template-columns:repeat(2,minmax(0,1fr))}.toura-online #beneficiaryProfileModal .ben-cur{grid-template-columns:1fr}}
.toura-online .ben-box .bfp-group h4{margin:0 0 6px}

/* THE EXPENSE WINDOW, TIGHTER (owner addendum, post-audit round, Online) - same fields, ids, validation and saving; layout only:
 *   row 1  البيان (wide) · العملة · إجمالي المصروف · ملاحظات
 *   row 2  الضريبة ضمن المصروف · عملة الضريبة (· سعر صرف الضريبة) · ملاحظة الضريبة
 *   row 3  التاريخ · التصنيف · المستفيد (· طريقة التسجيل for a new expense)
 * the reference strip on one line, the financial summary a 2 x 2 block beside the form, so «سجل الدفعات» comes up sooner; a phone stacks */
.toura-online #expenseModal .expense-identity{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:6px 12px;margin-bottom:6px;min-height:0}
.toura-online #expenseModal .expense-identity>div{display:flex;align-items:baseline;gap:6px;min-width:0;padding:0;border:0;background:none}
.toura-online #expenseModal .expense-identity small{font-size:var(--ui-font-xs)}
.toura-online #expenseModal .expense-identity b{font-size:var(--ui-font-sm);overflow-wrap:anywhere}
.toura-online #expenseModal .expense-modal-section>h3{margin:0 0 6px;font-size:var(--ui-font)}
.toura-online #expenseModal .expense-form-rows{gap:8px 12px}
.toura-online #expenseModal .expense-beneficiary-row .field-help{font-size:var(--ui-font-xs);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toura-online #expenseModal #expensePaymentSummaryInModal .ui-financial-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.toura-online #expenseModal #expensePaymentSummaryInModal .ui-financial-summary>*{padding:6px 10px;min-height:0}
@media(min-width:1001px){
 .toura-online #expenseModal .expense-modal-top-row{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;align-items:start}
}
@media(max-width:1000px){.toura-online #expenseModal .expense-modal-top-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}}
@media(min-width:761px){
 .toura-online #expenseModal .expense-form-row>div:has(#expenseTitle){order:1;grid-column:span 5}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseCurrency){order:2;grid-column:span 2}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseAmount){order:3;grid-column:span 2}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseNote){order:4;grid-column:span 3}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseTaxAmount){order:5;grid-column:span 3}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseTaxCurrency){order:6;grid-column:span 2}
 .toura-online #expenseModal .expense-form-row>#expenseTaxFxWrap{order:7;grid-column:span 2}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseTaxNote){order:8;grid-column:span 5}
 .toura-online #expenseModal .expense-form-rows:has(#expenseTaxFxWrap.hidden) .expense-form-row>div:has(#expenseTaxNote){grid-column:span 7}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseDate){order:9;grid-column:span 3}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseCategory){order:10;grid-column:span 4}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseBeneficiary){order:11;grid-column:span 5}
 .toura-online #expenseModal .expense-form-row>#expenseRecordModeWrap{order:12;grid-column:span 3}
 .toura-online #expenseModal .expense-form-rows:has(#expenseRecordModeWrap:not(.hidden)) .expense-form-row>div:has(#expenseDate){grid-column:span 2}
 .toura-online #expenseModal .expense-form-rows:has(#expenseRecordModeWrap:not(.hidden)) .expense-form-row>div:has(#expenseCategory){grid-column:span 3}
 .toura-online #expenseModal .expense-form-rows:has(#expenseRecordModeWrap:not(.hidden)) .expense-form-row>div:has(#expenseBeneficiary){grid-column:span 4}
}
@media(min-width:761px) and (max-width:1000px){
 .toura-online #expenseModal .expense-form-row>div:has(#expenseTitle){grid-column:span 12}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseCurrency),.toura-online #expenseModal .expense-form-row>div:has(#expenseAmount){grid-column:span 3}
 .toura-online #expenseModal .expense-form-row>div:has(#expenseNote){grid-column:span 6}
}
/* central indexing: the period bar inside the treasury / commissions / direct-cost / tax lists and the beneficiary file keeps the
 * compact profile look; the two selectors never grow to the toolbar's width */
.toura-online .pp-bar .pp-field select{width:auto!important;min-width:120px;max-width:190px}
.toura-online #treasuryMovementsList .pp-bar,.toura-online #directCostsList .pp-bar,.toura-online #taxSalesList .pp-bar{margin-bottom:6px}
/* T-07: the office tax currency on the currencies tab */
.tax-currency-setting{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:6px 14px;align-items:end;margin:0 0 12px;padding:10px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)}.tax-currency-setting label{display:block;margin-bottom:4px;font-weight:var(--ui-weight-strong);color:var(--ui-heading)}.tax-currency-setting select{width:100%}.tax-currency-setting .field-help{display:block;line-height:1.6}@media(max-width:760px){.tax-currency-setting{grid-template-columns:1fr}}
/* operational UX round: the finance area's pending state beside its one save; the expense categories inside the lists catalog */
.settings-save-row{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.settings-pending-note{color:var(--ui-text-secondary)}.settings-pending-note.is-pending{color:var(--ui-warning-text,#8a5a0b);font-weight:var(--ui-weight-strong)}.tax-currency-setting.is-pending{border-color:var(--ui-warning,#b7791f)}.settings-pending-inline{color:var(--ui-warning-text,#8a5a0b)}
.lookup-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:var(--ui-space-2)}
/* operational UX round - the customer-invoice picker (supplier invoice), the payment party search, the bulk chooser, the compact supplier summary */
.toura-online #agentInvoiceSource.sip-native,.toura-online #centralPaymentParty.ppp-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden}
.toura-online #agentInvoiceModal .agent-invoice-source-field{grid-column:span 2;min-width:0;position:relative}
.sip{position:relative;min-width:0}
.sip-field{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:38px;padding:6px 10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface,#fff);color:inherit;font:inherit;text-align:start;cursor:pointer;min-width:0}
.sip-field:hover{border-color:color-mix(in srgb,var(--blue) 35%,var(--ui-line))}.sip-field:focus-visible,.sip.is-open .sip-field{outline:2px solid color-mix(in srgb,var(--blue) 35%,transparent);outline-offset:1px}
.sip-field.is-locked{cursor:default;background:var(--ui-surface-subtle)}
.sip-caret{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--ui-text-secondary);border-bottom:2px solid var(--ui-text-secondary);transform:rotate(45deg);margin-top:-4px}.sip.is-open .sip-caret{transform:rotate(-135deg);margin-top:4px}
.sip-chosen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.sip-chosen>b{font-variant-numeric:tabular-nums}.sip-none{color:var(--ui-text-secondary);font-size:var(--ui-font-sm)}.sip-vch{font-size:var(--ui-font-xs);color:var(--ui-text-secondary);font-variant-numeric:tabular-nums}
.sip-pop{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:90;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--ui-surface,#fff);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);box-shadow:0 10px 28px rgba(15,23,42,.16);max-height:460px;min-width:0}
.sip-pop.is-up{top:auto;bottom:calc(100% + 4px)}
.sip-pop>input{width:100%;min-width:0}
.sip-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}.sip-filters select{width:100%;min-width:0}
.sip-results{flex:1 1 auto;min-height:0;overflow:auto;display:grid;align-content:start;gap:1px;border-top:1px solid var(--ui-line);padding-top:4px}
.sip-row{display:grid;gap:1px;width:100%;padding:6px 8px;border:0;border-radius:var(--ui-radius-sm);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
.sip-row:hover,.sip-row.is-active,.sip-row:focus-visible{background:var(--ui-surface-subtle);outline:none}.sip-row.is-current{box-shadow:inset 3px 0 0 var(--blue)}
.sip-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.sip-row-sub{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.sip-empty{padding:8px;font-size:var(--ui-font-sm);color:var(--ui-text-secondary)}
.sip-more{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.sip-none-option{border:0;border-top:1px solid var(--ui-line);background:transparent;color:var(--ui-text-secondary);font:inherit;font-size:var(--ui-font-sm);text-align:start;padding:6px 8px 2px;cursor:pointer}.sip-none-option:hover,.sip-none-option.is-current{color:inherit}
.toura-online #agentInvoiceModal .aisum-ref,.toura-online #agentInvoiceModal .aisum-sub{display:block}.toura-online #agentInvoiceModal .aisum-sub{font-weight:400;color:var(--ui-text-secondary);margin-top:1px}
@media(max-width:760px){.toura-online #agentInvoiceModal .agent-invoice-source-field{grid-column:1/-1;min-width:0}.sip-pop{max-height:min(420px,70vh)}}
@media(max-width:480px){.sip-filters{grid-template-columns:minmax(0,1fr)}}
.ppp-field{position:relative;min-width:0}
.sbp-choose{display:grid;gap:8px;padding:12px 14px}.sbp-choose-list{display:grid;gap:6px;max-height:min(420px,60vh);overflow:auto}.sbp-choose-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-card);text-align:start;cursor:pointer}.sbp-choose-row:hover,.sbp-choose-row:focus-visible{border-color:var(--blue);background:var(--ui-surface-subtle)}.sbp-choose-row small{display:block;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.sbp-choose-due{display:grid;justify-items:end;font-weight:var(--ui-weight-strong);font-variant-numeric:tabular-nums}
.toura-online #agentInvoiceModal .aisum--compact{gap:6px;padding:10px 12px}.toura-online #agentInvoiceModal .aisum-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toura-online #agentInvoiceModal .aisum-head h4{margin:0}.toura-online #agentInvoiceModal .aisum-head .cell-note{margin-inline-start:auto}
.toura-online #agentInvoiceModal .aisum-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}.toura-online #agentInvoiceModal .aisum-grid>div{display:contents}.toura-online #agentInvoiceModal .aisum-grid dt{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);white-space:nowrap}.toura-online #agentInvoiceModal .aisum-grid dd{margin:0;font-size:var(--ui-font-xs);font-weight:700;text-align:start;min-width:0;overflow-wrap:anywhere}
/* operational UX round - currency chips (one restrained accent per code; the amount stays the figure), month groups, expense payment grid */
.ui-cur-chip{--cur:#5b6b72;display:inline-flex;align-items:center;justify-content:center;min-width:2.9em;padding:0 5px;border-radius:999px;border:1px solid color-mix(in srgb,var(--cur) 30%,var(--ui-line));background:color-mix(in srgb,var(--cur) 8%,var(--ui-card,#fff));color:color-mix(in srgb,var(--cur) 82%,var(--ui-text,#1f2d33));font-style:normal;font-size:.72em;font-weight:800;letter-spacing:.03em;line-height:1.6;direction:ltr;unicode-bidi:isolate}
.ui-cur-chip[data-cur="ILS"]{--cur:#1d4ed8}.ui-cur-chip[data-cur="JOD"]{--cur:#0f766e}.ui-cur-chip[data-cur="USD"]{--cur:#6d28d9}.ui-cur-chip[data-cur="EUR"]{--cur:#b45309}
.kpi-cur-line{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;direction:rtl}.kpi-cur-line>bdi,.kpi-cur-line>span{font-variant-numeric:tabular-nums}
.toura-online #expensesSummary .kpi-money-lines .kpi-cur-line bdi{display:inline!important}.toura-online #paymentsCenterSummary .kpi-cur-line{display:flex!important;justify-content:flex-start}
.ui-group-row>td{padding:0!important;background:var(--ui-surface-subtle);border-bottom:1px solid var(--ui-line)}
.exp-month-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:4px 10px;border:0;background:transparent;color:var(--ui-heading);font:inherit;text-align:start;cursor:pointer}.exp-month-toggle b{font-size:var(--ui-font-sm)}.exp-month-toggle small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.exp-month-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--blue) 45%,transparent);outline-offset:-2px}
.exp-month-chevron{width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s;margin-top:-3px;flex:0 0 auto}
.exp-month-row.is-collapsed .exp-month-chevron{transform:rotate(135deg);margin-top:0}
tr.is-month-hidden{display:none!important}
@media(max-width:760px){.ui-group-row,.ui-group-row>td{display:block!important;width:100%!important}.ui-group-row>td::before{display:none!important;content:none!important}}
.toura-online #expensePaymentModal .grid2>.epo-fee-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:inherit}.toura-online #expensePaymentModal .grid2>.epo-fee-row>div{min-width:0}
@media(max-width:560px){.toura-online #expensePaymentModal .grid2>.epo-fee-row{grid-template-columns:1fr}}
.cell-line-tag{font-style:normal;font-size:.86em;color:var(--ui-warning-text,#8a5a0b);font-weight:700}
/* statements: the linked-payment lines (heading, unbroken reference, date · amount beneath) */
.cell-line-head{font-weight:700}.cell-line-pay>.cell-line-ref{white-space:nowrap;font-variant-numeric:tabular-nums}.cell-line-sub{display:block;font-size:.88em;opacity:.85;font-variant-numeric:tabular-nums}
/* voucher addendum (screen preview): numbered terms and the time-zone note */
.toura-online .mv-terms-list{margin:0;padding:0 1.3em 0 0;display:grid;gap:5px}.toura-online .mv-terms-list.is-manual{list-style:none;padding:0}.toura-online .mv-terms-list ul{margin:3px 0 0;padding:0 1.1em 0 0}.toura-online #vTerms{white-space:normal}.mv-tz-note{flex-basis:100%;font-size:var(--ui-font-xs);color:var(--ui-text-secondary);font-weight:400}
/* cheques addendum: the KPI rows per currency (the shared chip and line) */
.toura-online #chequeSummary .cheque-kpi-lines{display:grid!important;justify-items:start;gap:2px;line-height:1.35}.toura-online #chequeSummary .cheque-kpi-lines .kpi-cur-line{justify-content:flex-start}.toura-online #chequeSummary .cheque-kpi-lines bdi{font-variant-numeric:tabular-nums}
/* mobile addendum (owner): every summary card of the KPI family - and the financial summary boxes of the same pattern - centres its icon, its
   value / currency rows and its caption on narrow screens; desktop and tablet keep their aligned layout. One shared rule, presentation only */
@media(max-width:640px){
 .toura-online .ui-kpi{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px;padding:8px 8px 9px}
 .toura-online .ui-kpi-icon{flex:0 0 auto;width:26px;height:26px}
 .toura-online .ui-kpi-body{align-items:center;text-align:center;width:100%}
 .toura-online .ui-kpi-value,.toura-online .ui-kpi-label{text-align:center}
 .toura-online .ui-kpi-value .multi-currency-stack,.toura-online .ui-kpi-value .expense-summary-currencies{justify-content:center}
 .toura-online .ui-kpi .kpi-money-lines,.toura-online #chequeSummary .cheque-kpi-lines,.toura-online #expensesSummary .kpi-money-lines{display:grid!important;justify-items:center!important;width:100%}
 .toura-online .ui-kpi .kpi-cur-line,.toura-online #paymentsCenterSummary .kpi-cur-line,.toura-online #chequeSummary .cheque-kpi-lines .kpi-cur-line{display:flex!important;justify-content:center!important;width:100%}
 .toura-online .ui-financial-summary-item{text-align:center}
 .toura-online .ui-financial-summary-item .ui-multi-currency-lines{justify-items:center;justify-content:center}
}
/* the invoice window's internal note: what changed in the booking's services after the invoice was issued (owner final decision) */
.invoice-services-changed{display:grid;gap:2px;font-size:var(--ui-font-sm)}.invoice-services-changed .isc-when{margin-top:4px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.invoice-services-changed .isc-line{padding-inline-start:8px}.invoice-services-changed .isc-more,.invoice-services-changed .isc-rule{font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}.invoice-services-changed .isc-rule{margin-top:4px}
/* customer statement (final UX round): the original of a reversed payment - muted, amounts struck; the reversal row stays as it is */
.toura-online :is(.report-table-customer-statement,.report-table-supplier-statement) tr:is(.statement-row-reversed,.statement-row-voided) td{color:var(--ui-text-secondary)}.toura-online .report-table-customer-statement tr.statement-row-reversed :is(td.report-col-creditMoney,td.report-col-treasuryAmountMoney,td.report-col-reference),.toura-online .report-table-supplier-statement tr.statement-row-reversed :is(td.report-col-debitMoney,td.report-col-treasuryAmountMoney,td.report-col-reference){text-decoration:line-through;text-decoration-thickness:1px}
/* final UX round (owner): bounded select list, destination combobox, STK row, additional-services tours */
.bsel-pop{z-index:3000;overflow:auto;background:var(--ui-surface,#fff);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm,8px);box-shadow:0 10px 26px rgba(15,23,42,.16);padding:4px;direction:rtl}
.bsel-opt{padding:6px 10px;border-radius:6px;cursor:pointer;white-space:normal;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start;line-height:1.35;font-size:var(--ui-font-sm)}
.bsel-opt:hover,.bsel-opt.is-active{background:var(--ui-surface-subtle)}.bsel-opt.is-current{font-weight:600}.bsel-opt.is-disabled{color:var(--ui-text-secondary);opacity:.6;cursor:not-allowed}
.toura-online #destination.dest-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden}
.dest-combo{position:relative;min-width:0}.dest-combo>input{width:100%;min-width:0}
.dest-suggest{position:absolute;inset-inline:0;top:calc(100% + 3px);z-index:80;display:grid;align-content:start;gap:1px;max-height:calc(8 * 34px + 8px);overflow:auto;padding:4px;background:var(--ui-surface,#fff);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm,8px);box-shadow:0 10px 26px rgba(15,23,42,.14)}
.dest-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;padding:4px 10px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
.dest-opt small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}.dest-opt:hover,.dest-opt.is-active{background:var(--ui-surface-subtle)}.dest-opt-free{color:var(--blue-dark,var(--blue))}
.dest-empty{padding:6px 10px;font-size:var(--ui-font-sm);color:var(--ui-text-secondary)}
.toura-online .stk-row{display:block}
.toura-online .service-smart-card .service-edit-grid:has(>.service-field-tours){align-items:start}
.toura-online .service-smart-card .service-edit-grid>.service-field-tours{grid-column:1/-1}
.toura-online .service-field-tours .dest-chips{max-height:96px;overflow-x:hidden;overflow-y:auto;align-content:flex-start;scrollbar-width:thin}
.toura-online .service-field-tours .dest-chip{max-width:100%}.toura-online .service-field-tours .dest-chip>span{white-space:normal}
/* focused correction round: collapsible month headings inside the customer / supplier / employee files (ProfilePeriod.grouped) */
.pp-month-group{min-width:0}.pp-month-toggle{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;font:inherit;text-align:start;cursor:pointer;color:inherit}
.pp-month-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--blue) 45%,transparent);outline-offset:-2px}
.pp-month-group.is-collapsed .exp-month-chevron{transform:rotate(135deg);margin-top:0}.pp-month-group.is-collapsed>.pp-month-body{display:none}
.ctn-error{display:grid;gap:8px;justify-items:start}
/* payroll preparation (focused correction round, Online): title + compact meta in the header, the actions in ONE bottom-left footer that stays
 * reachable (sticky) on small screens; the notes are the last field of the body */
.toura-online #payrollPrepareModal .modal-toolbar>.btn,.toura-online #payrollPrepareModal .payroll-prepare-actions{display:none}
.toura-online #payrollPrepareModal .modal-box{display:flex;flex-direction:column}
.toura-online #payrollPrepareModal .card-body{flex:1 1 auto;min-height:0;overflow:auto}
.toura-online .payroll-prepare-footer{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--ui-line);background:var(--ui-card,#fff)}
.toura-online .payroll-prepare-footer .payroll-action-note{margin:0;flex:1 1 280px;font-size:var(--ui-font-xs);color:var(--ui-text-secondary)}
.toura-online .payroll-footer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto;justify-content:flex-end}
.toura-online .payroll-prepare-footer.is-busy{opacity:.85}
@media(max-width:560px){.toura-online .payroll-footer-actions{width:100%}.toura-online .payroll-footer-actions>.btn{flex:1 1 auto}}
/* direct sales filters (post-merge addendum + layout cleanup, Online): ONE row - السنة | الشهر | الحالة | العملة, the search filling the rest;
 * «من / إلى» only under «فترة مخصصة»; a tablet / phone wraps to two per row, never clipping */
.toura-online .direct-sales-period,.toura-online .direct-sales-custom{display:contents}
.toura-online .direct-sales-custom[hidden]{display:none}
.toura-online .direct-sales-filters>input[type=search]{flex:1 1 220px}
@media (max-width:900px){.toura-online .direct-sales-filters label{flex:1 1 calc(50% - 5px)}.toura-online .direct-sales-filters>input[type=search]{flex-basis:100%}}
/* the accounting centre's date fields follow their own input (remaining financial tabs addendum, Online): where the tab hides them (commissions
 * have their own year / month bar, a balance is an all-time position) the central date field is hidden too - no inert duplicate filter */
.toura-online .accounting-toolbar .date-input-wrapper:has(>input.hidden){display:none}
.toura-online .accounting-toolbar.is-empty{display:none!important}
/* direct costs (owner, Online): السنة | الشهر | العملة in the one period row - the currency is the same select, the same height as its neighbours;
 * the shared .pp-field look and widths; its emptied toolbar takes no space; a phone wraps the fields (the shared 2-column bar) */
.toura-online #directCostsPanel>.finance-toolbar.is-empty{display:none}
/* accounting tabs (post-staging round, Online): one order - the head (title right, primary + print left), the filters, the list; the head
 * of «عمولات المصدر» / «الأرصدة» sits in its slot above the shared toolbar, «التكاليف المباشرة» draws the same head in its own panel */
.toura-online #paymentsPage.is-direct-costs #accountingSectionHeadSlot{display:none}
.toura-online #accountingSectionHeadSlot:empty{display:none}
.toura-online #accountingSectionHeadSlot>.accounting-section-head,.toura-online #directCostsActions>.accounting-section-head{margin:4px 0 10px}
.toura-online #directCostsActions{display:block;width:100%}
.toura-online #paymentsPage>.accounting-toolbar[data-view=balances]{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.toura-online #paymentsPage>.accounting-toolbar[data-view=balances]>select{flex:0 1 200px;width:200px;min-width:0;max-width:100%}
@media(max-width:560px){.toura-online #paymentsPage>.accounting-toolbar[data-view=balances]>select{flex:1 1 calc(50% - 4px);width:auto}}
/* traveler card (post-staging round, Online): the two linked-customer actions read as two - each its own small tap area, a hairline
 * between them, the second one quieter; the sentence before them is unchanged */
.toura-online .pf-linked-note .table-link{display:inline-flex;align-items:center;min-height:24px;padding:1px 8px;margin-block:2px;border-radius:6px;font-weight:600;text-decoration:none;color:var(--ui-primary,#0b5f8a);background:var(--ui-primary-soft,rgba(11,95,138,.07))}
.toura-online .pf-linked-note .table-link+.table-link{position:relative;margin-inline-start:13px;color:var(--ui-text-secondary,#53636b);background:var(--ui-surface-muted,rgba(83,99,107,.08))}
.toura-online .pf-linked-note .table-link+.table-link::before{content:'';position:absolute;inset-inline-start:-8px;top:5px;bottom:5px;width:1px;background:var(--ui-line,#d8e3e7)}
.toura-online .pf-linked-note .table-link:hover{filter:brightness(.95);text-decoration:underline}
.toura-online .pf-linked-note .table-link:focus-visible{outline:2px solid var(--ui-primary,#0b5f8a);outline-offset:1px}
/* standalone invoice (post-staging round, Online): the pricing method, a note under each line, no price cells for «الإجمالي فقط» */
.toura-online .sl-pricing{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;padding:8px 10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm,8px);background:var(--ui-surface-subtle,#f7fafb)}
.toura-online .sl-pricing-label{font-size:var(--ui-font-sm);font-weight:700;color:var(--ui-text)}
.toura-online .sl-pricing-required{color:var(--ui-danger,#b42318);font-weight:600}
.toura-online .sl-pricing-choice{display:flex;flex-wrap:wrap;gap:8px}
.toura-online .sl-pricing-opt{display:flex;align-items:flex-start;gap:6px;padding:6px 10px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-card,#fff);cursor:pointer;max-width:340px}
.toura-online .sl-pricing-opt.is-on{border-color:var(--ui-primary,#0b5f8a);box-shadow:0 0 0 1px var(--ui-primary,#0b5f8a) inset}
.toura-online .sl-pricing-opt>span{display:grid;gap:1px}.toura-online .sl-pricing-opt small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.45}
.toura-online .standalone-service-line .sl-note{grid-column:1/-1;flex:1 1 100%}
.toura-online .standalone-service-line .sl-note input{width:100%}
.toura-online #standaloneCustomerInvoiceModal.is-total-pricing .standalone-service-line :is(.sl-price,.service-line-total){display:none}
/* bulk supplier settlement (post-staging round, Online): the fee toggle, the insufficiency under its account, the remaining-after per row */
.toura-online .sbp-fee-toggle{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:6px 0 2px;font-size:var(--ui-font-sm);font-weight:var(--ui-weight-bold)}
.toura-online .sbp-fee-toggle label{display:inline-flex;align-items:center;gap:5px;font-weight:var(--ui-weight-normal);cursor:pointer}
.toura-online .sbp-fee[hidden]{display:none}
.toura-online .sbp-inline-warn{display:block;margin-top:3px;color:var(--ui-danger,#b42318);font-size:var(--ui-font-xs);font-weight:600;line-height:1.45}
.toura-online .sbp-inline-warn:empty{display:none}
.toura-online .sbp-row .sbp-after{grid-column:1/-1;justify-self:end;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .sbp-box>.sbp-foot{position:sticky;bottom:0;z-index:3;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ui-line);background:var(--ui-card,#fff)}
/* bulk settlement - compact invoice cards (post-staging round, owner): three groups on one line, small badges, numbers aligned; a selected
 * card is the white one with the brand edge, an unselected one sits quietly on the panel tone */
.toura-online .sbp-list{gap:6px}
.toura-online .sbp-row{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(150px,.9fr);gap:4px 12px;padding:6px 10px;align-items:center;background:var(--ui-surface-subtle,#f7fafb)}
.toura-online .sbp-row.is-on{background:var(--ui-card,#fff)}
.toura-online .sbp-ref{gap:1px}
.toura-online .sbp-ref .sbp-num{font-size:var(--ui-font-sm);overflow-wrap:anywhere}
.toura-online .sbp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .sbp-meta .ui-badge{font-size:10.5px;line-height:16px;padding:0 6px;margin:0}
.toura-online .sbp-amt{display:grid;gap:0;justify-items:center;text-align:center;min-width:0}
.toura-online .sbp-amt>b{font-size:var(--ui-font);font-variant-numeric:tabular-nums}
.toura-online .sbp-amt>small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.4}
.toura-online .sbp-amt .sbp-eq{color:var(--ui-info)!important}
.toura-online .sbp-amt-main{display:inline-flex;align-items:baseline;gap:6px}.toura-online .sbp-amt-main>small{color:var(--ui-text-secondary);font-size:var(--ui-font-xs)}
.toura-online .sbp-alloc{display:grid;gap:1px;min-width:0}
.toura-online .sbp-alloc-in{display:flex;align-items:center;gap:6px}
.toura-online .sbp-alloc-in input{min-height:34px;min-width:84px;width:100%;font-variant-numeric:tabular-nums}
.toura-online .sbp-row .sbp-after{grid-column:auto;justify-self:start;color:var(--ui-text-secondary);font-size:var(--ui-font-xs);line-height:1.35}
.toura-online .sbp-row .sbp-after:empty{display:none}
@media(max-width:560px){.toura-online .sbp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.toura-online .sbp-row .sbp-check{grid-column:1/-1}.toura-online .sbp-amt{justify-items:start;text-align:start}}
.toura-online .sbp-row .sbp-check{margin:0;align-self:center}.toura-online .sbp-row .sbp-ref,.toura-online .sbp-row .sbp-meta{line-height:1.35}
/* the invoice due-date helper (post-staging round, Online): small, muted, under its field */
.toura-online .due-date-help{display:block;margin-top:3px;font-size:var(--ui-font-xs);line-height:1.45;color:var(--ui-text-secondary);font-weight:400}
/* manual exchange-rate fields (post-merge corrections, Online): no spinner arrows on a rate - typed, pasted, never nudged */
.toura-online input[type=number]:is([id$="Rate"],[id$="FxRate"],[id^="settingRefFx"])::-webkit-inner-spin-button,.toura-online input[type=number]:is([id$="Rate"],[id$="FxRate"],[id^="settingRefFx"])::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.toura-online input[type=number]:is([id$="Rate"],[id$="FxRate"],[id^="settingRefFx"]){-moz-appearance:textfield;appearance:textfield}
.toura-online .sbp-fx-row{display:grid;gap:3px}
.toura-online .sbp-fx-row label small{font-weight:400}
.toura-online .sbp-fx-row input.validation-error,.toura-online .sbp-fx-row input.validation-error:focus{border-color:var(--ui-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 18%,transparent)}
/* office initialization round (Phase 6): why the session ended - at the top of the sign-in card, apart from the field errors */
.auth-login-notice{background:var(--ui-warning-bg);border:1px solid color-mix(in srgb,var(--ui-warning) 38%,transparent);color:var(--ui-heading);padding:10px 12px;border-radius:10px;font-size:13px;font-weight:800;line-height:1.75;margin:2px 0 10px;text-align:right}
/* final catalog round: a booking type's sections as checkboxes in the settings table */
.booking-type-sections{display:inline-flex;flex-wrap:wrap;gap:4px 10px}.booking-type-sections label{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}.booking-type-sections input[disabled]+span{opacity:.7}