/*
 * Graffita Events brand layer (Oct 2026).
 * Loaded LAST on every portal page and the sign-in pages, so it settles the
 * palette, type and navigation after the older theme layers in header.php,
 * partials/theme.css and per-page <style> blocks.
 *
 * Idea: the portal is the backstage of the homepage. Stage navy holds the
 * structure; warm gold is the "light", used sparingly for where you are and
 * what has focus. Status uses small LED-style dots, echoing the logo.
 */

/* ---------- Font: Archivo (SIL Open Font License, see fonts/Archivo-OFL-LICENSE.txt), self-hosted ---------- */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-wdth-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
html:root{
  --ge-navy:#0E1A2E; --ge-navy-2:#16263F; --ge-navy-3:#22375A;
  --ge-gold:#E2B56A; --ge-gold-deep:#8A5A12; --ge-gold-soft:#FBF3E4;
  --ge-paper:#F3F5F8; --ge-panel:#FFFFFF; --ge-panel-2:#F7F9FB;
  --ge-ink:#14202F; --ge-muted:#5D6B7E; --ge-line:#DFE4EB; --ge-line-2:#CBD3DE;
  --ge-green:#1E8A5A; --ge-green-soft:#E5F4EC;
  --ge-amber:#A3640B; --ge-amber-soft:#FDF1DD;
  --ge-red:#B42323;   --ge-red-soft:#FBE9E9;
  --ge-font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Re-point the older theme tokens so existing pages follow the brand. */
  --g-bg:var(--ge-paper); --g-panel:var(--ge-panel); --g-panel2:var(--ge-panel-2); --g-panel3:#EBEFF4;
  --g-text:var(--ge-ink); --g-muted:var(--ge-muted); --g-border:var(--ge-line); --g-border2:var(--ge-line-2);
  --g-accent:var(--ge-navy); --g-accent2:var(--ge-navy-3); --g-accent-soft:#E8ECF3;
  --g-sidebar:var(--ge-navy); --g-sidebar2:var(--ge-navy); --g-sidebar-text:#C3CCDA; --g-active:var(--ge-navy-2);
  --g-shadow:0 1px 2px rgba(14,26,46,.05),0 6px 18px rgba(14,26,46,.05);
}
html[data-theme=dark]:root{
  --ge-paper:#0A111D; --ge-panel:#111C2C; --ge-panel-2:#16233A;
  --ge-ink:#EEF2F8; --ge-muted:#A3B0C3; --ge-line:#25344C; --ge-line-2:#33445F;
  --ge-gold-soft:#2A2213; --ge-green-soft:#12301F; --ge-amber-soft:#33250D; --ge-red-soft:#3A1717;
  --ge-green:#55C98F; --ge-amber:#E9AE52; --ge-red:#F07B7B; --ge-gold-deep:var(--ge-gold);
  --g-panel3:#1C2A42; --g-accent:var(--ge-gold); --g-accent2:#EDC88A; --g-accent-soft:#2A2213;
  --g-sidebar:#08101C; --g-sidebar2:#08101C; --g-active:#16233A;
}

/* ---------- Type ---------- */
html body{font-family:var(--ge-font)!important;color:var(--ge-ink)!important;background:var(--ge-paper)!important;font-feature-settings:"tnum" 1}
html body h1,html body h2,html body h3,html body .top strong,html body .ge-top-heading strong{font-family:var(--ge-font)!important;font-stretch:112%;letter-spacing:-.01em!important}
html body button,html body input,html body select,html body textarea{font-family:inherit!important}

/* ---------- Sidebar ---------- */
html body .side{background:var(--g-sidebar)!important;border-right:0!important;color:var(--g-sidebar-text)!important}
html body .ge-sidebar-brand{display:flex!important;align-items:center!important;gap:12px!important;padding:6px 10px 20px!important}
html body .ge-sidebar-brand img{width:34px!important;height:34px!important;border-radius:0!important;background:none!important;box-shadow:none!important;object-fit:contain}
html body .ge-sidebar-brand strong{display:block;color:#fff!important;font-size:17px!important;font-stretch:118%;font-weight:750!important;letter-spacing:.01em!important;line-height:1.1}
html body .ge-sidebar-brand small{display:block;color:#8D9AB0!important;font-size:12px!important;letter-spacing:0!important;text-transform:none!important;font-weight:500!important;margin-top:2px}
html body .ge-sidebar-user{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:10px!important;color:#fff!important}
html body .ge-sidebar-user strong{color:#fff!important}
html body .ge-sidebar-user small{color:#8D9AB0!important}
html body .ge-avatar,html body .mobile-avatar{background:var(--ge-gold)!important;color:var(--ge-navy)!important;font-weight:750!important}
html body .side-section{color:#7F8CA3!important;font-size:12px!important;font-weight:600!important;letter-spacing:.02em!important;text-transform:none!important;margin:20px 12px 6px!important}
html body .side a{color:#C3CCDA!important;background:transparent!important;border:0!important;border-radius:8px!important;box-shadow:none!important;padding-left:30px!important;position:relative;font-weight:500!important}
html body .side a:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
html body .side a.active{background:var(--ge-navy-2)!important;color:#fff!important;font-weight:650!important;border:0!important;padding-left:30px!important}
/* The "lit pixel": a small gold LED marks the current page. */
html body .side a.active::before{content:""!important;display:block!important;position:absolute!important;left:13px!important;top:50%!important;bottom:auto!important;width:7px!important;height:7px!important;margin-top:-3.5px!important;border-radius:50%!important;background:var(--ge-gold)!important;box-shadow:0 0 0 3px rgba(226,181,106,.18),0 0 10px rgba(226,181,106,.55)!important}
html body .side a.install-app-link{background:transparent!important;color:#C3CCDA!important;border:0!important}
html body .side a.install-app-link:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
html body .side summary{color:#7F8CA3!important}
html body .mobile-trial-card::before{content:none!important}
html body .side-close{color:#C3CCDA!important}

/* ---------- Top bar ---------- */
html body .top,html body .ge-top{background:var(--ge-panel)!important;border:1px solid var(--ge-line)!important;border-radius:12px!important;box-shadow:none!important}
html body .ge-top-heading small{color:var(--ge-muted)!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;font-weight:500!important}
html body .ge-top-heading small a{color:var(--ge-muted)!important;text-decoration:none}
html body .ge-top-heading small a:hover{color:var(--ge-ink)!important;text-decoration:underline}
html body .ge-top-heading strong{color:var(--ge-ink)!important;font-size:21px!important;font-weight:700!important}
html body .mobile-menu{background:var(--ge-navy)!important;color:#fff!important;box-shadow:none!important;border-radius:10px!important}
html body .g-theme-toggle,html body .ge-notification-bell{background:var(--ge-panel)!important;border:1px solid var(--ge-line)!important;color:var(--ge-ink)!important}

/* ---------- Surfaces ---------- */
html body .card,html body .stat,html body .stat-card,html body .finance-kpi,html body .ge-metric,html body .event-panel{border-radius:12px!important;border-color:var(--ge-line)!important;box-shadow:var(--g-shadow)!important}
html body .card h2::after,html body .card-head h2::after{background:var(--ge-gold)!important;height:2px!important}

/* ---------- Buttons & links ---------- */
html body .btn{border-radius:8px!important;font-weight:650!important;box-shadow:none!important}
html body .btn.primary,html body button.primary,html body .android-install-now{background:var(--ge-navy)!important;color:#fff!important;border-color:var(--ge-navy)!important;box-shadow:none!important}
html body .btn.primary:hover{background:var(--ge-navy-3)!important}
html[data-theme=dark] body .btn.primary,html[data-theme=dark] body button.primary{background:var(--ge-gold)!important;color:var(--ge-navy)!important;border-color:var(--ge-gold)!important}
html[data-theme=dark] body .btn.primary:hover{background:#EDC88A!important}
html body .btn.danger,html body .btn-danger{background:var(--ge-red-soft)!important;color:var(--ge-red)!important;border-color:transparent!important}
html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible,html body .btn:focus-visible,html body a:focus-visible,html body button:focus-visible{outline:2px solid var(--ge-gold)!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(226,181,106,.22)!important}

/* ---------- Status: LED-style badges ---------- */
.ge-status{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 9px;border-radius:999px;font-size:12.5px;font-weight:650;line-height:1.4;white-space:nowrap;background:#EEF1F5;color:#3F4B5C}
.ge-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ge-status-running,.ge-status-today{background:var(--ge-green-soft);color:var(--ge-green)}
.ge-status-running::before,.ge-status-today::before{box-shadow:0 0 0 3px rgba(30,138,90,.15)}
.ge-status-upcoming,.ge-status-confirmed{background:#E8ECF3;color:var(--ge-navy-3)}
.ge-status-planned{background:var(--ge-amber-soft);color:var(--ge-amber)}
.ge-status-completed{background:#EEF1F5;color:#5D6B7E}
.ge-status-cancelled{background:var(--ge-red-soft);color:var(--ge-red)}
html[data-theme=dark] .ge-status{background:#1C2A42;color:#C3CCDA}
html[data-theme=dark] .ge-status-running,html[data-theme=dark] .ge-status-today{background:var(--ge-green-soft);color:var(--ge-green)}
html[data-theme=dark] .ge-status-upcoming,html[data-theme=dark] .ge-status-confirmed{background:#1C2A42;color:#C9D6EC}
html[data-theme=dark] .ge-status-planned{background:var(--ge-amber-soft);color:var(--ge-amber)}
html[data-theme=dark] .ge-status-cancelled{background:var(--ge-red-soft);color:var(--ge-red)}
.ge-led{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---------- Event list tabs & search ---------- */
html body .event-list-tabs{background:var(--ge-panel-2)!important;border-color:var(--ge-line)!important}
html body .event-list-tab{display:inline-flex!important;align-items:center!important;gap:8px!important;color:var(--ge-muted)!important;background:transparent!important;box-shadow:none!important}
html body .event-list-tab.active{background:var(--ge-panel)!important;color:var(--ge-ink)!important;box-shadow:0 1px 3px rgba(14,26,46,.12)!important}
html body .event-list-tab .ge-led{color:#9AA6B6}
html body .event-list-tab.active .ge-led-today{color:var(--ge-green)}
html body .event-list-tab.active .ge-led-upcoming{color:var(--ge-navy-3)}
html body .event-list-tab.active .ge-led-completed{color:#7A8698}
html[data-theme=dark] body .event-list-tab.active .ge-led-upcoming{color:var(--ge-gold)}
html body .tab-count{background:#E8ECF3!important;color:var(--ge-ink)!important}
html[data-theme=dark] body .tab-count{background:#22314A!important;color:var(--ge-ink)!important}
html body .event-search-icon{display:inline-flex!important;align-items:center;justify-content:center;color:var(--ge-ink)!important;background:var(--ge-panel)!important;border:1px solid var(--ge-line)!important}
html body .event-search-popover button{background:var(--ge-navy)!important}

/* ---------- Event detail header ---------- */
.ge-event-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 20px;margin:0 0 16px;background:var(--ge-navy);color:#fff;border-radius:12px;position:relative;overflow:hidden}
.ge-event-head::after{content:"";position:absolute;right:-10px;top:-10px;width:190px;height:150px;opacity:.13;pointer-events:none;background-image:radial-gradient(circle,#E2B56A 1.6px,transparent 2.2px);background-size:14px 14px;-webkit-mask-image:linear-gradient(225deg,#000 20%,transparent 75%);mask-image:linear-gradient(225deg,#000 20%,transparent 75%)}
.ge-event-head-main{min-width:0;position:relative;z-index:1}
.ge-event-head h1{margin:0 0 8px;font-size:clamp(22px,3vw,30px);line-height:1.15;font-weight:750;font-stretch:112%;color:#fff;overflow-wrap:anywhere}
.ge-event-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;color:#C3CCDA;font-size:15px;margin:0;padding:0;list-style:none}
.ge-event-meta strong{color:#fff;font-weight:600}
.ge-event-head .ge-status{background:rgba(255,255,255,.1);color:#fff}
.ge-event-head .ge-status-running,.ge-event-head .ge-status-today{background:rgba(85,201,143,.16);color:#7FE0AE}
.ge-event-head .ge-status-planned{background:rgba(233,174,82,.16);color:#F3C27A}
.ge-event-head .ge-status-cancelled{background:rgba(240,123,123,.16);color:#F7A3A3}
.ge-event-head-side{position:relative;z-index:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ge-event-head-side form{margin:0}
.ge-event-head-side .btn{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
.ge-event-head-side .btn:hover{background:rgba(255,255,255,.14)!important}
.ge-event-head-side .btn.primary{background:var(--ge-gold)!important;color:var(--ge-navy)!important;border-color:var(--ge-gold)!important}
@media(max-width:700px){
  .ge-event-head{flex-direction:column;align-items:stretch;padding:16px}
  .ge-event-meta{flex-direction:column;align-items:flex-start;gap:4px}
  .ge-event-head-side .btn.primary{flex:1}
}
/* The old toolbar keeps Back + Delete; Delete becomes a quiet text action. */
html body .event-delete-form button,html body .event-delete-form .btn{background:transparent!important;color:var(--ge-red)!important;border:1px solid transparent!important;box-shadow:none!important;font-weight:600!important}
html body .event-delete-form button:hover{background:var(--ge-red-soft)!important}
html body .ge-event-head .event-delete-form button{color:#F7A3A3!important}
html body .ge-event-head .event-delete-form button:hover{background:rgba(240,123,123,.14)!important;color:#FFC4C4!important}

/* ---------- Sign-in pages ---------- */
body.ge-auth{min-height:100vh;min-height:100dvh;margin:0;display:grid;place-items:center;padding:24px 16px;box-sizing:border-box;background:var(--ge-navy)!important;color:var(--ge-ink)!important;position:relative;overflow-x:hidden}
body.ge-auth::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(226,181,106,.22) 1.4px,transparent 2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 0%,transparent 70%)}
.ge-auth-wrap{position:relative;width:100%;max-width:420px}
.ge-auth-brand{display:flex;align-items:center;gap:12px;justify-content:center;margin:0 0 22px;color:#fff;text-decoration:none}
.ge-auth-brand img{width:38px;height:38px}
.ge-auth-brand span{font-size:19px;font-weight:750;font-stretch:118%;letter-spacing:.01em}
.ge-auth-card{background:#fff;border-radius:14px;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.ge-auth-card h1{margin:0 0 6px;font-size:24px;font-weight:750;font-stretch:112%;color:var(--ge-ink)}
.ge-auth-card .ge-auth-lead{margin:0 0 20px;color:var(--ge-muted);font-size:15px}
.ge-auth-card label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px;color:var(--ge-ink)}
.ge-auth-card input[type=email],.ge-auth-card input[type=password],.ge-auth-card input[type=text]{width:100%;box-sizing:border-box;min-height:46px;padding:11px 13px;border:1px solid var(--ge-line-2);border-radius:8px;font-size:16px;background:#fff;color:var(--ge-ink)}
.ge-auth-card input:focus{outline:none;border-color:var(--ge-navy);box-shadow:0 0 0 3px rgba(226,181,106,.35)}
.ge-pass{position:relative}
.ge-pass input{padding-right:70px!important}
.ge-pass button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--ge-muted);font:inherit;font-size:13px;font-weight:600;padding:8px 10px;border-radius:6px;cursor:pointer}
.ge-pass button:hover{color:var(--ge-ink);background:var(--ge-panel-2)}
.ge-check{display:flex!important;align-items:center;gap:10px;font-weight:500!important;margin:16px 0 0!important}
.ge-check input{width:18px;height:18px;accent-color:var(--ge-navy);margin:0}
.ge-auth-card .ge-submit{width:100%;margin-top:22px;min-height:48px;border:0;border-radius:8px;background:var(--ge-navy);color:#fff;font:inherit;font-size:16px;font-weight:650;cursor:pointer}
.ge-auth-card .ge-submit:hover{background:var(--ge-navy-3)}
.ge-auth-card .ge-submit:focus-visible{outline:2px solid var(--ge-gold);outline-offset:2px}
.ge-auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:14px}
.ge-auth-links a{color:var(--ge-navy-3);font-weight:600;text-decoration:none}
.ge-auth-links a:hover{text-decoration:underline}
.ge-auth-alert{padding:12px 14px;border-radius:8px;margin:0 0 6px;font-size:14px;line-height:1.45}
.ge-auth-alert.err{background:var(--ge-red-soft);color:var(--ge-red)}
.ge-auth-alert.info{background:#E8ECF3;color:var(--ge-navy-3)}
.ge-auth-foot{text-align:center;color:#8D9AB0;font-size:13px;margin:18px 0 0}
.ge-auth-foot a{color:#C3CCDA}
@media(max-width:420px){.ge-auth-card{padding:22px 18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Dark-mode fixes for hard-coded light colours ---------- */
html[data-theme=dark] body .quick-action{border-bottom-color:var(--ge-line)!important}
html[data-theme=dark] body .quick-action strong{color:var(--ge-ink)!important}
html[data-theme=dark] body .quick-action small,html[data-theme=dark] body .quick-action b{color:var(--ge-muted)!important}
html[data-theme=dark] body .quick-action>span{background:var(--ge-panel-2)!important;color:var(--ge-ink)!important}
html[data-theme=dark] body .quick-action:hover>span{background:#22314A!important;color:var(--ge-gold)!important}
html body .quick-action:hover>span{background:var(--ge-gold-soft)!important;color:var(--ge-gold-deep)!important}

/* ---------- Sidebar stays in view while the page scrolls ----------
 * The older layers set overflow-x:hidden on <html> and <body>, which turns <body>
 * into a scroll container and silently breaks position:sticky on the sidebar
 * (it scrolled away, leaving an empty gap). overflow-x:clip hides sideways
 * overflow the same way without breaking sticky. Desktop/tablet only: on phones
 * the sidebar is a slide-in drawer. */
@supports (overflow:clip){
  html:root,html body{overflow-x:clip!important}
}
@media (min-width:761px){
  html body .layout{align-items:start!important}
  html body .side{position:sticky!important;top:0!important;height:100vh!important;height:100dvh!important;overflow-y:auto!important;align-self:start!important}
}
html body .ge-sidebar-brand strong{white-space:nowrap}
@media (max-width:1180px) and (min-width:761px){html body .ge-sidebar-brand strong{font-size:15px!important;font-stretch:105%}html body .ge-sidebar-brand img{width:28px!important;height:28px!important}}

/* ---------- Notification bell & dropdown ----------
 * Older rules (.top span{color:muted} and .top strong{font-size:22px}) leaked into
 * the bell: the unread number was grey on red, and dropdown titles were huge. */
html body .top .ge-notification-count,html body .top .ge-nav-unread,html body .side .ge-nav-unread{background:#D92D20!important;color:#fff!important;font-size:11px!important;font-weight:700!important;line-height:1!important;min-width:19px;height:19px;padding:0 5px;border-radius:99px;font-stretch:100%!important}
html body .top .ge-notification-panel{border-color:var(--ge-line)!important;border-radius:12px!important;background:var(--ge-panel)!important}
html body .top .ge-notification-panel-head strong{font-size:15px!important;font-weight:700!important;font-stretch:105%!important;color:var(--ge-ink)!important}
html body .top .ge-notification-panel-head a{color:var(--ge-navy-3)!important;font-size:13px!important}
html[data-theme=dark] body .top .ge-notification-panel-head a{color:var(--ge-gold)!important}
html body .top .ge-notification-preview strong{font-size:14px!important;font-weight:650!important;font-stretch:100%!important;letter-spacing:0!important;line-height:1.35!important;color:var(--ge-ink)!important}
html body .top .ge-notification-preview span{font-size:13px!important;color:var(--ge-muted)!important;display:block!important;line-height:1.4}
html body .top .ge-notification-preview button:hover strong{color:var(--ge-navy-3)!important}
html body .top .ge-notification-preview span{max-width:none!important;white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html body .top .ge-notification-preview strong{max-width:none!important;white-space:normal!important}