/* ==========================================================================
   VOYZ — Agency & admin dashboard
   Product register: calm, dense, familiar, accessible. One app shell:
   dark rail + slim top bar + elevated content panels.
   ========================================================================== */
.skip-link{position:fixed;top:8px;left:8px;z-index:var(--z-toast);padding:.6rem 1rem;border-radius:var(--r-sm);background:var(--ink);color:#fff;font-weight:var(--fw-label);transform:translateY(-160%);transition:transform var(--dur-2) var(--ease-ios)}
.skip-link:focus{transform:none}

.dashboard-body{background:var(--surface-2)}

/* ---------- Sidebar rail ---------- */
.sidebar{
  position:fixed;inset:0 auto 0 0;z-index:var(--z-drawer);width:252px;
  padding:20px 16px 16px;display:flex;flex-direction:column;
  color:var(--on-dark);background:var(--ink-950);
  border-right:1px solid var(--line-dark);transition:transform .32s var(--ease-ios);
  overflow-y:auto;overscroll-behavior:contain;
}
.sidebar-brand{display:flex;align-items:center;padding:6px 8px;color:#fff;min-width:0}
.sidebar-brand .voyz-logo-mark{height:32px}.sidebar-brand .voyz-logo-word{height:19px}
.workspace{padding:14px 10px;display:flex;gap:11px;align-items:center;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.workspace-avatar,.user-dot{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:linear-gradient(150deg,var(--accent),var(--accent-600));color:var(--on-accent);font-weight:700;font-size:14px}
.workspace>div:last-child{display:flex;flex-direction:column;min-width:0}
.workspace b{font-size:13.5px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.workspace span{margin-top:2px;color:var(--on-dark-mut);font-size:11px}
.side-nav{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.side-nav small{margin:18px 10px 6px;color:#7f97b3;font-size:10.5px;font-weight:700;letter-spacing:.12em}
.side-nav a,.side-bottom a{position:relative;min-height:44px;padding:10px 12px;display:flex;align-items:center;gap:11px;border-radius:var(--r-sm);color:#c7d6e6;font-size:13.5px;font-weight:600;transition:background .16s var(--ease-ios-soft),color .16s var(--ease-ios-soft)}
.side-nav a:hover,.side-bottom a:hover{background:rgba(255,255,255,.07);color:#fff}
.side-nav a.active{background:rgba(255,255,255,.09);color:#fff}
.side-nav a.active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--accent)}
.side-nav a.active i{color:var(--accent)}
.side-nav svg,.side-bottom svg{width:18px;height:18px;flex:0 0 auto}
.side-bottom{margin-top:auto;padding-top:8px}
.side-bottom a{color:#a9bdd3}

.sidebar-scrim{position:fixed;inset:0;z-index:var(--z-backdrop);background:rgba(6,14,26,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.sidebar-scrim.show{opacity:1;visibility:visible}

/* ---------- Main + top bar ---------- */
.dash-main{margin-left:252px;min-height:100vh}
.dash-main:focus{outline:none}
.dash-top{position:sticky;top:0;z-index:var(--z-sticky);height:64px;padding:0 clamp(16px,2vw,28px);display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.dash-top-l,.dash-top-r{display:flex;align-items:center;gap:14px}
.dash-top-title{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.dash-top-link{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-size:13px;font-weight:600;transition:background .16s,color .16s}
.dash-top-link:hover{background:var(--surface-2);color:var(--ink)}
.dash-top-link svg{width:16px;height:16px}
.dash-top .user-dot{width:38px;height:38px;border-radius:50%;font-size:13px}
.side-toggle{display:none;width:44px;height:44px;border:0;background:none;place-items:center;color:var(--ink);cursor:pointer}
.side-toggle svg{width:22px;height:22px}

.dash-content{max-width:1440px;padding:clamp(20px,2.4vw,32px)}

/* ---------- Page heading ---------- */
.dash-heading{margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.dash-heading-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dash-heading h1{margin:0 0 4px;font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2vw,30px);letter-spacing:-.025em;color:var(--ink)}
.dash-heading p{margin:0;color:var(--muted);font-size:14px}

.approval-banner{padding:14px 16px;margin-bottom:20px;display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-sm);border:1px solid #eccf8f;background:var(--warning-050);color:#6b4708;font-size:13.5px}
.approval-banner b{color:var(--warning)}

/* ---------- Stat cards ---------- */
/* auto-fit, not a fixed 3: the admin view has 4 stats and the agency view 3,
   and a hard 3-column track stranded the 4th card on a row of its own. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:20px}
.stat-grid article{padding:18px 18px 20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-xs);transition:box-shadow .2s var(--ease-ios-soft),transform .2s var(--ease-ios-soft)}
.stat-grid article:hover{box-shadow:var(--sh-sm);transform:translateY(-2px)}
.stat-grid span{color:var(--muted);font-size:12.5px;font-weight:600}
.stat-grid h2{margin:8px 0 0;font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-icon{width:38px;height:38px;margin-bottom:14px;display:grid;place-items:center;border-radius:11px;background:var(--brand-050);color:var(--brand)}
.stat-icon svg{width:19px;height:19px}
.eyebrow{display:inline-block;margin-bottom:8px;color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.1em}

/* ---------- Panels ---------- */
.dash-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(270px,1fr);gap:18px}
.panel{border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-xs);overflow:hidden}
.panel-head{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.panel-head h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.panel-head p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.panel-head>a{color:var(--brand);font-size:13px;font-weight:var(--fw-label);white-space:nowrap}
.panel-head>a:hover{color:var(--brand-600);text-decoration:underline}

.activity-list{padding:6px 20px 14px}
.activity-list>div{min-height:64px;padding:14px 0;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line)}
.activity-list>div:first-child{border-top:0}
.activity-avatar{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--brand-050);color:var(--brand);font-size:12px;font-weight:700}
.activity-list p{margin:0;display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.activity-list p b{font-size:14px;color:var(--ink)}
.activity-list small{color:var(--muted);font-size:12px}
.activity-list>div>a{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink-2);transition:border-color .16s,background .16s,color .16s}
.activity-list>div>a:hover{border-color:var(--line-strong);background:var(--surface-2);color:var(--ink)}
.activity-list>div>a[aria-label="WhatsApp"]{color:#1a8a4f;border-color:#bfe4cd;background:#f2faf5}
.activity-list>div>a[aria-label="WhatsApp"]:hover{background:#e6f5ec}
.activity-list>div>a svg{width:17px;height:17px}

.summary-stack{display:grid;gap:14px;align-content:start}
.summary-stack article{padding:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-xs)}
.summary-stack span{color:var(--muted);font-size:12.5px;font-weight:600}
.summary-stack strong{display:block;margin:6px 0 2px;font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.summary-stack small{color:var(--muted);font-size:12px}
.summary-stack a{display:inline-flex;align-items:center;gap:5px;margin-top:6px;color:var(--brand);font-size:13px;font-weight:var(--fw-label)}
.summary-stack a:hover{text-decoration:underline}

/* ---------- Data table ---------- */
.data-table-wrap{border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-xs);overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;min-width:640px}
.data-table th,.data-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr{transition:background .14s}
.data-table tbody tr:hover{background:var(--surface-2)}
.data-table th{color:var(--muted);background:#fafbfd;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.data-table td .depart-city{display:block;margin-top:2px;color:var(--muted);font-size:11.5px}
.data-table td .num{font-variant-numeric:tabular-nums}
.post-cell,.person-cell{display:flex;align-items:center;gap:11px}
.post-cell img{width:60px;height:44px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:var(--surface-3)}
.post-cell span,.person-cell p{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.post-cell b{font-size:13.5px;color:var(--ink)}
.post-cell small,.person-cell small{color:var(--muted);font-size:12px}
.table-actions{display:flex;gap:8px;align-items:center}
.table-actions select{min-height:38px;padding:0 30px 0 10px;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;font-size:13px;cursor:pointer}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;color:var(--ink-2);transition:border-color .16s,background .16s,color .16s}
.icon-btn:hover{border-color:var(--ink);background:var(--surface-2);color:var(--ink)}
.icon-btn svg{width:17px;height:17px}

/* ---------- Editor / forms ---------- */
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.pro-form,.tips{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-xs)}
.form-group{padding:22px 0;border-top:1px solid var(--line)}
.form-group:first-child{padding-top:0;border:0}
.form-group h2{margin:0 0 14px;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.form-section-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field.full{grid-column:1/-1}
.form-actions{padding-top:20px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line)}
.tips{height:max-content;position:sticky;top:84px}
.tips h3{margin:0 0 12px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)}
.tips li{margin-bottom:10px;padding-left:20px;position:relative;color:var(--muted);font-size:12.5px;line-height:1.5;list-style:none}
.tips li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---------- Cards grids (agencies / moderation) ---------- */
.agency-grid,.moderation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.agency-card,.moderation-card{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-xs);transition:box-shadow .2s,transform .2s}
.agency-card:hover,.moderation-card:hover{box-shadow:var(--sh-sm);transform:translateY(-2px)}

/* ---------- Responsive ---------- */
@media (max-width:1050px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none;box-shadow:var(--sh-lg)}
  .dash-main{margin-left:0}
  .side-toggle{display:grid}
  .dash-grid{grid-template-columns:1fr}
  .editor-grid{grid-template-columns:1fr}
  .tips{position:static}
}
@media (max-width:640px){
  .stat-grid{grid-template-columns:1fr}
  .dash-top-link span{display:none}
  .form-section-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .sidebar,.sidebar-scrim,.stat-grid article,.agency-card,.moderation-card{transition:none}
}

/* ==========================================================================
   Product-register corrections.
   Every interactive control gets default / hover / focus / disabled, form
   controls share one vocabulary, and nothing in a data row wraps mid-value.
   ========================================================================== */

/* ---------- Form controls: one shared vocabulary ---------- */
.dash-content input:not([type=checkbox]):not([type=radio]):not([type=file]),
.dash-content select,
.dash-content textarea{
  width:100%;min-height:42px;padding:9px 12px;
  border:1px solid var(--line-strong);border-radius:var(--r-xs);
  background:#fff;color:var(--ink);font-size:14px;
  transition:border-color var(--dur-1) var(--ease-ios-soft),box-shadow var(--dur-1) var(--ease-ios-soft);
}
.dash-content textarea{min-height:96px;padding:10px 12px;line-height:1.55;resize:vertical}
.dash-content select{
  padding-inline-end:36px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351617a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px;
}
[dir=rtl] .dash-content select{background-position:left 11px center}
.dash-content input:hover,.dash-content select:hover,.dash-content textarea:hover{border-color:var(--ink-2)}
.dash-content input:focus-visible,.dash-content select:focus-visible,.dash-content textarea:focus-visible{
  outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand);
}
.dash-content input:disabled,.dash-content select:disabled,.dash-content textarea:disabled{
  opacity:.55;cursor:not-allowed;background:var(--surface-2);
}
.dash-content input[aria-invalid=true],.dash-content textarea[aria-invalid=true],
.dash-content select[aria-invalid=true]{border-color:var(--danger);background:var(--danger-050)}
.dash-content input[type=file]{
  width:100%;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:var(--r-xs);
  background:var(--surface-2);font-size:13px;cursor:pointer;
}
.dash-content input[type=file]:hover{border-color:var(--brand);background:var(--brand-050)}

/* ---------- Editor form: field groups, required marks, help, errors ---------- */
.pro-form .field{margin-bottom:0}
.pro-form .field label{
  display:flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:var(--fw-label);color:var(--ink-2);letter-spacing:0;
}
.pro-form .field.is-required>label::after{content:"*";color:var(--danger);font-weight:var(--fw-strong)}
.pro-form .field small{color:var(--muted);font-size:12px;line-height:1.45}
.form-section-grid{gap:18px}
.form-fieldset{margin:0 0 26px;padding:0;border:0}
.form-fieldset>legend{
  padding:0 0 14px;width:100%;
  font-family:var(--font-display);font-weight:var(--fw-medium);font-size:15px;color:var(--ink);
}
.form-fieldset>legend small{display:block;margin-top:3px;color:var(--muted);font-size:12.5px;font-weight:var(--fw-body)}
.form-fieldset+.form-fieldset{padding-top:24px;border-top:1px solid var(--line)}
.errorlist{
  margin:0 0 4px;padding:0;list-style:none;
  color:var(--danger);font-size:12.5px;font-weight:var(--fw-medium);line-height:1.4;
}
.form-error-summary{
  margin-bottom:18px;padding:14px 16px;
  border:1px solid #e6b3ae;border-radius:var(--r-sm);background:var(--danger-050);color:#7c211d;font-size:13.5px;
}
.form-error-summary b{display:block;margin-bottom:4px;color:var(--danger)}
.form-error-summary a{color:#7c211d;text-decoration:underline}

/* ---------- Data tables ---------- */
.data-table caption{
  padding:0;position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.data-table td .num,.data-table td time,.cell-tel{font-variant-numeric:tabular-nums}
/* Values that must never break mid-token. */
.cell-tel,.cell-nowrap{white-space:nowrap}
.cell-tel>a:first-child{display:block;color:var(--ink)}
.cell-tel>a:first-child:hover{color:var(--brand);text-decoration:underline}
.cell-nowrap small,.cell-tel small{display:block;margin-top:2px;color:var(--muted)}
.cell-wa{
  display:inline-flex;align-items:center;gap:4px;margin-top:4px;
  color:#12704a;font-size:12px;font-weight:var(--fw-label);
}
.cell-wa svg{width:14px;height:14px;flex:0 0 auto}
.cell-wa:hover{text-decoration:underline}
.cell-traveller{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.table-actions{flex-wrap:nowrap}
.table-actions select{min-width:148px;flex:0 1 auto}
.table-actions .button{min-height:38px;padding-inline:14px;font-size:13px;white-space:nowrap}

/* Disclosure for the traveller message — real target, no default marker. */
.cell-note>summary{
  min-height:38px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;
  color:var(--ink-2);font-size:12.5px;font-weight:var(--fw-label);cursor:pointer;list-style:none;
  transition:border-color var(--dur-1),background var(--dur-1),color var(--dur-1);
}
.cell-note>summary::-webkit-details-marker{display:none}
.cell-note>summary::after{
  content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-2) var(--ease-ios-soft);
}
.cell-note[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.cell-note>summary:hover{border-color:var(--ink);background:var(--surface-2);color:var(--ink)}
.cell-note>div{
  max-width:320px;margin-top:8px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface-2);
  font-size:12.5px;line-height:1.5;white-space:normal;
}
.cell-note p{margin:0}
.cell-note small{display:block;margin-top:6px;color:var(--muted)}

/* ---------- Filter bar ---------- */
.filter-bar{
  margin-bottom:18px;padding:14px 18px;
  display:flex;align-items:end;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-xs);
}
.filter-bar .field{margin:0;min-width:210px}
.filter-bar .button{margin-inline-start:auto}

/* ---------- Status pills: never wrap, never spill ---------- */
.status{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:var(--fw-label);line-height:1.35;
  white-space:nowrap;border:1px solid transparent;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.status.new,.status.approved,.status.confirmed,.status.published{color:#0b5c40;background:var(--success-050);border-color:#b6dfcd}
.status.pending,.status.contacted,.status.interested{color:#754c05;background:var(--warning-050);border-color:#e6cd97}
.status.rejected,.status.lost{color:#8e2822;background:var(--danger-050);border-color:#e6b3ae}

/* ---------- Sidebar current page + focus ---------- */
.side-nav a[aria-current=page]{background:rgba(255,255,255,.09);color:#fff}
.side-nav a[aria-current=page]::before{
  content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--accent);
}
.side-nav a[aria-current=page] svg{color:var(--accent)}
[dir=rtl] .side-nav a[aria-current=page]::before{left:auto;right:-16px;border-radius:3px 0 0 3px}
.sidebar :focus-visible{outline-color:var(--accent);box-shadow:0 0 0 4px rgba(18,184,204,.28)}

/* ---------- Empty states that teach ---------- */
.dash-empty{padding:44px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.dash-empty .dash-empty-ic{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--brand-050);color:var(--brand)}
.dash-empty svg{width:20px;height:20px}
.dash-empty b{font-size:15px;color:var(--ink)}
.dash-empty p{max-width:44ch;margin:0;color:var(--muted);font-size:13.5px}

@media (max-width:1050px){
  /* Off-canvas sidebar must not stay in the tab order while hidden. */
  .sidebar{visibility:hidden}
  .sidebar.open{visibility:visible}
  .filter-bar .button{margin-inline-start:0;width:100%}
}
@media (max-width:640px){
  .table-actions{flex-wrap:wrap}
  .table-actions select{min-width:0;width:100%}
  .table-actions .button{width:100%}
}

/* ==========================================================================
   Modern pass: softer geometry, purposeful motion, animated alerts.
   Motion here conveys state only (arrival, selection, feedback) and stays in
   the 150-260ms product band — no page-load choreography.
   ========================================================================== */

/* ---------- Softer, consistent geometry ---------- */
.panel,
.data-table-wrap,
.stat-grid article,
.summary-stack article,
.agency-card,
.moderation-card,
.pro-form,
.tips,
.filter-bar{border-radius:var(--r-lg)}
.dash-content .button{border-radius:var(--r-full)}
.icon-btn,
.table-actions select,
.dash-content input:not([type=checkbox]):not([type=radio]),
.dash-content select,
.dash-content textarea,
.dash-content input[type=file]{border-radius:var(--r-sm)}
.stat-icon,.activity-avatar,.workspace-avatar,.user-dot{border-radius:14px}
.dash-top .user-dot{border-radius:50%}
.side-nav a,.side-bottom a{border-radius:var(--r)}

/* ---------- Stat cards: quieter default, clearer hover ---------- */
.stat-grid article{
  position:relative;overflow:hidden;
  transition:box-shadow .22s var(--ease-ios-soft),transform .22s var(--ease-ios-soft),border-color .22s var(--ease-ios-soft);
}
.stat-grid article:hover{border-color:var(--accent-100);box-shadow:var(--sh-md);transform:translateY(-3px)}
.stat-icon{background:var(--accent-050);color:var(--accent-ink)}

/* ---------- Table rows ---------- */
.data-table tbody tr{transition:background .16s var(--ease-ios-soft)}
.data-table tbody tr:hover{background:var(--accent-050)}
.data-table thead th{background:var(--surface-2);border-bottom:1px solid var(--line-strong)}
.data-table tbody tr:focus-within{background:var(--accent-050);outline:2px solid var(--brand);outline-offset:-2px}

/* ---------- Nav: the indicator slides between items ---------- */
.side-nav a{transition:background .18s var(--ease-ios-soft),color .18s var(--ease-ios-soft),padding-inline-start .18s var(--ease-ios-soft)}
.side-nav a:hover{padding-inline-start:16px}
.side-nav a[aria-current=page]::before{transition:transform .24s var(--ease-ios-soft)}

/* ---------- Alerts / toasts: animated, accessible, dismissible ---------- */
.toast-wrap{
  position:fixed;z-index:var(--z-toast);top:auto;bottom:24px;right:24px;left:auto;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
}
[dir=rtl] .toast-wrap{right:auto;left:24px}
.toast{
  width:min(400px,calc(100vw - 40px));
  padding:13px 15px;display:flex;align-items:center;gap:11px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--sh-lg);
  pointer-events:auto;
  animation:toast-rise .42s var(--ease-out-expo) both;
}
.toast::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:currentColor;opacity:.35;
  transform-origin:left;animation:toast-timer 7s linear both;
}
[dir=rtl] .toast::after{transform-origin:right}
.toast{position:relative;overflow:hidden}
.toast.success{border-color:#b6dfcd;background:#f6fcf9;color:var(--success)}
.toast.error,.toast.danger{border-color:#e6b3ae;background:var(--danger-050);color:var(--danger)}
.toast.warning{border-color:#e6cd97;background:var(--warning-050);color:var(--warning)}
.toast-icon{
  width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:50%;
  color:#fff;background:var(--brand);
}
.toast.success .toast-icon{background:var(--success);animation:toast-pop .5s .16s var(--ease-out-expo) both}
.toast.error .toast-icon,.toast.danger .toast-icon{background:var(--danger)}
.toast.warning .toast-icon{background:var(--warning)}
.toast>span:not(.toast-icon){flex:1 1 auto;min-width:0;color:var(--ink);font-size:13.5px;line-height:1.45}
.toast button{
  width:32px;height:32px;flex:0 0 32px;margin:0;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background .16s,color .16s;
}
.toast button:hover{background:var(--surface-2);color:var(--ink)}
.toast.is-leaving{animation:toast-sink .24s var(--ease-ios-soft) both}

@keyframes toast-rise{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes toast-sink{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes toast-pop{from{transform:scale(.5)}}
@keyframes toast-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- Approval banner ---------- */
.approval-banner{border-radius:var(--r-lg);animation:toast-rise .5s var(--ease-out-expo) both}

/* ---------- Dashboard type ---------- */
.dash-heading h1{font-weight:var(--fw-display);letter-spacing:var(--track-h2)}
.dash-top-title,.panel-head h3,.form-fieldset>legend{font-weight:var(--fw-medium)}
.stat-grid h2,.summary-stack strong{font-weight:var(--fw-display);letter-spacing:-.02em}
.data-table th{font-weight:var(--fw-label)}


@media (prefers-reduced-motion:reduce){
  .toast,.toast-icon,.approval-banner{animation:none}
  .toast::after{display:none}
  .stat-grid article:hover{transform:none}
  .side-nav a:hover{padding-inline-start:12px}
}

/* Numeric and Latin values are inherently LTR. Isolating them stops the bidi
   algorithm reordering prices, dates and phone numbers in Arabic. */
.data-table .num,.data-table time,.cell-tel,.stat-grid h2,.summary-stack strong,
.pass-code,.workspace-avatar,.user-dot{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .data-table .num,[dir=rtl] .data-table time,[dir=rtl] .cell-tel{text-align:right}
[dir=rtl] .dash-main{margin-left:0;margin-right:252px}
[dir=rtl] .sidebar{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--line-dark)}
[dir=rtl] .skip-link{left:auto;right:8px}
@media (max-width:1050px){
  [dir=rtl] .dash-main{margin-right:0}
  [dir=rtl] .sidebar{transform:translateX(100%)}
  [dir=rtl] .sidebar.open{transform:none}
}

/* Row headers carry the offer name; style them as body cells, not headings. */
.data-table tbody th{
  position:static;text-align:left;text-transform:none;letter-spacing:0;
  font-size:13px;font-weight:var(--fw-body);color:var(--ink);background:transparent;
}
[dir=rtl] .data-table tbody th{text-align:right}

/* Custom file field (see form-aid.js). The native input stays in the DOM and
   keeps its accessible name; only its browser-chrome button is hidden. */
.file-field{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.file-field input[type=file]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);border:0;
}
.file-field-btn{
  min-height:42px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-strong);border-radius:var(--r-full);
  background:#fff;color:var(--ink);font-size:13.5px;font-weight:var(--fw-label);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease-ios-soft),background var(--dur-1) var(--ease-ios-soft);
}
.file-field-btn:hover{border-color:var(--accent);background:var(--accent-050)}
.file-field input[type=file]:focus-visible+.file-field-name,
.file-field input[type=file]:focus-visible~.file-field-btn,
.file-field:focus-within .file-field-btn{outline:2px solid var(--brand);outline-offset:2px}
.file-field-name{min-width:0;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-field-name.has-file{color:var(--ink);font-weight:var(--fw-medium)}

/* ---------- Registre de commerce ----------
   The verification document an Algerian agency must supply. Rendered as a
   chip so its presence or absence is readable at a glance in the queue. */
.agency-facts{margin:14px 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.agency-facts>div{min-width:0}
.agency-facts dt{font-size:10.5px;font-weight:var(--fw-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.agency-facts dd{margin:2px 0 0;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.doc-chip{
  margin:0 0 16px;padding:11px 13px;
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);
  transition:border-color var(--dur-2) var(--ease-ios-soft),background var(--dur-2) var(--ease-ios-soft);
}
.doc-chip span{display:flex;flex-direction:column;min-width:0;flex:1}
.doc-chip b{font-size:13px;color:var(--ink)}
.doc-chip small{color:var(--muted);font-size:11.5px;line-height:1.4}
.doc-chip svg{width:18px;height:18px;flex:0 0 auto}
.doc-chip.is-present{border-color:#b6dfcd;background:var(--success-050);color:#0b5c40}
.doc-chip.is-present:hover{border-color:var(--success);background:#e0f2e9}
.doc-chip.is-present b{color:#0b5c40}
.doc-chip.is-missing{border-color:#e6b3ae;background:var(--danger-050);color:#8e2822}
.doc-chip.is-missing b{color:#8e2822}
.doc-chip.is-missing small{color:#9a4b45}

/* The agency's own view of its document. */
.doc-status{
  margin-bottom:20px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid #b6dfcd;border-radius:var(--r-lg);background:var(--success-050);color:#0b5c40;
}
.doc-status span{display:flex;flex-direction:column;flex:1;min-width:200px}
.doc-status b{font-size:14px}
.doc-status small{color:#3d7a63;font-size:12.5px}
.doc-status svg{width:20px;height:20px;flex:0 0 auto}
.doc-status .button{min-height:38px;padding-inline:14px;font-size:13px}

.approval-banner.is-danger{border-color:#e6b3ae;background:var(--danger-050);color:#7c211d}
.approval-banner.is-danger b{color:var(--danger)}

@media (max-width:520px){.agency-facts{grid-template-columns:1fr}}

/* ==========================================================================
   Offer management + list tables + the success alert
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.crumb{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;
  color:var(--muted);font-size:13px;font-weight:var(--fw-label);
  transition:color var(--dur-2) var(--ease-ios-soft);
}
.crumb:hover{color:var(--brand)}
.crumb svg{width:15px;height:15px}
[dir=rtl] .crumb svg{transform:scaleX(-1)}
.dash-heading .status{margin-inline-start:4px;vertical-align:middle}

/* ---------- Manage layout ---------- */
.manage-stack{display:flex;flex-direction:column;gap:18px}




.seat-body{padding:20px}
.seat-figure{display:flex;align-items:baseline;gap:9px;margin-bottom:14px}
.seat-figure b{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:44px;line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.seat-figure span{color:var(--muted);font-size:13.5px}

.seat-bar{
  height:10px;border-radius:var(--r-full);overflow:hidden;
  background:var(--surface-3);
}
.seat-bar>span{
  display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transition:width .6s var(--ease-ios);
}
[dir=rtl] .seat-bar>span{background:linear-gradient(270deg,var(--brand),var(--accent))}

.seat-legend{margin:16px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.seat-legend dt{color:var(--muted);font-size:11px;font-weight:var(--fw-label);letter-spacing:.06em;text-transform:uppercase}
.seat-legend dd{
  margin:3px 0 0;font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums;
}
.seat-empty{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.6}

.seat-form{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
}
.seat-form .f{flex:1;min-width:130px;display:flex;flex-direction:column;gap:6px}
.seat-form label{font-size:12.5px;font-weight:var(--fw-label);color:var(--ink-2)}
.seat-form .button{white-space:nowrap}

/* ---------- List tables ---------- */
.list-table td,.list-table th{vertical-align:middle}
.agency-avatar{
  width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;
  background:var(--brand-050);color:var(--brand);font-size:13px;font-weight:var(--fw-strong);
}
.doc-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:var(--fw-label);white-space:nowrap;
  transition:background var(--dur-2) var(--ease-ios-soft),color var(--dur-2) var(--ease-ios-soft);
}
.doc-pill svg{width:15px;height:15px;flex:0 0 auto}
.doc-pill.is-present{color:#0b5c40;background:var(--success-050)}
.doc-pill.is-present:hover{background:#d8efe4}
.doc-pill.is-missing{color:#8e2822;background:var(--danger-050)}
.doc-num{display:block;margin-top:4px;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}

/* Tables collapse into stacked rows rather than scrolling sideways on phones. */
@media (max-width:720px){
  .list-table,.list-table tbody,.list-table tr,.list-table td,.list-table th{display:block;width:auto}
  .list-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .list-table{min-width:0}
  .list-table tr{
    margin:0 12px 12px;padding:14px;
    border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-xs);
  }
  .list-table td,.list-table th{border:0;padding:6px 0}
  .list-table td::before{
    content:attr(data-label);display:block;margin-bottom:3px;
    color:var(--muted);font-size:10.5px;font-weight:var(--fw-label);
    letter-spacing:.07em;text-transform:uppercase;
  }
  .list-table .table-actions .button{width:100%}
}

/* ==========================================================================
   Success alert — a capsule that drops from the top, like a system banner.
   Spring-free: it settles on the iOS curve instead of bouncing.
   ========================================================================== */
.toast-wrap{
  position:fixed;z-index:var(--z-toast);
  top:16px;left:50%;translate:-50% 0;right:auto;bottom:auto;
  display:flex;flex-direction:column;gap:10px;
  width:max-content;max-width:calc(100vw - 32px);
  pointer-events:none;
}
[dir=rtl] .toast-wrap{left:50%;right:auto}

.toast{
  position:relative;overflow:hidden;
  width:auto;min-width:min(320px,calc(100vw - 32px));max-width:min(460px,calc(100vw - 32px));
  padding:12px 14px;display:flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.6);border-radius:var(--r-full);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 18px 40px -16px rgba(16,31,48,.34),0 4px 12px -4px rgba(16,31,48,.16),var(--sh-inset);
  pointer-events:auto;
  animation:toast-drop .52s var(--ease-ios) both;
}
.toast::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:currentColor;opacity:.25;
  transform-origin:left;animation:toast-timer 6s linear both;
}
[dir=rtl] .toast::after{transform-origin:right}

.toast-icon{
  width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:50%;
  color:#fff;background:var(--brand);
}
.toast-icon svg{width:16px;height:16px;stroke-width:2.6}
.toast.success{color:var(--success)}
.toast.success .toast-icon{background:var(--success);animation:toast-seal .5s .1s var(--ease-ios) both}
.toast.error .toast-icon,.toast.danger .toast-icon{background:var(--danger)}
.toast.warning .toast-icon{background:var(--warning)}
.toast.error,.toast.danger{color:var(--danger)}
.toast.warning{color:var(--warning)}

.toast>span:not(.toast-icon){flex:1 1 auto;min-width:0;color:var(--ink);font-size:14px;font-weight:var(--fw-medium);line-height:1.4}
.toast>.toast-icon{flex:0 0 30px;width:30px;height:30px;aspect-ratio:1}
.toast button{
  width:28px;height:28px;flex:0 0 28px;margin:0;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(16,31,48,.06);color:var(--ink-2);cursor:pointer;
  transition:background var(--dur-1) var(--ease-ios-soft),color var(--dur-1) var(--ease-ios-soft);
}
.toast button:hover{background:rgba(16,31,48,.12);color:var(--ink)}
.toast button svg{width:14px;height:14px}
.toast.is-leaving{animation:toast-lift .3s var(--ease-ios-tap) both}

/* Drops in, settles, no overshoot — the system-banner feel. */
@keyframes toast-drop{
  from{opacity:0;transform:translateY(-22px) scale(.94)}
  to{opacity:1;transform:none}
}
@keyframes toast-lift{
  to{opacity:0;transform:translateY(-14px) scale(.96)}
}
/* The check draws itself rather than popping. */
@keyframes toast-seal{
  from{transform:scale(.4);opacity:0}
  to{transform:scale(1);opacity:1}
}
@keyframes toast-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (prefers-reduced-motion:reduce){
  .toast,.toast-icon{animation:none}
  .toast::after{display:none}
  .seat-bar>span{transition:none}
}

/* The manage view's table sits in a narrower column than a full-width one, so
   it needs its own floor and a scroll container that is actually allowed to
   scroll (.panel clips by default). */
.manage-stack .panel{overflow:visible}
.manage-stack .data-table-wrap{
  overflow-x:auto;border:0;box-shadow:none;border-radius:0 0 var(--r-lg) var(--r-lg);
  -webkit-overflow-scrolling:touch;
}
.manage-stack .data-table{min-width:720px}
.manage-stack .data-table .table-actions select{min-width:150px}
.manage-stack .data-table .cell-note>div{max-width:280px}
.seat-legend dt{line-height:1.35;min-height:2.4em;display:flex;align-items:flex-start}

/* ==========================================================================
   Dashboard typography — its own family, separate from the brand surfaces.

   The public site is a brand surface and keeps Archivo's light display voice.
   The dashboard is a tool: dense tables, 12-14px labels, numbers that must
   line up in columns. Inter is drawn for exactly that — tall x-height, open
   apertures, real tabular figures — and the product register explicitly
   permits familiar UI sans defaults where earned familiarity beats novelty.
   Scoped to .dashboard-body so nothing leaks onto the marketing pages.
   ========================================================================== */
.dashboard-body{
  /* On Apple hardware this resolves to SF Pro — the actual iOS typeface —
     and to Segoe UI Variable on Windows, with Inter as the web fallback.
     That is what makes the dashboard read as a native tool rather than a
     web page wearing a theme. */
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI","Inter","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI","Inter","IBM Plex Sans Arabic",system-ui,sans-serif;
  /* A tool reads better with more weight than a light display face. */
  --fw-display:600; --fw-heading:600; --fw-medium:500; --fw-label:600;
  font-feature-settings:"cv05" 1,"ss03" 1,"tnum" 0;
  letter-spacing:-0.006em;
}
.dashboard-body :is(h1,h2,h3){font-family:var(--font-display)}
.dashboard-body .dash-heading h1{font-weight:600;letter-spacing:-0.022em}
.dashboard-body .stat-grid h2,
.dashboard-body .summary-stack strong,
.dashboard-body .seat-figure b{font-weight:600;letter-spacing:-0.028em;font-variant-numeric:tabular-nums}
.dashboard-body .data-table{font-feature-settings:"tnum" 1}
.dashboard-body .num,.dashboard-body time{font-variant-numeric:tabular-nums}
.lang-ar .dashboard-body,.lang-ar.dashboard-body{letter-spacing:0}

/* ==========================================================================
   Segmented filter (moderation tabs)
   ========================================================================== */
.seg{
  margin-bottom:18px;padding:4px;
  display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap;
  border-radius:var(--r-full);background:rgba(118,118,128,.10);
}
.seg-item{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:var(--r-full);
  color:var(--ink-2);font-size:13.5px;font-weight:var(--fw-label);
  transition:background var(--dur-2) var(--ease-ios-soft),color var(--dur-2) var(--ease-ios-soft),box-shadow var(--dur-2) var(--ease-ios-soft);
}
.seg-item:hover{color:var(--ink)}
.seg-item.is-on{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.seg-item b{
  min-width:20px;padding:1px 6px;border-radius:var(--r-full);
  background:rgba(16,31,48,.08);color:var(--ink-2);font-size:11.5px;font-weight:var(--fw-label);
}
.seg-item.is-on b{background:var(--brand);color:#fff}

/* ==========================================================================
   Review list (moderation queue)
   ========================================================================== */
.review-list{display:flex;flex-direction:column;gap:12px}
.review{
  display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;
  padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--sh-xs);
  transition:box-shadow var(--dur-2) var(--ease-ios-soft),border-color var(--dur-2) var(--ease-ios-soft);
}
.review:hover{box-shadow:var(--sh-sm);border-color:var(--line-strong)}

.review-media{
  position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--surface-2);display:block;
}
.review-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease-ios)}
.review-media:hover img{transform:scale(1.04)}
.review-noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.review-noimg svg{width:22px;height:22px}

.review-body{min-width:0;display:flex;flex-direction:column;gap:7px}
.review-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.review-meta{color:var(--muted);font-size:12.5px}
.review-body h3{margin:0;font-size:16.5px;line-height:1.35;color:var(--ink)}
.review-facts{margin:0;display:flex;gap:14px;flex-wrap:wrap;color:var(--ink-2);font-size:13px}
.review-facts span{display:inline-flex;align-items:center;gap:5px}
.review-facts svg{width:14px;height:14px;color:var(--muted);flex:0 0 auto}
.review-caption{
  margin:0;color:var(--muted);font-size:13px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.review-reason{
  margin:2px 0 0;padding:8px 11px;display:flex;gap:7px;align-items:flex-start;
  border-radius:var(--r-sm);background:var(--danger-050);color:#8e2822;font-size:12.5px;line-height:1.5;
}
.review-reason svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}

.review-actions{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;
  min-width:186px;
}
.review-actions .button{min-height:40px;font-size:13.5px;justify-content:center}
.review-actions .button-ghost{color:var(--ink-2)}
.review-actions .button-ghost b{
  margin-inline-start:2px;padding:1px 7px;border-radius:var(--r-full);
  background:var(--brand-050);color:var(--brand);font-size:11.5px;
}
.button.is-danger{color:#fff;background:var(--danger)}
.button.is-danger:hover{background:#9c2c26}

/* Reject reason opens inline rather than in a modal. */
.reject{position:relative}
.reject>summary{list-style:none;cursor:pointer}
.reject>summary::-webkit-details-marker{display:none}
.reject>summary .button{width:100%}
.reject>form{
  margin-top:8px;padding:14px;display:flex;flex-direction:column;gap:9px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);
}
.reject label{font-size:12.5px;font-weight:var(--fw-label);color:var(--ink-2)}
.reject textarea{width:100%;min-height:74px;font-size:13.5px}

@media (max-width:900px){
  .review{grid-template-columns:110px minmax(0,1fr)}
  .review-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;min-width:0}
  .review-actions>*{flex:1;min-width:140px}
  .reject{flex-basis:100%}
}
@media (max-width:560px){
  .review{grid-template-columns:1fr}
  .review-media{aspect-ratio:16/9}
  .seg{display:flex;width:100%;overflow-x:auto}
}

/* ==========================================================================
   Seat stepper + manual reservation
   ========================================================================== */
.seat-edit{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.seat-edit-label{display:block;margin-bottom:9px;font-size:12.5px;font-weight:var(--fw-label);color:var(--ink-2)}
.stepper{
  display:flex;align-items:center;gap:0;
  border:1px solid var(--line-strong);border-radius:var(--r-full);
  background:var(--surface-2);overflow:hidden;width:max-content;
}
.stepper form{display:flex}
.step{
  width:46px;height:46px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  transition:background var(--dur-1) var(--ease-ios-soft),color var(--dur-1) var(--ease-ios-soft);
}
.step:hover{background:rgba(16,31,48,.07);color:var(--ink)}
.step:active{background:rgba(16,31,48,.12)}
.step svg{width:17px;height:17px}
.stepper-set input{
  width:74px;height:46px;padding:0;border:0;border-inline:1px solid var(--line-strong);
  background:#fff;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:17px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.stepper-set input:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.stepper-set input::-webkit-outer-spin-button,
.stepper-set input::-webkit-inner-spin-button{appearance:none;margin:0}
.stepper-set input[type=number]{-moz-appearance:textfield}
.seat-edit-hint{display:block;margin-top:8px;color:var(--muted);font-size:11.5px}

.manual-add{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.manual-add>summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  color:var(--brand);font-size:13.5px;font-weight:var(--fw-label);
}
.manual-add>summary::-webkit-details-marker{display:none}
.manual-add>summary svg{width:16px;height:16px}
.manual-add>summary:hover{color:var(--brand-600)}
.manual-add>form{margin-top:12px;display:flex;flex-direction:column;gap:11px}
.manual-hint{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.manual-row{display:grid;grid-template-columns:1fr 84px;gap:10px}
.manual-add label{font-size:12.5px;font-weight:var(--fw-label);color:var(--ink-2)}
.manual-add .f{display:flex;flex-direction:column;gap:6px}


/* ---------- Seat summary strip ----------
   Horizontal: the seat figures read left-to-right and the controls sit beside
   them, so the requests table below gets the full content width. */
.seat-body{
  padding:20px 22px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;
}
.seat-lead{min-width:0;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);flex-wrap:wrap}
.seat-figure{display:flex;align-items:baseline;gap:9px;margin:0;white-space:nowrap}
.seat-figure b{font-size:40px}
.seat-figure span{color:var(--muted);font-size:13px}

.seat-bar{height:10px;flex:1 1 110px;min-width:90px}
/* An empty track reads as broken; hatch it so it looks deliberate. */
.seat-bar.is-empty{
  background-image:repeating-linear-gradient(45deg,rgba(16,31,48,.05) 0 6px,transparent 6px 12px);
}

.seat-legend{margin:0;display:flex;gap:clamp(14px,1.6vw,22px);flex:0 0 auto}
.seat-legend>div{white-space:nowrap}
.seat-legend dt{min-height:0;display:block;font-size:11px}
.seat-legend dd{margin-top:2px;font-size:18px}
.seat-empty{margin:0;color:var(--muted);font-size:13px;max-width:34ch}

.seat-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.seat-edit{margin:0;padding:0;border:0}
.seat-edit-label{margin-bottom:7px}
.manual-add{margin:0;padding:0;border:0;position:relative}
.manual-add>form{
  position:absolute;z-index:var(--z-dropdown);inset-inline-end:0;top:calc(100% + 10px);
  width:min(340px,80vw);padding:16px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--sh-lg);
}

/* Compact confirm action keeps the follow-up column inside the panel. */
.icon-btn.is-confirm{border-color:var(--brand);color:var(--brand);background:var(--brand-050)}
.icon-btn.is-confirm:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

@media (max-width:1100px){
  .seat-body{grid-template-columns:1fr;gap:20px}
  .seat-lead{grid-template-columns:1fr;gap:14px}
  .seat-bar{min-width:0}
  .manual-add>form{position:static;width:auto;box-shadow:none;margin-top:12px}
}
@media (max-width:640px){
  .seat-legend{flex-wrap:wrap;gap:14px}
  .seat-controls{flex-direction:column;align-items:stretch}
}


/* ---------- Drawer head + close ----------
   The close button is the sheet's escape route on touch, where there is no
   Escape key and the scrim is easy to miss. Hidden on desktop, where the
   sidebar is permanent navigation rather than a modal. */
.sidebar-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:14px;
}
.side-close{
  display:none;width:44px;height:44px;flex:0 0 44px;
  place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--on-dark);cursor:pointer;
  transition:background var(--dur-1) var(--ease-ios-soft),color var(--dur-1) var(--ease-ios-soft);
}
.side-close:hover{background:rgba(255,255,255,.16);color:#fff}
.side-close svg{width:20px;height:20px}
.side-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The page behind an open sheet must not scroll under the finger. */
body.drawer-open{overflow:hidden}

@media (max-width:1050px){
  .side-close{display:grid}
  .sidebar{width:min(310px,86vw)}
  .sidebar.open{box-shadow:var(--sh-lg)}
  /* Keeps the logout reachable even when the nav fills a short viewport. */
  .side-bottom{position:sticky;bottom:0;margin-top:auto;padding-top:12px;background:var(--ink-950)}
}

/* ==========================================================================
   Sidebar — iOS sidebar material

   Modelled on the iPadOS source list: a dark translucent panel, grouped
   sections with small muted headers, and a selection that is a filled
   rounded rect behind the row rather than a stripe beside it. Rows carry an
   icon tile so the list reads as one column of aligned glyphs.
   ========================================================================== */
.sidebar{
  padding:14px 12px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 240px),
    var(--ink-950);
  border-right:1px solid rgba(255,255,255,.07);
  gap:2px;
}

.sidebar-head{padding:6px 4px 10px}
.sidebar-brand .voyz-logo-mark{height:28px}
.sidebar-brand .voyz-logo-word{height:17px}

/* Profile card: an inset grouped-list row. */
.workspace{
  padding:11px 12px;margin-bottom:6px;gap:11px;
  border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
}
.workspace-avatar{width:38px;height:38px;border-radius:12px;font-size:13px;letter-spacing:-.01em}
.workspace b{font-size:14px;font-weight:600;letter-spacing:-.01em;color:#fff}
.workspace span{margin-top:1px;font-size:12px;color:var(--on-dark-mut)}

/* Section headers: iOS grouped-list captions. */
.side-nav small{
  margin:16px 12px 6px;
  font-size:11px;font-weight:600;letter-spacing:.06em;
  color:#8aa2bd;text-transform:uppercase;
}

/* Rows. The selection is the surface, not a decoration beside it. */
.side-nav a,.side-bottom a{
  position:relative;min-height:44px;padding:9px 11px;gap:12px;
  border-radius:12px;
  color:#cfdcea;font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  transition:background var(--dur-1) var(--ease-ios-soft),
             color var(--dur-1) var(--ease-ios-soft),
             transform var(--dur-tap) var(--ease-ios-tap);
}
.side-nav a:hover,.side-bottom a:hover{background:rgba(255,255,255,.07);color:#fff;padding-inline-start:11px}
.side-nav a:active,.side-bottom a:active{transform:scale(.98)}

/* Icon tile keeps every glyph on one optical column. */
.side-nav a>svg,.side-bottom a>svg,
.side-nav a>i,.side-bottom a>i{
  width:28px;height:28px;flex:0 0 28px;
  display:grid;place-items:center;border-radius:8px;
  background:rgba(255,255,255,.06);color:#a9c0d8;
  transition:background var(--dur-1) var(--ease-ios-soft),color var(--dur-1) var(--ease-ios-soft);
}
.side-nav a svg,.side-bottom a svg{width:17px;height:17px}
.side-nav a>i svg,.side-bottom a>i svg{width:16px;height:16px}

/* Current page: tinted fill, no left stripe. */
.side-nav a.active,.side-nav a[aria-current=page]{
  background:rgba(18,184,204,.16);color:#fff;font-weight:600;
}
.side-nav a.active::before,.side-nav a[aria-current=page]::before{content:none}
.side-nav a.active>i,.side-nav a[aria-current=page]>i,
.side-nav a.active>svg,.side-nav a[aria-current=page]>svg{
  background:var(--accent);color:var(--on-accent);
}
.side-nav a.active svg,.side-nav a[aria-current=page] svg{color:inherit}

/* Logout sits apart from navigation, per destructive-nav-separation. */
.side-bottom{
  margin-top:auto;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.side-bottom a{color:#9db4cd}
.side-bottom a:hover{background:rgba(179,50,44,.18);color:#ffd9d6}
.side-bottom a:hover>i{background:rgba(179,50,44,.3);color:#ffd9d6}

/* Scrim: a soft dark veil, blurred like an iOS sheet backdrop. */
.sidebar-scrim{
  background:rgba(6,14,26,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:opacity .32s var(--ease-ios),visibility .32s var(--ease-ios);
}

@media (max-width:1050px){
  .sidebar{
    border-right:0;border-radius:0 22px 22px 0;
    padding-top:calc(14px + env(safe-area-inset-top));
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  [dir=rtl] .sidebar{border-radius:22px 0 0 22px}
  .side-nav a,.side-bottom a{min-height:48px;font-size:15.5px}
}

/* Complete agency account editor. */
.agency-editor-grid{grid-template-columns:minmax(0,1fr) 320px}
.admin-check{min-height:48px;padding:10px 12px;display:flex!important;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface-2);cursor:pointer}
.admin-check input{width:18px;height:18px;accent-color:var(--brand)}
.admin-check span{font-size:14px;font-weight:var(--fw-label)}
.admin-gps{display:flex;align-items:stretch;gap:10px}
.admin-gps input{flex:1;min-width:0}
.admin-gps .gps-locate{flex:0 0 auto;white-space:nowrap}
.agency-editor-grid .tips .button{width:100%;margin-top:14px}
@media(max-width:900px){.agency-editor-grid{grid-template-columns:1fr}}
@media(max-width:600px){.admin-gps{flex-direction:column}.admin-gps .gps-locate{width:100%}}