/* ABFI look "B2 Sunrise" (picked by Umaima, 2 Nov 2026), in light and dark. Loaded after every other stylesheet.
   Navy base, an orange-to-gold greeting band at the top of each page, a colour stripe on cards, numbers in colour.
   The BwU Connect logo keeps its own colours (never recoloured). */
@font-face{font-family:Onest;src:url(/assets/fonts/onest.woff2) format("woff2");font-weight:300 900;font-display:swap}

/* ---------- tokens ---------- */
html,html[data-theme="dark"]{
  --bg:#0a1424;--panel:#111f35;--panel2:#16263f;--line:#1f3049;--text:#dfe6ee;--muted:#9fb0c6;--hot:#ff7a2f;--cyan:#8cc4ff;--yellow:#f6c445;--violet:#f5f7fa;--green:#5fe0a8;--red:#ff7a7a;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.18);--field:#0e1a2d;--chip:#16263f;--th:#0f1c30;--soft:#0e1a2d;--on-hot:#ffffff;--hover:#16263f;--sel:rgba(255,122,47,.14);--hot-soft:rgba(255,122,47,.12);--top:rgba(7,16,32,.94);
  --side:#071020;--side-text:#c4d0de;--side-label:#7489a3;--side-on:linear-gradient(90deg,#ff7a2f,#f5b83d);--side-on-text:#1a0d03;
  --band:linear-gradient(110deg,#ff6a2a 0%,#ff9a3c 45%,#f6c445 100%);--band-text:#1a0d03;--band-sub:#3b2106;
  --heading:#f5f7fa;--link:#f6c445;--k1:#ff7a2f;--k2:#f6c445;--k3:#38c6a5;--k4:#5aa8ff;--k1n:#ff9a5c;--k2n:#f6c445;--k3n:#5fe0c0;--k4n:#8cc4ff;
  --display:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--body:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
html[data-theme="light"]{
  --bg:#f4f6fa;--panel:#ffffff;--panel2:#eef1f6;--line:#e2e7ef;--text:#14233a;--muted:#5b6b80;--hot:#f2601a;--cyan:#2563c9;--yellow:#a86a00;--violet:#0b1626;--green:#178a5a;--red:#c8372d;
  --shadow:0 1px 2px rgba(11,22,38,.05),0 8px 24px rgba(11,22,38,.06);--field:#ffffff;--chip:#eef1f6;--th:#f7f9fc;--soft:#f9fafc;--on-hot:#ffffff;--hover:#eef1f6;--sel:rgba(242,96,26,.10);--hot-soft:rgba(242,96,26,.08);--top:rgba(255,255,255,.94);
  --side:#ffffff;--side-text:#33445c;--side-label:#8a97a8;--side-on:linear-gradient(90deg,#ff7a2f,#f5b83d);--side-on-text:#1a0d03;
  --band:linear-gradient(110deg,#ff6a2a 0%,#ff9a3c 45%,#f6c445 100%);--band-text:#1a0d03;--band-sub:#3b2106;
  --heading:#0b1626;--link:#c2410c;--k1:#ff7a2f;--k2:#f6c445;--k3:#1fb38a;--k4:#3d8ff0;--k1n:#e2550f;--k2n:#b07a00;--k3n:#14936f;--k4n:#2a6fd0;color-scheme:light}

/* ---------- base: no glow blobs, one font ---------- */
html{font-family:var(--body)}
body,html[data-theme="light"] body,html[data-theme="dark"] body{background:var(--bg)!important;color:var(--text);font-family:var(--body)}
h1,h2,h3,.panel h2,.card h2,.topbar h1,.auth-card h1{color:var(--heading);font-family:var(--display);letter-spacing:-.015em}
a{color:var(--link)}
.eyebrow{color:var(--hot);letter-spacing:.12em}

/* ---------- top bar ---------- */
.cx-top{background:var(--top);border-bottom:1px solid var(--line)}
.cx-widgets{background:var(--bg);border-bottom:1px solid var(--line)}
.cx-search,.cx-search input{background:var(--panel2)!important;color:var(--text)}
.cx-me summary{background:linear-gradient(135deg,#ff7a2f,#f5b83d)!important;color:#1a0d03!important}

/* ---------- sidebar: readable, no hard divider, gradient marker ---------- */
.sidebar,html[data-theme="light"] .sidebar,html[data-theme="dark"] .sidebar{background:var(--side)!important;border-right:1px solid var(--line)!important;color:var(--side-text);--text:var(--side-text);--muted:var(--side-label)}
html[data-theme="light"] .sidebar{--panel2:#f1f4f8;--line:#e2e7ef}
html .sidebar,html[data-theme="dark"] .sidebar{--line:#1a2a41}
html[data-theme="light"] .sidebar{--line:#e2e7ef}
.cx-navfoot,.sidebar-foot{border-color:var(--line)!important}
.sidebar .cx-nav a,.sidebar .cx-sec>summary{color:var(--side-text)}
.sidebar .cx-sec>summary .cx-lbl,.sidebar .cx-sec>summary{color:var(--side-label)}
.sidebar .cx-nav a:hover,.sidebar .cx-sec>summary:hover{background:var(--panel2);color:var(--heading)}
.sidebar .cx-nav a[aria-current="page"],.sidebar nav a.active{background:var(--side-on)!important;color:var(--side-on-text)!important;box-shadow:none!important;font-weight:700}
.sidebar .cx-nav a[aria-current="page"] svg{color:var(--side-on-text)}
.cx-navfoot{color:var(--side-label)}
.panel h2,.card h2,.ov-card h2{font-size:20px!important;line-height:1.25}

/* ---------- page heading becomes the orange-to-gold band ---------- */
.main>.topbar,.main .cp-head,.main>.page-head,.main>div:has(>.eyebrow):has(>h1),.main>header:has(h1){
  background:var(--band)!important;border-radius:16px;padding:20px 24px!important;margin:0 0 18px!important;border:0!important;box-shadow:0 8px 24px rgba(255,122,47,.18);color:var(--band-text)}
.main>.topbar h1,.main .cp-head h1,.main>.page-head h1,.main>div:has(>.eyebrow):has(>h1) h1,.main>header:has(h1) h1{
  color:var(--band-text)!important;font-size:clamp(22px,2.4vw,28px)!important;line-height:1.15!important;margin:2px 0 4px!important;font-weight:800;text-transform:none}
.main>.topbar .eyebrow,.main .cp-head .eyebrow,.main>.page-head .eyebrow,.main>div:has(>.eyebrow):has(>h1) .eyebrow{color:var(--band-sub)!important;opacity:.85}
.main>.topbar p,.main .cp-head p,.main .cp-head .hint,.main>.page-head p,.main>div:has(>.eyebrow):has(>h1) p,.main>.topbar .hint{color:var(--band-sub)!important}
.main>.topbar a:not(.btn),.main .cp-head .hint a,.main>.page-head p a,.main>div:has(>.eyebrow):has(>h1) p a{color:#1a0d03!important;text-decoration:underline}
.main a.btn{text-decoration:none!important}
.main>.topbar .btn,.main .cp-head .btn,.main>.page-head .btn,.main>div:has(>.eyebrow):has(>h1) .btn{background:rgba(255,255,255,.38)!important;border-color:rgba(26,13,3,.12)!important;color:#1a0d03!important}
:is(html,html[data-theme="light"]) .main>.topbar .btn.hot,:is(html,html[data-theme="light"]) .main .cp-head .btn.hot,.main>.page-head .btn.hot,.main>div:has(>.eyebrow):has(>h1) .btn.hot{background:#0b1626!important;color:#fff!important;border-color:#0b1626!important}
/* everywhere else, page titles are normal size (no 70px headlines) */
.main h1{font-size:clamp(22px,2.4vw,28px)}

/* Home greeting band (overview.php) */
.ov-hello{background:var(--band);border-radius:16px;padding:20px 24px;margin:0 0 16px;box-shadow:0 8px 24px rgba(255,122,47,.18);color:var(--band-text);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.ov-hello h1{margin:0;font:800 clamp(22px,2.4vw,28px)/1.15 var(--display);color:var(--band-text)}
.ov-hello p{margin:4px 0 0;color:var(--band-sub);font-size:14px}
:is(html,html[data-theme="light"],html[data-theme="dark"]) .ov-hello .btn{background:rgba(255,255,255,.38)!important;border-color:rgba(26,13,3,.12)!important;color:#1a0d03!important}
:is(html,html[data-theme="light"],html[data-theme="dark"]) .ov-hello .btn.hot{background:#0b1626!important;border-color:#0b1626!important;color:#fff!important}

/* ---------- cards: colour stripe on top, numbers in colour ---------- */
.panel,.card,.live-card,.tablewrap,.ov-kpi,.ov-card,.stat{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:14px;box-shadow:var(--shadow);position:relative}
.panel::before,.card::before,.ov-card::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#ff7a2f,#f5b83d);opacity:.9}
.ov-kpi{overflow:hidden}
.ov-kpi::before,.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--k1)}
.ov-kpi:nth-child(4n+2)::before,.stat:nth-child(4n+2)::before{background:var(--k2)}.ov-kpi:nth-child(4n+3)::before,.stat:nth-child(4n+3)::before{background:var(--k3)}.ov-kpi:nth-child(4n+4)::before,.stat:nth-child(4n+4)::before{background:var(--k4)}
.ov-kpi .ov-val,.stat strong{color:var(--k1n)!important}
.ov-kpi:nth-child(4n+2) .ov-val,.stat:nth-child(4n+2) strong{color:var(--k2n)!important}.ov-kpi:nth-child(4n+3) .ov-val,.stat:nth-child(4n+3) strong{color:var(--k3n)!important}.ov-kpi:nth-child(4n+4) .ov-val,.stat:nth-child(4n+4) strong{color:var(--k4n)!important}
.ov-goalbar i{background:linear-gradient(90deg,#ff7a2f,#f5b83d)!important}
th,html[data-theme="light"] th{background:var(--th)!important;color:var(--muted)}
table{color:var(--text)}

/* ---------- buttons, pills, fields ---------- */
.btn,html[data-theme="light"] .btn{background:var(--chip);border:1px solid var(--line);color:var(--text)}
.btn.ghost,html[data-theme="light"] .btn.ghost{background:transparent}
.btn.hot,button.hot,html[data-theme="light"] .btn.hot,.date-chips .btn.active,.period-tabs a.active,.ov-seg a.on{background:linear-gradient(135deg,#ff7a2f,#f5b83d)!important;border-color:transparent!important;color:#1a0d03!important}
.btn:hover{border-color:var(--hot)}
input,select,textarea{background:var(--field);color:var(--text);border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--hot)!important;box-shadow:0 0 0 3px var(--hot-soft)!important;outline:none}
.cx-tabs a.on{color:var(--hot);border-color:var(--hot)}

/* ---------- calendar: calm colours, no neon ---------- */
html .kal,html[data-theme="light"] .kal{--k-call:#ff7a2f;--k-task:#f6c445;--k-post:#3d8ff0;--k-money:#1fb38a;--k-hol:#7c8aa0;--k-mine:#a855f7;--k-gcal:#2f7bff;--on-ev:#ffffff}

/* ---------- login page ---------- */
.auth-body{background:var(--bg)!important}
.auth-card{background:var(--panel)!important;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--band)}
.auth-card h1{font-size:28px!important}

/* ---------- logo: font family and colours pinned to r7c; sizes, weights and spacing stay with connect.css (incl. its phone sizes) (HARD RULE: never change the BwU Connect logo, font or colours) ---------- */
.cx-logo,.cx-auth-brand{font-family:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}
html .cx-logo,html .cx-logo b,html .cx-auth-brand,html .cx-auth-brand span,html[data-theme="dark"] .cx-logo,html[data-theme="dark"] .cx-logo b,html[data-theme="dark"] .cx-auth-brand,html[data-theme="dark"] .cx-auth-brand span{color:#f8f3e8!important}
html[data-theme="light"] .cx-logo,html[data-theme="light"] .cx-logo b,html[data-theme="light"] .cx-auth-brand,html[data-theme="light"] .cx-auth-brand span{color:#071d36!important}
.cx-logo b,.cx-logo i,.cx-auth-brand span,.cx-auth-brand em{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif!important}
html .cx-logo i,html[data-theme="dark"] .cx-logo i{background:linear-gradient(90deg,#ff55bd,#9a72ff)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
html[data-theme="light"] .cx-logo i{background:linear-gradient(90deg,#d1208f,#6a45dc)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.cx-auth-brand em{background:linear-gradient(90deg,#ff4eb8,#9a72ff)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}