/* ==========================================================================
   Richland Realtors Portal, design tokens
   Palette pulled from the live richlandproperty.com.ng Elementor kit:
     Primary  #EF7F19 (orange)   Accent  #151B4C (deep navy)
     Text     #6F6F6F (gray)     Tan     #F1D2A9 (soft highlight)
   Type: Roboto Slab (display) · Roboto (body/UI) · Roboto Mono (figures/codes)
   Layout & icon language: SaaS dashboard shell (sidebar + stat cards + panels),
   consistent single-stroke outline icons in soft circular badges.
   ========================================================================== */

:root{
  --canvas:      #F6F5F2;
  --canvas-alt:  #EFEBE3;
  --white:       #FFFFFF;
  --ink:         #1B1B1B;
  --ink-soft:    #6F6F6F;
  --navy:        #151B4C;
  --navy-soft:   #232B63;
  --orange:      #EF7F19;
  --orange-light:#F7A559;
  --tan:         #F1D2A9;
  --mist:        #E7E2D8;
  --success:     #2F8A4E;
  --danger:      #C0392B;
  --on-navy:     #F6F5F2;

  --font-display: 'Roboto Slab', Georgia, serif;
  --font-body:    'Roboto', -apple-system, Segoe UI, sans-serif;
  --font-mono:    'Roboto Mono', 'SFMono-Regular', Consolas, monospace;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(21,27,76,0.06), 0 10px 26px -14px rgba(21,27,76,0.22);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; max-width: 100%; }
body{
  margin:0; font-family: var(--font-body); color: var(--ink);
  background: var(--canvas); font-size: 15px; line-height: 1.5;
  max-width: 100%; overflow-x: hidden;
}
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em; letter-spacing: -0.01em; color: var(--navy); }
p{ margin: 0 0 1em; }
a{ color: var(--orange); text-decoration: none; }
a:hover{ color: var(--orange-light); }
:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }
code, .mono{ font-family: var(--font-mono); }
svg{ display:block; }

/* ---------- Auth / public pages (no shell) ------------------------------ */
body.no-shell{
  min-height: 100vh; display:flex; align-items:flex-start; justify-content:center;
  padding: 48px 20px; position: relative;
  background:
    radial-gradient(circle at 15% 15%, rgba(239,127,25,0.14), transparent 42%),
    var(--navy);
}
body.no-shell::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(246,245,242,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,245,242,0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 35%, black 0%, transparent 72%);
}
.auth-card{
  position:relative; z-index:1; width:100%; max-width: 440px; background: var(--canvas);
  border-radius: var(--radius-lg); padding: 38px 34px 30px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.auth-mark{ display:flex; align-items:center; gap:10px; margin-bottom: 20px; color: var(--orange); }
.auth-mark span{ font-family: var(--font-display); font-weight:700; font-size: 1.1rem; color: var(--navy); }
.auth-card h1{ font-size: 1.5rem; margin-bottom: .2em; }
.auth-sub{ color: var(--ink-soft); font-size: .9rem; margin-bottom: 24px; }
.auth-tabs{ display:flex; gap: 4px; background: var(--canvas-alt); padding:4px; border-radius: 999px; margin-bottom: 20px; }
.auth-tabs a{ flex:1; text-align:center; padding: 8px 0; border-radius: 999px; font-size:.84rem; font-weight:600; color: var(--ink-soft); }
.auth-tabs a.active{ background: var(--navy); color: var(--white); }
.auth-foot{ margin-top: 18px; text-align:center; font-size:.85rem; color: var(--ink-soft); }
.otp-input{ letter-spacing: 10px; font-family: var(--font-mono); font-size: 1.4rem; text-align:center; }

/* ---------- Forms -------------------------------------------------------- */
.field{ margin-bottom: 15px; }
.field label{ display:block; font-size:.78rem; font-weight:600; color: var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.field input, .field select, .field textarea{
  width:100%; min-width:0; padding: 11px 13px; font-size: .93rem; font-family: var(--font-body);
  border: 1px solid var(--mist); border-radius: var(--radius); background: var(--white); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--orange); }
.field-hint{ font-size:.76rem; color: var(--ink-soft); margin-top:4px; }
.field-row{ display:flex; gap:12px; }
.field-row .field{ flex:1; min-width:0; }

.password-wrap{ position:relative; }
.password-wrap input{ padding-right: 42px; }
.toggle-password{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:6px; cursor:pointer; color: var(--ink-soft); display:flex;
}
.toggle-password:hover{ color: var(--navy); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 20px; border-radius: 999px; border:none; cursor:pointer;
  font-family: var(--font-body); font-weight:600; font-size:.88rem;
  background: var(--navy); color: var(--white); width:100%;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover{ background: var(--navy-soft); }
.btn:active{ transform: scale(.98); }
.btn-orange{ background: var(--orange); color: var(--white); }
.btn-orange:hover{ background: var(--orange-light); }
.btn-outline{ background: transparent; color: var(--navy); border:1px solid var(--navy); }
.btn-outline:hover{ background: rgba(21,27,76,0.06); }
.btn-sm{ width:auto; padding: 7px 14px; font-size:.8rem; }
.btn-danger{ background: var(--danger); color: var(--white); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Shell (sidebar + content) ------------------------------------ */
.shell{ display:flex; min-height:100vh; }
.sidebar{
  width: 240px; flex-shrink:0; background: var(--navy); color: var(--on-navy);
  display:flex; flex-direction:column; padding: 24px 16px; position:sticky; top:0; height:100vh; z-index:40;
}
.brand{ display:flex; align-items:center; gap:9px; padding: 0 6px 24px; color: var(--orange-light); text-decoration:none; }
.brand:hover{ opacity:.85; }
.brand-logo{ max-height:36px; max-width:170px; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; color: var(--on-navy); }
.side-nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.side-nav a{ display:flex; align-items:center; gap:11px; color: rgba(246,245,242,0.72); padding: 10px 12px; border-radius: 9px; font-size:.88rem; font-weight:500; position:relative; overflow:hidden; transition: background .16s ease, color .16s ease; }
.side-nav a svg{ flex-shrink:0; opacity:.85; }
.side-nav a:hover{ background: rgba(246,245,242,0.06); color: var(--on-navy); }
.side-nav a.active{ background: var(--orange); color: var(--white); }
.side-nav a.active svg{ opacity:1; }
.side-nav a.nav-clicked::after{
  content:""; position:absolute; left:0; right:0; top:0; height:100%;
  background: rgba(246,245,242,0.16); transform: translateY(-100%);
  animation: nav-slide-down .32s ease forwards;
}
@keyframes nav-slide-down{
  from{ transform: translateY(-100%); }
  to{ transform: translateY(0); }
}
.content{ transition: opacity .15s ease; }
.content.page-leaving{ opacity: 0; }
.side-foot{ border-top: 1px solid rgba(246,245,242,0.12); padding-top: 14px; margin-top: 10px; }
.who-name{ font-size:.86rem; font-weight:600; color: var(--on-navy); }
.who-role{ font-size:.73rem; color: rgba(246,245,242,0.55); margin-bottom:8px; }
.logout{ font-size:.78rem; color: var(--orange-light); }

.mobile-topbar{ display:none; }
.mobile-toggle{
  background: var(--navy); color: var(--on-navy); flex-shrink:0;
  border:none; border-radius: 10px; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;
  box-shadow: var(--shadow-card); display:flex;
}
.sidebar-overlay{ display:none; position:fixed; inset:0; background: rgba(21,27,76,0.45); z-index:35; }

.content{ flex:1; padding: 32px 36px 60px; max-width: 1200px; min-width:0; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 24px; flex-wrap:wrap; gap:12px; }
.page-head h1{ font-size: 1.6rem; margin-bottom:.15em; }
.page-sub{ color: var(--ink-soft); font-size:.9rem; }

/* ---------- Flash messages ------------------------------------------------ */
.flash{ padding: 12px 16px; border-radius: var(--radius); margin-bottom:16px; font-size:.87rem; font-weight:500; }
.flash-success{ background: rgba(47,138,78,0.12); color: var(--success); }
.flash-error{ background: rgba(192,57,43,0.10); color: var(--danger); }
.flash-info{ background: rgba(21,27,76,0.07); color: var(--navy); }

/* ---------- Stat cards ----------------------------------------------------- */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:14px; margin-bottom: 26px; }
.stat-card{ background: var(--white); border-radius: var(--radius-lg); padding: 18px 18px 16px; box-shadow: var(--shadow-card); position:relative; min-width: 0; }
.stat-card-link{ display:block; color:inherit; text-decoration:none; transition: transform .12s ease; }
.stat-card-link:hover{ transform: translateY(-2px); color:inherit; }
.stat-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(21,27,76,0.08); color: var(--navy); margin-bottom:12px;
}
.tone-orange .stat-icon{ background: rgba(239,127,25,0.14); color: var(--orange); }
.tone-clay .stat-icon{ background: rgba(192,57,43,0.12); color: var(--danger); }
.tone-mist .stat-icon{ background: rgba(21,27,76,0.06); color: var(--ink-soft); }
.stat-label{ font-size:.71rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); font-weight:600; margin-bottom:6px; }
.stat-value{ font-family: var(--font-mono); font-size: 1.5rem; font-weight:600; color: var(--navy); }
.stat-sub{ font-size:.77rem; color: var(--ink-soft); margin-top:4px; }

/* ---------- Referral / affiliate link box ---------------------------------- */
.link-box{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%); color: var(--on-navy);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; position: relative; overflow:hidden; flex-wrap:wrap;
}
.link-box::before{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(246,245,242,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(246,245,242,0.05) 1px, transparent 1px);
  background-size: 26px 26px; mask-image: linear-gradient(to right, black, transparent 85%);
}
.link-box-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--orange-light); font-weight:700; margin-bottom:6px; }
.link-box-url{ font-family: var(--font-mono); font-size:.92rem; word-break: break-all; position:relative; }
.link-box .btn{ width:auto; position:relative; }

/* ---------- Ledger tables --------------------------------------------------- */
.ledger-wrap{ background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow:hidden; margin-bottom:26px; min-width: 0; }
.ledger-head{ display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom:1px solid var(--canvas-alt); flex-wrap:wrap; gap:10px; }
.ledger-head h3{ font-size:1.02rem; margin:0; }
.table-scroll{ overflow-x:auto; }
table.ledger{ width:100%; border-collapse: collapse; min-width: 560px; }
table.ledger th{
  text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft);
  padding: 11px 20px; border-bottom: 1px solid var(--canvas-alt); font-weight:700; background: var(--canvas);
  white-space:nowrap;
}
table.ledger td{ padding: 13px 20px; border-bottom: 1px solid var(--canvas-alt); font-size:.86rem; vertical-align: middle; }
table.ledger tr:last-child td{ border-bottom:none; }
table.ledger td.figure{ font-family: var(--font-mono); }
table.ledger tbody tr:hover{ background: rgba(21,27,76,0.025); }
.empty-row td{ text-align:center; padding: 34px 20px; color: var(--ink-soft); font-size:.87rem; }

/* ---------- Pills -------------------------------------------------------- */
.pill{ display:inline-block; padding: 4px 11px; border-radius: 999px; font-size:.72rem; font-weight:700; white-space:nowrap; }
.pill-pending, .pill-requested, .pill-invited, .pill-unread, .pill-open{ background: rgba(239,127,25,0.15); color: var(--orange); }
.pill-approved, .pill-active, .pill-paid, .pill-read, .pill-available, .pill-resolved{ background: rgba(47,138,78,0.14); color: var(--success); }
.pill-rejected, .pill-suspended, .pill-declined{ background: rgba(192,57,43,0.12); color: var(--danger); }
.pill-deleted, .pill-sold_out{ background: rgba(111,111,111,0.14); color: var(--ink-soft); }

/* ---------- Two column layout ---------------------------------------------- */
.grid-2{ display:grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items:start; }
.grid-2 > *{ min-width: 0; }
.panel{ background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px 22px; margin-bottom:18px; min-width: 0; }
.panel h3{ font-size:1rem; margin-bottom:12px; }

/* ---------- Toolbars / filters --------------------------------------------- */
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.filter-tabs{ display:flex; gap:6px; background: var(--canvas-alt); padding:4px; border-radius:999px; flex-wrap:wrap; }
.filter-tabs a{ padding: 6px 13px; border-radius:999px; font-size:.8rem; font-weight:600; color: var(--ink-soft); white-space:nowrap; }
.filter-tabs a.active{ background: var(--navy); color: var(--white); }

/* ---------- Toggle switches (feature flags) --------------------------------- */
.switch-row{ display:flex; align-items:center; justify-content:space-between; padding: 13px 0; border-bottom: 1px solid var(--canvas-alt); gap:16px; }
.switch-row:last-child{ border-bottom:none; }
.switch-row-label{ font-weight:600; font-size:.9rem; color: var(--navy); }
.switch-row-sub{ font-size:.78rem; color: var(--ink-soft); }
.switch{ position:relative; width:44px; height:25px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch-track{ position:absolute; inset:0; background: var(--mist); border-radius:999px; cursor:pointer; transition: background .15s; }
.switch-track::before{ content:""; position:absolute; width:19px; height:19px; left:3px; top:3px; background:var(--white); border-radius:50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .switch-track{ background: var(--orange); }
.switch input:checked + .switch-track::before{ transform: translateX(19px); }

/* ---------- Product cards ---------------------------------------------------- */
.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:18px; }
.product-card{ background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow:hidden; }
.product-card img{ width:100%; height:150px; object-fit:cover; background: var(--canvas-alt); }
.product-card-noimg{ width:100%; height:150px; background: var(--canvas-alt); }
.product-card-body{ padding: 15px 16px; }
.product-card h4{ font-size:.96rem; margin-bottom:2px; }

/* ---------- Sale cards (living sale records) ------------------------------ */
.sale-card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.sale-card{ display:block; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px 18px; text-decoration:none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.sale-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(21,27,76,0.10); }
.sale-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.sale-card-client{ font-weight:700; font-family: var(--font-head); color: var(--ink); }
.sale-card-figures{ display:flex; gap:22px; margin-bottom:10px; }
:root[data-theme="dark"] .sale-card{ border: 1px solid var(--mist); }
.product-loc{ font-size:.78rem; color: var(--ink-soft); margin-bottom:8px; }
.product-price{ font-family: var(--font-mono); font-weight:700; color: var(--orange); }

/* ---------- Topbar / notification bell -------------------------------------- */
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 18px; gap:16px; }
.topbar-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.topbar-spacer{ flex:1; }
.topbar-search{ position:relative; flex:1; max-width:420px; }
.topbar-search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--ink-soft); pointer-events:none; }
.topbar-search input{
  width:100%; padding: 10px 14px 10px 40px; border-radius: 999px; border:1px solid var(--mist);
  background: var(--white); font-size:.87rem; box-shadow: var(--shadow-card);
}
.topbar-search input:focus{ border-color: var(--orange); }
.search-dropdown{
  display:none; position:absolute; top:46px; left:0; right:0; max-height:360px; overflow-y:auto;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 20px 46px -18px rgba(21,27,76,0.35); z-index:50;
}
.search-dropdown.open{ display:block; }
.search-group-label{ padding: 9px 16px 5px; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); font-weight:700; }
.search-result{ display:flex; justify-content:space-between; align-items:center; padding: 9px 16px; font-size:.85rem; color: var(--ink); }
.search-result:hover{ background: var(--canvas); color: var(--orange); }
.search-result-id{ font-family: var(--font-mono); font-size:.75rem; color: var(--ink-soft); }
.search-empty{ padding: 16px; text-align:center; color: var(--ink-soft); font-size:.83rem; }
.bell-wrap{ position:relative; }
.bell-btn{
  position:relative; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background: var(--white); box-shadow: var(--shadow-card); color: var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.bell-btn.has-unread{ animation: bell-shake 2.6s ease-in-out infinite; }
@keyframes bell-shake{
  0%, 88%, 100% { transform: rotate(0); }
  89% { transform: rotate(-12deg); }
  90.5% { transform: rotate(10deg); }
  92% { transform: rotate(-8deg); }
  93.5% { transform: rotate(6deg); }
  95% { transform: rotate(-4deg); }
  96.5% { transform: rotate(0); }
}
.bell-badge{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px;
  background: var(--danger); color:#fff; border-radius:999px; font-size:.66rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--canvas);
}
.bell-dropdown{
  display:none; position:absolute; right:0; top:52px; width:320px; max-height:400px; overflow-y:auto;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 20px 46px -18px rgba(21,27,76,0.35); z-index:50;
}
.bell-dropdown.open{ display:block; }
.bell-dropdown-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--canvas-alt); font-weight:700; font-size:.86rem; color: var(--navy); }
.bell-dropdown-head a{ font-size:.76rem; font-weight:600; }
.bell-empty{ padding:28px 16px; text-align:center; color: var(--ink-soft); font-size:.85rem; }
.bell-item-link{ display:block; color:inherit; text-decoration:none; cursor:pointer; }
.bell-item-link:hover .bell-item{ background: rgba(239,127,25,0.06); }
.bell-item{ padding: 11px 16px; border-bottom: 1px solid var(--canvas-alt); }
.bell-item:last-child{ border-bottom:none; }
.bell-item.unread{ background: rgba(239,127,25,0.05); }
.bell-item-title{ font-size:.84rem; font-weight:600; color: var(--navy); }
.bell-item-body{ font-size:.78rem; color: var(--ink-soft); margin-top:2px; }
.bell-item-time{ font-size:.7rem; color: var(--ink-soft); margin-top:4px; }

/* ---------- Dark theme -------------------------------------------------------
   Overrides the same custom properties used everywhere else, so every
   component above (cards, tables, pills, forms) adapts automatically. ---- */
:root[data-theme="dark"]{
  --canvas:      #15161C;
  --canvas-alt:  #1E2028;
  --white:       #1C1E27;
  --ink:         #EDEDEF;
  --ink-soft:    #9C9CA6;
  --mist:        #2C2E38;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04), 0 14px 30px -16px rgba(0,0,0,0.65);
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4{ color: var(--orange-light); }
:root[data-theme="dark"] .stat-value{ color: var(--orange-light); }
:root[data-theme="dark"] .ledger-wrap,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .stat-card{ border: 1px solid var(--mist); }
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea{ background: var(--canvas-alt); color: var(--ink); border-color: var(--mist); }
:root[data-theme="dark"] table.ledger th{ background: var(--canvas-alt); }
:root[data-theme="dark"] table.ledger tbody tr:hover{ background: rgba(255,255,255,0.03); }
:root[data-theme="dark"] .badge-id{ background: var(--canvas-alt); }
:root[data-theme="dark"] .toggle-password{ color: var(--ink-soft); }
:root[data-theme="dark"] .bell-btn,
:root[data-theme="dark"] .topbar-search input{ background: var(--white); color: var(--ink); border-color: var(--mist); }
:root[data-theme="dark"] .bell-dropdown,
:root[data-theme="dark"] .search-dropdown{ background: var(--white); border: 1px solid var(--mist); }
:root[data-theme="dark"] .bell-item,
:root[data-theme="dark"] .bell-item:not(:last-child){ border-color: var(--mist); }
:root[data-theme="dark"] .stat-icon{ background: rgba(255,255,255,0.08); color: var(--orange-light); }
:root[data-theme="dark"] .tone-orange .stat-icon{ background: rgba(239,127,25,0.2); color: var(--orange-light); }
:root[data-theme="dark"] .tone-clay .stat-icon{ background: rgba(192,57,43,0.22); color: #E38079; }
:root[data-theme="dark"] .tone-mist .stat-icon{ background: rgba(255,255,255,0.06); color: var(--ink-soft); }
:root[data-theme="dark"] .btn-outline{ color: var(--orange-light); border-color: var(--orange-light); }
:root[data-theme="dark"] .btn-outline:hover{ background: rgba(224,178,92,0.1); }
:root[data-theme="dark"] .net-count{ color: var(--navy); }
:root[data-theme="dark"] .badge-id{ color: var(--orange-light); }
:root[data-theme="dark"] .bell-dropdown-head,
:root[data-theme="dark"] .bell-item-title,
:root[data-theme="dark"] .switch-row-label{ color: var(--ink); }
:root[data-theme="dark"] .flash-info{ background: rgba(224,178,92,0.1); color: var(--orange-light); }
:root[data-theme="dark"] .toggle-password:hover{ color: var(--orange-light); }
:root[data-theme="dark"] .side-foot{ border-top-color: rgba(246,245,242,0.12); }

.theme-toggle-btn{
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background: var(--white); box-shadow: var(--shadow-card); color: var(--navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.theme-icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle-btn{ color: var(--orange-light); }
:root[data-theme="dark"] .theme-icon-sun{ display:none; }
:root[data-theme="dark"] .theme-icon-moon{ display:flex; }

/* ---------- Event cards ------------------------------------------------------- */
.event-card{ background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom:14px; display:flex; gap:16px; align-items:flex-start; }
.event-date-block{ background: var(--navy); color: var(--on-navy); border-radius: 12px; padding:10px 14px; text-align:center; flex-shrink:0; min-width:64px; }
.event-date-block .day{ font-family: var(--font-mono); font-size:1.3rem; font-weight:700; line-height:1; }
.event-date-block .mon{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; opacity:.8; }
.event-type-tag{ display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 9px; border-radius:999px; margin-bottom:6px; }
.event-type-online{ background: rgba(47,138,78,0.14); color: var(--success); }
.event-type-physical{ background: rgba(239,127,25,0.14); color: var(--orange); }


.net-count{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-weight:700; color: var(--navy); background: var(--tan); padding:3px 10px; border-radius:999px; font-size:.82rem; }

/* ---------- Misc --------------------------------------------------------------- */
.text-muted{ color: var(--ink-soft); }
.mt-0{ margin-top:0; }
.small{ font-size:.8rem; }
.copy-btn{ cursor:pointer; }
.badge-id{ font-family: var(--font-mono); background: var(--canvas-alt); padding:2px 9px; border-radius:6px; font-size:.8rem; color: var(--navy); font-weight:600; }

@media (max-width: 980px){
  .shell{ flex-direction:column; }
  .mobile-toggle{ display:flex; }
  .mobile-topbar{
    display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:45;
    background: var(--navy); padding:12px 16px; box-shadow: var(--shadow-card);
  }
  .mobile-topbar a{ display:flex; align-items:center; text-decoration:none; }
  .mobile-topbar-logo{ max-height:30px; }
  .sidebar{
    position:fixed; left:0; top:0; height:100vh; transform:translateX(-100%);
    transition: transform .2s ease; width: 250px; box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-overlay.open{ display:block; }
  .content{ padding: 18px 18px 50px; }
  .grid-2{ grid-template-columns: 1fr; }
  .field-row{ flex-direction:column; gap:0; }
}

@media (prefers-reduced-motion: reduce){
  .btn, .sidebar{ transition:none; }
}

/* ---------- Message attachments ---------------------------------------------- */
.attachment-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:14px; }
.attachment-card{ background: var(--canvas); border-radius: var(--radius); overflow:hidden; display:block; color: var(--ink); }
.attachment-card img, .attachment-card video{ width:100%; height:110px; object-fit:cover; background: var(--canvas-alt); display:block; }
.attachment-name{ font-size:.78rem; padding: 8px 10px 2px; word-break:break-word; }
.attachment-file{ padding: 20px 12px; text-align:center; }
.attachment-file svg{ margin: 0 auto 8px; color: var(--orange); }