/* ============================================================
   Cosmos Smart Vladivostok Hotel — brand overrides
   Loaded after each portal stylesheet as /brand/brand.css.
   Guest vars are scoped to body.portal-guest, staff/admin to their
   own body classes, so the three portals can reuse variable names.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;900&family=Unbounded:wght@400;700;900&family=DM+Sans:wght@400;500;700&display=swap');

/* ── Guest portal ── */
body.portal-guest {
  --brand:         #93D500;
  --brand-deep:    #6EA000;
  --brand-soft:    #A8E030;
  --brand-rgb:     147,213,0;
  --text-on-brand: #1E1E1E;

  --bg-page:       #F5F5F2;
  --bg-soft:       #F0F0EC;
  --text:          #1E1E1E;

  --font-display:  'Jost', sans-serif;
  --font-body:     'Jost', sans-serif;

  --topbar-bg:             rgba(20,20,20,0.82);
  --topbar-bg-scrolled:    rgba(10,10,10,0.92);
  --topbar-solid:          #141414;
  --topbar-solid-scrolled: #0A0A0A;
  --topbar-border:         rgba(147,213,0,0.12);
  --topbar-inset:          rgba(147,213,0,0.15);
  --cobrand-accent:        #93D500;
  --logo-h:                36px;
  --logo-h-sm:             28px;
}
/* Cosmos logo lockup already contains "SMART VLADIVOSTOK HOTEL" */
body.portal-guest .brand-city { display: none; }

/* ── Staff portal ── */
body.portal-staff {
  --accent:         #93D500;
  --accent-h:       #6EA000;
  --accent-rgb:     147,213,0;
  --text-on-accent: #1E1E1E;
  --font-head:      'Jost', sans-serif;
  --font-body:      'Jost', sans-serif;
  --login-backdrop: linear-gradient(135deg, #0A0A0A 0%, #1E1E1E 100%);
  --grad-primary:   linear-gradient(135deg, #6EA000, #93D500);
  --grad-bar:       linear-gradient(to top, #6EA000, #93D500);
  --logo-login-h:   44px;
  --logo-side-h:    30px;
}
body.portal-staff.dark-theme {
  --grad-primary: linear-gradient(135deg, #4A7800, #6EA000);
  --grad-bar:     linear-gradient(to top, #93D500, #A8E030);
}

/* ── Admin portal ── */
body.portal-admin {
  --accent:           #3B82F6;
  --accent-h:         #2563EB;
  --font-head:        'Unbounded', sans-serif;
  --font-body:        'DM Sans', sans-serif;
  --login-backdrop:   linear-gradient(135deg, #060B14 0%, #0D1F42 100%);
  --brandmark-grad:   linear-gradient(135deg, #2855D8, #F59E0B);
  --brandmark-shadow: rgba(40,85,216,0.4);
}

/* ── Staff site: Cosmos (2026-10-01) ──
   The staff redesign Novotel got on 2026-09-28, in Cosmos colours: near-black
   sidebar with a lime highlight, warm neutral page, denser tables, status as a
   coloured dot + text (the usual meanings: blue active, amber unpaid, green
   paid, red timed out), cars as two-line rows on phones. Surfaces use the
   portal's variables so the dark theme keeps working. Lime is a background
   colour here; text on it stays near-black. */
body.portal-staff {
  --bg-page: #F5F5F2;
  --bg-soft: #EFEFEA;
  --card:    #FFFFFF;
  --line:    #E0E0D8;
  --text:    #1E1E1E;
  --muted:   #5E5D57;
  --bg-dark: #141414;
  --staff-title: #141414;
  --row-line: #EDEDE7;
}
body.portal-staff.dark-theme {
  --bg-page: #0F0F0F;
  --bg-soft: #1E1E1C;
  --card:    #171716;
  --line:    #2C2C29;
  --text:    #F0F0EC;
  --muted:   #A3A29A;
  --bg-dark: #0A0A0A;
  --staff-title: #FFFFFF;
  --row-line: #252523;
  background: #0F0F0F !important;
}

/* sidebar */
body.portal-staff .dashboard-shell { grid-template-columns: 232px minmax(0, 1fr); }
body.portal-staff .sidebar { background: var(--bg-dark); padding: 24px 14px; }
body.portal-staff .sidebar-brand { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 10px; margin-bottom: 26px; }
body.portal-staff .brand-sub-sm { color: #A8A79F; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: none; }
body.portal-staff .brand-sub-sm:not(:empty)::before { content: "Парковка · "; }
body.portal-staff .sidebar-nav { gap: 2px; }
body.portal-staff .nav-item { color: #E4E4DE; padding: 11px 12px; border-radius: 10px; font-size: 14px; gap: 12px; }
body.portal-staff .nav-item:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
body.portal-staff .nav-item.active { background: #93D500; color: #141414; font-weight: 700; }
body.portal-staff .nav-icon { opacity: .85; }
body.portal-staff .sidebar-footer { border-top-color: rgba(255,255,255,.12); }
body.portal-staff .btn-gate { min-height: 48px; border-radius: 12px; font-size: 14px; background: #D92D20; }
body.portal-staff .btn-gate:hover:not(:disabled) { background: #B42318; transform: none; }
body.portal-staff .sidebar-user { color: #A8A79F; }
body.portal-staff #themeToggleBtn,
body.portal-staff .btn-logout { color: #E4E4DE !important; border-color: rgba(255,255,255,.18) !important; }
body.portal-staff #themeToggleBtn:hover,
body.portal-staff .btn-logout:hover { background: rgba(255,255,255,.08) !important; color: #FFFFFF !important; }

/* page */
body.portal-staff .dashboard-main { padding: 28px 36px; }
body.portal-staff .page-header h2 { color: var(--staff-title); font-size: 26px; }
body.portal-staff label { color: var(--muted); }
body.portal-staff input[type="text"], body.portal-staff input[type="password"],
body.portal-staff input[type="date"], body.portal-staff input[type="number"],
body.portal-staff select {
  background: var(--card); color: var(--text); border-color: var(--line); border-radius: 10px; min-height: 44px; padding: 10px 14px;
}
body.portal-staff.dark-theme input, body.portal-staff.dark-theme select { color-scheme: dark; }
body.portal-staff .toggle-group { background: var(--card); border-color: var(--line); border-radius: 10px; padding: 0; overflow: hidden; }
body.portal-staff .toggle-btn { border-radius: 0; min-height: 42px; padding: 0 16px; color: var(--muted); }
body.portal-staff .toggle-btn.active { background: #141414; color: #93D500; }
body.portal-staff.dark-theme .toggle-btn.active { background: #93D500; color: #141414; }
body.portal-staff .btn-refresh { background: var(--card); color: var(--text); border-color: var(--line); border-radius: 10px; min-height: 44px; min-width: 44px; }
body.portal-staff .btn-refresh:hover { background: var(--bg-soft); }
body.portal-staff .stat-chip { background: transparent; border: 0; padding: 0 14px 0 0; font-size: 14px; color: var(--muted); border-radius: 0; }
body.portal-staff .stat-chip span { color: var(--staff-title); }
body.portal-staff .main-btn { border-radius: 10px; font-size: 14px; box-shadow: none; }
body.portal-staff .main-btn:hover { background: var(--accent-h); transform: none; box-shadow: none; }
body.portal-staff .panel-box { border-radius: 12px; }
body.portal-staff .panel-title { color: var(--staff-title); }

/* tables */
body.portal-staff .table-wrap { background: var(--card); border-color: var(--line); border-radius: 12px; }
body.portal-staff th { background: var(--bg-soft); color: var(--muted); padding: 10px 18px; border-bottom-color: var(--row-line); }
body.portal-staff td { padding: 12px 18px; border-bottom-color: var(--row-line); font-variant-numeric: tabular-nums; }
body.portal-staff tbody tr:hover { background: var(--bg-soft); }
body.portal-staff .td-plate { letter-spacing: .04em; }

/* status: coloured dot + text */
body.portal-staff .badge { display: inline-flex; align-items: center; gap: 6px; background: transparent; padding: 0; border-radius: 0; font-size: 13px; font-weight: 600; }
body.portal-staff .badge::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: currentColor; flex: none; }
body.portal-staff .badge-active      { color: #1D4ED8; background: transparent; }
body.portal-staff .badge-awaiting    { color: #8A4B00; background: transparent; }
body.portal-staff .badge-paid        { color: #11643A; background: transparent; }
body.portal-staff .badge-whitelisted { color: #4B4A57; background: transparent; }
body.portal-staff .badge-timed_out   { color: #B42318; background: transparent; }
body.portal-staff .badge-cancelled   { color: #6A6B7A; background: transparent; }
body.portal-staff.dark-theme .badge-active      { color: #93C5FD; }
body.portal-staff.dark-theme .badge-awaiting    { color: #FFC069; }
body.portal-staff.dark-theme .badge-paid        { color: #7DD8A5; }
body.portal-staff.dark-theme .badge-whitelisted { color: #C9C8D6; }
body.portal-staff.dark-theme .badge-timed_out   { color: #FF9C91; }
body.portal-staff.dark-theme .badge-cancelled   { color: #A3A5C2; }
body.portal-staff .badge-quiet { color: var(--muted); background: transparent; }

/* phones: dark header (logo, gate, exit), tab row, two-line car rows */
@media (max-width:720px) {
  body.portal-staff .dashboard-shell { grid-template-columns: minmax(0, 1fr); }
  body.portal-staff .sidebar { position: sticky; top: 0; z-index: 20; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 0; overflow: visible; }
  body.portal-staff .sidebar-brand { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; gap: 2px; }
  body.portal-staff .sidebar-footer { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
  body.portal-staff .sidebar-footer .btn-pending { width: auto; margin: 0; }
  body.portal-staff .btn-gate { width: auto; min-height: 44px; padding: 0 12px; font-size: 13px; }
  body.portal-staff .gate-status,
  body.portal-staff .sidebar-user,
  body.portal-staff #themeToggleBtn { display: none; }
  body.portal-staff .btn-logout { width: auto; margin: 0; min-height: 44px; padding: 0 12px; }
  body.portal-staff .sidebar-nav { order: 3; flex: 0 0 calc(100% + 32px); margin: 4px -16px 0; padding: 0 8px; gap: 0; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  body.portal-staff .nav-item,
  body.portal-staff .nav-item.active { background: transparent; border-radius: 0; border-bottom: 3px solid transparent; color: #A8A79F; padding: 10px 12px; font-size: 13px; white-space: nowrap; }
  body.portal-staff .nav-item.active { color: #93D500; border-bottom-color: #93D500; }
  body.portal-staff .nav-icon { display: none; }
  body.portal-staff .dashboard-main { padding: 14px 16px; }
  body.portal-staff .page-header h2 { font-size: 22px; }
  body.portal-staff .filters-row select { flex: 0 0 auto; }

  /* sessions: plate · sum / status · entry / duration (cells: id, plate, status, entry, duration, sum) */
  body.portal-staff #sessionsTable table,
  body.portal-staff #sessionsTable tbody { display: block; }
  body.portal-staff #sessionsTable thead { display: none; }
  body.portal-staff #sessionsTable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding: 10px 14px; border-top: 1px solid var(--row-line); }
  body.portal-staff #sessionsTable tr:first-child { border-top: 0; }
  body.portal-staff #sessionsTable td { padding: 0; border: 0; font-size: 12px; color: var(--muted); }
  body.portal-staff #sessionsTable td:nth-child(1) { display: none; }
  body.portal-staff #sessionsTable td:nth-child(2) { grid-area: 1 / 1; font-size: 15px; color: var(--text); }
  body.portal-staff #sessionsTable td:nth-child(6) { grid-area: 1 / 2; justify-self: end; font-size: 14px; font-weight: 600; color: var(--text); }
  body.portal-staff #sessionsTable td:nth-child(3) { grid-area: 2 / 1; }
  body.portal-staff #sessionsTable td:nth-child(4) { grid-area: 2 / 2; justify-self: end; }
  body.portal-staff #sessionsTable td:nth-child(5) { grid-area: 3 / 2; justify-self: end; }
  /* the grey-group heading spans the card (its only cell is the first one, hidden in rows) */
  body.portal-staff #sessionsTable tr.group-head { display: block; padding: 16px 14px 6px; background: var(--bg-soft); }
  body.portal-staff #sessionsTable tr.group-head td { display: block; font-size: 11px; }
  body.portal-staff .partner-table th:nth-child(3),
  body.portal-staff .partner-table td:nth-child(3) { display: none; }
  body.portal-staff th, body.portal-staff td { padding-left: 12px; padding-right: 12px; }
}

/* staff: dark theme surfaces (panels carry inline light tints, hence !important) */
body.portal-staff.dark-theme .panel-box,
body.portal-staff.dark-theme .staff-card,
body.portal-staff.dark-theme .lookup-card,
body.portal-staff.dark-theme .rev-card,
body.portal-staff.dark-theme .chart-card,
body.portal-staff.dark-theme .compare-card,
body.portal-staff.dark-theme .method-card,
body.portal-staff.dark-theme .leak-section,
body.portal-staff.dark-theme .detail-card,
body.portal-staff.dark-theme .reason-modal-card { background: var(--card) !important; border-color: var(--line) !important; }
body.portal-staff.dark-theme .hero-card { background: var(--bg-soft); border-color: var(--line); }
body.portal-staff.dark-theme .hero-card.primary { background: var(--grad-primary); }
body.portal-staff.dark-theme .rev-preset { background: var(--card); border-color: var(--line); color: var(--muted); }
/* the revenue headline card is lime with dark text: changes stay dark too */
body.portal-staff .hero-card.primary .delta.positive { color: #1F4D00; }
body.portal-staff .hero-card.primary .delta.negative { color: #8A1C10; }
/* the five quick-pass durations always sit in one row */
body.portal-staff .quick-duration-row { display: grid !important; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 6px !important; }
body.portal-staff .quick-duration-row .main-btn { min-width: 0 !important; padding: 12px 0; font-size: 13px; margin-top: 8px; white-space: nowrap; }