/* ═══════════════════════════════════════════════════════
   AGENT SIDE — SHARED DESIGN SYSTEM
   Four Love Agency
   Palette: Deep Slate / Warm Gold / Cool Ivory
   ═══════════════════════════════════════════════════════
   Loaded once, globally, via HeaderView.php — every agent page gets these
   variables and components without repeating them. This is lifted from
   dashboard.php's embedded <style> block (the most complete, longest-tuned
   copy of this system across the agent pages, which had each been
   maintaining their own near-identical copy independently).

   Pages not yet migrated to it (properties.php, bookings.php, etc.) keep
   their own embedded <style> blocks for now — those declare the same
   --ag-* variable names with the same values, so no visual conflict, just
   duplication until each page is migrated in turn. Once a page migrates,
   its embedded block should be deleted and it should rely on this file
   plus a small page-specific block for anything genuinely unique to it.
   ═══════════════════════════════════════════════════════ */

:root {
    --ag-bg: #F7F6F3;
    --ag-surface: #FFFFFF;
    --ag-surface-elevated: #FFFFFF;
    --ag-text: #1A1D26;
    --ag-text-secondary: #5C6170;
    --ag-text-tertiary: #8E93A4;
    --ag-border: #E8E6E1;
    --ag-border-light: #F0EEE9;
    --ag-gold: #B8860B;
    --ag-gold-soft: rgba(184,134,11,.06);
    --ag-gold-mid: rgba(184,134,11,.12);
    --ag-gold-glow: rgba(184,134,11,.18);
    --ag-navy: #1A1D26;
    --ag-navy-soft: rgba(26,29,38,.04);
    --ag-navy-mid: rgba(26,29,38,.08);
    --ag-emerald: #059669;
    --ag-emerald-soft: rgba(5,150,105,.06);
    --ag-coral: #E84057;
    --ag-coral-soft: rgba(232,64,87,.06);
    --ag-sky: #0284C7;
    --ag-sky-soft: rgba(2,132,199,.06);
    --ag-amber: #D97706;
    --ag-amber-soft: rgba(217,119,6,.06);
    --ag-violet: #7C3AED;
    --ag-violet-soft: rgba(124,58,237,.06);
    --ag-teal: #0D9488;
    --ag-teal-soft: rgba(13,148,136,.06);
    --ag-mpesa: #4CAF50;
    --ag-mpesa-soft: rgba(76,175,80,.06);
    --ag-type-bnb: #7C3AED; --ag-type-bnb-soft: rgba(124,58,237,.08); --ag-type-bnb-glow: rgba(124,58,237,.15);
    --ag-type-sale: #D97706; --ag-type-sale-soft: rgba(217,119,6,.08); --ag-type-sale-glow: rgba(217,119,6,.15);
    --ag-type-rent: #0284C7; --ag-type-rent-soft: rgba(2,132,199,.08); --ag-type-rent-glow: rgba(2,132,199,.15);
    --ag-radius: 16px;
    --ag-radius-sm: 12px;
    --ag-radius-xs: 8px;
    --ag-shadow-sm: 0 1px 2px rgba(26,29,38,.04), 0 2px 8px rgba(26,29,38,.02);
    --ag-shadow-md: 0 4px 16px rgba(26,29,38,.06), 0 1px 4px rgba(26,29,38,.03);
    --ag-shadow-lg: 0 12px 40px rgba(26,29,38,.08), 0 4px 12px rgba(26,29,38,.04);
    --ag-shadow-gold: 0 4px 20px rgba(184,134,11,.10);
    --ag-font: 'DM Sans', system-ui, -apple-system, sans-serif;
    --ag-font-display: 'DM Serif Display', Georgia, serif;
    --ag-font-mono: 'JetBrains Mono', monospace;
    --ag-transition: .28s cubic-bezier(.4,0,.2,1);
    --ag-transition-spring: .4s cubic-bezier(.34,1.56,.64,1);
}

body.page-light-bg { background: var(--ag-bg) !important; }
.ag-page * { box-sizing: border-box }

/* ═══ Page shell ═══
   .ag-dashboard is dashboard.php's existing wrapper class name (kept as-is
   there to avoid a wall-to-wall rename in a ~2000-line file) — styled
   identically to the new generic .ag-page so it doesn't need its own copy
   of this rule. New pages should use .ag-page. */
/* padding-top matches .modern-header's fixed 80px height (HeaderView.php) —
   without it, page content starts at y:0 and its first ~80px render behind
   the fixed header. No page previously compensated for this (the one CSS
   rule that used to, body.dashboard-active, lived in an orphaned stylesheet
   never linked from anywhere), so agent pages likely always opened with
   their top content clipped under the header. */
.ag-page, .ag-dashboard { font-family: var(--ag-font); color: var(--ag-text); background: var(--ag-bg); min-height: calc(100vh - 80px); padding: 104px 28px 120px; max-width: 1480px; margin: 0 auto; position: relative; }
.ag-page::before, .ag-dashboard::before { content: ''; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse, rgba(184,134,11,.03) 0%, transparent 65%); pointer-events: none; z-index: 0 }

/* ═══ Breadcrumb ═══ */
.ag-breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: .72rem; font-weight: 500; color: var(--ag-text-tertiary); flex-wrap: wrap }
.ag-breadcrumb a { color: var(--ag-text-secondary); text-decoration: none !important; transition: color .2s; display: inline-flex; align-items: center; gap: 3px }
.ag-breadcrumb a:hover { color: var(--ag-gold) }
.ag-breadcrumb .bc-sep { color: var(--ag-border); font-size: .8rem }
.ag-breadcrumb .bc-current { color: var(--ag-gold); font-weight: 700 }

/* ═══ Page header (title + actions row) ═══ */
.ag-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }
.ag-page-title { font-family: var(--ag-font-display); font-size: 1.6rem; color: var(--ag-navy); margin: 0 0 4px; letter-spacing: -.4px }
.ag-page-subtitle { font-size: .84rem; color: var(--ag-text-secondary); margin: 0 }
.ag-page-actions { display: flex; gap: 8px; flex-wrap: wrap }

/* ═══ Section headings ═══ */
.ag-section-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ag-text-tertiary); margin-bottom: 14px; display: flex; align-items: center; gap: 8px }
.ag-section-label::after { content: ''; flex: 1; height: 1px; background: var(--ag-border-light) }
.ag-section-title { font-family: var(--ag-font-display); font-size: 1.3rem; color: var(--ag-navy); margin: 0 0 4px; letter-spacing: -.3px }
.ag-section-subtitle { font-size: .82rem; color: var(--ag-text-secondary); margin: 0 0 20px }

/* ═══ Cards ═══ */
.ag-card { background: var(--ag-surface); border: 1px solid var(--ag-border-light); border-radius: var(--ag-radius); box-shadow: var(--ag-shadow-sm); transition: all var(--ag-transition); position: relative; overflow: hidden }
.ag-card:hover { box-shadow: var(--ag-shadow-md); transform: translateY(-2px) }
.ag-card-header { padding: 16px 20px; border-bottom: 1px solid var(--ag-border-light); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px }
.ag-card-header h3 { margin: 0; font-size: .88rem; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--ag-navy) }
.ag-card-header h3 i { font-size: 1.1rem }
.ag-card-body { padding: 20px }
.ag-card-link { font-size: .68rem; font-weight: 600; color: var(--ag-gold); text-decoration: none !important; display: inline-flex; align-items: center; gap: 3px; transition: gap var(--ag-transition) }
.ag-card-link:hover { gap: 6px; color: #96700A }

/* ═══ Stat cards — matches views/agents/billings.php's .bill-stat exactly
   (decorative top-right blur circle, springier hover lift + icon rotate,
   bolder label weight, plus the .ag-stat-change trend indicator) so every
   agent page's stat grid shares one signature card treatment. ═══ */
.ag-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px }
.ag-stat { padding: 18px 20px; border-radius: var(--ag-radius-sm); background: var(--ag-surface); border: 1px solid var(--ag-border-light); box-shadow: var(--ag-shadow-sm); transition: all .4s cubic-bezier(.34,1.56,.64,1); cursor: default; position: relative; overflow: hidden }
.ag-stat::before { content: ''; position: absolute; top: -40%; right: -20%; width: 110px; height: 110px; border-radius: 50%; opacity: .06; transition: opacity var(--ag-transition), transform .4s cubic-bezier(.34,1.56,.64,1) }
.ag-stat::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 var(--ag-radius-sm) var(--ag-radius-sm); opacity: 0; transition: opacity var(--ag-transition) }
.ag-stat:hover { transform: translateY(-4px); box-shadow: var(--ag-shadow-md) }
.ag-stat:hover::after { opacity: 1 }
.ag-stat:hover::before { opacity: .12; transform: scale(1.15) }
.ag-stat-icon { width: 42px; height: 42px; border-radius: var(--ag-radius-xs); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 12px; transition: all .4s cubic-bezier(.34,1.56,.64,1); position: relative; z-index: 1 }
.ag-stat:hover .ag-stat-icon { transform: scale(1.1) rotate(-4deg) }
.si-gold { background: var(--ag-gold-soft); color: var(--ag-gold) }.ag-stat:hover .si-gold { background: var(--ag-gold); color: #fff }.ag-stat:has(.si-gold)::after, .ag-stat:has(.si-gold)::before { background: var(--ag-gold) }
.si-navy { background: var(--ag-navy-mid); color: var(--ag-navy) }.ag-stat:hover .si-navy { background: var(--ag-navy); color: #fff }.ag-stat:has(.si-navy)::after, .ag-stat:has(.si-navy)::before { background: var(--ag-navy) }
.si-emerald { background: var(--ag-emerald-soft); color: var(--ag-emerald) }.ag-stat:hover .si-emerald { background: var(--ag-emerald); color: #fff }.ag-stat:has(.si-emerald)::after, .ag-stat:has(.si-emerald)::before { background: var(--ag-emerald) }
.si-sky { background: var(--ag-sky-soft); color: var(--ag-sky) }.ag-stat:hover .si-sky { background: var(--ag-sky); color: #fff }.ag-stat:has(.si-sky)::after, .ag-stat:has(.si-sky)::before { background: var(--ag-sky) }
.si-coral { background: var(--ag-coral-soft); color: var(--ag-coral) }.ag-stat:hover .si-coral { background: var(--ag-coral); color: #fff }.ag-stat:has(.si-coral)::after, .ag-stat:has(.si-coral)::before { background: var(--ag-coral) }
.si-amber { background: var(--ag-amber-soft); color: var(--ag-amber) }.ag-stat:hover .si-amber { background: var(--ag-amber); color: #fff }.ag-stat:has(.si-amber)::after, .ag-stat:has(.si-amber)::before { background: var(--ag-amber) }
.si-violet { background: var(--ag-violet-soft); color: var(--ag-violet) }.ag-stat:hover .si-violet { background: var(--ag-violet); color: #fff }.ag-stat:has(.si-violet)::after, .ag-stat:has(.si-violet)::before { background: var(--ag-violet) }
.si-mpesa { background: var(--ag-mpesa-soft); color: var(--ag-mpesa) }.ag-stat:hover .si-mpesa { background: var(--ag-mpesa); color: #fff }.ag-stat:has(.si-mpesa)::after, .ag-stat:has(.si-mpesa)::before { background: var(--ag-mpesa) }
.ag-stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1; margin-bottom: 4px; font-family: var(--ag-font-mono); color: var(--ag-navy); position: relative; z-index: 1 }
.ag-stat-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--ag-text-tertiary); position: relative; z-index: 1 }
.ag-stat-change { font-size: .66rem; font-weight: 600; display: flex; align-items: center; gap: 3px; margin-top: 2px }
.ag-stat-change.pos { color: var(--ag-emerald) } .ag-stat-change.neg { color: var(--ag-coral) } .ag-stat-change.neu { color: var(--ag-text-tertiary) }

/* ═══ Hero ═══ */
.ag-hero { background: linear-gradient(135deg, #1A1D26 0%, #2A2520 35%, #3D2E14 65%, #5C4417 100%); border-radius: var(--ag-radius); padding: 32px 36px; color: #fff; margin-bottom: 24px; position: relative; overflow: hidden; min-height: 220px }
.ag-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(184,134,11,.12) 0%, transparent 50%), radial-gradient(ellipse at 10% 90%, rgba(255,255,255,.02) 0%, transparent 40%) }
.ag-hero-pattern { position: absolute; inset: 0; opacity: .03; background-image: radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none }
.ag-hero-inner { position: relative; z-index: 2; display: flex; gap: 36px; align-items: center }
.ag-hero-avatar { width: 80px; height: 80px; border-radius: 20px; border: 3px solid rgba(184,134,11,.35); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(184,134,11,.2), rgba(184,134,11,.05)); font-family: var(--ag-font-display); font-size: 1.8rem; color: rgba(255,255,255,.9); box-shadow: 0 8px 32px rgba(0,0,0,.2) }
.ag-hero-avatar img { width: 100%; height: 100%; object-fit: cover }
.ag-hero-info { flex: 1 }
.ag-hero-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 50px; background: rgba(184,134,11,.12); border: 1px solid rgba(184,134,11,.2); font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; color: rgba(255,255,255,.8) }
.ag-hero-chip i { color: var(--ag-gold) }
.ag-hero-name { font-family: var(--ag-font-display); font-size: 1.6rem; margin: 0 0 4px; letter-spacing: -.3px; color: #fff }
.ag-hero-name span { color: #D4A843 }
.ag-hero-sub { font-size: .84rem; opacity: .5; margin: 0 0 16px; max-width: 500px; line-height: 1.5; font-weight: 300 }
.ag-hero-metrics { display: flex; gap: 24px; flex-wrap: wrap }
.ag-hero-metric { position: relative; padding-left: 12px }
.ag-hero-metric::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 1px }
.ag-hero-metric:nth-child(1)::before { background: #D4A843 }
.ag-hero-metric:nth-child(2)::before { background: #059669 }
.ag-hero-metric:nth-child(3)::before { background: #38BDF8 }
.ag-hero-metric:nth-child(4)::before { background: #FB923C }
.ag-hero-metric-val { font-size: 1.2rem; font-weight: 800; font-family: var(--ag-font-mono); color: #fff }
.ag-hero-metric-label { font-size: .5rem; text-transform: uppercase; letter-spacing: 1.2px; opacity: .4; font-weight: 600 }
.ag-hero-decor { position: absolute; right: 32px; bottom: -10px; font-size: 11rem; opacity: .03; color: #fff; pointer-events: none }
.ag-hero-left { flex: 1; min-width: 280px }
.ag-hero-icon { width: 72px; height: 72px; border-radius: 20px; border: 3px solid rgba(184,134,11,.35); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,rgba(184,134,11,.2),rgba(184,134,11,.05)); font-family: var(--ag-font-display); font-size: 1.6rem; color: rgba(255,255,255,.9); box-shadow: 0 8px 32px rgba(0,0,0,.2); margin-bottom: 12px }
.ag-hero-icon img { width: 100%; height: 100%; object-fit: cover }
.ag-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 2 }
.ag-period-pills { display: flex; gap: 3px; background: rgba(255,255,255,.08); border-radius: var(--ag-radius-xs); padding: 3px }
.ag-period-pill { padding: 5px 12px; border-radius: 6px; font-size: .66rem; font-weight: 600; color: rgba(255,255,255,.5); background: transparent; border: none; cursor: pointer; transition: all .2s; font-family: var(--ag-font) }
.ag-period-pill:hover { color: rgba(255,255,255,.8) }
.ag-period-pill.active { background: var(--ag-gold); color: #fff; box-shadow: 0 2px 8px rgba(184,134,11,.2) }

/* ═══ Status badges ═══ */
.ag-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 50px; font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap }
.ab-pending { background: var(--ag-amber-soft); color: var(--ag-amber) }
.ab-confirmed { background: var(--ag-emerald-soft); color: var(--ag-emerald) }
.ab-checked_in { background: var(--ag-sky-soft); color: var(--ag-sky) }
.ab-completed { background: var(--ag-violet-soft); color: var(--ag-violet) }
.ab-cancelled { background: var(--ag-coral-soft); color: var(--ag-coral) }
.ab-new { background: var(--ag-gold-soft); color: var(--ag-gold) }
.ab-scheduled { background: var(--ag-sky-soft); color: var(--ag-sky) }
.ab-rented { background: var(--ag-sky-soft); color: var(--ag-sky) }

/* ═══ Tour items — with image (dashboard widget + schedule page) ═══ */
.ag-tour-list { display: flex; flex-direction: column; gap: 8px }
.ag-tour { display: flex; gap: 12px; padding: 12px; border-radius: var(--ag-radius-xs); border: 1px solid var(--ag-border-light); transition: all var(--ag-transition); position: relative }
.ag-tour:hover { border-color: var(--ag-sky) }
.ag-tour::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--ag-sky), var(--ag-emerald)); border-radius: 3px 0 0 3px; opacity: 0; transition: opacity var(--ag-transition) }
.ag-tour:hover::before { opacity: 1 }
.ag-tour-img { width: 56px; height: 44px; border-radius: var(--ag-radius-xs); overflow: hidden; flex-shrink: 0 }
.ag-tour-img img { width: 100%; height: 100%; object-fit: cover }
.ag-tour-icon { width: 38px; height: 38px; border-radius: var(--ag-radius-xs); background: var(--ag-sky-soft); display: flex; align-items: center; justify-content: center; color: var(--ag-sky); font-size: .95rem; flex-shrink: 0 }
.ag-tour-body { flex: 1; min-width: 0 }
.ag-tour-title { font-size: .78rem; font-weight: 700 }
.ag-tour-schedule { font-size: .66rem; color: var(--ag-text-secondary); display: flex; align-items: center; gap: 5px; margin-top: 2px; flex-wrap: wrap }
.ag-tour-schedule i { font-size: .72rem; color: var(--ag-sky) }
.ag-tour-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap }

/* ═══ Activity timeline ═══ */
.ag-timeline { position: relative; padding-left: 18px }
.ag-timeline::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1.5px; background: var(--ag-border-light) }
.ag-tl-item { position: relative; padding-bottom: 10px }
.ag-tl-item:last-child { padding-bottom: 0 }
.ag-tl-dot { position: absolute; left: -18px; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ag-surface); z-index: 1 }
.td-gold { background: var(--ag-gold) }.td-emerald { background: var(--ag-emerald) }.td-coral { background: var(--ag-coral) }.td-sky { background: var(--ag-sky) }.td-muted { background: var(--ag-text-tertiary) }
.ag-tl-text { font-size: .72rem; font-weight: 500; line-height: 1.45 }
.ag-tl-time { font-size: .56rem; color: var(--ag-text-tertiary); margin-top: 1px }

/* ═══ Empty state ═══ */
.ag-empty { text-align: center; padding: 28px 16px }
.ag-empty i { font-size: 2rem; color: var(--ag-border); margin-bottom: 8px; display: block }
.ag-empty p { color: var(--ag-text-tertiary); font-size: .78rem; margin-bottom: 10px }

/* ═══ Action buttons ═══ */
.ag-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 50px; font-weight: 600; font-size: .74rem; font-family: var(--ag-font); transition: all var(--ag-transition); cursor: pointer; text-decoration: none !important; border: 1px solid transparent }
.ag-btn:hover { transform: translateY(-1px) }
.ag-btn-primary { background: linear-gradient(135deg, var(--ag-gold), #D4A843); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(184,134,11,.18) }
.ag-btn-primary:hover { box-shadow: 0 6px 22px rgba(184,134,11,.28) }
.ag-btn-outline { background: transparent; color: var(--ag-navy); border-color: var(--ag-border) }
.ag-btn-outline:hover { border-color: var(--ag-gold); color: var(--ag-gold) }
.ag-btn-ghost { background: var(--ag-navy-soft); color: var(--ag-navy); border-color: transparent }
.ag-btn-ghost:hover { background: var(--ag-navy-mid) }
.ag-btn-sm { padding: 5px 12px; font-size: .66rem }
.ag-btn-danger { background: var(--ag-coral-soft); color: var(--ag-coral); border-color: rgba(232,64,87,.25) }
.ag-btn-danger:hover { background: var(--ag-coral); color: #fff }
.ag-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important }

/* ═══ Filter bar (dropdown-style filters used across list pages) ═══ */
.ag-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px }
.ag-filter-select { padding: 8px 32px 8px 12px; border: 1px solid var(--ag-border); border-radius: var(--ag-radius-xs); font-size: .78rem; font-family: var(--ag-font); color: var(--ag-text); background: var(--ag-surface); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E93A4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color .2s }
.ag-filter-select:focus { outline: none; border-color: var(--ag-gold) }

/* ═══ Search box (page-header / filter-bar search input) ═══
   flex: 0 1 240px + min-width lets it shrink in place as the row narrows,
   and .ag-filter-bar's flex-wrap moves it to its own line once there's
   truly no room — responsive at every width with no breakpoint needed,
   instead of each page hand-rolling its own fixed-width copy (which had
   drifted to a couple of different, uncoordinated breakpoints and could
   overflow its row between them). */
.ag-search-box { position: relative; display: flex; align-items: center; flex: 0 1 240px; min-width: 160px }
.ag-search-box i { position: absolute; left: 12px; color: var(--ag-text-tertiary); font-size: .9rem; pointer-events: none }
.ag-search-box input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--ag-border); border-radius: 50px; font-size: .8rem; font-family: var(--ag-font); background: var(--ag-surface); color: var(--ag-text) }
.ag-search-box input:focus { outline: none; border-color: var(--ag-gold) }
@media (max-width: 576px) { .ag-search-box { flex-basis: 100% } }

/* ═══ Filter chips / segmented tabs (e.g. Upcoming / Past / All) ═══ */
.ag-chip-tabs { display: flex; gap: 3px; background: var(--ag-navy-soft); border-radius: var(--ag-radius-xs); padding: 3px; width: fit-content }
.ag-chip-tab { padding: 7px 14px; border-radius: 7px; font-size: .72rem; font-weight: 600; color: var(--ag-text-secondary); background: transparent; border: none; cursor: pointer; transition: all .2s; font-family: var(--ag-font); text-decoration: none !important; display: inline-flex; align-items: center; gap: 5px }
.ag-chip-tab:hover { color: var(--ag-navy) }
.ag-chip-tab.active { background: var(--ag-surface); color: var(--ag-gold); box-shadow: var(--ag-shadow-sm) }

/* ═══ Agenda / date-grouped list (Schedule page) ═══ */
.ag-agenda-group { margin-bottom: 20px }
.ag-agenda-date { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .74rem; font-weight: 700; color: var(--ag-navy) }
.ag-agenda-date .ag-agenda-day-badge { background: var(--ag-navy); color: #fff; border-radius: var(--ag-radius-xs); padding: 3px 10px; font-family: var(--ag-font-mono); font-size: .68rem }
.ag-agenda-date.is-today .ag-agenda-day-badge { background: var(--ag-gold) }
.ag-agenda-date::after { content: ''; flex: 1; height: 1px; background: var(--ag-border-light) }
.ag-agenda-flash { animation: agAgendaFlash 1.5s ease }
@keyframes agAgendaFlash { 0%, 100% { background: transparent } 20%, 60% { background: var(--ag-gold-soft) } }

/* ═══ Schedule calendar grid ═══ */
.ag-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px }
.ag-cal-weekdays span { text-align: center; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ag-text-tertiary); padding: 4px 0 }
.ag-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px }
.ag-cal-cell { min-height: 68px; border-radius: var(--ag-radius-xs); border: 1px solid var(--ag-border-light); padding: 6px; position: relative; transition: all var(--ag-transition) }
.ag-cal-cell-empty { border: none; background: transparent }
.ag-cal-cell.has-tours { cursor: pointer; background: var(--ag-surface) }
.ag-cal-cell.has-tours:hover { border-color: var(--ag-gold); box-shadow: var(--ag-shadow-sm) }
.ag-cal-cell.is-today { border-color: var(--ag-gold); background: var(--ag-gold-soft) }
.ag-cal-daynum { font-size: .68rem; font-weight: 700; color: var(--ag-navy); font-family: var(--ag-font-mono) }
.ag-cal-count { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ag-navy); color: #fff; font-size: .56rem; font-weight: 800; display: flex; align-items: center; justify-content: center }
.ag-cal-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 6px }
.ag-cal-dot { width: 6px; height: 6px; border-radius: 50% }
@media (max-width: 576px) {
    .ag-cal-cell { min-height: 44px; padding: 4px }
    .ag-cal-count { display: none }
}

/* ═══ Scrollable ═══ */
.ag-scroll { max-height: 380px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ag-border) transparent }
.ag-scroll::-webkit-scrollbar { width: 3px }
.ag-scroll::-webkit-scrollbar-track { background: transparent }
.ag-scroll::-webkit-scrollbar-thumb { background: var(--ag-border); border-radius: 10px }

/* ═══ Quick actions bar ═══ */
.ag-quickbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px }

/* ═══ Count chip ═══ */
.ag-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; font-size: .54rem; font-weight: 800; background: var(--ag-gold-soft); color: var(--ag-gold); margin-left: 4px }

/* ═══ Toast (lightweight confirm/error feedback for AJAX actions) ═══ */
.ag-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 10600; display: flex; flex-direction: column; gap: 8px; }
.ag-toast { background: var(--ag-navy); color: #fff; padding: 12px 18px; border-radius: var(--ag-radius-xs); font-size: .8rem; font-weight: 600; box-shadow: var(--ag-shadow-lg); display: flex; align-items: center; gap: 8px; animation: agToastIn .3s cubic-bezier(.34,1.56,.64,1); }
.ag-toast.success { background: var(--ag-emerald) }
.ag-toast.error { background: var(--ag-coral) }
@keyframes agToastIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }

/* ═══ Responsive ═══ */
@media (max-width: 1200px) { .ag-stat-grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 992px) {
    /* Top padding still has to clear the fixed .modern-header (80px down to
       768px, 70px below that — see HeaderView.php) plus a little breathing
       room; it used to reset to a flat 16px here, which hid each page's
       first ~60-80px of content behind the header on every mobile width. */
    .ag-page, .ag-dashboard { padding: 100px 14px 110px }
    .ag-stat-grid { grid-template-columns: repeat(2, 1fr) }
    .ag-hero-inner { flex-direction: column; text-align: center; gap: 16px }
    .ag-hero-metrics { justify-content: center }
    .ag-hero-decor { display: none }
    .ag-page-header { flex-direction: column; align-items: flex-start }
}
@media (max-width: 576px) {
    .ag-stat-grid { grid-template-columns: 1fr 1fr; gap: 8px }
    .ag-stat { padding: 14px }
    .ag-stat-value { font-size: 1.2rem }
    .ag-stat-icon { width: 34px; height: 34px; font-size: .9rem }
    .ag-hero { padding: 22px 18px; border-radius: 14px }
    .ag-hero-name { font-size: 1.3rem }
    .ag-hero-metric-val { font-size: 1rem }
    .ag-hero-avatar { width: 60px; height: 60px; font-size: 1.3rem }
    .ag-page-title { font-size: 1.3rem }
    .ag-filter-bar { flex-direction: column; align-items: stretch }
    .ag-filter-select { width: 100% }
    .ag-tour { flex-direction: column }
    .ag-tour-img, .ag-tour-icon { width: 100%; height: 90px }
    .ag-toast-container { left: 12px; right: 12px; bottom: 12px }
    .ag-toast { width: 100% }
}

/* ═══ Animations ═══ */
@keyframes agFadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }
/* fill-mode: backwards (not "both") — "both" also holds the final keyframe's
   transform: translateY(0) on the element forever after the animation ends.
   Even though 0px is a visual no-op, any non-`none` transform on an ancestor
   creates a new containing block for position:fixed descendants — which is
   every modal on the agent side, since they're all nested inside a page
   wrapper carrying this class. That silently repositioned every modal
   relative to the (tall, scrolling) page wrapper instead of the viewport,
   landing them far down the page instead of centered on screen. "backwards"
   keeps the same "no flash before the animation starts" behavior without
   leaving that residual transform behind once it's done. */
.ag-anim { animation: agFadeUp .5s ease backwards }
.ag-d1 { animation-delay: .05s }.ag-d2 { animation-delay: .1s }.ag-d3 { animation-delay: .15s }
.ag-d4 { animation-delay: .2s }.ag-d5 { animation-delay: .25s }.ag-d6 { animation-delay: .3s }
.ag-d7 { animation-delay: .35s }.ag-d8 { animation-delay: .4s }
@keyframes agPulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }