/* ══════════════════════════════════════════════════════════════════
   ESOMTHATHI GROUP — Enhancement layer
   ------------------------------------------------------------------
   Loaded AFTER style.css (public) and admin.css (panel). It only adds
   polish and new components (support desk, impersonation bar, branding
   preview). It reuses the existing CSS variables, so admin colour
   changes flow through automatically.
   ══════════════════════════════════════════════════════════════════ */

/* ---- Shared niceties ------------------------------------------------ */
:root{
  --shadow-soft: 0 10px 30px rgba(0,0,0,.18);
  --shadow-lift: 0 18px 44px rgba(0,0,0,.28);
  --radius-lg: 16px;
}

/* Smooth, consistent focus ring in brand colour */
a, button, .btn, .btn-primary, .btn-ghost{ transition: all .2s ease; }

/* ---- Admin: cards & stats get a touch more depth ------------------- */
.main .card{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: box-shadow .25s ease, transform .25s ease;
}
.main .stat{
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.main .stat::before{
  content:"";
  position:absolute; inset:0 auto 0 0; width:3px;
  background: linear-gradient(180deg, var(--teal), transparent);
  opacity:.85;
}
.main .stat:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* Buttons: subtle press feedback */
.btn:active, .btn-primary:active, .btn-ghost:active{ transform: translateY(1px); }

/* Gradient primary button in the panel */
.main .btn-primary{
  background: linear-gradient(135deg, var(--teal), var(--teal2));
  border: none;
}
.main .btn-primary:hover{ box-shadow: 0 6px 20px rgba(0,212,184,.35); }

/* ---- Impersonation bar -------------------------------------------- */
.impersonate-bar{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  background: linear-gradient(135deg, rgba(240,165,0,.16), rgba(240,165,0,.06));
  border: 1px solid rgba(240,165,0,.4);
  color: var(--gold2);
  padding: .7rem 1rem; border-radius: 12px; margin-bottom: 1.1rem;
  font-size: .9rem;
}
.impersonate-bar strong{ color: var(--white); }
.impersonate-ico{ display:inline-flex; width:20px; height:20px; }
.impersonate-ico .ico{ width:20px; height:20px; }
.btn.impersonate-exit{
  background: var(--gold); color: var(--navy); font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem; border:none;
}
.btn.impersonate-exit:hover{ background: var(--gold2); }

/* ---- Support desk -------------------------------------------------- */
.ticket-list{ display:flex; flex-direction:column; gap:.6rem; }
.ticket-row{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1rem 1.1rem; background:var(--navy2);
  border:1px solid var(--line, rgba(255,255,255,.06));
  border-radius:12px; text-decoration:none; color:inherit;
  transition: border-color .2s, transform .2s;
}
.ticket-row:hover{ border-color:var(--teal); transform: translateX(3px); }
.ticket-row .t-subject{ font-weight:600; color:var(--white); }
.ticket-row .t-meta{ font-size:.78rem; color:var(--teal); opacity:.85; }
.ticket-row .t-spacer{ margin-left:auto; }

.badge-priority{ font-size:.68rem; padding:.16rem .5rem; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; }
.prio-low{ background:rgba(255,255,255,.08); color:#9fb3c8; }
.prio-normal{ background:rgba(0,212,184,.14); color:var(--teal); }
.prio-high{ background:rgba(240,165,0,.16); color:var(--gold2); }
.prio-urgent{ background:rgba(255,77,79,.16); color:#ff8a8c; }

.status-open{ background:rgba(0,212,184,.14); color:var(--teal); }
.status-answered{ background:rgba(240,165,0,.16); color:var(--gold2); }
.status-pending{ background:rgba(255,255,255,.08); color:#9fb3c8; }
.status-resolved,.status-closed{ background:rgba(120,220,150,.14); color:#8fe6a6; }

/* Ticket thread bubbles */
.thread{ display:flex; flex-direction:column; gap:1rem; margin:1rem 0; }
.bubble{
  max-width: 82%; padding:.85rem 1rem; border-radius:14px;
  background:var(--navy3); border:1px solid rgba(255,255,255,.05);
  font-size:.92rem; line-height:1.55;
}
.bubble .b-meta{ font-size:.72rem; opacity:.7; margin-bottom:.35rem; }
.bubble.from-staff{
  align-self:flex-end;
  background: linear-gradient(135deg, rgba(0,212,184,.18), rgba(0,212,184,.06));
  border-color: rgba(0,212,184,.3);
}
.bubble.from-client{ align-self:flex-start; }
.bubble .b-body{ white-space:pre-wrap; word-break:break-word; }

/* Nav badge for support (reuses .nav-badge) */
.nav-badge.support{ background: var(--gold); }

/* ---- Branding page: colour swatches + preview --------------------- */
.swatch-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; }
.swatch{
  border:1px solid var(--line, rgba(255,255,255,.08)); border-radius:12px;
  overflow:hidden; background:var(--navy2);
}
.swatch-preview{ height:56px; }
.swatch-body{ padding:.7rem .8rem; }
.swatch-body label{ font-size:.8rem; display:block; margin-bottom:.35rem; }
.color-input-row{ display:flex; gap:.5rem; align-items:center; }
.color-input-row input[type=color]{
  width:44px; height:38px; padding:0; border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:8px; background:transparent; cursor:pointer;
}
.brand-asset-preview{
  display:flex; align-items:center; justify-content:center;
  min-height:90px; padding:1rem; border-radius:12px; margin-bottom:.6rem;
}
.brand-asset-preview.on-dark{ background:var(--navy); }
.brand-asset-preview img{ max-height:60px; max-width:100%; }
.brand-live-preview{
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line, rgba(255,255,255,.08));
}
.brand-live-preview .lp-hero{
  padding:2rem 1.5rem; text-align:center;
  background: radial-gradient(circle at 50% 0%, var(--navy3), var(--navy));
}
.brand-live-preview .lp-badge{
  display:inline-block; font-size:.72rem; color:var(--teal);
  border:1px solid var(--teal); border-radius:100px; padding:.2rem .7rem; margin-bottom:.8rem;
}
.brand-live-preview .lp-btn{
  display:inline-block; margin-top:1rem; padding:.55rem 1.3rem; border-radius:8px;
  background: var(--teal); color: var(--navy); font-weight:700; font-size:.85rem;
}

/* ---- Public site: gentle refinements ------------------------------ */
#hero.has-bg-image{ position:relative; }
#hero.has-bg-image .hero-bg-image{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; opacity:.14;
  pointer-events:none;
}
#hero.has-bg-image .hero-content,
#hero.has-bg-image .hero-stats{ position:relative; z-index:2; }

/* Section cards lift a touch on hover for a more "alive" feel */
.service-card, .hex-card, .price-card{ transition: transform .3s ease, box-shadow .3s ease; }

/* Nicer form hints (image-size guidance) */
.hint{ line-height:1.5; }
.hint strong{ color: var(--teal); }

/* Small helper utilities used by new pages */
.stack-sm > * + *{ margin-top:.6rem; }
.muted-card{ background:var(--navy2); border:1px solid var(--line, rgba(255,255,255,.06)); border-radius:12px; padding:1rem 1.1rem; }
.pill{ display:inline-block; font-size:.72rem; padding:.16rem .55rem; border-radius:100px; background:rgba(255,255,255,.07); }

/* Permission checkbox grid */
.perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.5rem .9rem; }
.perm-grid label{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; cursor:pointer; }

/* ══════════════════════════════════════════════════════════════════
   PHASE 5 — bell, notifications, theme toggle, accordion, charts,
   and a full light theme.
   ══════════════════════════════════════════════════════════════════ */

/* ---- Page-head tools row (bell + toggle + actions) --------------- */
.page-head-tools{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.desktop-only{ display:inline-flex; }
@media (max-width:720px){ .desktop-only{ display:none; } }

/* ---- Theme toggle button ---------------------------------------- */
.theme-toggle{ position:relative; }
.theme-toggle .ico{ transition: transform .4s ease; }
.theme-toggle.is-light .ico{ transform: rotate(180deg); }

/* ---- Notification bell ------------------------------------------ */
.notif-bell{ position:relative; }
.notif-bell summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; color:var(--white);
  border:1px solid var(--line, rgba(255,255,255,.08)); background:var(--navy2);
  position:relative; transition:border-color .2s, background .2s;
}
.notif-bell summary::-webkit-details-marker{ display:none; }
.notif-bell summary:hover{ border-color:var(--teal); }
.notif-bell .ico{ width:19px; height:19px; }
.notif-dot{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px;
  background:var(--gold); color:var(--navy); font-size:.68rem; font-weight:700;
  border-radius:100px; display:flex; align-items:center; justify-content:center;
}
.notif-panel{
  position:absolute; right:0; top:calc(100% + 8px); width:330px; max-width:88vw; z-index:120;
  background:var(--navy2); border:1px solid var(--line, rgba(255,255,255,.1));
  border-radius:14px; box-shadow:var(--shadow-lift, 0 18px 44px rgba(0,0,0,.4)); overflow:hidden;
}
.notif-bell-topbar .notif-panel{ right:-40px; }
.notif-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; border-bottom:1px solid var(--line, rgba(255,255,255,.07));
  font-weight:700; font-size:.85rem; color:var(--white);
}
.notif-readall{ font-size:.75rem; color:var(--teal); }
.notif-list{ max-height:380px; overflow-y:auto; }
.notif-item{
  display:flex; gap:.7rem; padding:.8rem 1rem; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--line, rgba(255,255,255,.05)); transition:background .15s;
}
.notif-item:hover{ background:var(--navy3); }
.notif-item.unread{ background:rgba(0,212,184,.06); }
.notif-item.unread .notif-item-title{ color:var(--white); }
.notif-item-ico{ flex-shrink:0; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(0,212,184,.12); color:var(--teal); }
.notif-item-ico .ico{ width:17px; height:17px; }
.notif-item-text{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.notif-item-title{ font-weight:600; font-size:.85rem; color:var(--white); }
.notif-item-body{ font-size:.78rem; color:var(--text-dim, #9fb3c8); }
.notif-item-time{ font-size:.7rem; color:var(--teal); opacity:.8; }
.notif-empty{ display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:2rem 1rem; color:var(--text-dim, #9fb3c8); font-size:.85rem; }
.notif-empty .ico{ width:26px; height:26px; opacity:.5; }

/* ---- Sign-in pop-up modal --------------------------------------- */
.notif-modal-overlay{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  background:rgba(3,8,16,.62); backdrop-filter:blur(3px); padding:1.2rem; animation:fadeIn .2s ease;
}
.notif-modal{
  width:100%; max-width:400px; text-align:center; padding:2rem 1.6rem 1.6rem;
  background:var(--navy2); border:1px solid var(--line, rgba(255,255,255,.1));
  border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.5); animation:popIn .28s cubic-bezier(.2,.9,.3,1.2);
}
.notif-modal-icon{
  width:58px; height:58px; margin:0 auto 1rem; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--teal), var(--teal2)); color:var(--navy);
}
.notif-modal-icon .ico{ width:28px; height:28px; }
.notif-modal-title{ font-family:'Syne','DM Sans',sans-serif; font-weight:800; font-size:1.2rem; color:var(--white); margin-bottom:.5rem; }
.notif-modal-body{ font-size:.92rem; color:var(--text-dim, #9fb3c8); line-height:1.55; margin-bottom:1.3rem; }
.notif-modal-actions{ display:flex; gap:.6rem; justify-content:center; }
.notif-modal-more{ margin-top:1rem; font-size:.75rem; color:var(--teal); display:flex; align-items:center; justify-content:center; gap:.3rem; }
.notif-modal-more .ico{ width:14px; height:14px; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none} }

/* ---- Accordion sidebar ------------------------------------------ */
.nav-group{ border:none; }
.nav-group > summary.sidebar-section{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  user-select:none; transition:color .2s;
}
.nav-group > summary.sidebar-section::-webkit-details-marker{ display:none; }
.nav-group > summary.sidebar-section:hover{ color:var(--teal); }
.nav-group-chev{
  width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .25s ease; opacity:.6; margin-right:2px;
}
.nav-group[open] > summary .nav-group-chev{ transform:rotate(45deg); }

/* ---- Dashboard: rich stat cards & charts ------------------------ */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin-bottom:1.2rem; }
.kpi{
  position:relative; overflow:hidden; padding:1.2rem 1.3rem; border-radius:var(--radius,14px);
  background:var(--navy2);
  border:1px solid var(--line, rgba(0,212,184,.12));
  transition:transform .2s ease, border-color .2s ease;
}
.kpi::after{
  content:''; position:absolute; top:0; right:0; width:52px; height:52px;
  background:linear-gradient(225deg, rgba(0,212,184,.14), transparent 65%); pointer-events:none;
}
.kpi:hover{ transform:translateY(-3px); border-color:var(--teal); }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.kpi-label{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.kpi-ico{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(0,212,184,.12); color:var(--teal); flex-shrink:0; }
.kpi-ico .ico{ width:18px; height:18px; }
.kpi-ico.warn{ background:rgba(240,165,0,.14); color:var(--gold2); }
.kpi-ico.danger{ background:rgba(255,107,107,.14); color:#ff8a8c; }
.kpi-ico.good{ background:rgba(40,200,64,.14); color:#5fe08a; }
.kpi-value{ font-family:'Syne','DM Sans',sans-serif; font-weight:800; font-size:1.75rem; line-height:1.1; color:var(--white); }
.kpi-value.teal{ color:var(--teal); } .kpi-value.gold{ color:var(--gold2); } .kpi-value.danger{ color:#ff8a8c; } .kpi-value.good{ color:#8fe6a6; }
.kpi-foot{ margin-top:.5rem; font-size:.78rem; color:var(--text-dim, #9fb3c8); display:flex; align-items:center; gap:.35rem; }
.kpi-delta{ font-weight:700; display:inline-flex; align-items:center; gap:.2rem; }
.kpi-delta.up{ color:#8fe6a6; } .kpi-delta.down{ color:#ff8a8c; }
.kpi-delta .ico{ width:13px; height:13px; }
.kpi-spark{ position:absolute; right:-4px; bottom:-4px; width:96px; height:46px; opacity:.5; pointer-events:none; }

.chart-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.1rem; }
.chart-card{ background:var(--navy2); border:1px solid var(--line, rgba(255,255,255,.06)); border-radius:16px; padding:1.2rem 1.3rem; box-shadow:var(--shadow-soft, 0 10px 30px rgba(0,0,0,.16)); }
.chart-card .card-title{ margin-bottom:1rem; }
.chart-holder{ position:relative; width:100%; }
.chart-holder canvas{ max-width:100%; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.9rem; font-size:.78rem; color:var(--text-dim, #9fb3c8); }
.chart-legend span{ display:inline-flex; align-items:center; gap:.4rem; }
.legend-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; }

.goal-ring{ display:flex; align-items:center; gap:1.2rem; }
.goal-ring .goal-text .g-num{ font-family:'Syne',sans-serif; font-weight:800; font-size:1.6rem; color:var(--white); }
.goal-ring .goal-text .g-sub{ font-size:.8rem; color:var(--text-dim, #9fb3c8); }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — larger, readable parent (group) headings
   ══════════════════════════════════════════════════════════════════ */
.sidebar-section{
  font-family:'DM Sans','Syne',sans-serif !important;
  font-size:.9rem !important;          /* match the child links */
  letter-spacing:.01em !important;
  text-transform:none !important;      /* proper heading, not tiny caps */
  font-weight:700 !important;
  opacity:1 !important;
  color:var(--white) !important;
  padding:.85rem .8rem .35rem !important;
}
.nav-group > summary.sidebar-section{ padding:.7rem .8rem !important; }
.nav-group-chev{ opacity:.7; }

/* ══════════════════════════════════════════════════════════════════
   PUBLIC nav — theme toggle + "Dashboard" pill
   ══════════════════════════════════════════════════════════════════ */
.nav-theme-toggle{
  background:transparent; border:none; cursor:pointer; color:var(--white);
  width:38px; height:38px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.nav-theme-toggle:hover{ color:var(--teal); background:rgba(255,255,255,.06); }
.nav-theme-toggle .ico{ width:19px; height:19px; transition:transform .4s ease; }
.nav-theme-toggle.is-light .ico{ transform:rotate(180deg); }
.nav-dashboard{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--teal); font-size:.83rem; font-weight:600; text-decoration:none;
  padding:.5rem .9rem; border:1px solid rgba(0,212,184,.35); border-radius:8px;
  transition:background .2s,border-color .2s;
}
.nav-dashboard:hover{ background:rgba(0,212,184,.1); border-color:var(--teal); }
.nav-dashboard .ico{ width:16px; height:16px; }

/* ══════════════════════════════════════════════════════════════════
   LIGHT / DAYLIGHT THEME  (contrast-safe — matches the brand)
   Applies to both the public site and the panel.
   ══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  --navy:#e4e7ec;        /* page background — soft warm grey, easy on the eyes */
  --navy2:#f7f9fc;       /* cards / surfaces — off-white, not glaring          */
  --navy3:#dce1e9;       /* raised / hover                                     */
  --white:#17242f;       /* PRIMARY text — strong dark                         */
  --slate:#4f5d70;       /* SECONDARY text — readable on light                 */
  --light:#26333f;       /* was near-white text → now dark                     */
  --line:rgba(23,36,47,.12);
  --line2:rgba(23,36,47,.07);
  --shadow-soft:0 8px 24px rgba(20,40,70,.07);
  --shadow-lift:0 16px 40px rgba(20,40,70,.12);
  --text-dim:#4f5d70;
}
:root[data-theme="light"] body{ background:var(--navy); color:var(--white); }

/* ---- Public: nav / hero / sections / footer ---- */
:root[data-theme="light"] nav{ background:rgba(247,249,252,.9); border-bottom:1px solid var(--line); }
:root[data-theme="light"] nav.scrolled{ background:rgba(247,249,252,.98); }
:root[data-theme="light"] .nav-links li a{ color:var(--slate); }
:root[data-theme="light"] .nav-links li a:hover{ color:var(--white); }
:root[data-theme="light"] .nav-signin{ color:var(--white); }
:root[data-theme="light"] .nav-theme-toggle{ color:var(--white); }
:root[data-theme="light"] .nav-theme-toggle:hover{ background:rgba(21,34,47,.06); }
/* logos are built light for the dark theme — darken them so they show on light */
:root[data-theme="light"] .nav-logo-img{ filter:brightness(0) opacity(.82); }
:root[data-theme="light"] .footer-logo-img{ filter:brightness(0); opacity:.72; }
:root[data-theme="light"] .sidebar-head img,
:root[data-theme="light"] .topbar-logo img{ filter:brightness(0) opacity(.8); }

:root[data-theme="light"] section{ color:var(--white); }
:root[data-theme="light"] #hero,
:root[data-theme="light"] .preloader{ background:var(--navy); }
:root[data-theme="light"] footer{ background:#e3e8f0; border-top:1px solid var(--line); }
:root[data-theme="light"] .mobile-drawer{ background:#f7f9fc; border-left:1px solid var(--line); }
:root[data-theme="light"] #privacy-modal{ background:rgba(30,45,65,.42); }

/* surfaces that used dark navy tints */
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .hex-card,
:root[data-theme="light"] .price-card,
:root[data-theme="light"] .terminal,
:root[data-theme="light"] .about-card,
:root[data-theme="light"] .why-card,
:root[data-theme="light"] .contact-card,
:root[data-theme="light"] .portfolio-card,
:root[data-theme="light"] .privacy-box{ background:var(--navy2); border-color:var(--line); }

/* hero outline text — the stroke was white, invisible on light */
:root[data-theme="light"] .hero-title .line3{ -webkit-text-stroke:1.2px rgba(21,34,47,.35); }

/* inputs + ghost buttons used hardcoded white rgba */
:root[data-theme="light"] .form-group input,
:root[data-theme="light"] .form-group textarea,
:root[data-theme="light"] .form-group select,
:root[data-theme="light"] .newsletter-input{ background:#f3f6fa; border-color:var(--line); color:var(--white); }
:root[data-theme="light"] .btn-ghost{ color:var(--white); border-color:rgba(21,34,47,.22); }
:root[data-theme="light"] .btn-ghost:hover{ border-color:rgba(21,34,47,.45); background:rgba(21,34,47,.04); }

/* ---- Panel (admin + client) ---- */
:root[data-theme="light"] .sidebar{ background:#f7f9fc; border-right:1px solid var(--line); }
:root[data-theme="light"] .topbar{ background:#f7f9fc; border-bottom:1px solid var(--line); }
:root[data-theme="light"] .main{ color:var(--white); }
:root[data-theme="light"] .card,
:root[data-theme="light"] .chart-card,
:root[data-theme="light"] .kpi,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .notif-panel,
:root[data-theme="light"] .notif-modal{ background:var(--navy2); border-color:var(--line); }
:root[data-theme="light"] .kpi::after,
:root[data-theme="light"] .stat::after{ background:linear-gradient(225deg,rgba(0,212,184,.10),transparent 65%); }
:root[data-theme="light"] .input,
:root[data-theme="light"] .select,
:root[data-theme="light"] .textarea{ background:#f3f6fa; border-color:var(--line); color:var(--white); }
:root[data-theme="light"] table.data thead th{ color:var(--slate); border-color:var(--line); }
:root[data-theme="light"] table.data td{ border-color:var(--line2); }
:root[data-theme="light"] .btn-icon{ color:var(--white); }
:root[data-theme="light"] .notif-bell summary{ background:#f3f6fa; color:var(--white); border-color:var(--line); }
:root[data-theme="light"] .sidebar-nav a{ color:var(--slate); }
:root[data-theme="light"] .sidebar-nav a:hover{ color:var(--white); background:var(--navy3); }
:root[data-theme="light"] .sidebar-section{ color:var(--white) !important; }
:root[data-theme="light"] .detail-row{ border-color:var(--line2); }
:root[data-theme="light"] .bubble{ background:#eef2f7; border-color:var(--line); }
:root[data-theme="light"] .notif-item:hover{ background:var(--navy3); }
:root[data-theme="light"] .notif-item.unread{ background:rgba(0,212,184,.08); }

/* Scroll progress bar (public site) */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:300;
  background:linear-gradient(90deg, var(--teal), var(--gold));
  box-shadow:0 0 8px rgba(0,212,184,.5); transition:width .08s linear; pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════════
   BLOG (public)
   ══════════════════════════════════════════════════════════════════ */
.blog-wrap{ max-width:1140px; margin:0 auto; padding:120px 5% 5rem; }
.blog-hero{ text-align:center; max-width:680px; margin:0 auto 3rem; }
.blog-hero-title{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2rem,5vw,3.2rem); color:var(--white); letter-spacing:-.02em; margin:.4rem 0 .6rem; }
.blog-hero-sub{ color:var(--slate); font-size:1.05rem; line-height:1.6; }
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.6rem; }
.blog-card{ display:flex; flex-direction:column; background:var(--navy2); border:1px solid var(--line, rgba(0,212,184,.1)); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.blog-card:hover{ transform:translateY(-4px); border-color:var(--teal); box-shadow:0 16px 40px rgba(0,0,0,.28); }
.blog-card-img{ height:180px; background-size:cover; background-position:center; background-color:var(--navy3); }
.blog-card-img-placeholder{ display:flex; align-items:center; justify-content:center; color:var(--teal); opacity:.4; }
.blog-card-img-placeholder .ico{ width:40px; height:40px; }
.blog-card-body{ padding:1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.blog-card-cat{ font-family:'JetBrains Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); }
.blog-card-title{ font-family:'Syne',sans-serif; font-weight:700; font-size:1.15rem; color:var(--white); line-height:1.3; }
.blog-card-excerpt{ color:var(--slate); font-size:.9rem; line-height:1.55; flex:1; }
.blog-card-meta{ font-size:.78rem; color:var(--slate); opacity:.85; margin-top:.3rem; }
.blog-pager{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:3rem; }
.blog-pager-info{ color:var(--slate); font-size:.85rem; }
.blog-empty{ text-align:center; color:var(--slate); padding:4rem 1rem; }

/* single post */
.post{ max-width:760px; margin:0 auto; }
.post-back{ display:inline-flex; align-items:center; gap:.4rem; color:var(--teal); font-size:.85rem; text-decoration:none; margin-bottom:1rem; }
.post-back .ico{ width:15px; height:15px; }
.post-head{ margin-bottom:1.6rem; }
.post-title{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.8rem,4.5vw,2.8rem); color:var(--white); letter-spacing:-.02em; line-height:1.15; margin:.6rem 0 .5rem; }
.post-meta{ color:var(--slate); font-size:.85rem; }
.post-cover{ height:min(420px,52vw); border-radius:16px; background-size:cover; background-position:center; margin:0 0 2rem; }
.post-body{ color:var(--light, #e8f0f8); font-size:1.06rem; line-height:1.8; }
.post-body p{ margin:0 0 1.3rem; }
.post-body h2{ font-family:'Syne',sans-serif; font-weight:700; font-size:1.5rem; color:var(--white); margin:2.2rem 0 .8rem; }
.post-body h3{ font-family:'Syne',sans-serif; font-weight:700; font-size:1.2rem; color:var(--white); margin:1.8rem 0 .6rem; }
.post-body a{ color:var(--teal); text-decoration:underline; }
.post-body ul,.post-body ol{ margin:0 0 1.3rem 1.4rem; }
.post-body li{ margin:.4rem 0; }
.post-body blockquote{ border-left:3px solid var(--teal); padding:.4rem 0 .4rem 1.2rem; margin:1.5rem 0; color:var(--slate); font-style:italic; }
.post-body code{ background:var(--navy3); padding:.15rem .4rem; border-radius:5px; font-size:.9em; }
.post-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0; }
.post-tag{ font-size:.78rem; color:var(--slate); background:var(--navy2); border:1px solid var(--line); padding:.3rem .7rem; border-radius:100px; }
.post-cta{ background:var(--navy2); border:1px solid var(--line); border-radius:16px; padding:2rem; text-align:center; margin:2.5rem 0; }
.post-cta h3{ font-family:'Syne',sans-serif; font-weight:800; color:var(--white); font-size:1.3rem; margin-bottom:.4rem; }
.post-cta p{ color:var(--slate); margin-bottom:1.2rem; }
.post-related{ max-width:1140px; margin:3.5rem auto 0; }
.post-related h3{ font-family:'Syne',sans-serif; font-weight:800; color:var(--white); font-size:1.3rem; margin-bottom:1.4rem; }

/* ══════════════════════════════════════════════════════════════════
   DEPTH SYSTEM — professional 3D polish
   Layered elevation, edge highlights, interactive tilt + sheen.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --elev-1: 0 1px 2px rgba(2,8,18,.28), 0 4px 12px rgba(2,8,18,.22);
  --elev-2: 0 2px 4px rgba(2,8,18,.30), 0 10px 26px rgba(2,8,18,.30);
  --elev-3: 0 4px 8px rgba(2,8,18,.32), 0 22px 54px rgba(2,8,18,.42);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="light"]{
  --elev-1: 0 1px 2px rgba(30,50,80,.08), 0 4px 12px rgba(30,50,80,.07);
  --elev-2: 0 2px 4px rgba(30,50,80,.09), 0 10px 26px rgba(30,50,80,.10);
  --elev-3: 0 4px 8px rgba(30,50,80,.10), 0 22px 54px rgba(30,50,80,.16);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.85);
}

/* ---- Surfaces get real elevation + a lit top edge ---- */
.card, .chart-card, .stat, .kpi, .auth-card, .blog-card, .post-cta{
  box-shadow: var(--elev-1), var(--edge-light);
}
.notif-panel, .notif-modal{ box-shadow: var(--elev-3), var(--edge-light); }
.sidebar{ box-shadow: 4px 0 24px rgba(2,8,18,.22); }
:root[data-theme="light"] .sidebar{ box-shadow: 4px 0 24px rgba(30,50,80,.08); }
.topbar{ box-shadow: 0 4px 18px rgba(2,8,18,.20); }
:root[data-theme="light"] .topbar{ box-shadow: 0 4px 18px rgba(30,50,80,.07); }

/* ---- Buttons: depth, hover lift, press state ---- */
.btn{ transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn-primary{ box-shadow: 0 6px 16px rgba(0,212,184,.28), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,212,184,.36), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:active{ transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,212,184,.24), inset 0 1px 0 rgba(255,255,255,.15); }
.btn-ghost:hover, .btn-icon:hover{ transform: translateY(-1px); }
.btn-ghost:active, .btn-icon:active{ transform: translateY(1px); }
.btn-danger{ box-shadow: 0 6px 16px rgba(255,107,107,.22), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-danger:active{ transform: translateY(1px); }

/* ---- Inputs: soft focus glow ---- */
.input:focus, .select:focus, .textarea:focus,
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  box-shadow: 0 0 0 3px rgba(0,212,184,.16);
  border-color: var(--teal);
  outline: none;
}

/* ---- Interactive 3D tilt (applied by enhance.js to select cards) ---- */
.tilt{
  position: relative;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .18s ease-out, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.tilt:hover{ box-shadow: var(--elev-2), var(--edge-light); }
.tilt-sheen{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(560px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.07), transparent 42%);
  opacity:0; transition: opacity .3s ease;
}
:root[data-theme="light"] .tilt-sheen{
  background: radial-gradient(560px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.65), transparent 42%);
}
.tilt:hover .tilt-sheen{ opacity:1; }

/* Charts and forms stay stable on purpose — no tilt there. */

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .tilt{ transform:none !important; transition:none !important; }
  .tilt-sheen{ display:none; }
  .btn, .kpi, .blog-card{ transition:none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE — tech-company visual upgrade
   ══════════════════════════════════════════════════════════════════ */

/* ---- Hero: aurora glow + engineering grid (skipped when a custom
        background image is set in Branding) ---- */
#hero:not(.has-bg-image){
  background-image:
    radial-gradient(560px 420px at 18% 22%, rgba(0,212,184,.13), transparent 60%),
    radial-gradient(640px 480px at 84% 70%, rgba(240,165,0,.08), transparent 62%),
    radial-gradient(420px 340px at 60% 10%, rgba(0,212,184,.06), transparent 65%),
    repeating-linear-gradient(0deg, rgba(126,154,181,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(126,154,181,.045) 0 1px, transparent 1px 56px);
  background-attachment: fixed, fixed, fixed, scroll, scroll;
}
:root[data-theme="light"] #hero:not(.has-bg-image){
  background-image:
    radial-gradient(560px 420px at 18% 22%, rgba(0,180,158,.14), transparent 60%),
    radial-gradient(640px 480px at 84% 70%, rgba(240,165,0,.10), transparent 62%),
    repeating-linear-gradient(0deg, rgba(30,50,80,.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(30,50,80,.05) 0 1px, transparent 1px 56px);
}

/* ---- Gradient headlines quietly alive ---- */
.grad{
  background:linear-gradient(90deg, var(--teal), var(--gold), var(--teal));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation: gradSweep 9s ease-in-out infinite;
}
@keyframes gradSweep{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* ---- Tech marquee ---- */
.tech-marquee{
  position:relative; overflow:hidden; padding:1.1rem 0;
  border-top:1px solid var(--line, rgba(0,212,184,.08));
  border-bottom:1px solid var(--line, rgba(0,212,184,.08));
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tech-marquee-track{
  display:flex; gap:.9rem; width:max-content;
  animation: marquee 38s linear infinite;
}
.tech-marquee:hover .tech-marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tech-chip{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.74rem; letter-spacing:.04em;
  color:var(--slate); background:var(--navy2);
  border:1px solid var(--line, rgba(0,212,184,.1));
  padding:.5rem 1rem; border-radius:100px;
  transition:color .2s, border-color .2s;
}
.tech-chip:hover{ color:var(--teal); border-color:rgba(0,212,184,.4); }
.tech-chip-dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px rgba(0,212,184,.8); }

/* ---- BACK TO TOP: bigger, glowing, with a scroll-progress ring ---- */
#back-to-top{
  width:56px !important; height:56px !important;
  bottom:6rem !important; right:1.8rem !important;
  background:linear-gradient(160deg, rgba(7,17,31,.95), rgba(10,26,44,.95)) !important;
  border:1.5px solid rgba(0,212,184,.45) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.5), 0 0 22px rgba(0,212,184,.22) !important;
}
#back-to-top svg:not(.btt-ring){ width:22px; height:22px; }
#back-to-top:hover{
  background:linear-gradient(160deg, var(--teal), var(--teal2, #00b89e)) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 34px rgba(0,212,184,.5) !important;
  transform:translateY(-4px) !important;
}
#back-to-top .btt-ring{
  position:absolute; inset:-1.5px; width:calc(100% + 3px); height:calc(100% + 3px);
  transform:rotate(-90deg); pointer-events:none;
}
#back-to-top .btt-ring .ring-bg{ fill:none; stroke:rgba(0,212,184,.12); stroke-width:3; }
#back-to-top .btt-ring .ring-fill{
  fill:none; stroke:var(--teal); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:163.4; stroke-dashoffset:163.4;
  filter:drop-shadow(0 0 4px rgba(0,212,184,.7));
  transition:stroke-dashoffset .1s linear;
}
#back-to-top:hover .btt-ring .ring-fill{ stroke:var(--navy); filter:none; }
:root[data-theme="light"] #back-to-top{
  background:linear-gradient(160deg, #f7f9fc, #e8edf4) !important;
  color:var(--teal) !important;
  box-shadow:0 8px 28px rgba(30,50,80,.18), 0 0 22px rgba(0,212,184,.18) !important;
}
@media(max-width:640px){
  #back-to-top{ width:48px !important; height:48px !important; right:1rem !important; bottom:5rem !important; }
}

/* ---- CTA band glow ---- */
#cta-band{ position:relative; }
#cta-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(500px 220px at 50% 0%, rgba(0,212,184,.10), transparent 70%);
}

@media (prefers-reduced-motion: reduce){
  .grad{ animation:none; }
  .tech-marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
}