/* ══════════════════════════════════════════════════════
   PATASOKO HUB — theme + layout
   Light theme default, dark mode via [data-theme="dark"]
   Mechanism ported from Servex portal.css; tokens are PataSoko's own
   (apps/web/src/theme/colors.ts)
   ══════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (no external CDN dependency) ─────────────── */
/* Manrope — latin subset, weights 300–800 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-300-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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-400-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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-500-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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-600-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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-700-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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-800-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;
}

/* Newsreader — latin variable font, normal + italic */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/newsreader-latin-wght-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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/newsreader-latin-wght-italic.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;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:            #F6FAF7;
  --ink:           #111D14;
  --brand:         #1E7A39;
  --brand-hover:   #155C2A;
  --brand-light:   #EBF5EE;
  --accent:        #A8392B;
  --text-muted:    #566B5C;
  --rule:          #C8DACC;
  --rule-soft:     #E1EDE5;
  --sidebar-bg:    #EBF5EE;
  --sidebar-rule:  #C2D9C8;
  --card-bg:       #FFFFFF;
  --input-bg:      #FFFFFF;
  --overlay-bg:    rgba(0,0,0,0.55);
  --sidebar-w:     252px;
  --radius:        10px;
  --card-shadow:   0 1px 3px rgba(30,122,57,0.06), 0 4px 16px rgba(30,122,57,0.04);
  --card-shadow-hover: 0 2px 8px rgba(30,122,57,0.10), 0 8px 24px rgba(30,122,57,0.07);
  --trans:         0.22s ease;
  --font-head:     'Manrope', sans-serif;
  --font-display:  'Newsreader', serif;
}
[data-theme="dark"]{
  --bg:            #0D1210;
  --ink:           #EDF2EE;
  --brand:         #5BBE63;
  --brand-hover:   #6ECF76;
  --brand-light:   rgba(91,190,99,0.10);
  --accent:        #E08070;
  --text-muted:    #8FA893;
  --rule:          #1E2E21;
  --rule-soft:     #172019;
  --sidebar-bg:    #0B1A0E;
  --sidebar-rule:  #1A2E1D;
  --card-bg:       #131D15;
  --input-bg:      #192219;
  --overlay-bg:    rgba(0,0,0,0.55);
  --card-shadow:   0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25);
  --card-shadow-hover: 0 2px 8px rgba(91,190,99,0.12), 0 8px 24px rgba(0,0,0,0.35);
}

/* ── DARK MODE OVERRIDES ─────────────────────────────────── */
[data-theme="dark"] body { background: #0D1210; }

[data-theme="dark"] .sidebar {
  background: #0B1A0E;
  border-right: 1px solid #1A2E1D;
  box-shadow: 4px 0 32px rgba(0,0,0,0.45);
}
[data-theme="dark"] .sidebar-header { border-bottom-color: #1A2E1D; }
[data-theme="dark"] .sidebar-user   { border-top-color: #1A2E1D; }

[data-theme="dark"] .nav-item { color: #6A8A6F; }
[data-theme="dark"] .nav-item:hover {
  background: rgba(91,190,99,0.07);
  color: #EDF2EE;
}
[data-theme="dark"] .nav-item.active {
  background: rgba(91,190,99,0.15);
  color: #6ECF76;
  border-left: 3px solid #5BBE63;
  padding-left: 9px;
}

[data-theme="dark"] .topbar {
  background: rgba(13,18,16,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #1E2E21;
}

[data-theme="dark"] .card,
[data-theme="dark"] .fin-chart-card,
[data-theme="dark"] .fin-kpi-card,
[data-theme="dark"] .fin-table-card,
[data-theme="dark"] .exp-card,
[data-theme="dark"] .exp-form-card,
[data-theme="dark"] .kpi-tile {
  background: #131D15;
  border: 1px solid #1E2E21;
  box-shadow: var(--card-shadow);
}
[data-theme="dark"] .fin-kpi-card:hover,
[data-theme="dark"] .kpi-tile:hover {
  border-color: rgba(91,190,99,0.28);
  box-shadow: var(--card-shadow-hover);
  transition: all 0.22s ease;
}

[data-theme="dark"] .exp-card--pending  { border-left: 3px solid rgba(255,167,0,0.7); }
[data-theme="dark"] .exp-card--approved { border-left: 3px solid rgba(91,190,99,0.7); }
[data-theme="dark"] .exp-card--rejected { border-left: 3px solid rgba(224,128,112,0.7); }

[data-theme="dark"] .exp-input,
[data-theme="dark"] .exp-reason-input {
  background: #201B14;
  border-color: rgba(255,255,255,0.08);
  color: #F0EBE1;
}
[data-theme="dark"] .exp-input:focus {
  border-color: rgba(91,190,99,0.5);
  box-shadow: 0 0 0 3px rgba(91,190,99,0.10);
}

[data-theme="dark"] .exp-filter-tab {
  border-color: rgba(255,255,255,0.08);
  color: #7A7268;
}
[data-theme="dark"] .exp-filter-tab:hover { border-color: #5BBE63; color: #5BBE63; }
[data-theme="dark"] .exp-filter-tab.active { background: #5BBE63; color: #0A0806; border-color: #5BBE63; }

[data-theme="dark"] .fin-tx-table th { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .fin-tx-table td { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .fin-cat-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .exp-type-badge { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }

[data-theme="dark"] .fin-pbar-wrap { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .cur-badge-usd { background: rgba(0,180,217,0.15); color: #4CCDEC; border-color: rgba(0,180,217,0.25); }
[data-theme="dark"] .cur-badge-zar { background: rgba(255,167,0,0.15); color: #FFBE3B; border-color: rgba(255,167,0,0.25); }
[data-theme="dark"] .cur-badge-kes { background: rgba(91,190,99,0.15); color: #7DD984; border-color: rgba(91,190,99,0.25); }
[data-theme="dark"] .exp-equiv-note { color: #7A7268; }

[data-theme="dark"] .db-status-chip.chip-active { background: rgba(91,190,99,0.15); color: #5BBE63; border-color: rgba(91,190,99,0.25); }
[data-theme="dark"] .week-done   { background: rgba(91,190,99,0.18); border-color: rgba(91,190,99,0.3); color:#5BBE63; }
[data-theme="dark"] .week-current{ background: rgba(91,190,99,0.32); border-color: #5BBE63; color: #0A0806; }
[data-theme="dark"] .week-future { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); color: #7A7268; }

[data-theme="dark"] .auth-card { background: #181310; border: 1px solid rgba(255,255,255,0.055); }
[data-theme="dark"] .auth-input { background: #201B14; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  color-scheme: dark;
}

body{
  background:var(--bg); color:var(--ink); font-family:var(--font-head);
  min-height:100vh; font-size:15px; line-height:1.6;
  transition:background var(--trans), color var(--trans);
}
a{color:inherit;}

/* ─── DARK MODE TOGGLE ───────────────────────────────── */
.dm-toggle{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  background:none; border:1px solid var(--rule); border-radius:100px;
  padding:6px 12px; color:var(--text-muted); font-size:.82rem; font-family:var(--font-head);
  font-weight:600; transition:all var(--trans);
}
.dm-toggle:hover{border-color:var(--brand); color:var(--ink);}

/* ─── LAYOUT ─────────────────────────────────────────── */
.layout{margin-left:var(--sidebar-w); transition:margin var(--trans); min-height:100vh;}
.main{display:flex; flex-direction:column; min-height:100vh;}
.content{padding:24px; flex:1;}

/* ─── SIDEBAR ────────────────────────────────────────── */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--sidebar-bg); border-right:1px solid var(--sidebar-rule);
  display:flex; flex-direction:column; z-index:100;
  transition:transform var(--trans), background var(--trans), border-color var(--trans);
}
.sidebar-header{
  padding:18px 14px 16px; border-bottom:1px solid var(--sidebar-rule);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.sidebar-logo-link{display:flex; align-items:center; gap:10px; text-decoration:none; overflow:hidden;}
.sidebar-logo{height:32px; width:auto; transition:opacity var(--trans);}
.sidebar-dept{font-family:var(--font-display); font-style:italic; color:var(--text-muted); font-size:.9rem;}

/* Collapse toggle button */
.sidebar-collapse-btn{
  flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--sidebar-rule); border-radius:6px; background:none;
  color:var(--text-muted); cursor:pointer; transition:all .2s; font-size:1rem; line-height:1;
}
.sidebar-collapse-btn:hover{ border-color:var(--brand); color:var(--brand); }
.sidebar-collapse-icon{ transition:transform .22s ease; display:inline-block; }

.sidebar-nav{flex:1; overflow-y:auto; padding:10px 8px;}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; margin:2px 0;
  border-radius:var(--radius); color:var(--text-muted); font-weight:600; font-size:.88rem;
  text-decoration:none; transition:all var(--trans); letter-spacing:.01em; white-space:nowrap; overflow:hidden;
}
.nav-item:hover{ color:var(--ink); background:rgba(30,122,57,0.08); }
.nav-item.active{
  color:#ffffff; background:var(--brand);
  box-shadow: 0 2px 8px rgba(30,122,57,0.30);
}
.nav-icon{font-size:1rem; width:20px; text-align:center; flex-shrink:0;}
.nav-label{ overflow:hidden; transition:opacity .18s, max-width .22s; }
.sidebar-user{padding:14px 16px; border-top:1px solid var(--sidebar-rule); overflow:hidden;}
.user-name{font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-role{color:var(--text-muted); font-size:.75rem; margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.logout-btn{color:var(--text-muted); font-size:.78rem; font-weight:600; text-decoration:none;}
.logout-btn:hover{color:var(--accent); text-decoration:underline;}
.sidebar-user-links { display:flex; gap:14px; margin-top:2px; flex-wrap:wrap; overflow:hidden; }
.sidebar-user-link { color:var(--text-muted); font-size:.78rem; text-decoration:none; transition:color .2s; white-space:nowrap; }
.sidebar-user-link:hover, .sidebar-user-link.active { color:var(--brand); }

/* ── Collapsed sidebar state ───────────────────────── */
:root.sidebar-collapsed { --sidebar-w: 62px; }
.sidebar-collapsed .sidebar-logo   { opacity:0; width:0; pointer-events:none; }
.sidebar-collapsed .nav-label      { opacity:0; max-width:0; pointer-events:none; }
.sidebar-collapsed .sidebar-user-links,
.sidebar-collapsed .user-name,
.sidebar-collapsed .user-role      { display:none; }
.sidebar-collapsed .sidebar-user   { display:flex; justify-content:center; padding:12px 0; }
.sidebar-collapsed .sidebar-collapse-icon { transform:rotate(180deg); }
.sidebar-collapsed .nav-item       { justify-content:center; padding:10px; }
.sidebar-collapsed .nav-icon       { width:auto; }
/* Tooltip on icon-only nav items for accessibility */
.sidebar-collapsed .nav-item[title] { position:relative; }
.sidebar-collapsed .nav-item:hover::after {
  content: attr(aria-label);
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--ink); color:var(--bg); font-size:.78rem; font-weight:600;
  padding:4px 10px; border-radius:6px; white-space:nowrap; z-index:200;
  pointer-events:none;
}

/* ─── TOPBAR ─────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:16px; padding:0 24px; height:60px;
  border-bottom:1px solid var(--rule-soft); background:var(--card-bg);
  box-shadow: 0 1px 4px rgba(30,122,57,0.05);
}
.topbar-title{font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--ink);}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:8px;}
.mob-menu-btn{
  display:none; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--rule); border-radius:var(--radius); background:none; color:var(--ink);
  font-size:1.1rem; cursor:pointer;
}
/* Topbar icon buttons (notifications, theme toggle) */
.topbar-icon-btn {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius); border:1px solid var(--rule-soft);
  background:none; color:var(--ink); font-size:1rem; cursor:pointer;
  text-decoration:none; transition:border-color .2s, background .2s;
}
.topbar-icon-btn:hover { border-color:var(--brand); background:var(--brand-light); }
.topbar-icon { pointer-events:none; }
/* Notification badge */
.notif-badge {
  position:absolute; top:-5px; right:-5px;
  min-width:18px; height:18px; border-radius:9px;
  background:var(--accent); color:#fff;
  font-size:.65rem; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px; pointer-events:none;
  border:2px solid var(--card-bg);
}

/* ─── CARD ───────────────────────────────────────────── */
.card{
  background:var(--card-bg); border:1px solid var(--rule-soft); border-radius:12px;
  padding:20px; margin-top:16px;
  box-shadow: var(--card-shadow);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.card--stretch{height:100%;}

/* ─── ACTIVITY FEED ──────────────────────────────────── */
.card-title{font-family:var(--font-display); font-size:1.1rem; margin-bottom:14px;}
.empty-note{color:var(--text-muted); font-size:.9rem;}
.activity-entry{padding:14px 0; border-top:1px solid var(--rule-soft);}
.activity-entry:first-of-type{border-top:none; padding-top:0;}
.activity-head{display:flex; gap:10px; align-items:center; font-size:.8rem; color:var(--text-muted); margin-bottom:4px;}
.activity-sha{font-family:monospace; background:var(--rule-soft); padding:1px 6px; border-radius:4px;}
.activity-author{font-weight:700; color:var(--ink);}
.activity-message{font-size:.94rem; margin-bottom:2px;}
.activity-meta{font-size:.78rem; color:var(--text-muted); margin-bottom:8px;}
.activity-comments{margin-bottom:8px;}
.comment{font-size:.85rem; padding:4px 0;}
.comment-form{display:flex; gap:8px;}
.comment-form input[type="text"]{
  flex:1; padding:7px 10px; border-radius:var(--radius); border:1px solid var(--rule);
  background:var(--input-bg); color:var(--ink); font-size:.85rem;
}
.comment-form button{
  padding:7px 14px; border:none; border-radius:var(--radius); background:var(--brand);
  color:#fff; font-weight:600; font-size:.82rem; cursor:pointer;
}
.comment-form button:hover{background:var(--brand-hover);}

/* ─── LIVE PREVIEW ───────────────────────────────────── */
.preview-info{margin-bottom:16px;}
.demo-creds{
  display:flex; gap:20px; flex-wrap:wrap; background:var(--rule-soft);
  border-radius:8px; padding:10px 14px; margin:10px 0; font-size:.85rem;
}
.open-new-tab{display:inline-block; font-size:.85rem; font-weight:600; color:var(--brand); text-decoration:none;}
.open-new-tab:hover{color:var(--brand-hover); text-decoration:underline;}
.preview-frame-wrap{position:relative; flex:1; min-height:0;
}
.preview-frame{width:100%; height:100%; border:0; display:block; background:var(--rule-soft);}

/* ─── TIMELINE ───────────────────────────────────────── */
.current-week-banner{
  background:var(--rule-soft); border-left:3px solid var(--brand); border-radius:6px;
  padding:10px 14px; font-weight:600; font-size:.92rem;
}
.mermaid{background:transparent !important;}
.timeline-table{width:100%; border-collapse:collapse; font-size:.88rem;}
.timeline-table th, .timeline-table td{
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--rule-soft);
}
.timeline-table th{color:var(--text-muted); font-weight:700; font-size:.78rem; text-transform:uppercase;}
.timeline-table tr.current-row{background:var(--rule-soft); font-weight:600;}

/* ─── NOTES ──────────────────────────────────────────── */
.note-form{display:flex; flex-direction:column; gap:10px; max-width:520px;}
.note-form input, .note-form textarea{
  padding:9px 12px; border-radius:var(--radius); border:1px solid var(--rule);
  background:var(--input-bg); color:var(--ink); font-family:var(--font-head); font-size:.9rem; resize:vertical;
}
.note-submit{width:auto; padding:9px 20px;}
.note-entry{padding:14px 0; border-top:1px solid var(--rule-soft);}
.note-entry:first-of-type{border-top:none; padding-top:0;}
.note-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
.note-title{font-weight:700; font-size:.95rem;}
.note-meta{font-size:.78rem; color:var(--text-muted);}
.note-body{font-size:.9rem; margin:6px 0;}
.note-delete{font-size:.78rem; color:var(--accent); text-decoration:none;}
.note-delete:hover{text-decoration:underline;}

/* ─── TEAM & AUDIT LOG ───────────────────────────────── */
.inline-form{display:inline;}
.inline-form select{
  padding:4px 8px; border-radius:6px; border:1px solid var(--rule);
  background:var(--input-bg); color:var(--ink); font-size:.82rem;
}
.audit-entry{
  display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; font-size:.82rem;
  padding:6px 0; border-top:1px solid var(--rule-soft);
}
.audit-entry:first-of-type{border-top:none;}
.audit-time{color:var(--text-muted); min-width:110px;}
.audit-user{font-weight:700;}
.audit-action{color:var(--brand);}
.audit-details{color:var(--text-muted); font-family:monospace; font-size:.76rem;}

/* ─── AUTH PAGE ──────────────────────────────────────── */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}
.auth-card{
  background:var(--card-bg); border:1px solid var(--rule-soft); border-radius:16px;
  padding:2.5rem; width:100%; max-width:380px; text-align:center;
}
.auth-logo{height:40px; margin-bottom:12px;}
.auth-title{font-family:var(--font-display); font-size:1.4rem; margin-bottom:4px;}
.auth-sub{color:var(--text-muted); font-size:.88rem; margin-bottom:20px;}
.auth-error{
  background:rgba(168,57,43,0.1); color:var(--accent); border:1px solid var(--accent);
  border-radius:var(--radius); padding:8px 12px; font-size:.85rem; margin-bottom:16px;
}
.auth-success{
  background:rgba(30,122,57,0.1); color:var(--brand); border:1px solid var(--brand);
  border-radius:var(--radius); padding:8px 12px; font-size:.85rem; margin-bottom:16px;
}
.auth-notice{
  background:rgba(30,122,57,0.07); color:var(--text-muted); border:1px solid var(--rule-soft);
  border-radius:var(--radius); padding:8px 12px; font-size:.85rem; margin-bottom:16px;
}
.auth-form label{display:block; text-align:left; font-size:.82rem; font-weight:600; margin-bottom:12px;}
.auth-form input{
  display:block; width:100%; margin-top:6px; padding:10px 12px; border-radius:var(--radius);
  border:1px solid var(--rule); background:var(--input-bg); color:var(--ink); font-size:.92rem;
}
.auth-success{
  background:rgba(30,122,57,0.1); color:var(--brand); border:1px solid var(--brand);
  border-radius:var(--radius); padding:8px 12px; font-size:.85rem; margin-bottom:16px;
}
.auth-footer-link{
  text-align:center; font-size:.8rem; color:var(--text-muted); margin-top:14px;
}
.auth-footer-link a{ color:var(--brand); text-decoration:none; }
.auth-footer-link a:hover{ text-decoration:underline; }
.auth-pw-strength{ min-height:18px; }
.btn-brand{
  width:100%; padding:11px; border:none; border-radius:var(--radius); background:var(--brand);
  color:#fff; font-weight:700; font-size:.92rem; cursor:pointer; margin-top:6px; transition:background var(--trans);
}
.btn-brand:hover{background:var(--brand-hover);}

/* ─── MOBILE OVERLAY ─────────────────────────────────── */
.mobile-overlay{display:none; position:fixed; inset:0; background:var(--overlay-bg); z-index:99;}
.mobile-overlay.active{display:block;}


/* ══════════════════════════════════════════════════════
   DASHBOARD — investor-ready redesign
   ══════════════════════════════════════════════════════ */

/* Welcome strip */
.db-welcome{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px; margin-bottom:4px;
}
.db-welcome-name{
  font-family:var(--font-display); font-size:1.6rem; font-weight:600; line-height:1.2;
}
.db-welcome-sub{
  color:var(--text-muted); font-size:.88rem; margin-top:4px;
  font-family:monospace; letter-spacing:.01em;
}
.db-status-chip{
  font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px;
}
.chip-active{
  background:rgba(30,122,57,.12); color:var(--brand);
  border:1px solid rgba(30,122,57,.25);
}
.chip-idle{
  background:var(--rule-soft); color:var(--text-muted);
  border:1px solid var(--rule);
}

/* KPI grid */
.kpi-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px;
}
.kpi-tile{
  background:var(--card-bg); border:1px solid var(--rule-soft); border-radius:12px;
  padding:18px 20px; display:flex; flex-direction:column; gap:6px;
  border-top:3px solid var(--brand);
}
.kpi-tile--next{border-top-color:var(--text-muted);}
.kpi-label{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted);
}
/* Chart + value side-by-side */
.kpi-chart-row{display:flex; align-items:center; gap:14px; margin-top:4px;}
.kpi-chart-wrap{position:relative; flex-shrink:0; width:72px; height:72px;}
.kpi-chart-wrap canvas{display:block;}
.kpi-chart-pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:var(--brand); pointer-events:none;
}
.kpi-right{display:flex; flex-direction:column; gap:3px; min-width:0;}
.kpi-value{
  font-family:var(--font-display); font-size:1.85rem; font-weight:600; line-height:1.1;
  color:var(--ink);
}
.kpi-denom{font-size:1rem; color:var(--text-muted); margin-left:1px;}
.kpi-next-val{
  font-size:.94rem; font-weight:600; margin-top:6px; line-height:1.45; flex:1;
}
.kpi-bar-wrap{
  width:100%; height:4px; background:var(--rule-soft); border-radius:100px; margin:4px 0 2px;
}
.kpi-bar{
  height:100%; background:var(--brand); border-radius:100px; max-width:100%;
  transition:width .4s ease;
}
.kpi-sub{font-size:.74rem; color:var(--text-muted); line-height:1.4;}
.flash-success{
  background:rgba(30,122,57,.1); border:1px solid rgba(30,122,57,.25); color:var(--brand);
  border-radius:var(--radius); padding:10px 16px; font-size:.88rem; font-weight:600;
  margin-bottom:12px;
}

/* 12-week strip */
.week-strip{
  display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;
}
.week-cell{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  width:58px; padding:8px 4px; border-radius:8px; border:1px solid var(--rule-soft);
  background:var(--bg);
}
.week-done{background:rgba(30,122,57,.1); border-color:rgba(30,122,57,.25);}
.week-current{background:var(--brand); border-color:var(--brand);}
.week-current .week-num, .week-current .week-date{color:#fff;}
.week-future{opacity:.45;}
.week-num{font-weight:700; font-size:.82rem;}
.week-date{font-size:.68rem; color:var(--text-muted);}
.week-current .week-date{color:rgba(255,255,255,.8);}
.week-legend{
  display:flex; gap:18px; margin-top:12px; flex-wrap:wrap;
}
.legend-item{
  font-size:.75rem; font-weight:600; color:var(--text-muted);
  display:flex; align-items:center; gap:6px;
}
.legend-item::before{
  content:''; display:block; width:12px; height:12px; border-radius:3px;
}
.legend-done::before{background:rgba(30,122,57,.25);}
.legend-current::before{background:var(--brand);}
.legend-future::before{background:var(--rule-soft); border:1px solid var(--rule);}

/* Two-column layout */
.db-two-col{
  display:grid; grid-template-columns:1fr 380px; gap:14px; margin-top:0; align-items:start;
}
.db-two-col > .card{margin-top:16px;}

/* Milestone tracker */
.milestone-list{display:flex; flex-direction:column; gap:0;}
.milestone-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--rule-soft);
}
.milestone-item:last-child{border-bottom:none;}
.milestone-icon{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:.82rem; font-weight:700; flex-shrink:0; margin-top:1px;
}
.milestone-done .milestone-icon{
  background:rgba(30,122,57,.15); color:var(--brand);
}
.milestone-current .milestone-icon{
  background:var(--brand); color:#fff;
}
.milestone-upcoming .milestone-icon{
  background:var(--rule-soft); color:var(--text-muted);
}
.milestone-body{display:flex; flex-direction:column; gap:2px;}
.milestone-label{
  font-size:.88rem; font-weight:600; line-height:1.3;
}
.milestone-done .milestone-label{color:var(--text-muted);}
.milestone-current .milestone-label{color:var(--brand);}
.milestone-date{font-size:.75rem; color:var(--text-muted); font-family:monospace;}

/* Files section */
.files-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;
}
.btn-outline{
  padding:7px 16px; border:1px solid var(--rule); border-radius:var(--radius);
  background:none; color:var(--ink); font-size:.84rem; font-weight:600;
  cursor:pointer; transition:all var(--trans); font-family:var(--font-head);
}
.btn-outline:hover{border-color:var(--brand); color:var(--brand);}
.upload-panel{margin-bottom:16px; padding:16px; background:var(--rule-soft); border-radius:10px;}
.upload-panel.hidden{display:none;}
.upload-form{}
.upload-row{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.upload-row input[type="text"]{
  flex:2; min-width:160px; padding:8px 12px; border-radius:var(--radius);
  border:1px solid var(--rule); background:var(--input-bg); color:var(--ink);
  font-family:var(--font-head); font-size:.88rem;
}
.upload-row select{
  flex:0 0 140px; padding:8px 10px; border-radius:var(--radius);
  border:1px solid var(--rule); background:var(--input-bg); color:var(--ink);
  font-size:.88rem;
}
.upload-row input[type="file"]{
  flex:2; font-size:.84rem; color:var(--text-muted);
}
.btn-brand-sm{
  padding:8px 16px; border:none; border-radius:var(--radius); background:var(--brand);
  color:#fff; font-weight:700; font-size:.84rem; cursor:pointer; white-space:nowrap;
  transition:background var(--trans);
}
.btn-brand-sm:hover{background:var(--brand-hover);}
.upload-hint{font-size:.75rem; color:var(--text-muted); margin-top:8px;}

.files-table{
  width:100%; border-collapse:collapse; font-size:.87rem; margin-top:4px;
}
.files-table th, .files-table td{
  text-align:left; padding:9px 10px; border-bottom:1px solid var(--rule-soft);
}
.files-table th{
  color:var(--text-muted); font-weight:700; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.05em;
}
.files-table tbody tr:hover{background:var(--rule-soft);}
.file-name-cell{font-weight:600;}
.file-icon{margin-right:6px;}
.file-cat{
  display:inline-block; padding:2px 8px; border-radius:100px; font-size:.72rem;
  font-weight:700; background:var(--rule-soft); color:var(--text-muted);
}
.file-date, .file-size{font-family:monospace; font-size:.8rem; color:var(--text-muted);}
.file-dl-btn{
  display:inline-block; padding:4px 12px; border-radius:6px;
  background:transparent; border:1px solid var(--brand); color:var(--brand);
  font-size:.78rem; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:all var(--trans);
}
.file-dl-btn:hover{background:var(--brand); color:#fff;}


/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .db-two-col{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%); width:var(--sidebar-w) !important;}
  .sidebar.mobile-open{transform:translateX(0);}
  .layout{margin-left:0 !important; overflow-x:hidden;}  /* prevent full-page horizontal scroll; scroll containers still work */
  .mob-menu-btn{display:flex;}
  .content{padding:14px;}
  .topbar{padding:0 16px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .db-welcome-name{font-size:1.3rem;}
}
@media (max-width:600px){
  .kpi-grid{grid-template-columns:1fr;}
  .week-cell{width:46px;}
  .upload-row{flex-direction:column; align-items:stretch;}
  .upload-row input[type="text"],
  .upload-row select,
  .upload-row input[type="file"]{flex:unset; width:100%;}
}
@media (max-width:480px){
  .topbar-title{font-size:1.05rem;}
  .auth-card{padding:1.75rem;}
}

/* ════════════════════════════════════════════════════════════════════════════
   ACTIVITY PAGE (activity.php)
   ════════════════════════════════════════════════════════════════════════════ */

.act-page-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; margin-bottom:1.5rem;
}
.act-heading{ font-size:1.45rem; font-weight:700; color:var(--ink); margin:0 0 .25rem; }
.act-subheading{ font-size:.875rem; color:var(--text-muted); margin:0; }

/* Filter bar: tabs + author dropdown */
.act-filter-bar{
  display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  justify-content:space-between; margin-bottom:1rem;
}
.act-filter-tabs{
  display:flex; flex-wrap:wrap; gap:.375rem;
}
/* Author dropdown */
.act-author-filter{
  display:flex; align-items:center; gap:.5rem; flex-shrink:0;
}
.act-author-label{
  font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-muted); white-space:nowrap;
}
.act-author-select{
  font-family:inherit; font-size:.8125rem;
  padding:.3rem .65rem; padding-right:1.75rem;
  border:1px solid var(--rule); border-radius:6px;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235C564E'/%3E%3C/svg%3E") no-repeat right .55rem center;
  background-size:10px 6px;
  color:var(--ink); cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s, box-shadow .15s;
}
.act-author-select:hover{ border-color:var(--brand); }
.act-author-select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(30,122,57,.15); }
[data-theme="dark"] .act-author-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A79F92'/%3E%3C/svg%3E");
}
.act-filter-tab{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .8rem; border-radius:6px;
  font-size:.8rem; font-weight:500; text-decoration:none;
  color:var(--text-muted); background:var(--bg-alt);
  border:1px solid var(--rule-soft);
  transition:background .15s, color .15s, border-color .15s;
}
.act-filter-tab:hover{ background:var(--rule-soft); color:var(--ink); }
.act-filter-tab.active{
  background:var(--brand); color:#fff; border-color:var(--brand);
}
.act-tab-icon{ font-size:.9em; }
.act-tab-count{
  padding:.05rem .35rem; border-radius:10px;
  font-size:.72rem; font-weight:600;
  background:rgba(255,255,255,.18); color:inherit;
}
.act-filter-tab:not(.active) .act-tab-count{
  background:var(--rule); color:var(--text-muted);
}

/* Results meta row */
.act-results-meta{
  display:flex; align-items:center; gap:.75rem;
  font-size:.8rem; color:var(--text-muted); margin-bottom:.75rem;
}
.act-clear-filter{
  color:var(--brand); text-decoration:none; font-weight:500;
}
.act-clear-filter:hover{ text-decoration:underline; }

/* Activity list */
.act-list{
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--rule-soft); border-radius:10px; overflow:hidden;
}
.act-entry{
  display:grid; grid-template-columns:90px 1fr auto;
  gap:0 1rem; align-items:center;
  padding:.85rem 1rem;
  border-bottom:1px solid var(--rule-soft);
  background:var(--card-bg);
  transition:background .12s;
}
.act-entry:last-child{ border-bottom:none; }
.act-entry:hover{ background:var(--bg-alt); }

/* Badge */
.act-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .55rem; border-radius:5px;
  font-size:.72rem; font-weight:600; white-space:nowrap;
}
.badge--push   { background:#e8f5eb; color:#1e7a39; }
.badge--merge  { background:#ede9fb; color:#6d28d9; }
.badge--pr     { background:#e8f3fb; color:#1565c0; }
.badge--deploy { background:#fff4e5; color:#c2410c; }
[data-theme="dark"] .badge--push   { background:rgba(30,122,57,.2); color:#5bbe63; }
[data-theme="dark"] .badge--merge  { background:rgba(109,40,217,.2); color:#a78bfa; }
[data-theme="dark"] .badge--pr     { background:rgba(21,101,192,.2); color:#60a5fa; }
[data-theme="dark"] .badge--deploy { background:rgba(194,65,12,.2);  color:#fb923c; }

/* Entry body */
.act-entry-body{ min-width:0; }
.act-entry-top{
  display:flex; align-items:baseline; gap:.5rem;
  margin-bottom:.25rem; min-width:0;
}
.act-sha{
  font-family:monospace; font-size:.78rem; font-weight:700;
  color:var(--brand); text-decoration:none; white-space:nowrap;
}
.act-sha:hover{ text-decoration:underline; }
.act-message{
  font-size:.87rem; color:var(--ink); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.act-entry-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
  font-size:.75rem; color:var(--text-muted);
}
.act-branch{
  font-size:.73rem; background:var(--bg-alt); padding:.1rem .35rem;
  border-radius:4px; border:1px solid var(--rule-soft);
  color:var(--ink);
}
.act-sep{ color:var(--rule); }
.act-author{ font-weight:500; }
.act-repo{ font-style:italic; }

/* Right: timestamp */
.act-entry-right{ text-align:right; }
.act-time{ font-size:.75rem; color:var(--text-muted); white-space:nowrap; }

/* Pagination */
.act-pagination{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; margin-top:1.5rem; flex-wrap:wrap;
}
.act-page-btn{
  padding:.4rem .9rem; border-radius:7px;
  font-size:.82rem; font-weight:500; text-decoration:none;
  background:var(--card-bg); color:var(--ink);
  border:1px solid var(--rule);
  transition:background .12s, border-color .12s;
}
.act-page-btn:hover:not(.act-page-btn--disabled){
  background:var(--bg-alt); border-color:var(--brand);
}
.act-page-btn--disabled{ opacity:.38; pointer-events:none; }
.act-page-nums{ display:flex; align-items:center; gap:.3rem; }
.act-page-num{
  min-width:2rem; padding:.4rem .5rem; border-radius:6px;
  text-align:center; font-size:.82rem; font-weight:500;
  text-decoration:none; color:var(--ink);
  border:1px solid var(--rule-soft);
  background:var(--card-bg);
  transition:background .12s;
}
.act-page-num:hover{ background:var(--bg-alt); }
.act-page-num.active{
  background:var(--brand); color:#fff; border-color:var(--brand);
}
.act-page-ellipsis{ color:var(--text-muted); font-size:.82rem; padding:0 .2rem; }

/* Mobile */
@media (max-width:700px){
  .act-entry{ grid-template-columns:1fr auto; }
  .act-entry-left{ display:none; } /* badge hidden on small mobile, type visible in meta */
  .act-entry-body .act-entry-top{ flex-wrap:wrap; }
  .act-message{ white-space:normal; }
}
@media (max-width:480px){
  .act-filter-bar{ gap:.5rem; flex-direction:column; align-items:flex-start; }
  .act-filter-tabs{ gap:.25rem; }
  .act-filter-tab{ padding:.3rem .6rem; font-size:.75rem; }
  .act-author-filter{ width:100%; }
  .act-author-select{ width:100%; }
}

/* ── Mobile fixed topbar — smart hide on scroll-down, show on scroll-up ── */
/* Sidebar=z100, overlay=z99, topbar=z97 — overlay naturally dims topbar   */
/* when sidebar opens, no extra JS needed.                                  */
@media (max-width:900px){
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:97;
    transform:translateY(0);
    transition:transform 0.22s ease;
  }
  .topbar--hidden{ transform:translateY(-100%); }
  .content{ padding-top:74px; } /* 60px topbar height + 14px breathing room */
}

/* ── Back-to-top button (mobile only) ────────────────────────────────────── */
.back-to-top{
  display:none; /* desktop: hidden */
  position:fixed; bottom:24px; right:20px;
  width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:#fff;
  border:none; font-size:1.3rem; line-height:1;
  cursor:pointer; z-index:97;
  align-items:center; justify-content:center;
  box-shadow:0 3px 12px rgba(30,122,57,0.4);
  opacity:0; transform:translateY(10px);
  transition:opacity 0.22s ease, transform 0.22s ease;
  pointer-events:none;
}
.back-to-top.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
@media (max-width:900px){ .back-to-top{ display:flex; } }

/* ==========================================================================
   FINANCE PAGE — hub.css extension v3
   ========================================================================== */

/* KPI strip */
.fin-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.fin-kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.fin-kpi-card.fin-kpi-danger { border-color: #A8392B; }
.fin-kpi-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.fin-kpi-body { flex: 1; min-width: 0; }
.fin-kpi-label { font-size: 0.73rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.fin-kpi-value { font-size: 1.05rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-kpi-value.text-danger { color: #A8392B; }
.fin-kpi-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.fin-pbar-wrap { background: var(--rule-soft); border-radius: 99px; height: 5px; margin-top: 6px; overflow: hidden; }
.fin-pbar { height: 5px; border-radius: 99px; transition: width .6s; }
.fin-pbar-label { font-size: 0.72rem; color: var(--text-muted); display: block; margin-top: 3px; }

/* Charts layout */
.fin-charts-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.fin-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 20px;
}
.fin-chart-card--wide {}
.fin-chart-card--full { margin-bottom: 16px; }
.fin-chart-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 6px;
}
.fin-chart-title { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.fin-chart-subtitle { font-size: 0.75rem; color: var(--text-muted); }
.fin-chart-body { position: relative; }
.fin-chart-pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.fin-chart-pie-wrap canvas { max-width: 180px; width: 100%; }

/* Pie legend — 2-column grid so labels never truncate */
.fin-pie-legend {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.fin-legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; min-width: 0; }
.fin-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fin-legend-label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.fin-legend-pct { font-weight: 700; color: var(--ink); flex-shrink: 0; }

/* Custom HTML legend for line chart (true circles, no Chart.js ovals) */
.fin-line-legend { display: flex; justify-content: center; gap: 20px; padding: 10px 0 4px; }
.fin-ll-item { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.fin-ll-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fin-ll-ring { width: 10px; height: 10px; border-radius: 50%; border: 2px dashed #A8392B; flex-shrink: 0; }

/* Transactions table */
.fin-table-card {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
.fin-tx-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.fin-tx-table th {
  text-align: left; padding: 8px 10px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); border-bottom: 1px solid var(--rule-soft);
}
.fin-tx-table td { padding: 10px; border-bottom: 1px solid var(--rule-soft); color: var(--ink); vertical-align: middle; }
.fin-tx-table tr:last-child td { border-bottom: none; }
.fin-tx-date { color: var(--text-muted); white-space: nowrap; }
.fin-cat-chip {
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.fin-dl-btn {
  background: none;
  border: 1px solid var(--brand);
  border-radius: 6px;
  color: var(--brand);
  font-size: 0.75rem;
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.fin-dl-btn:hover { background: var(--brand); color: #fff; }
.fin-no-receipt { color: var(--text-muted); }
.fin-empty { color: var(--text-muted); padding: 24px 0; font-size: 0.88rem; }

/* Finance ACRU-style two-column main grid */
.fin-main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}
.fin-left-col  { display: flex; flex-direction: column; min-width: 0; }
.fin-right-col { display: flex; flex-direction: column; min-width: 0; }

/* Donut (budget overview) */
.fin-donut-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px auto;
  width: 160px; height: 160px;
}
.fin-donut-wrap canvas { position: absolute; top: 0; left: 0; }
.fin-donut-center {
  position: relative; z-index: 1;
  text-align: center; pointer-events: none;
}
.fin-donut-pct { font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1; }
.fin-donut-sub { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Transaction list (right column) */
.fin-tx-list { display: flex; flex-direction: column; gap: 1px; }
.fin-tx-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.fin-tx-row:last-child { border-bottom: none; }
.fin-tx-date-badge {
  flex-shrink: 0; min-width: 40px;
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-align: center; padding-top: 2px;
}
.fin-tx-body { flex: 1; min-width: 0; }
.fin-tx-desc { font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-tx-meta { display: flex; align-items: center; gap: 6px; }
.fin-tx-by   { font-size: 0.72rem; color: var(--text-muted); }
.fin-tx-amount { flex-shrink: 0; text-align: right; }
.fin-tx-primary { font-size: 0.82rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.fin-tx-kes     { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }

/* Category breakdown bars */
.fin-cat-breakdown { display: flex; flex-direction: column; gap: 12px; }
.fin-cat-row {}
.fin-cat-row-head {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.fin-cat-dot { width: 10px; height: 10px; border-radius: 50%; }
.fin-cat-name { font-size: 0.82rem; color: var(--ink); font-weight: 500; }
.fin-cat-pct  { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.fin-cat-amount { font-size: 0.82rem; font-weight: 700; color: var(--ink); text-align: right; }
.fin-cat-orig { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.fin-cat-bar-track { height: 5px; background: var(--rule-soft); border-radius: 99px; overflow: hidden; }
.fin-cat-bar { height: 5px; border-radius: 99px; transition: width .7s ease; }

/* ==========================================================================
   EXPENSES PAGE
   ========================================================================== */

.exp-flash {
  padding: 12px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  font-weight: 600;
}
.exp-flash--success { background: #DFEFE2; color: #155C2A; border: 1px solid #BFE3C7; }
.exp-flash--error   { background: #FBEEEC; color: #8F2F23; border: 1px solid #EFBCB1; }
[data-theme="dark"] .exp-flash--success { background: rgba(30,122,57,0.18); color: #94D2A0; border-color: rgba(30,122,57,0.35); }
[data-theme="dark"] .exp-flash--error   { background: rgba(168,57,43,0.18); color: #E08070; border-color: rgba(168,57,43,0.35); }

.exp-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 24px;
}
.exp-form-col { min-width: 0; }
.exp-list-col  { min-width: 0; }

/* ── Member summary grid (3 cards per row, team-card style) ─────────────── */
.exp-member-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.exp-mcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.exp-mcard__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.exp-mcard__head .team-info { flex: 1; min-width: 0; }
.exp-mcard__head .team-name { font-size: 0.85rem; }
.exp-mcard__stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.exp-mcard__stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.exp-mcard__stat--ok      { color: var(--brand); }
.exp-mcard__stat--pending { color: var(--text-muted); }
.exp-mcard__label {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.exp-mcard__footer {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding-top: 6px;
  border-top: 1px solid var(--rule-soft);
  margin-top: auto;
}
.exp-mcard__footer--muted { opacity: 0.6; }

/* ── Expense group (member grouping in list column) ────────────────────── */
.exp-group { margin-bottom: 24px; }
.exp-group:last-child { margin-bottom: 0; }
.exp-group__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.exp-group__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.exp-group__count {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--surface-alt, var(--rule-soft));
  padding: 2px 8px;
  border-radius: 20px;
}

/* Submission form */
.exp-form-card {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 24px;
  position: sticky;
  top: 20px;
}
.exp-form-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.exp-form-sub   { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.55; }

.exp-field { margin-bottom: 14px; }
.exp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exp-field-row--3 { grid-template-columns: 2fr 1fr 1.5fr; }
.exp-kes-equiv-wrap { display: flex; align-items: center; gap: 0; }
.exp-kes-prefix { padding: 0 10px; background: var(--rule-soft); border: 1px solid var(--rule); border-right: none; border-radius: var(--radius) 0 0 var(--radius); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); height: 40px; display: flex; align-items: center; white-space: nowrap; }
.exp-input--kes { border-radius: 0 var(--radius) var(--radius) 0 !important; flex: 1; }
.exp-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.exp-req   { color: #A8392B; }
.exp-hint  { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.exp-input {
  width: 100%; padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: 7px;
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  transition: border-color .2s;
  box-sizing: border-box;
}
.exp-input:focus { outline: none; border-color: #1E7A39; box-shadow: 0 0 0 3px rgba(30,122,57,0.12); }
.exp-textarea { min-height: 80px; resize: vertical; }
.exp-file-input { width: 100%; font-size: 0.83rem; color: var(--text-muted); }
.exp-radio-group { display: flex; gap: 16px; }
.exp-radio-opt { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink); cursor: pointer; }
/* Account currency toggle (USD expenses only) */
.exp-acct-toggle { display: flex; gap: 10px; margin-bottom: 8px; }
.exp-acct-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.83rem; font-weight: 500; color: var(--ink);
  cursor: pointer; background: var(--bg);
  transition: border-color .2s, background .2s;
}
.exp-acct-opt input[type="radio"] { accent-color: #1E7A39; margin: 0; }
.exp-acct-opt:has(input:checked) { border-color: #1E7A39; background: rgba(30,122,57,0.07); color: #1E7A39; }

/* Combined amount + currency field */
.exp-amount-row { display: flex; gap: 0; }
.exp-amount-input {
  flex: 1;
  min-width: 0;
  border-radius: 7px 0 0 7px !important;
  border-right: none !important;
}
/* Full-width variant used when the currency select is replaced by pills */
.exp-amount-input--full {
  border-radius: var(--radius) !important;
  border-right: 1px solid var(--rule) !important;
}
.exp-currency-select {
  flex: 0 0 auto;
  width: 200px;
  border-radius: 0 7px 7px 0 !important;
  border-left: 1px solid var(--rule-soft);
  background: var(--rule-soft);
  font-weight: 600;
  cursor: pointer;
}
.exp-amount-row .exp-input:focus { z-index: 1; position: relative; }
[data-theme="dark"] .exp-currency-select { background: var(--card-bg); border-left-color: var(--rule); }

/* ── Currency pills ─────────────────────────────────────────────────────────── */
.exp-currency-pills {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.exp-cur-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  font-family: 'Manrope', sans-serif;
  line-height: 1;
}
.exp-cur-code {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .03em;
}
.exp-cur-name {
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.exp-cur-pill:hover {
  border-color: var(--brand);
  background: var(--brand-light);
}
.exp-cur-pill--active {
  border-color: var(--brand);
  background: var(--brand-light);
}
.exp-cur-pill--active .exp-cur-code { color: var(--brand); }
[data-theme="dark"] .exp-cur-pill--active { background: rgba(91,190,99,.12); }
[data-theme="dark"] .exp-cur-pill--active .exp-cur-code { color: var(--brand); }

.exp-submit-btn {
  width: 100%;
  padding: 11px;
  background: #1E7A39;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: background .2s;
}
.exp-submit-btn:hover { background: #155C2A; }

/* Filter tabs */
.exp-filter-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.exp-filter-tab {
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.exp-filter-tab:hover { border-color: #1E7A39; color: #1E7A39; }
.exp-filter-tab.active { background: #1E7A39; color: #fff; border-color: #1E7A39; }
.exp-badge {
  background: rgba(255,255,255,0.25);
  border-radius: 99px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
}
.exp-filter-tab:not(.active) .exp-badge { background: var(--rule-soft); color: var(--text-muted); }
.exp-badge--pending  { }
.exp-badge--approved { }
.exp-badge--rejected { }

/* Expense cards */
.exp-card {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color .2s;
}
.exp-card--pending  { border-left: 3px solid #FFA700; }
.exp-card--approved { border-left: 3px solid #1E7A39; }
.exp-card--rejected { border-left: 3px solid #A8392B; opacity: .85; }

.exp-card-top { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; }
.exp-card-left { flex: 1; min-width: 0; }
.exp-card-right { text-align: right; flex-shrink: 0; }

.exp-type-badge {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  background: var(--bg); border: 1px solid var(--rule-soft);
  border-radius: 99px; padding: 2px 9px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.exp-card-desc { font-size: 0.92rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.exp-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-muted); }
.exp-card-notes { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0 0; line-height: 1.5; }
.exp-rejection-reason { font-size: 0.8rem; color: #A8392B; margin: 6px 0 0; }
[data-theme="dark"] .exp-rejection-reason { color: #E08070; }

.exp-amount { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.exp-status-chip {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  border-radius: 99px; padding: 3px 10px;
  text-transform: uppercase; letter-spacing: .04em;
}
.exp-status--pending  { background: #FFF3CD; color: #856404; }
.exp-status--approved { background: #DFEFE2; color: #155C2A; }
.exp-status--rejected { background: #FBEEEC; color: #8F2F23; }
[data-theme="dark"] .exp-status--pending  { background: rgba(255,167,0,.18); color: #FFA700; }
[data-theme="dark"] .exp-status--approved { background: rgba(30,122,57,.18); color: #5BBE63; }
[data-theme="dark"] .exp-status--rejected { background: rgba(168,57,43,.18); color: #E08070; }

.exp-dl-btn {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.75rem; font-weight: 600;
  color: #1E7A39; text-decoration: none;
  border: 1px solid #1E7A39; border-radius: 6px;
  padding: 3px 10px;
}
.exp-dl-btn:hover { background: #1E7A39; color: #fff; }

/* Approve / reject actions */
.exp-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.exp-action-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.exp-reason-input {
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  width: 260px;
}
.exp-reason-input:focus { outline: none; border-color: #A8392B; }
.exp-btn-approve {
  padding: 7px 16px;
  background: #1E7A39; color: #fff;
  border: none; border-radius: 6px;
  font-weight: 700; font-size: 0.82rem;
  cursor: pointer; font-family: 'Manrope', sans-serif;
}
.exp-btn-approve:hover { background: #155C2A; }
.exp-btn-reject {
  padding: 7px 16px;
  background: none; color: #A8392B;
  border: 1px solid #A8392B; border-radius: 6px;
  font-weight: 700; font-size: 0.82rem;
  cursor: pointer; font-family: 'Manrope', sans-serif;
}
.exp-btn-reject:hover { background: #A8392B; color: #fff; }

.exp-actioned-note {
  font-size: 0.75rem; color: var(--text-muted);
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
}
.exp-empty { color: var(--text-muted); padding: 32px 0; font-size: 0.88rem; text-align: center; }

/* Sidebar logo */
.sidebar-logo { max-width: 140px; height: 36px; object-fit: contain; display: block; }

/* Currency badges */
.cur-badge {
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 700;
  border-radius: 4px; padding: 1px 6px;
  border: 1px solid;
  margin-left: 5px; vertical-align: middle;
}
.cur-badge-usd { background: #E3F5FB; color: #0077A3; border-color: #B3DDED; }
.cur-badge-zar { background: #FFF8E1; color: #8A6500; border-color: #FFD54F; }
.cur-badge-kes { background: #DFEFE2; color: #155C2A; border-color: #BFE3C7; }
.exp-equiv-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; display: block; }
.exp-orig-amount { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* Currency selector field */
.exp-currency-row { display: grid; grid-template-columns: 1fr 100px; gap: 8px; }
.exp-equiv-field { margin-top: 10px; }

/* ══════════════════════════════════════════════════════
   DASHBOARD — Hero row, metrics strip, three-col, modules
   ══════════════════════════════════════════════════════ */

/* ── Multi-currency display ──────────────────────────────────────────────── */
.mc-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 2px;
}
.mc-primary { font-weight: 700; }
.mc-subs { display: flex; gap: 8px; flex-wrap: wrap; }
.mc-kes,
.mc-zar { font-size: 0.67em; font-weight: 500; opacity: 0.62; letter-spacing: .01em; }
/* On the dark budget card, subscripts are white-tinted */
.budget-card .mc-kes,
.budget-card .mc-zar { color: #fff; opacity: 0.55; }
/* Tighten subs inside stat rows so they don't force extra height */
.budget-stat-val .mc-subs,
.metric-tile-sub .mc-subs,
.exp-sum-tile-val .mc-subs,
.exp-recent-amt .mc-subs,
.fin-kpi-value .mc-subs { font-size: 0.78rem; }
/* Keep the budget card total's USD figure at the display size */
.budget-card-total .mc-primary { font-size: inherit; font-family: inherit; }
.budget-card-total .mc-kes,
.budget-card-total .mc-zar { font-size: 0.38em; }

/* Hero row: budget card + monthly card + sprint card (3-up for financial users; sprint-only for Ian/Samuel) */
.db-hero-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
/* When only the sprint card is shown (no financial view), span the full row */
.sprint-hero-card--full {
  grid-column: 1 / -1;
}

/* Budget card */
.budget-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, #1E7A39 0%, #12572A 55%, #0A3518 100%);
  color: #fff;
  min-height: 180px;
  height: 100%;        /* fill grid row so cards match the taller sibling */
  box-sizing: border-box;
}
.budget-card-inner {
  position: relative;
  z-index: 1;
  padding: 28px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.budget-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.budget-card-label { font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: 0.75; display: block; margin-bottom: 4px; }
.budget-card-total { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.budget-card-badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.budget-card-bar-wrap {
  height: 5px;
  background: rgba(255,255,255,0.18);
  border-radius: 99px;
  overflow: hidden;
}
.budget-card-bar {
  height: 100%;
  background: rgba(255,255,255,0.85);
  border-radius: 99px;
  transition: width .8s ease;
}
.budget-card-stats {
  display: flex;
  gap: 28px;
}
.budget-stat { display: flex; flex-direction: column; gap: 2px; }
.budget-stat-label { font-size: 0.68rem; opacity: 0.65; text-transform: uppercase; letter-spacing: .05em; }
.budget-stat-val { font-size: 0.9rem; font-weight: 700; }
.budget-stat-rem { color: #A0F0A8; }
.budget-card-note { font-size: 0.68rem; opacity: 0.5; margin-top: auto; }
/* Decorative circles */
.budget-card-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  z-index: 0;
}
.budget-card-circle--a { width: 240px; height: 240px; top: -80px; right: -60px; }
.budget-card-circle--b { width: 160px; height: 160px; bottom: -60px; right: 60px; }

/* Monthly burn-rate card — teal gradient, same shell as budget-card */
.monthly-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, #0D5C6B 0%, #083E4A 55%, #04252E 100%);
  color: #fff;
  min-height: 180px;
  height: 100%;
  box-sizing: border-box;
}
.monthly-card .mc-kes,
.monthly-card .mc-zar { color: #fff; opacity: 0.55; }
.monthly-card .budget-card-total .mc-kes,
.monthly-card .budget-card-total .mc-zar { font-size: 0.38em; }
.monthly-card .budget-card-bar { background: rgba(255,255,255,0.9); }
.monthly-card .budget-card-bar-wrap { background: rgba(255,255,255,0.18); }
.monthly-card .budget-card-badge { background: rgba(255,255,255,0.15); color: #fff; }
.monthly-card .budget-stat-rem { color: #7FD8E8; }
/* no-ceiling state */
.monthly-no-ceiling {
  font-size: 0.68rem;
  opacity: 0.6;
  margin-top: auto;
  line-height: 1.4;
}

/* Sprint hero card */
.sprint-hero-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 0; /* override .card margin-top so grid align-items:stretch gives equal heights */
}
.sprint-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sprint-hero-val {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-top: 4px;
}
.sprint-hero-denom { font-size: 1.1rem; color: var(--text-muted); font-weight: 600; }
.sprint-hero-unit  { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.sprint-donut-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.sprint-donut-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink);
}
.sprint-hero-meta {
  display: flex;
  gap: 0;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  overflow: hidden;
}
.sprint-meta-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-right: 1px solid var(--rule-soft);
}
.sprint-meta-item:last-child { border-right: none; }
.sprint-meta-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.sprint-meta-val { font-size: 1rem; font-weight: 800; color: var(--ink); }
.sprint-milestone-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rule-soft);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Metrics strip */
.db-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.metric-tile {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.metric-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.metric-tile-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--text-muted); }
.metric-tile-icon { font-size: 1rem; }
.metric-tile-val {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.metric-tile-denom { font-size: 1rem; color: var(--text-muted); font-weight: 600; }
.metric-tile-bar-wrap {
  height: 4px;
  background: var(--rule-soft);
  border-radius: 99px;
  margin-bottom: 6px;
  overflow: hidden;
}
.metric-tile-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .8s ease;
}
.metric-tile-sub { font-size: 0.72rem; color: var(--text-muted); }

/* Status colours (shared across tiles) */
.metric-ok     { color: var(--brand); }
.metric-warn   { color: #D97706; }
.metric-danger { color: #A8392B; }
.metric-tile-bar.metric-ok     { background: var(--brand); }
.metric-tile-bar.metric-warn   { background: #D97706; }
.metric-tile-bar.metric-danger { background: #A8392B; }

/* Three-column section */
.db-three-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 0; /* gap between this and the next .card is handled by .card margin-top */
  align-items: start;
}

/* Module progress rows */
.module-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.module-row {}
.module-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.module-icon { font-size: 0.9rem; }
.module-name { font-size: 0.83rem; font-weight: 600; color: var(--ink); flex: 1; }
.module-count { font-size: 0.72rem; color: var(--text-muted); }
.module-pct { font-size: 0.72rem; font-weight: 700; color: var(--ink); min-width: 32px; text-align: right; }
.module-bar-wrap {
  height: 5px;
  background: var(--rule-soft);
  border-radius: 99px;
  overflow: hidden;
}
.module-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .8s ease;
  min-width: 2px;
}

/* Activity feed */
.activity-feed { display: flex; flex-direction: column; gap: 0; }
.activity-entry {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.activity-entry:last-child { border-bottom: none; }
.activity-head { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; flex-wrap: wrap; }
.activity-sha { font-family: monospace; font-size: 0.72rem; background: var(--rule-soft); border-radius: 4px; padding: 1px 6px; color: var(--text-muted); }
.activity-author { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.activity-time { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }
.activity-message { font-size: 0.82rem; color: var(--ink); margin-bottom: 2px; line-height: 1.4; }
.activity-meta { font-size: 0.7rem; color: var(--text-muted); }
.activity-meta code { background: var(--rule-soft); border-radius: 3px; padding: 0 4px; font-size: 0.7rem; }
.see-all-link { display: inline-block; margin-top: 12px; font-size: 0.78rem; color: var(--brand); font-weight: 600; text-decoration: none; }
.see-all-link:hover { text-decoration: underline; }

/* Expense summary panel */
.exp-summary-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.exp-sum-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.exp-sum-tile {
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid transparent;
}
.exp-sum-tile--approved { background: #EDFAEF; border-color: #C3EACA; }
.exp-sum-tile--pending  { background: #FFF8E1; border-color: #FFE48A; }
[data-theme="dark"] .exp-sum-tile--approved { background: rgba(91,190,99,0.1); border-color: rgba(91,190,99,0.2); }
[data-theme="dark"] .exp-sum-tile--pending  { background: rgba(217,119,6,0.1); border-color: rgba(217,119,6,0.2); }
.exp-sum-tile-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.exp-sum-tile-val { display: block; font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.exp-sum-tile-count { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
.exp-recent-list { display: flex; flex-direction: column; }
.exp-recent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
  gap: 8px;
}
.exp-recent-row:last-child { border-bottom: none; }
.exp-recent-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.exp-recent-desc { font-size: 0.8rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-recent-cat  { font-size: 0.68rem; color: var(--text-muted); }
.exp-recent-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.exp-recent-amt { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.exp-action-cta {
  display: block;
  margin-top: 14px;
  text-align: center;
  padding: 9px;
  background: rgba(30,122,57,0.08);
  border: 1px solid rgba(30,122,57,0.2);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  transition: background .2s;
}
.exp-action-cta:hover { background: rgba(30,122,57,0.15); }

/* Milestone track (horizontal scroll) */
.milestone-track {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; /* room for scrollbar */
}
.milestone-track::-webkit-scrollbar-track { background: transparent; }
.milestone-track::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.ms-card {
  flex: 0 0 180px; /* fixed width — no shrink, enables horizontal scroll */
  border-radius: 10px;
  border: 1px solid var(--rule-soft);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.ms-card--done    { background: #F0F9F1; border-color: #C3EACA; }
.ms-card--current { background: #FFF8E6; border-color: #FFD87A; }
.ms-card--upcoming{ background: var(--card-bg); }
[data-theme="dark"] .ms-card--done    { background: rgba(91,190,99,0.08); border-color: rgba(91,190,99,0.2); }
[data-theme="dark"] .ms-card--current { background: rgba(217,119,6,0.08); border-color: rgba(217,119,6,0.25); }
.ms-card-num {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-muted);
  opacity: 0.5;
}
.ms-card-icon { font-size: 1.1rem; }
.ms-card--done    .ms-card-icon { color: #1E7A39; }
.ms-card--current .ms-card-icon { color: #D97706; }
.ms-card--upcoming .ms-card-icon { color: var(--text-muted); }
.ms-card-body { display: flex; flex-direction: column; gap: 3px; }
.ms-card-label { font-size: 0.78rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.ms-card-date  { font-size: 0.68rem; color: var(--text-muted); }

/* Finance + expenses responsive */
@media (max-width: 1200px) {
  .db-three-col { grid-template-columns: 1fr 1fr; }
  .db-three-col .card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  .fin-main-grid { grid-template-columns: 1fr 300px; }
}
@media (max-width: 1100px) {
  /* Finance page */
  .db-metrics-strip { grid-template-columns: repeat(2, 1fr); }
  .fin-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .fin-charts-row { grid-template-columns: 1fr; }
  .fin-chart-pie-wrap { flex-direction: column; align-items: flex-start; }
  .fin-main-grid { grid-template-columns: 1fr; }
  .fin-right-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  /* Hero row: 3 cards → 2 on top, sprint full-width below */
  .db-hero-row { grid-template-columns: 1fr 1fr; }
  .db-hero-row > *:last-child { grid-column: 1 / -1; }
  /* Sprint-only layout stays full-width at this breakpoint too */
  .sprint-hero-card--full { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .db-hero-row { grid-template-columns: 1fr; }
  .db-hero-row > *:last-child { grid-column: auto; }
  .db-three-col { grid-template-columns: 1fr; }
  .db-three-col .card:last-child { grid-column: auto; }
  /* .milestone-track is horizontal scroll — no grid override needed */
  .exp-layout { grid-template-columns: 1fr; }
  .exp-form-card { position: static; }

  .fin-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .fin-right-col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .db-metrics-strip { grid-template-columns: 1fr 1fr; }
  /* .milestone-track scrolls horizontally on all widths */
  .fin-kpi-strip { grid-template-columns: 1fr; }
  .exp-field-row { grid-template-columns: 1fr; }
  .exp-field-row--3 { grid-template-columns: 1fr 1fr; }
  .exp-field-row--3 .exp-field:last-child { grid-column: 1 / -1; }
  .exp-action-form { flex-direction: column; align-items: stretch; }
  .exp-reason-input { width: 100%; }
  .budget-card-total { font-size: 1.5rem; }
  .budget-card-stats { gap: 16px; flex-wrap: wrap; }
  .budget-card-inner { padding: 20px; }   /* reduce 28px/32px padding on small screens */
  .tsk-field-row { grid-template-columns: 1fr; }
  .tsk-filters-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .tsk-filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .tsk-filter-selects { flex-direction: column; gap: 6px; }
  .tsk-select-sm { width: 100%; }
  .tsk-card-right { flex-wrap: wrap; gap: 4px; }
  .tsk-status-actions { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  /* Tasks: 2-column card grid on mobile */
  .tsk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tsk-card-top { flex-direction: column; gap: 6px; }
  .tsk-card-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 4px; }
  .tsk-card-desc { display: none; } /* hide desc in 2-col to save space */
}
@media (max-width: 480px) {
  /* Revert to 1-col on very small phones, restore desc */
  .tsk-list { grid-template-columns: 1fr; }
  .tsk-card-desc { display: block; }
  .tsk-card-top { flex-direction: column; gap: 8px; }
  .tsk-card-right { width: 100%; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════
   TASKS MODULE
   ══════════════════════════════════════════════════════ */

/* KPI strip — auto-fit grid (matches .tl-kpi-strip behaviour on mobile) */
.tsk-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.tsk-kpi {
  background: var(--card-bg);
  border-radius: var(--radius);
  border-left: 4px solid var(--rule);   /* left-accent only — matches .tl-kpi-card; no outer border */
  padding: 18px 20px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: border-left-color .18s, box-shadow .18s;
}
.tsk-kpi:hover { border-left-color: var(--brand); box-shadow: var(--card-shadow-hover); }
.tsk-kpi--active { border-left-color: var(--brand); background: rgba(30,122,57,.06); }
.tsk-kpi--danger { border-left-color: rgba(168,57,43,.55); }
.tsk-kpi-val { font-size: 2.2rem; font-weight: 700; color: var(--ink); line-height: 1; }
.tsk-kpi-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: .05em; }

/* Dual-space KPI container — wraps two labelled rows */
.tsk-kpi-dual { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.tsk-kpi-dual .tsk-kpi-strip { margin-bottom: 0; }

/* Space row: label + strip */
.tsk-kpi-space-row { border-radius: var(--radius); overflow: hidden; }
.tsk-kpi-space-row--active .tsk-kpi-space-label { background: rgba(30,122,57,.08); border-color: rgba(30,122,57,.25); }

.tsk-kpi-space-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 6px 4px 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 10px;
}
.tsk-space-icon { font-size: 0.85rem; }
.tsk-space-clear {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0.6;
  padding: 1px 5px;
  border-radius: 3px;
  transition: opacity .15s;
}
.tsk-space-clear:hover { opacity: 1; }

/* Space tag on task cards */
.tsk-space-tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-subtle, rgba(0,0,0,.04));
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: .02em;
}

/* Create form card */
.tsk-form-wrap { margin-bottom: 16px; }
.tsk-form-card { background: var(--card-bg); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 24px 24px 20px; }
.tsk-form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.tsk-form-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.tsk-close-btn { background: none; border: none; font-size: 1rem; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.tsk-close-btn:hover { background: var(--rule-soft); }

/* Task form fields */
.tsk-field { margin-bottom: 14px; }
.tsk-field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.tsk-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.tsk-req { color: #A8392B; }
.tsk-hint { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
.tsk-input {
  width: 100%; padding: 9px 12px; background: var(--bg); border: 1px solid var(--rule-soft);
  border-radius: 7px; color: var(--ink); font-family: 'Manrope', sans-serif;
  font-size: 0.85rem; transition: border-color .2s; box-sizing: border-box;
}
.tsk-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30,122,57,.12); }
.tsk-textarea { min-height: 80px; resize: vertical; }
.tsk-notify-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.tsk-check-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink); cursor: pointer; }
.tsk-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; border-top: 1px solid var(--rule-soft); }

/* Granola items */
.tsk-granola-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tsk-granola-item {
  background: var(--bg); border: 1px solid var(--rule-soft); border-radius: 7px;
  padding: 8px 12px; text-align: left; font-size: 0.82rem; color: var(--ink);
  cursor: pointer; font-family: 'Manrope', sans-serif; transition: border-color .15s;
}
.tsk-granola-item:hover { border-color: var(--brand); color: var(--brand); }

/* Filters bar */
.tsk-filters-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tsk-filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tsk-filter-tab {
  padding: 6px 14px; border-radius: 99px; font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted); text-decoration: none; border: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 5px; transition: all .15s;
}
.tsk-filter-tab:hover { border-color: var(--brand); color: var(--brand); }
.tsk-filter-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.tsk-tab-count { background: rgba(255,255,255,.25); border-radius: 99px; padding: 0 6px; font-size: 0.7rem; }
.tsk-filter-tab.active .tsk-tab-count { background: rgba(255,255,255,.3); }
.tsk-filter-selects { display: flex; gap: 8px; }
.tsk-select-sm { padding: 6px 10px; background: var(--card-bg); border: 1px solid var(--rule-soft); border-radius: 7px; color: var(--ink); font-size: 0.82rem; font-family: 'Manrope', sans-serif; }

/* Task cards */
.tsk-list { display: flex; flex-direction: column; gap: 10px; }
.tsk-card {
  background: var(--card-bg); border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 16px 18px; transition: border-color .18s, box-shadow .18s;
}
.tsk-card:hover { border-color: var(--rule); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.tsk-card--done { opacity: 0.6; }
.tsk-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tsk-card-left { display: flex; gap: 12px; flex: 1; min-width: 0; }
.tsk-card-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.tsk-card-body { flex: 1; min-width: 0; }

.tsk-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand);
  color: #fff; font-size: 0.72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
[data-theme="dark"] .tsk-avatar { background: #1a5e28; }

.tsk-card-title { font-size: 0.9rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.tsk-done-title { text-decoration: line-through; color: var(--text-muted); }
.tsk-card-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5; }
.tsk-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-muted); }
.tsk-meta-sep { opacity: 0.4; }
.tsk-space-tag { font-size: 0.72rem; background: rgba(30,122,57,.1); color: var(--brand); padding: 1px 6px; border-radius: 4px; font-weight: 500; }
.tsk-psk-ref  { font-family: monospace; font-size: 0.72rem; color: var(--text-muted); background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 3px; text-decoration: none; }
.tsk-psk-ref:hover { text-decoration: underline; color: var(--brand); }
[data-theme="dark"] .tsk-psk-ref { background: rgba(255,255,255,.07); }

/* Priority badges */
.tsk-pri { padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; letter-spacing: .02em; }
.tsk-pri--urgent { background: rgba(168,57,43,.12); color: #A8392B; border: 1px solid rgba(168,57,43,.25); }
.tsk-pri--high   { background: rgba(217,119,6,.12); color: #B45309; border: 1px solid rgba(217,119,6,.25); }
.tsk-pri--medium { background: rgba(59,130,246,.1); color: #2563EB; border: 1px solid rgba(59,130,246,.2); }
.tsk-pri--low    { background: var(--rule-soft); color: var(--text-muted); border: 1px solid var(--rule); }
[data-theme="dark"] .tsk-pri--urgent { background: rgba(168,57,43,.2); color: #E08070; }
[data-theme="dark"] .tsk-pri--high   { background: rgba(217,119,6,.2); color: #FBB040; }
[data-theme="dark"] .tsk-pri--medium { background: rgba(59,130,246,.15); color: #93C5FD; }

/* Status badges */
.tsk-badge { padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; }
.tsk-badge--open     { background: var(--rule-soft); color: var(--text-muted); }
.tsk-badge--progress { background: rgba(217,119,6,.12); color: #B45309; }
.tsk-badge--review   { background: rgba(124,58,237,.12); color: #7C3AED; }
.tsk-badge--blocked  { background: rgba(168,57,43,.12); color: #A8392B; }
.tsk-badge--done     { background: rgba(30,122,57,.12); color: #1E7A39; }
[data-theme="dark"] .tsk-badge--progress { background: rgba(217,119,6,.2); color: #FBB040; }
[data-theme="dark"] .tsk-badge--review   { background: rgba(124,58,237,.2); color: #C4B5FD; }
[data-theme="dark"] .tsk-badge--blocked  { background: rgba(168,57,43,.2); color: #E08070; }
[data-theme="dark"] .tsk-badge--done     { background: rgba(30,122,57,.2); color: #5BBE63; }

/* Source indicators */
.tsk-source { font-size: 0.72rem; color: var(--text-muted); }
.tsk-source-link { font-size: 0.72rem; color: var(--brand); text-decoration: none; }
.tsk-source-link:hover { text-decoration: underline; }

/* Due date labels */
.tsk-due { font-size: 0.72rem; font-weight: 600; }
.tsk-due--overdue { color: #A8392B; }
.tsk-due--today   { color: #D97706; }
.tsk-due--soon    { color: #D97706; }

/* Inline status changer */
.tsk-status-actions { display: flex; gap: 6px; align-items: center; }
.tsk-status-select {
  padding: 4px 8px; border: 1px solid var(--rule-soft); border-radius: 6px;
  background: var(--bg); color: var(--ink); font-size: 0.75rem;
  font-family: 'Manrope', sans-serif; cursor: pointer;
}
.tsk-del-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 4px 6px; border-radius: 4px; }
.tsk-del-btn:hover { color: #A8392B; background: rgba(168,57,43,.08); }

/* Misc */
.tsk-cu-id    { font-size: 0.7rem; color: var(--text-muted); margin-top: 8px; font-family: monospace; }
.tsk-created  { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }
.tsk-empty    { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 0.88rem; }
.tsk-flash { padding: 12px 18px; border-radius: 8px; margin-bottom: 16px; font-size: 0.88rem; font-weight: 600; }
.tsk-flash--success { background: rgba(30,122,57,.12); color: var(--brand); border: 1px solid rgba(30,122,57,.25); }
.tsk-flash--error   { background: rgba(168,57,43,.1); color: #A8392B; border: 1px solid rgba(168,57,43,.2); }
.tsk-integrations-notice { margin-top: 24px; padding: 14px 18px; background: var(--card-bg); border: 1px solid var(--rule-soft); border-radius: var(--radius); font-size: 0.82rem; color: var(--text-muted); }
.tsk-integrations-link { margin-left: 8px; color: var(--brand); font-weight: 600; text-decoration: none; }
.tsk-integrations-link:hover { text-decoration: underline; }

/* Dashboard My Tasks widget */
.my-tasks-widget { display: flex; flex-direction: column; gap: 8px; }
.my-task-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--rule-soft); border-radius: 8px;
  text-decoration: none; transition: border-color .15s;
}
.my-task-row:hover { border-color: var(--brand); }
.my-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.my-task-dot--open     { background: var(--rule); }
.my-task-dot--progress { background: #D97706; }
.my-task-dot--review   { background: #7C3AED; }
.my-task-name { font-size: 0.82rem; color: var(--ink); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-task-due  { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }
.my-task-due--overdue { color: #A8392B; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   SHARED PAGE COMPONENTS (alerts, page header, primary button)
══════════════════════════════════════════════════════════════════════ */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.page-title  { font-family:'Newsreader',serif; font-size:1.6rem; font-weight:600; color:var(--ink); margin:0 0 3px; }
.page-subtitle { font-size:0.85rem; color:var(--text-muted); margin:0; }

.btn-primary {
  padding: 9px 18px;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand); border-radius: var(--radius);
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* Secondary — outlined brand colour */
.btn-secondary {
  padding: 9px 18px;
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-secondary:hover { border-color: var(--brand); background: var(--brand-light); }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
[data-theme="dark"] .btn-secondary { color: var(--brand); }

/* Ghost — no border, muted text */
.btn-ghost {
  padding: 9px 18px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { background: var(--rule-soft); color: var(--ink); }

.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: 0.85rem; }
.alert p { margin: 0 0 4px; }
.alert p:last-child { margin-bottom: 0; }
.alert-success { background: rgba(30,122,57,.1); border-left: 3px solid #1E7A39; color: #1E7A39; }
.alert-error   { background: rgba(168,57,43,.1);  border-left: 3px solid #A8392B; color: #A8392B; }
[data-theme="dark"] .alert-success { background: rgba(91,190,99,.1); color: #5BBE63; }
[data-theme="dark"] .alert-error   { background: rgba(224,128,112,.1); color: #E08070; border-color:#E08070; }

/* ═══════════════════════════════════════════════════════════════════
   PROFILE / SETTINGS PAGE
══════════════════════════════════════════════════════════════════════ */
.prf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.prf-card--full { grid-column: 1 / -1; }
.prf-section-title { font-family:'Newsreader',serif; font-size:1.05rem; font-weight:600; color:var(--ink); margin:0 0 16px; }
.prf-section-desc  { font-size:0.83rem; color:var(--text-muted); margin:-10px 0 18px; line-height:1.5; }

.prf-avatar-row { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.prf-avatar { width:52px; height:52px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700; flex-shrink:0; }
.prf-avatar--photo { object-fit:cover; display:block; border:2px solid var(--rule-soft); background:var(--bg-card); }
.prf-avatar-wrap {
  position:relative; cursor:pointer; flex-shrink:0;
  width:52px; height:52px; border-radius:50%;
}
.prf-avatar-wrap .prf-avatar,
.prf-avatar-wrap .prf-avatar--photo { width:100%; height:100%; }
.prf-avatar-overlay {
  position:absolute; inset:0; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; opacity:0;
  transition:opacity .18s;
}
.prf-avatar-wrap:hover .prf-avatar-overlay { opacity:1; }
.prf-avatar-name  { font-weight:600; font-size:0.95rem; color:var(--ink); }
.prf-avatar-role  { font-size:0.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin:2px 0; }
.prf-avatar-email { font-size:0.82rem; color:var(--text-muted); }

.prf-form  { display:flex; flex-direction:column; gap:0; }
.prf-field { margin-bottom:14px; }
.prf-label { display:block; font-size:0.78rem; font-weight:700; color:var(--text-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.prf-req   { color:#A8392B; }
.prf-hint  { font-weight:400; text-transform:none; letter-spacing:0; }
.prf-note  { display:block; font-size:0.75rem; color:var(--text-muted); margin-top:4px; }
.prf-input {
  width:100%; padding:9px 12px;
  background:var(--bg); border:1px solid var(--rule-soft);
  border-radius:7px; color:var(--ink);
  font-family:'DM Sans',sans-serif; font-size:0.85rem;
  transition:border-color .2s; box-sizing:border-box;
}
.prf-input:focus { outline:none; border-color:#1E7A39; box-shadow:0 0 0 3px rgba(30,122,57,.12); }
.prf-input:-webkit-autofill,
.prf-input:-webkit-autofill:hover,
.prf-input:-webkit-autofill:focus,
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  border-color: var(--rule-soft) !important;
}
.prf-input--readonly { background:var(--rule-soft); color:var(--text-muted); cursor:default; }
.prf-textarea { min-height:100px; resize:vertical; }
.prf-btn {
  align-self:flex-start; padding:9px 20px;
  background:var(--brand); color:#fff;
  border:none; border-radius:var(--radius);
  font-family:'DM Sans',sans-serif; font-size:0.85rem; font-weight:600;
  cursor:pointer; transition:background .2s;
}
.prf-btn:hover { background:var(--brand-hover); }
.prf-btn--ghost { background:transparent; color:var(--text-muted); border:1px solid var(--rule); }
.prf-btn--ghost:hover { background:var(--rule-soft); color:var(--ink); }

.prf-integ-grid  { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.prf-integ-block { padding:16px; background:var(--rule-soft); border-radius:var(--radius); border:1px solid var(--rule); }
.prf-integ-header{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.prf-integ-icon  { font-size:1.3rem; flex-shrink:0; }
.prf-integ-name  { font-weight:600; font-size:0.9rem; color:var(--ink); }
.prf-integ-desc  { font-size:0.78rem; color:var(--text-muted); margin-top:2px; line-height:1.4; }
.prf-integ-set   { display:inline-block; margin-top:4px; font-size:0.75rem; color:#1E7A39; font-weight:600; }
[data-theme="dark"] .prf-integ-set { color:#5BBE63; }

.prf-notif-heading { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:4px 0 12px; }
.prf-notif-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.prf-notif-opt {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px; background:var(--rule-soft);
  border:1px solid var(--rule); border-radius:var(--radius);
  cursor:pointer; transition:border-color .2s;
}
.prf-notif-opt:has(input:checked) { border-color:#1E7A39; background:rgba(30,122,57,.06); }
.prf-notif-opt input[type="checkbox"] { accent-color:#1E7A39; margin-top:2px; flex-shrink:0; }
.prf-notif-label { font-size:0.83rem; font-weight:600; color:var(--ink); }
.prf-notif-desc  { font-size:0.75rem; color:var(--text-muted); margin-top:2px; }

@media (max-width:900px) {
  .prf-grid { grid-template-columns:1fr; }
  .prf-integ-grid { grid-template-columns:1fr; }
  .prf-notif-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED MODAL OVERLAY
══════════════════════════════════════════════════════════════════════ */
.hub-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px;
  overflow-y: auto;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .18s, visibility .18s;
}
.hub-modal-overlay.open {
  visibility: visible; opacity: 1; pointer-events: auto;
  align-items: center;
}
@media (max-width: 600px) {
  .hub-modal-overlay { align-items: flex-start; padding: 16px 12px; }
  .hub-modal-overlay.open { align-items: flex-start; }
}
.hub-modal {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 28px 24px;
  width: 100%; max-width: 620px;
  /* no max-height — overlay scrolls instead, keeps full modal accessible on small screens */
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  /* prevent modal from shrinking on very tall content */
  flex-shrink: 0;
}
.hub-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.hub-modal-title {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  margin: 0;
}
/* standalone title (no header wrapper) keeps its bottom margin */
.hub-modal > .hub-modal-title {
  margin-bottom: 20px;
}
.hub-modal-close {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  color: var(--text-muted); padding: 2px 6px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.hub-modal-close:hover { color: var(--ink); background: var(--rule-soft); }
.hub-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px; flex-wrap: wrap;
}
@media (max-width: 520px) {
  .hub-modal { padding: 20px 16px 18px; border-radius: 10px; }
  .hub-modal-actions { flex-direction: column-reverse; }
  .hub-modal-actions > * { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   TEAM PAGE
══════════════════════════════════════════════════════════════════════ */
/* 4-per-row on desktop, responsive down to 1 */
.team-roster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1200px) { .team-roster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  860px) { .team-roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  520px) { .team-roster { grid-template-columns: 1fr; } }

.team-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 18px; transition: border-color .2s;
}
.team-card--inactive { opacity:.6; }
.team-avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; font-weight:700; flex-shrink:0;
}
.team-avatar--photo {
  object-fit:cover; display:block;
  border:2px solid var(--rule-soft);
  background:var(--bg-card);
}
.team-info  { flex:1; min-width:0; }
.team-name  { font-weight:600; font-size:0.9rem; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.team-email    { font-size:0.78rem; color:var(--text-muted); margin:2px 0 6px; }
.team-job-title{ font-size:0.75rem; color:var(--text-muted); font-style:italic; margin-top:4px; letter-spacing:0.01em; }
.team-you-badge     { font-size:0.68rem; font-weight:700; padding:1px 6px; border-radius:30px; background:rgba(30,122,57,.12); color:#1E7A39; }
.team-inactive-badge{ font-size:0.68rem; font-weight:700; padding:1px 6px; border-radius:30px; background:rgba(168,57,43,.1); color:#A8392B; }
.team-locked-badge  { font-size:0.68rem; font-weight:700; padding:1px 6px; border-radius:30px; background:rgba(168,57,43,.1); color:var(--accent); white-space:nowrap; }
.team-recovery-section { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.team-recovery-section .team-token-btn[disabled] { opacity:.55; cursor:progress; }
.team-recovery-status { font-size:0.78rem; color:var(--text-secondary); }
.team-recovery-status.is-ok    { color:var(--brand); }
.team-recovery-status.is-error { color:var(--accent); }
.team-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; }
.team-role-select {
  padding:6px 10px; background:var(--bg); border:1px solid var(--rule);
  border-radius:6px; color:var(--ink);
  font-family:'DM Sans',sans-serif; font-size:0.8rem; cursor:pointer;
}
.team-toggle-btn {
  padding:6px 12px; border:none; border-radius:6px;
  font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:600;
  cursor:pointer; transition:background .2s;
}
.team-toggle-btn--deactivate { background:rgba(168,57,43,.1); color:#A8392B; }
.team-toggle-btn--deactivate:hover { background:rgba(168,57,43,.2); }
.team-toggle-btn--activate   { background:rgba(30,122,57,.1); color:#1E7A39; }
.team-toggle-btn--activate:hover   { background:rgba(30,122,57,.2); }
.team-add-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }

/* ── Per-user token editing (co-admin+ on roster cards) ─────────── */
.team-token-section {
  flex: 0 0 100%; /* full width row below avatar/info/actions */
  border-top: 1px solid var(--rule-soft);
  margin-top: 10px;
  padding-top: 10px;
}
.team-token-btn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.team-token-btn:hover { border-color: var(--brand); color: var(--brand); }
.team-token-form {
  margin-top: 12px;
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 14px 16px;
}
.team-token-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.role-badge {
  display:inline-block; font-size:0.68rem; font-weight:700;
  padding:2px 8px; border-radius:20px; letter-spacing:.04em; text-transform:uppercase;
}
.role-badge--admin    { background:rgba(30,122,57,.12); color:#1E7A39; }
.role-badge--coadmin  { background:rgba(37,99,235,.1);  color:#2563EB; }
.role-badge--approver { background:rgba(217,119,6,.1);  color:#D97706; }
.role-badge--partner  { background:rgba(124,58,237,.1); color:#7C3AED; }
.role-badge--staff    { background:var(--rule-soft);    color:var(--text-muted); }

@media (max-width:700px) {
  .team-actions { width:100%; }
  .team-add-grid { grid-template-columns:1fr; }
  .team-token-fields { grid-template-columns:1fr; }
}

/* SMTP fields grid (team.php integrations tab) — 4-col desktop, responsive */
.smtp-fields-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width:900px) { .smtp-fields-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:600px) { .smtp-fields-grid { grid-template-columns: 1fr; } }

/* Integrations grid (profile.php + team.php) — also make prf-integ-grid responsive */
@media (max-width:600px) {
  .prf-integ-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TIMELINE PAGE
══════════════════════════════════════════════════════════════════════ */

/* ── KPI Strip ────────────────────────────────────────────────────── */
.tl-kpi-strip {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.tl-kpi-card {
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--card-shadow);
  border-left:4px solid var(--rule);
}
.tl-kpi-card--complete { border-left-color:#5BBE63; }
.tl-kpi-card--active   { border-left-color:#1E7A39; }
.tl-kpi-card--planned  { border-left-color:var(--text-muted); }
.tl-kpi-card--overdue  { border-left-color:#A8392B; }
[data-theme="dark"] .tl-kpi-card--overdue { border-left-color:#E08070; }
.tl-kpi-value {
  font-size:2.2rem; font-weight:700;
  color:var(--ink); line-height:1;
}
.tl-kpi-label {
  font-size:0.72rem; color:var(--text-muted);
  margin-top:5px; text-transform:uppercase; letter-spacing:.05em;
}

/* ── Sprint Health Overview ───────────────────────────────────────── */
.tl-health-card { margin-bottom:20px; }
.tl-active-sprint-banner {
  background:linear-gradient(135deg, var(--brand-light), rgba(30,122,57,0.04));
  border:1px solid var(--rule);
  border-left:4px solid var(--brand);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:18px;
}
.tl-active-label {
  font-size:0.7rem; font-weight:700; color:var(--brand);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;
}
.tl-active-title { font-weight:700; font-size:0.95rem; color:var(--ink); margin-bottom:3px; }
.tl-active-dates { font-size:0.8rem; color:var(--text-muted); margin-bottom:12px; }
.tl-progress-bar-wrap {
  height:6px; background:var(--rule-soft);
  border-radius:3px; overflow:hidden; margin-bottom:5px;
}
.tl-progress-bar {
  height:100%;
  background:linear-gradient(90deg, #1E7A39, #5BBE63);
  border-radius:3px;
  transition:width .4s ease;
}
.tl-progress-label { font-size:0.73rem; color:var(--text-muted); }

.tl-health-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
  gap:10px;
}
.tl-health-item {
  border:1px solid var(--rule-soft);
  border-radius:8px; padding:12px 14px;
  transition:var(--trans);
}
.tl-health-item--overdue { border-color:rgba(168,57,43,0.35); background:rgba(168,57,43,0.04); }
.tl-health-item--active  { border-color:rgba(30,122,57,0.25); background:rgba(30,122,57,0.04); }
.tl-health-item--complete { opacity:.72; }
[data-theme="dark"] .tl-health-item--overdue { border-color:rgba(224,128,112,0.3); background:rgba(224,128,112,0.04); }
[data-theme="dark"] .tl-health-item--active  { border-color:rgba(91,190,99,0.22); background:rgba(91,190,99,0.04); }
.tl-health-name {
  font-size:0.84rem; font-weight:600; color:var(--ink);
  margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-health-dates { font-size:0.72rem; color:var(--text-muted); margin-bottom:8px; }
.tl-health-progress-wrap {
  height:4px; background:var(--rule-soft);
  border-radius:2px; overflow:hidden; margin-bottom:8px;
}
.tl-health-progress-bar {
  height:100%;
  background:linear-gradient(90deg, #1E7A39, #5BBE63);
  border-radius:2px;
}
.tl-health-footer { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tl-health-badge {
  font-size:0.68rem; font-weight:700;
  border:1px solid; border-radius:4px;
  padding:1px 7px; text-transform:uppercase; letter-spacing:.03em;
}
.tl-health-overdue { font-size:0.7rem; color:#A8392B; font-weight:600; }
.tl-health-upcoming { font-size:0.7rem; color:var(--text-muted); }
[data-theme="dark"] .tl-health-overdue { color:#E08070; }

/* ── Gantt card ───────────────────────────────────────────────────── */
.tl-gantt-card  { margin-bottom:20px; }
.tl-section-title { font-family:'Newsreader',serif; font-size:1rem; font-weight:600; color:var(--ink); margin:0 0 14px; }
.tl-mermaid-wrap { overflow-x:auto; min-height:80px; width:100%; -webkit-overflow-scrolling:touch; touch-action:pan-x; }
#gantt-output { min-width:600px; }
#gantt-output svg { display:block; max-width:none; }
/* Mermaid gantt fontSize config is unreliable across rendering contexts — CSS px
   is the only guarantee. font-size:Npx on SVG text resolves to visual pixels
   regardless of any SVG viewBox scaling, so this is safe and deterministic.
   Biggest font in this section must be the .tl-section-title heading (1rem ≈ 16px). */
#gantt-output svg text {
  font-size: 11px !important;
  font-family: 'Manrope', sans-serif !important;
}

/* ── Sprint cards ─────────────────────────────────────────────────── */
.tl-sprint-list { display:flex; flex-direction:column; gap:14px; }
.tl-sprint-card { padding:18px 20px; }
.tl-sprint-head {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:12px;
  margin-bottom:10px; flex-wrap:wrap;
}
.tl-sprint-title { font-weight:700; font-size:0.95rem; color:var(--ink); }
.tl-sprint-dates { font-size:0.78rem; color:var(--text-muted); margin-top:3px; }
.tl-days-left { margin-left:8px; font-weight:700; color:#1E7A39; }
[data-theme="dark"] .tl-days-left { color:#5BBE63; }
.tl-sprint-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tl-status-badge {
  display:inline-block; font-size:0.72rem; font-weight:700;
  padding:3px 10px; border-radius:20px;
  border:1.5px solid currentColor; letter-spacing:.03em;
  text-transform:uppercase;
}
.tl-sprint-goal { font-size:0.84rem; color:var(--text-muted); margin:0 0 12px; font-style:italic; }
.tl-deliverables { display:flex; flex-direction:column; gap:6px; }
.tl-deliverable-item { display:flex; align-items:center; gap:8px; font-size:0.83rem; color:var(--ink); }
.tl-deliverable-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════════
   NOTES PAGE
══════════════════════════════════════════════════════════════════════ */
.notes-section-label { font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.notes-card { margin-bottom:14px; padding:18px 20px; }
.notes-card--pinned { border-left:3px solid #1E7A39; }
[data-theme="dark"] .notes-card--pinned { border-color:#5BBE63; }

.notes-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.notes-avatar { width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; flex-shrink:0; }
.notes-meta  { flex:1; }
.notes-author{ font-weight:600; font-size:0.83rem; color:var(--ink); }
.notes-date  { font-size:0.75rem; color:var(--text-muted); display:block; }
.notes-tag   { font-size:0.68rem; font-weight:700; padding:2px 9px; border-radius:20px; border:1.5px solid currentColor; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.notes-pin-indicator { font-size:0.85rem; flex-shrink:0; }

.notes-title { font-family:'Newsreader',serif; font-size:1.05rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.notes-body  { font-size:0.84rem; color:var(--ink); line-height:1.65; }
.notes-body p { margin:0 0 8px; }
.notes-body p:last-child { margin-bottom:0; }

.notes-actions { display:flex; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--rule-soft); }
.notes-action-btn { background:none; border:none; font-family:'DM Sans',sans-serif; font-size:0.78rem; color:var(--text-muted); cursor:pointer; padding:0; font-weight:600; transition:color .2s; }
.notes-action-btn:hover { color:var(--ink); }
.notes-action-btn--danger:hover { color:#A8392B; }

.notes-meta-row { display:flex; align-items:flex-end; gap:14px; margin-bottom:14px; }
.notes-pin-opt  { display:flex; align-items:center; gap:6px; font-size:0.83rem; color:var(--ink); cursor:pointer; padding-bottom:3px; }
.notes-pin-opt input[type="checkbox"] { accent-color:#1E7A39; }

.notes-empty      { text-align:center; padding:48px 20px; }
.notes-empty-icon { font-size:2rem; margin-bottom:10px; }
.notes-empty-text { font-size:0.9rem; color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   TEAM PAGE — TAB NAV
══════════════════════════════════════════════════════════════════════ */
.team-tab-nav {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 2px solid var(--rule-soft); padding-bottom: 0;
}
.team-tab {
  padding: 9px 18px; background: none; border: none;
  font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 600;
  color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color .2s, border-color .2s;
}
.team-tab:hover { color: var(--ink); }
.team-tab--active { color: var(--brand); border-bottom-color: var(--brand); }
.team-tab-panel { /* visible by default unless set to display:none */ }

/* ═══════════════════════════════════════════════════════════════════
   TIMELINE PAGE — FLOW DIAGRAM + SCHEDULE ANALYSIS
══════════════════════════════════════════════════════════════════════ */

/* Section header (title + subtitle pair) */
.tl-section-header { margin-bottom:14px; }
.tl-section-sub    { font-size:0.78rem; color:var(--text-muted); margin-top:3px; }

/* Sprint cards heading */
.tl-cards-heading { font-family:'Newsreader',serif; font-size:1rem; font-weight:600; color:var(--ink); margin:24px 0 12px; }

/* Overdue sprint card */
.tl-sprint-card--overdue { border-left:3px solid #A8392B; }
[data-theme="dark"] .tl-sprint-card--overdue { border-left-color:#E08070; }
.tl-days-overdue { margin-left:8px; font-weight:700; color:#A8392B; font-size:0.78rem; }
[data-theme="dark"] .tl-days-overdue { color:#E08070; }

/* ── Sprint Pipeline (flowchart) ───────────────────────────────────── */
.tl-flow-card { margin-bottom:20px; overflow:hidden; }
.tl-flow-legend {
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:14px;
}
.tl-flow-key {
  font-size:0.72rem; font-weight:700; padding:3px 10px;
  border-radius:20px; border:1.5px solid currentColor;
  text-transform:uppercase; letter-spacing:.04em;
}
.tl-flow-key--complete { color:#3A9A45; }
.tl-flow-key--active   { color:#1E7A39; background:rgba(30,122,57,0.06); }
.tl-flow-key--planned  { color:var(--text-muted); }
.tl-flow-key--overdue  { color:#A8392B; }
.tl-flow-key--cancelled{ color:var(--text-muted); opacity:.7; }
[data-theme="dark"] .tl-flow-key--active   { color:#5BBE63; background:rgba(91,190,99,0.08); }
[data-theme="dark"] .tl-flow-key--complete { color:#5BBE63; }
[data-theme="dark"] .tl-flow-key--overdue  { color:#E08070; }

/* ── Schedule Analysis card ────────────────────────────────────────── */
.tl-schedule-card  { margin-bottom:20px; }

.tl-schedule-alert {
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(168,57,43,0.06); border:1px solid rgba(168,57,43,0.2);
  border-radius:var(--radius); padding:12px 16px; margin-bottom:18px;
  font-size:0.84rem; color:var(--ink);
}
.tl-schedule-alert-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }
[data-theme="dark"] .tl-schedule-alert {
  background:rgba(224,128,112,0.06); border-color:rgba(224,128,112,0.2);
}

.tl-schedule-ok {
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.84rem; color:#1E7A39; font-weight:600;
  background:rgba(30,122,57,0.06); border:1px solid rgba(30,122,57,0.18);
  border-radius:var(--radius); padding:9px 14px; margin-bottom:18px;
}
[data-theme="dark"] .tl-schedule-ok { color:#5BBE63; background:rgba(91,190,99,0.07); border-color:rgba(91,190,99,0.18); }

/* Table scroll wrapper */
.tl-schedule-wrap { overflow-x:auto; margin-bottom:22px; }

.tl-schedule-table {
  width:100%; border-collapse:collapse; font-size:0.83rem;
}
.tl-schedule-table thead th {
  text-align:left; font-size:0.7rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em;
  padding:0 10px 8px; border-bottom:2px solid var(--rule-soft);
}
.tl-schedule-table tbody td {
  padding:10px; border-bottom:1px solid var(--rule-soft); vertical-align:top;
}
.tl-schedule-table tfoot td {
  padding:10px; border-top:2px solid var(--rule); font-size:0.82rem;
}
.tl-schedule-row--overdue td { background:rgba(168,57,43,0.025); }
[data-theme="dark"] .tl-schedule-row--overdue td { background:rgba(224,128,112,0.04); }
.tl-schedule-row--active td { background:rgba(30,122,57,0.025); }
[data-theme="dark"] .tl-schedule-row--active td { background:rgba(91,190,99,0.03); }

.tl-sched-name { font-weight:600; color:var(--ink); }
.tl-sched-goal { font-size:0.75rem; color:var(--text-muted); font-weight:400; margin-top:2px; font-style:italic; }
.tl-sched-date { color:var(--text-muted); white-space:nowrap; }
.tl-sched-dur  { color:var(--text-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tl-sched-status { white-space:nowrap; }

.tl-sched-chip {
  display:inline-block; font-size:0.72rem; font-weight:700;
  padding:2px 9px; border-radius:20px; white-space:nowrap;
}
.tl-sched-chip--ok     { background:rgba(30,122,57,0.1); color:#155C2A; }
.tl-sched-chip--late   { background:rgba(168,57,43,0.1); color:#A8392B; }
.tl-sched-chip--active { background:rgba(30,122,57,0.08); color:#1E7A39; }
.tl-sched-chip--muted  { background:var(--rule-soft); color:var(--text-muted); }
[data-theme="dark"] .tl-sched-chip--ok     { background:rgba(91,190,99,0.12); color:#5BBE63; }
[data-theme="dark"] .tl-sched-chip--late   { background:rgba(224,128,112,0.12); color:#E08070; }
[data-theme="dark"] .tl-sched-chip--active { background:rgba(91,190,99,0.10); color:#5BBE63; }
[data-theme="dark"] .tl-sched-chip--muted  { background:var(--rule); color:var(--text-muted); }

/* Visual timeline bar */
.tl-timeline-bar-section { margin-top:4px; }
.tl-timeline-label { font-size:0.72rem; color:var(--text-muted); margin-bottom:8px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.tl-timeline-track {
  position:relative; height:24px; border-radius:6px;
  background:var(--rule-soft); overflow:visible; margin-bottom:6px;
}
.tl-tbar-segment {
  position:absolute; top:0; height:100%; border-radius:4px;
  opacity:.85; transition:opacity .2s;
  cursor:default;
}
.tl-tbar-segment:hover { opacity:1; }
.tl-tbar-today {
  position:absolute; top:-4px; bottom:-4px; width:2px;
  background:#1E7A39; border-radius:2px; z-index:2;
}
[data-theme="dark"] .tl-tbar-today { background:#5BBE63; }
.tl-timeline-ends {
  display:flex; justify-content:space-between;
  font-size:0.7rem; color:var(--text-muted);
}

/* ── Where we are card ─────────────────────────────────────────────────────── */
.tl-where-card { margin-bottom:0; }
.tl-where-banner {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  background:var(--bg-page); border-radius:8px; padding:12px 16px;
  margin-bottom:14px; border:1px solid var(--rule-soft);
}
.tl-where-wk   { font-weight:800; font-size:1rem; color:var(--brand); }
.tl-where-date { font-size:0.82rem; color:var(--text-muted); }
.tl-where-sep  { color:var(--rule); }
.tl-where-outcome { font-size:0.9rem; color:var(--ink); }
.tl-where-track {
  position:relative; height:8px; background:var(--rule-soft);
  border-radius:4px; margin-bottom:8px;
}
.tl-where-fill {
  position:absolute; inset:0; height:100%; background:var(--brand);
  border-radius:4px; transition:width .3s;
}
.tl-where-marker {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%;
  background:var(--brand); border:3px solid var(--bg-card);
  box-shadow:0 0 0 2px var(--brand);
}
.tl-where-ends {
  display:flex; justify-content:space-between;
  font-size:0.7rem; color:var(--text-muted);
}
.tl-empty-note { font-size:0.83rem; color:var(--text-muted); }

/* Current-week highlight in week table */
.tl-sched-row--current { background:var(--brand-bg, rgba(30,122,57,.08)); }
.tl-sched-row--current .tl-sched-td { color:var(--brand); font-weight:600; }

/* Mobile responsiveness for new sections */
@media (max-width:640px) {
  .tl-schedule-table thead th:nth-child(2),
  .tl-schedule-table tbody td:nth-child(2) { display:none; }
  .tl-flow-legend { gap:5px 10px; }
  .tl-where-banner { flex-direction:column; gap:4px; }
}

/* ── Sprint task checkboxes (Sprint Detail) ────────────────────────────────── */
.tl-deliverable-item--task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.tl-deliverable-item--task:last-of-type { border-bottom: none; }

.tl-task-form { display: contents; }

.tl-task-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--trans), background var(--trans), color var(--trans);
  line-height: 1;
}
.tl-task-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.tl-task-btn--done {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.tl-task-btn--done:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

.tl-deliverable-text {
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.45;
  flex: 1;
  padding-top: 3px;
}
.tl-deliverable-text--done {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--rule);
}

.tl-task-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tl-task-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--rule-soft);
  border-radius: 3px;
  overflow: hidden;
}
.tl-task-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.tl-task-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.tl-task-notify {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--brand);
  font-weight: 600;
  padding: 8px 12px;
  background: var(--brand-light);
  border-radius: 6px;
  border: 1px solid rgba(30,122,57,0.15);
}
[data-theme="dark"] .tl-task-notify {
  background: rgba(91,190,99,0.08);
  border-color: rgba(91,190,99,0.18);
}

/* ── Notifications page ────────────────────────────────────────────────────── */
.notif-page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.notif-page-title {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.notif-page-count {
  font-family: var(--font-head); font-size: .78rem; font-weight: 700;
  background: var(--accent); color: #fff;
  padding: 2px 10px; border-radius: 20px;
}
.notif-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notif-empty {
  padding: 40px 24px; text-align: center; color: var(--text-muted);
  font-size: .9rem;
}

.notif-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--rule-soft);
  transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item--read { opacity: .6; }
.notif-item:not(.notif-item--read) { background: var(--brand-light); }
[data-theme="dark"] .notif-item:not(.notif-item--read) { background: rgba(91,190,99,0.06); }

.notif-item-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; background: var(--rule-soft);
}
.notif-item--success .notif-item-icon { background: rgba(30,122,57,.12); }
.notif-item--warning .notif-item-icon { background: rgba(212,134,10,.12); }
.notif-item--alert   .notif-item-icon { background: rgba(168,57,43,.12); }

.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-weight: 700; font-size: .9rem; color: var(--ink); }
.notif-item-link  { color: var(--ink); text-decoration: none; }
.notif-item-link:hover { text-decoration: underline; color: var(--brand); }
.notif-item-msg   { font-size: .84rem; color: var(--text-muted); margin-top: 3px; }
.notif-item-meta  { font-size: .74rem; color: var(--text-muted); margin-top: 5px; }
.notif-item-audience { font-style: italic; }

.notif-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.notif-read-btn, .notif-del-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--rule-soft);
  background: none; cursor: pointer; font-size: .8rem; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all .15s;
}
.notif-read-btn:hover { border-color: var(--brand); color: var(--brand); }
.notif-del-btn:hover  { border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════════════════════
   EXPENSE CLAIMS — new status chips, type grid, claim UI
   ══════════════════════════════════════════════════════ */

/* Extended status chips */
.exp-status--advance_paid       { background: #E3F2FD; color: #1565C0; }
.exp-status--receipts_submitted { background: #FFF8E1; color: #8B6914; }
.exp-status--reimbursed         { background: #E6F4E9; color: #155C2A; font-weight: 700; }

[data-theme="dark"] .exp-status--advance_paid       { background: #0D2744; color: #90CAF9; }
[data-theme="dark"] .exp-status--receipts_submitted { background: #2C2300; color: #FFD54F; }
[data-theme="dark"] .exp-status--reimbursed         { background: #0D2A12; color: #5BBE63; }

/* Filter tab badge colours for new tabs */
.exp-badge--claims     { background: #1E7A39; color: #fff; }
.exp-badge--reimbursed { background: #155C2A; color: #fff; }

/* 2×2 request type grid */
.exp-type-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.exp-type-opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1.5px solid var(--rule); border-radius: 9px;
  cursor: pointer; transition: border-color .15s, background .15s;
  position: relative;
}
.exp-type-opt input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.exp-type-opt:hover { border-color: var(--brand); background: var(--brand-light); }
.exp-type-opt.selected,
.exp-type-opt:has(input:checked) {
  border-color: var(--brand); background: var(--brand-light);
}
.exp-type-icon  { font-size: 1.3rem; line-height: 1; margin-bottom: 2px; }
.exp-type-title { font-size: .82rem; font-weight: 700; color: var(--ink); }
.exp-type-desc  { font-size: .72rem; color: var(--text-muted); line-height: 1.3; }

/* Info banner (advance request context) */
.exp-info-banner {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: #EAF3FF; border: 1px solid #B3D4F7;
  color: #1A4A80; font-size: .82rem; line-height: 1.45;
  margin-bottom: 4px;
}
[data-theme="dark"] .exp-info-banner {
  background: #0D2030; border-color: #1A3D60; color: #90CAF9;
}
.exp-info-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* Claim actions section (different from approver approve/reject row) */
.exp-actions--claim {
  flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--rule-soft); border-top: 1px solid var(--rule);
  padding: 12px 16px; margin-top: 0;
}
.exp-claim-info {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .82rem; color: var(--text-muted); line-height: 1.45;
}
.exp-claim-icon { font-size: 1rem; flex-shrink: 0; }

/* Claim receipt upload (inline, compact) */
.exp-claim-receipt-form { width: 100%; }
.exp-claim-file-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.exp-file-input--inline {
  font-size: .8rem; flex: 1; min-width: 0;
}
.exp-claim-hint {
  font-size: .72rem; color: var(--text-muted); margin-top: 4px;
}

/* Admin action buttons */
.exp-btn-advance {
  padding: 7px 14px; border-radius: 7px; border: 1.5px solid #1565C0;
  background: #EBF3FD; color: #1565C0; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: all .15s; font-family: var(--font-head);
  white-space: nowrap;
}
.exp-btn-advance:hover { background: #1565C0; color: #fff; }
.exp-btn-reimburse {
  padding: 7px 14px; border-radius: 7px; border: 1.5px solid var(--brand);
  background: var(--brand-light); color: var(--brand); font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: all .15s; font-family: var(--font-head);
  white-space: nowrap;
}
.exp-btn-reimburse:hover { background: var(--brand); color: #fff; }

[data-theme="dark"] .exp-btn-advance  { background: #0D1E33; border-color: #5B9BD5; color: #90CAF9; }
[data-theme="dark"] .exp-btn-advance:hover  { background: #1565C0; color: #fff; }
[data-theme="dark"] .exp-btn-reimburse { background: #0D1F10; border-color: var(--brand); }
[data-theme="dark"] .exp-btn-reimburse:hover { background: var(--brand); color: #fff; }

/* Expense field note (small instructional text below field) */
.exp-field-note {
  font-size: .76rem; color: var(--text-muted); margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}

/* Mobile: stack type grid to 1 col on narrow screens */
@media (max-width: 480px) {
  .exp-type-grid { grid-template-columns: 1fr; }
  .exp-member-grid { grid-template-columns: 1fr; }
}

/* ── Expense list — grouped by member ─────────────────────────────────────── */
.exp-member-card {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}
.exp-member-card:last-child { margin-bottom: 0; }

.exp-member-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--rule-soft);
}

.exp-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .exp-member-avatar { background: var(--brand-dark, #5BBE63); }

.exp-member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.exp-member-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-member-count {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.exp-member-pending {
  color: #A8392B;
  font-weight: 600;
}
[data-theme="dark"] .exp-member-pending { color: #E08070; }

.exp-member-total {
  text-align: right;
  flex-shrink: 0;
}
.exp-member-total-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.exp-member-total-amt {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

/* exp-cards inside member card lose their outer border/radius — member card is the container */
.exp-member-card .exp-card {
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
}
.exp-member-card .exp-card:last-child { border-bottom: none; }

/* ── Team Expense Summary strip ──────────────────────────────────────────── */
.exp-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.exp-kpi {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.exp-kpi__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.exp-kpi__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.exp-kpi__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.exp-kpi__val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.exp-kpi__val-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  margin-bottom: 4px;
}
.exp-kpi__val--ok     { color: #1E7A39; }
.exp-kpi__val--warn   { color: #A06300; }
.exp-kpi__val--danger { color: #A8392B; }
.exp-kpi__val--muted  { color: #5C564E; }
[data-theme="dark"] .exp-kpi__val--ok     { color: #5BBE63; }
[data-theme="dark"] .exp-kpi__val--warn   { color: #FFA700; }
[data-theme="dark"] .exp-kpi__val--danger { color: #E08070; }
[data-theme="dark"] .exp-kpi__val--muted  { color: #A79F92; }

/* Upcoming KPI card — visually distinct from actual-spend card */
.exp-kpi--upcoming {
  border-style: dashed;
  opacity: 0.85;
}
.exp-kpi--upcoming .exp-kpi__bar-fill--subs {
  opacity: 0.55;
}

.exp-kpi__bar-track {
  height: 5px;
  border-radius: 3px;
  background: var(--rule-soft);
  position: relative;
  overflow: hidden;
  margin: 5px 0 2px;
}
.exp-kpi__bar-fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 3px;
  transition: width .5s ease;
}
.exp-kpi__bar-fill--subs      { left: 0; background: var(--brand-light); border-right: 1px solid var(--rule); }
[data-theme="dark"] .exp-kpi__bar-fill--subs { background: rgba(91,190,99,0.18); }
.exp-kpi__bar-fill--approved  { background: var(--brand); }
.exp-kpi__bar-fill--pending   { background: #FFA700; }
.exp-kpi__bar-fill--remaining { left: 0; }
.exp-kpi__bar-fill--ok        { background: var(--brand); }
.exp-kpi__bar-fill--warn      { background: #FFA700; }
.exp-kpi__bar-fill--danger    { background: #A8392B; }
[data-theme="dark"] .exp-kpi__bar-fill--danger { background: #E08070; }

.exp-kpi__sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* ── Redesigned member expense card ─────────────────────────────────────── */

/* Accent bar at top of card */
.exp-member-accent {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}

/* Override head: no border-bottom — progress bar takes that role */
.exp-member-head {
  border-bottom: none;
  padding-bottom: 10px;
  align-items: flex-start;
}

/* Avatar: inline style sets color; remove the dark-mode override that force-sets it */
.exp-member-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.82rem;
}
/* Dark mode must NOT force override inline background */
[data-theme="dark"] .exp-member-avatar { background: inherit; }

/* Role line */
.exp-member-role {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spend block — right side of card header */
.exp-member-spend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  padding-top: 1px;
}
.exp-member-spend-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.exp-member-spend-amt {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.exp-member-pend-chip {
  display: inline-block;
  background: color-mix(in srgb, #FFA700 14%, transparent);
  color: #A06300;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 0.67rem;
  font-weight: 600;
  white-space: nowrap;
}
[data-theme="dark"] .exp-member-pend-chip {
  color: #FFA700;
  background: rgba(255, 167, 0, 0.15);
}

/* Progress bar section */
.exp-member-progress {
  padding: 0 16px 10px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--rule-soft);
}
.exp-member-progress__track {
  height: 7px;
  border-radius: 4px;
  background: var(--rule-soft);
  position: relative;
  overflow: hidden;
}
.exp-member-progress__fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 4px;
  transition: width .5s ease;
}
.exp-member-progress__fill--ok      { left: 0; background: var(--brand); }
.exp-member-progress__fill--warn    { left: 0; background: #FFA700; }
.exp-member-progress__fill--danger  { left: 0; background: #A8392B; }
.exp-member-progress__fill--pending { background: color-mix(in srgb, #FFA700 55%, transparent); }
[data-theme="dark"] .exp-member-progress__fill--danger { background: #E08070; }

.exp-member-progress__labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.67rem;
  color: var(--text-muted);
  margin-top: 6px;
}
.exp-member-progress__remaining {
  font-weight: 600;
  color: var(--ink);
}

/* Chip row */
.exp-member-chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--rule-soft);
}
.exp-member-chip {
  display: inline-block;
  background: var(--rule-soft);
  color: var(--text-muted);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 600;
}
.exp-member-chip--muted {
  background: transparent;
  border: 1px solid var(--rule-soft);
}

/* Responsive */
@media (max-width: 1200px) {
  .exp-summary-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .exp-summary-strip { grid-template-columns: 1fr; }
  .exp-member-head   { flex-wrap: wrap; }
  .exp-member-spend  { width: 100%; align-items: flex-start; flex-direction: row; gap: 8px; align-items: center; }
}

/* ── Developer Tools & Infrastructure ─────────────────────────────────────── */
.devtools-section { margin-bottom: 24px; }

.devtools-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.section-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.section-sub   { font-size: 0.78rem; color: var(--text-muted); margin: 0; }

.devtools-grand-total {
  text-align: right;
  flex-shrink: 0;
}
.dgt-label  { display: block; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.dgt-amount { display: block; font-size: 1.2rem; font-weight: 800; color: var(--ink); }

/* Developer tool cards grid */
.devtools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.devtool-card {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.devtool-card--total {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 5%, var(--card-bg));
}

.devtool-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.devtool-card__name { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.devtool-card__role { font-size: 0.72rem; color: var(--text-muted); }

.devtool-card__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.devtool-card__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.78rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.devtool-card__item:last-child { border-bottom: none; padding-bottom: 0; }

.dtci-name  { color: var(--ink); flex: 1; line-height: 1.3; }
.dtci-count { font-size: 0.68rem; color: var(--text-muted); font-weight: 400; }
.dtci-meta  { display: flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; }
.dtci-cost  { color: var(--ink); font-weight: 600; }
.dtci-renew { font-size: 0.68rem; color: var(--text-muted); }

.dtci-badge { display: inline-block; border-radius: 4px; padding: 1px 5px; font-size: 0.65rem; font-weight: 700; }
.dtci-badge--free { background: color-mix(in srgb, #1E7A39 12%, transparent); color: #1E7A39; }
[data-theme="dark"] .dtci-badge--free { background: rgba(91,190,99,0.15); color: #5BBE63; }

.devtool-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
}
.devtool-card__foot strong { color: var(--ink); font-size: 0.85rem; }
.devtool-card__foot--total strong { color: var(--brand); font-size: 0.9rem; }

/* ── Developer Tools billing cards (new .dtb-* design) ────────────────────── */

/* Section header */
.devtools-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.devtools-section__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 3px;
}
.devtools-section__sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.dtb-last-updated {
  font-size: 0.72rem;
  color: var(--brand);
  font-weight: 600;
}
.dtb-last-updated--never {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}
/* ── Rollover banner ──────────────────────────────────────────────────────── */
.dtb-rollover-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 16px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--ink);
  flex-wrap: wrap;
}
.dtb-rollover-banner__icon { font-size: 1rem; flex-shrink: 0; }
.dtb-rollover-banner > span:nth-child(2) { flex: 1; min-width: 160px; }
.dtb-rollover-banner__actions { display: flex; gap: 8px; margin-left: auto; }
.dtb-btn--sm {
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 6px;
}
[data-theme="dark"] .dtb-rollover-banner {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand) 25%, transparent);
}

/* Cards grid — 2 columns on wide, 1 on mobile */
.dtb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* Individual card shell */
.dtb-card {
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.18s ease;
}
.dtb-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
[data-theme="dark"] .dtb-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}

/* Team total card — slightly distinguished background */
.dtb-card--total {
  background: color-mix(in srgb, var(--brand) 4%, var(--card-bg));
  border-color: color-mix(in srgb, var(--brand) 30%, var(--rule-soft));
}
[data-theme="dark"] .dtb-card--total {
  background: color-mix(in srgb, var(--brand) 8%, var(--card-bg));
}

/* Top accent bar */
.dtb-card__accent {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}

/* Card header row */
.dtb-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--rule-soft);
}

/* Avatar circle */
.dtb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.dtb-avatar--total {
  font-size: 1.1rem;
  font-weight: 900;
  background: var(--brand) !important;
}

/* Name / role column */
.dtb-head-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dtb-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dtb-role {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right side — total amount */
.dtb-head-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 1px;
}
.dtb-total-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dtb-total-sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-top: 2px;
  white-space: nowrap;
}
.dtb-total-amt {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dtb-total-amt--team {
  color: var(--brand) !important;
  font-size: 1.05rem;
}

/* Tool rows section */
.dtb-tools {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

/* Column header row */
.dtb-tools__head-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px;
  gap: 8px;
  padding: 9px 0 7px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.dtb-tools__head-row span:not(:first-child) { text-align: right; }

/* Individual tool row */
.dtb-tool-row {
  display: grid;
  grid-template-columns: 1fr 80px minmax(120px, auto);
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.8rem;
}
.dtb-tool-row:last-child { border-bottom: none; }
.dtb-tool-row--free { opacity: 0.75; }

/* Tool name column */
.dtb-tool-name {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Renewal date column */
.dtb-tool-renew {
  text-align: right;
  font-size: 0.76rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Cost column — native price on top, ≈ KES below, ≈ ZAR below that */
.dtb-tool-cost {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.dtb-cost-native {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.dtb-cost-kes,
.dtb-cost-zar {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Seat count pill (team total card) */
.dtb-seat-pill {
  display: inline-block;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
}
[data-theme="dark"] .dtb-seat-pill {
  background: rgba(91,190,99,0.15);
  color: #5BBE63;
}

/* Card footer */
.dtb-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 16px;
  font-size: 0.76rem;
  color: var(--text-muted);
  border-top: 1px solid var(--rule-soft);
  background: var(--sidebar-bg);
  margin-top: auto;
}
.dtb-card__foot strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.dtb-card__foot--total strong {
  color: var(--brand);
  font-size: 0.88rem;
}
.dtb-foot-cost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

/* Responsive: single column on small screens */
@media (max-width: 880px) {
  .dtb-grid { grid-template-columns: 1fr; }
}

/* Infrastructure table */
.infra-section { margin-top: 4px; }
.infra-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.infra-table-wrap { overflow-x: auto; }
.infra-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.infra-table th,
.infra-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.infra-table th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  background: var(--sidebar-bg);
}
.infra-table td:last-child { white-space: normal; max-width: 200px; }
.infra-table .dtb-tool-cost {
  text-align: left;
  align-items: flex-start;
}
.infra-table tfoot td {
  font-size: 0.78rem;
  border-bottom: none;
  padding-top: 10px;
}

.infra-type {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.infra-type--domain  { background: color-mix(in srgb, #00B4D9 12%, transparent); color: #007A96; }
.infra-type--hosting { background: color-mix(in srgb, #8B5CF6 12%, transparent); color: #6D2EBF; }
.infra-type--vps     { background: color-mix(in srgb, #FFA700 12%, transparent); color: #A06300; }
[data-theme="dark"] .infra-type--domain  { color: #00B4D9; }
[data-theme="dark"] .infra-type--hosting { color: #A78BFA; }
[data-theme="dark"] .infra-type--vps     { color: #FFA700; }

.infra-date       { color: var(--ink); }
.infra-date--soon { color: #A8392B; font-weight: 700; }
[data-theme="dark"] .infra-date--soon { color: #E08070; }
.infra-day        { color: var(--text-muted); }
.infra-total-item {
  color: var(--text-muted);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  vertical-align: top;
}
.infra-total-item strong { color: var(--ink); }
.text-muted { color: var(--text-muted); }

@media (max-width: 760px) {
  .devtools-section__header { flex-direction: column; gap: 10px; }
  .dtb-tools__head-row,
  .dtb-tool-row { grid-template-columns: 1fr 70px 88px; }
}
@media (max-width: 480px) {
  .dtb-tools__head-row,
  .dtb-tool-row { grid-template-columns: 1fr 60px; }
  .dtb-tools__head-row span:nth-child(2),
  .dtb-tool-row .dtb-tool-renew { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DEV TOOLS INLINE EDIT — edit button, modal, editor rows
   ═══════════════════════════════════════════════════════════════════════════ */

/* Edit button on card header */
.dtb-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
}
.dtb-edit-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-subtle, color-mix(in srgb, var(--brand) 8%, transparent));
}
.dtb-edit-btn svg { flex-shrink: 0; }

/* ── Modal backdrop + box ─────────────────────────────────────────────────── */
.dtb-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: min(960px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100vh - 48px);
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
/* Only apply flex layout when the dialog is actually open.
   Without this guard, display:flex overrides the UA stylesheet's
   dialog:not([open]){display:none} — making the modal permanently visible. */
.dtb-modal[open] {
  display: flex;
  flex-direction: column;
}
.dtb-modal::backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

/* ── Modal header ─────────────────────────────────────────────────────────── */
.dtb-modal__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.dtb-modal__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.dtb-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1.4rem;
  line-height: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.dtb-modal__close:hover { color: var(--ink); background: var(--rule-soft); }

/* ── Modal body ───────────────────────────────────────────────────────────── */
.dtb-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

/* Column header row */
.dtb-editor-head-row {
  display: grid;
  grid-template-columns: 2fr 90px 80px 90px 120px 1fr 32px;
  gap: 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

/* Each tool row */
.dtb-editor-row {
  display: grid;
  grid-template-columns: 2fr 90px 80px 90px 120px 1fr 32px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.dtb-editor-row:last-child { border-bottom: none; }

/* Generic input style */
.dtb-inp {
  width: 100%;
  padding: 6px 9px;
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.dtb-inp:focus { border-color: var(--brand); }
.dtb-inp:disabled { opacity: .4; cursor: not-allowed; }
.dtb-inp--num { text-align: right; }
.dtb-inp--sel { padding-right: 4px; cursor: pointer; }

/* Delete row button */
.dtb-del-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}
.dtb-del-row:hover { color: #c0392b; border-color: #c0392b; }

/* Add tool row button */
.dtb-add-row-btn {
  margin-top: 14px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
  background: transparent;
  border: 1px dashed var(--brand);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.dtb-add-row-btn:hover {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

/* ── Modal footer ─────────────────────────────────────────────────────────── */
.dtb-modal__ft {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
}

/* Shared button base */
.dtb-btn {
  padding: 8px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity .15s, background .15s, border-color .15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.dtb-btn:disabled { opacity: .5; cursor: not-allowed; }

.dtb-btn--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  margin-left: auto;
}
.dtb-btn--primary:hover:not(:disabled) { opacity: .88; }

.dtb-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--rule);
}
.dtb-btn--ghost:hover:not(:disabled) { border-color: var(--text-muted); color: var(--ink); }

/* Save status message */
.dtb-save-msg {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex: 1;
}
.dtb-save-msg--ok  { color: var(--brand); font-weight: 600; }
.dtb-save-msg--err { color: #c0392b;      font-weight: 600; }

/* ── Responsive — collapse editor rows on small screens ──────────────────── */
@media (max-width: 700px) {
  .dtb-editor-head-row { display: none; }
  .dtb-editor-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 0;
  }
  .dtb-editor-row .dtb-inp:first-child { grid-column: 1 / -1; }
  .dtb-del-row { grid-column: 2; justify-self: end; }
}

/* ═══════════════════════════════════════════════════════════════════
   HORIZONTAL-SCROLL WRAPPERS — visible scrollbar on all devices
   Covers every overflow-x:auto container across all hub pages.
══════════════════════════════════════════════════════════════════════ */
.infra-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;   /* must be explicit — without this the wrapper expands to content width and overflow:auto never fires */
}

/* Shared scrollbar styling — all horizontal-scroll containers */
.tl-mermaid-wrap,
.infra-scroll,
.tl-roadmap-scroll,
.tl-schedule-wrap,
.infra-table-wrap,
.rdmap-chart-outer,
.milestone-track {
  scrollbar-width: thin;
  scrollbar-color: var(--rule) var(--rule-soft);
}
.tl-mermaid-wrap::-webkit-scrollbar,
.infra-scroll::-webkit-scrollbar,
.tl-roadmap-scroll::-webkit-scrollbar,
.tl-schedule-wrap::-webkit-scrollbar,
.infra-table-wrap::-webkit-scrollbar,
.rdmap-chart-outer::-webkit-scrollbar,
.milestone-track::-webkit-scrollbar {
  height: 6px;
}
.tl-mermaid-wrap::-webkit-scrollbar-thumb,
.infra-scroll::-webkit-scrollbar-thumb,
.tl-roadmap-scroll::-webkit-scrollbar-thumb,
.tl-schedule-wrap::-webkit-scrollbar-thumb,
.infra-table-wrap::-webkit-scrollbar-thumb,
.rdmap-chart-outer::-webkit-scrollbar-thumb,
.milestone-track::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}
.tl-mermaid-wrap::-webkit-scrollbar-track,
.infra-scroll::-webkit-scrollbar-track,
.tl-roadmap-scroll::-webkit-scrollbar-track,
.tl-schedule-wrap::-webkit-scrollbar-track,
.infra-table-wrap::-webkit-scrollbar-track,
.rdmap-chart-outer::-webkit-scrollbar-track,
.milestone-track::-webkit-scrollbar-track {
  background: var(--rule-soft);
  border-radius: 3px;
}

/* Ensure webkit scrollbar height override on milestone-track is consistent */
.milestone-track::-webkit-scrollbar { height: 6px; }

/* ── Touch devices only: allow horizontal swipe inside scroll containers ──────
   (hover:none) + (pointer:coarse) = touchscreen phones and tablets.
   Desktop mice/trackpads are unaffected — no touch-action on those.            */
@media (hover: none) and (pointer: coarse) {
  .tl-mermaid-wrap,
  .infra-scroll,
  .tl-roadmap-scroll,
  .tl-schedule-wrap,
  .infra-table-wrap,
  .rdmap-chart-outer,
  .milestone-track {
    touch-action: pan-x pan-y;   /* allow both axes so vertical page scroll still works when starting outside the element */
    -webkit-overflow-scrolling: touch;
  }
  /* For containers that are strictly horizontal scrollers (no vertical content),
     pan-x alone is preferred so a vertical swipe bubbles up to page scroll */
  .infra-scroll,
  .tl-roadmap-scroll,
  .infra-table-wrap,
  .rdmap-chart-outer,
  .milestone-track {
    touch-action: pan-x;
  }
}

/* ── Tasks page: cap at 2 columns on mobile so tiles don't get too narrow */
@media (max-width: 600px) {
  .tsk-kpi-strip { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERMISSIONS — grouped checklist + preset buttons
   Added: permissions UI redesign (grouped sections + Stakeholder/Developer presets)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Preset bar — row of shortcut preset pills above the checklist */
.perm-preset-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.perm-preset-btn {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 4px 13px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
  white-space: nowrap;
}
.perm-preset-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.perm-preset-btn--active {
  background: rgba(30,122,57,.07);
  border-color: var(--brand);
  color: var(--brand);
}
[data-theme="dark"] .perm-preset-btn--active {
  background: rgba(91,190,99,.1);
}

/* Checklist container */
.perm-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.perm-checklist--card {
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 12px 14px;
}

/* Permission group — one section per category */
.perm-group {
  margin-bottom: 12px;
}
.perm-group:last-child { margin-bottom: 0; }

.perm-group-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-soft);
}

/* Individual permission row */
.perm-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.4;
}
.perm-check-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.perm-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Role-default dot indicator */
.perm-default-dot {
  font-size: 0.55rem;
  color: var(--brand);
  vertical-align: middle;
  line-height: 1;
}

/* "custom" badge shown on the 🔐 Edit permissions button */
.perm-custom-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(30,122,57,.1);
  color: var(--brand);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}
[data-theme="dark"] .perm-custom-badge {
  background: rgba(91,190,99,.12);
}

/* Team perm section separator (mirrors .team-token-section) */
.team-perm-section {
  flex: 0 0 100%;
  border-top: 1px solid var(--rule-soft);
  margin-top: 10px;
  padding-top: 10px;
}
.team-perm-form {
  margin-top: 12px;
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 14px 16px;
}

/* ── Default timeline view selector (team.php perm form) ─────────────── */
.perm-default-view {
  display: none; /* shown via JS when both timeline perms are ticked */
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-offset, var(--bg));
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
}
.perm-default-view.is-visible {
  display: block;
}
.perm-default-view-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.perm-defview-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.perm-defview-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  transition: border-color .15s, background .15s;
}
.perm-defview-opt input[type="radio"] {
  accent-color: var(--brand);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.perm-defview-opt:has(input:checked) {
  border-color: var(--brand);
  background: rgba(30,122,57,.08);
  color: var(--brand);
  font-weight: 600;
}
[data-theme="dark"] .perm-defview-opt:has(input:checked) {
  background: rgba(91,190,99,.12);
}

/* ── Timeline default-view dot buttons (team.php perm rows) ─────────────── */
.perm-tl-dot {
  display: inline-block;
  background: none;
  border: none;
  padding: 0 0 0 4px;
  margin: 0;
  cursor: pointer;
  font-size: 0.7em;
  line-height: 1;
  color: var(--rule);
  vertical-align: middle;
  transition: color .15s, transform .1s;
}
.perm-tl-dot:hover:not(:disabled) {
  color: var(--brand);
  transform: scale(1.3);
}
.perm-tl-dot--active {
  color: var(--brand);
}
.perm-tl-dot:disabled {
  opacity: 0.4;
  cursor: wait;
}
[data-theme="dark"] .perm-tl-dot--active {
  color: var(--brand); /* uses dark brand token (sage) automatically via CSS var */
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLL CARD — dashboard.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card wrapper */
.poll-card { padding: 20px 24px; }

/* Header row */
.poll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.poll-meta { display: flex; align-items: center; gap: 8px; }
.poll-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: 4px;
  padding: 2px 7px;
}
.poll-author { font-size: 0.78rem; color: var(--text-muted); }
.poll-close-btn { flex-shrink: 0; }

/* Question */
.poll-question {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 18px;
  line-height: 1.4;
}

/* Options list */
.poll-options { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }

.poll-option { }
.poll-option--mine .poll-opt-label { font-weight: 600; color: var(--brand); }

.poll-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.poll-opt-label  { font-size: 0.9rem; color: var(--text); line-height: 1.3; }
.poll-opt-right  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.poll-opt-count  { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }

/* Vote / retract buttons */
.poll-vote-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 5px;
  border: 1.5px solid var(--brand);
  background: none;
  color: var(--brand);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.poll-vote-btn:hover { background: var(--brand); color: #fff; }
.poll-vote-btn--retract {
  border-color: var(--rule);
  color: var(--text-muted);
}
.poll-vote-btn--retract:hover { background: var(--rule); color: var(--text); }

/* Progress bars */
.poll-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--rule-soft);
  overflow: hidden;
}
.poll-bar-track--sm { height: 5px; }
.poll-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand) 45%, transparent);
  transition: width .35s ease;
}
.poll-bar-fill--mine { background: var(--brand); }

/* Footer totals */
.poll-total     { font-size: 0.78rem; color: var(--text-muted); margin: 8px 0 0; }
.poll-no-votes  { font-size: 0.85rem; color: var(--text-muted); margin: 10px 0 0; font-style: italic; }

/* Empty state */
.poll-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0 10px;
  text-align: center;
}
.poll-empty-icon { font-size: 2rem; }
.poll-empty-text { font-size: 0.88rem; color: var(--text-muted); margin: 0; }

/* Past polls collapsible */
.poll-past { border-top: 1px solid var(--rule-soft); padding-top: 16px; }
.poll-past-toggle {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  outline: none;
}
.poll-past-toggle::-webkit-details-marker { display: none; }
.poll-past-toggle::before { content: '▸ '; }
details[open] .poll-past-toggle::before { content: '▾ '; }

.poll-past-item {
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 14px;
}
.poll-past-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.poll-past-q    { font-size: 0.88rem; font-weight: 600; color: var(--text); line-height: 1.4; }
.poll-past-date { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.poll-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  color: var(--text-muted);
  transition: color .15s;
  flex-shrink: 0;
}
.poll-delete-btn:hover { color: var(--emphasis); }

.poll-past-opt {
  display: grid;
  grid-template-columns: 1fr 120px 36px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.poll-past-opt-label { font-size: 0.82rem; color: var(--text); }
.poll-past-pct       { font-size: 0.78rem; color: var(--text-muted); text-align: right; }

/* Create poll — option input rows */
.poll-opt-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.poll-opt-input-row .prf-input { flex: 1; }
.poll-opt-remove {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.poll-opt-remove:hover { border-color: var(--emphasis); color: var(--emphasis); }

/* Dark mode adjustments */
[data-theme="dark"] .poll-bar-fill {
  background: color-mix(in srgb, var(--brand) 50%, transparent);
}
[data-theme="dark"] .poll-bar-fill--mine { background: var(--brand); }

@media (max-width: 600px) {
  .poll-opt-row    { flex-direction: column; align-items: flex-start; gap: 6px; }
  .poll-opt-right  { width: 100%; justify-content: space-between; }
  .poll-past-opt   { grid-template-columns: 1fr 80px 28px; gap: 6px; }
  .poll-past-opt-label { font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════════════
   LOG MONTHLY ACTUALS modal  (expenses.php)
   ══════════════════════════════════════════════════════ */

/* Overlay */
.dta-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, visibility .18s;
}
.dta-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  align-items: center;
}

/* Modal box */
.dta-modal {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  flex-shrink: 0;
}

/* Header */
.dta-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.dta-modal__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.dta-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: background .15s, color .15s;
}
.dta-modal__close:hover { background: var(--rule-soft); color: var(--ink); }

/* Body */
.dta-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.dta-modal__intro {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* 2-col form row */
.dta-form-row { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.dta-form-row--2 > div { flex: 1 1 200px; }

/* Labels, inputs */
.dta-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dta-input,
.dta-select {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg);
  box-sizing: border-box;
  transition: border-color .15s;
}
.dta-input:focus,
.dta-select:focus { border-color: var(--brand); outline: none; }

/* Tools grid */
.dta-tools-grid {
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 16px;
}
.dta-tool-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  transition: opacity .15s;
}
.dta-tool-row:last-child { border-bottom: none; }
.dta-tool-row--skipped { opacity: .4; }

.dta-tool-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dta-tool-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dta-tool-owner {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dta-tool-inputs {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dta-date-inp {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.8rem;
  color: var(--text-primary);
  background: var(--bg-card);
  width: 138px;
  flex-shrink: 0;
}
.dta-date-inp:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.dta-tool-row--skipped .dta-date-inp {
  opacity: 0.4;
  pointer-events: none;
}
.dta-amt-input {
  width: 90px;
  padding: 5px 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--bg);
  text-align: right;
  transition: border-color .15s;
}
.dta-amt-input:focus { border-color: var(--brand); outline: none; }
.dta-cur-sel {
  padding: 5px 6px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--bg);
  cursor: pointer;
}

/* File upload label */
.dta-file-label {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.dta-file-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg);
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.dta-file-label:hover .dta-file-text { border-color: var(--brand); color: var(--brand); }
.dta-file-inp {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Billing cycle badge on modal rows */
.dta-billing-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1.6;
  align-self: flex-start;
}
.dta-billing--monthly {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}
.dta-billing--nonmonthly {
  background: color-mix(in srgb, #b45309 10%, transparent);
  color: #b45309;
}
[data-theme="dark"] .dta-billing--nonmonthly {
  background: color-mix(in srgb, #fbbf24 12%, transparent);
  color: #fbbf24;
}

/* "Not due monthly" note on pre-skipped rows */
.dta-skip-nonmonthly {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Skip checkbox */
.dta-skip-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.dta-skip-chk { cursor: pointer; }

/* KES total bar */
.dta-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--rule-soft);
  border-radius: 8px;
}
.dta-total-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.dta-total-val   { font-size: 0.95rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }

/* Footer */
.dta-modal__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.dta-msg {
  flex: 1 1 auto;
  font-size: 0.82rem;
  color: var(--emphasis);
  min-width: 0;
}

/* ── Expense card line items (dt_actuals entries) ─── */
.exp-lineitems {
  border-top: 1px solid var(--rule-soft);
  margin-top: 10px;
}
.exp-lineitems__summary {
  padding: 8px 0 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}
.exp-lineitems__summary:hover { color: var(--ink); }
.exp-lineitems__body {
  padding: 6px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.exp-lineitem-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  padding: 3px 0;
  flex-wrap: wrap;
}
.exp-lineitem-tool {
  font-weight: 600;
  color: var(--text);
  flex: 1 1 120px;
}
.exp-lineitem-owner {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.exp-lineitem-amt {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.exp-dl-btn--sm {
  font-size: 0.72rem;
  padding: 2px 7px;
}

/* ── Infrastructure editor card layout ─────────────────────────────────── */
.infra-editor-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.infra-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.infra-name-inp {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
}
.infra-card-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.infra-field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.infra-field-label .dtb-inp,
.infra-field-label .dtb-inp--sel {
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.infra-field-label--full {
  grid-column: 1 / -1;
}
@media (max-width: 700px) {
  .infra-card-fields { grid-template-columns: 1fr 1fr; }
}

/* ── Member stat card — USD primary display ─────────────────────────────── */
.exp-mcard__sublabel {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Responsive */
@media (max-width: 700px) {
  .dta-tool-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dta-tool-inputs { flex-wrap: wrap; }
  .dta-modal__footer { flex-direction: column; align-items: stretch; }
  .dta-modal__footer .dtb-btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Programme page  (programme.php)  — Phase 5A/5B
   ════════════════════════════════════════════════════════════════════════════ */

/* ── KPI tiles ─────────────────────────────────────────────────────────── */
.prog-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 768px) { .prog-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .prog-kpi-row { grid-template-columns: 1fr; } }

.prog-kpi-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.prog-kpi-tile--overdue  { border-left: 3px solid #A8392B; }
.prog-kpi-tile--upcoming { border-left: 3px solid #E8A020; }
.prog-kpi-tile--closed   { border-left: 3px solid #1E7A39; }
.prog-kpi-tile--total    { border-left: 3px solid var(--border); }

.prog-kpi-number {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  flex-shrink: 0;
  min-width: 2.4rem;
}
.prog-kpi-tile--overdue  .prog-kpi-number { color: #A8392B; }
.prog-kpi-tile--upcoming .prog-kpi-number { color: #C07800; }
.prog-kpi-tile--closed   .prog-kpi-number { color: #1E7A39; }

.prog-kpi-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prog-kpi-sub {
  font-size: .72rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* ── Launch Readiness / progress section ────────────────────────────────── */
.prog-readiness {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.prog-readiness-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.prog-readiness-toggle:hover { background: var(--bg); }
.prog-readiness-title {
  font-size: .84rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prog-readiness-pct {
  font-size: .78rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}
.prog-readiness-pct.pct--good { background: rgba(30,122,57,.14); color: #1E7A39; }
.prog-readiness-pct.pct--mid  { background: rgba(200,130,0,.12); color: #9A6000; }
.prog-readiness-pct.pct--low  { background: rgba(168,57,43,.12); color: #A8392B; }
.prog-readiness-meta {
  margin-left: auto;
  font-size: .74rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.prog-readiness-chevron {
  width: 18px; height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.prog-readiness.collapsed .prog-readiness-chevron { transform: rotate(-90deg); }
.prog-readiness-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border-soft);
}
.prog-readiness.collapsed .prog-readiness-body { display: none; }

.prog-readiness-overall { margin-bottom: 14px; padding-top: 14px; }
.prog-overall-bar-wrap {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.prog-overall-bar {
  height: 100%;
  background: #1E7A39;
  border-radius: 4px;
  transition: width .4s ease;
}

.prog-area-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 2px 16px 6px;
  margin-top: 14px;
  box-shadow: var(--card-shadow);
}
.prog-area-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.prog-area-row:last-child { border-bottom: none; }
.prog-area-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.prog-area-name {
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.prog-area-blocked-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #A8392B;
  vertical-align: middle;
  margin-left: 4px;
}
.prog-area-bar-wrap {
  height: 5px;
  background: var(--rule-soft);
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}
.prog-area-bar {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
  opacity: .8;
  transition: width .4s ease;
}
.prog-area-bar--done { opacity: 1; }
.prog-area-nums {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.prog-area-pct {
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink);
  min-width: 28px;
  text-align: right;
}
.prog-area-count {
  font-size: .7rem;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 600px) { .prog-area-name { font-size: .75rem; } }

/* ── Milestones lane ─────────────────────────────────────────────────────── */
.prog-milestones-lane {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #A8392B;
  border-radius: 8px;
  overflow-x: auto;
}
.prog-milestones-label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #A8392B;
  white-space: nowrap;
  padding-top: 3px;
  min-width: 50px;
}
.prog-milestones-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.prog-milestone-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 7px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: .75rem;
  cursor: default;
  max-width: 300px;
}
.prog-milestone-chip.rag-red    { border-color: rgba(168,57,43,.5);  background: rgba(168,57,43,.06); }
.prog-milestone-chip.rag-amber  { border-color: rgba(200,130,0,.4);  background: rgba(200,130,0,.06); }
.prog-milestone-chip.rag-green  { border-color: rgba(30,122,57,.4);  background: rgba(30,122,57,.06); }
.prog-milestone-chip--done      { opacity: .6; }
.prog-milestone-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
}
.prog-milestone-chip.rag-red   .prog-milestone-dot { background: #A8392B; }
.prog-milestone-chip.rag-amber .prog-milestone-dot { background: #C07800; }
.prog-milestone-chip.rag-green .prog-milestone-dot { background: #1E7A39; }
.prog-milestone-ref {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.prog-milestone-text {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prog-milestone-status {
  font-size: .68rem;
  color: var(--text-muted);
  white-space: nowrap;
  padding-left: 2px;
}

/* ── Filter bar ────────────────────────────────────────────────────────── */
.prog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.prog-filter-select {
  font-size: .8rem;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.prog-filter-select:focus { outline: none; border-color: var(--brand); }
.prog-filter-clear {
  font-size: .78rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
}
.prog-filter-clear:hover { color: #A8392B; border-color: #A8392B; }
.prog-filter-count {
  margin-left: auto;
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.prog-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.prog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .83rem;
}
.prog-table thead th {
  background: var(--surface);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}
.prog-table tbody tr { border-bottom: 1px solid var(--border-soft); }
.prog-table tbody tr:last-child { border-bottom: none; }
.prog-table tbody td { padding: 10px 12px; vertical-align: top; }
.prog-table tbody .prog-row:hover { background: var(--surface); }

/* RAG row tinting */
.prog-row.rag-red   { background: rgba(168,57,43,.04); }
.prog-row.rag-amber { background: rgba(200,130,0,.04); }
.prog-table tbody .prog-row.rag-red:hover   { background: rgba(168,57,43,.08); }
.prog-table tbody .prog-row.rag-amber:hover { background: rgba(200,130,0,.08); }

/* Column widths */
.prog-col-rag     { width: 24px; padding: 10px 6px 10px 12px !important; }
.prog-col-ref     { width: 80px; white-space: nowrap; }
.prog-col-item    { min-width: 220px; }
.prog-col-area    { width: 120px; }
.prog-col-pri     { width: 90px; }
.prog-col-owner   { width: 130px; font-size: .78rem; color: var(--text-muted); }
.prog-col-target  { width: 100px; font-size: .78rem; white-space: nowrap; }
.prog-col-status  { width: 110px; }
.prog-col-actions { width: 56px; text-align: right; }

/* RAG dot */
.prog-rag-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.prog-rag-dot.rag-red   { background: #A8392B; }
.prog-rag-dot.rag-amber { background: #C07800; }
.prog-rag-dot.rag-green { background: #1E7A39; }

.prog-target-overdue { color: #A8392B; font-weight: 600; }

/* Badges */
.prog-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.prog-badge--critical { background: rgba(168,57,43,.12); color: #A8392B; }
.prog-badge--high     { background: rgba(192,120,0,.12); color: #9A6000; }
.prog-badge--medium   { background: rgba(30,122,57,.12); color: #1E7A39; }
.prog-badge--low      { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }

.prog-status {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.prog-status--done       { background: rgba(30,122,57,.14); color: #1E7A39; }
.prog-status--inprog     { background: rgba(0,148,217,.12); color: #0070A8; }
.prog-status--blocked    { background: rgba(168,57,43,.12); color: #A8392B; }
.prog-status--deferred   { background: rgba(92,86,78,.1);  color: var(--text-muted); }
.prog-status--notstarted { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }

/* Tier badges */
.prog-tier {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  width: 16px; height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
}
.prog-tier--a { background: rgba(168,57,43,.15); color: #A8392B; }
.prog-tier--b { background: rgba(192,120,0,.15); color: #9A6000; }

.prog-area-tag  { font-size: .74rem; color: var(--text-muted); }
.prog-item-text { line-height: 1.35; }
.prog-has-notes { font-size: .78rem; margin-left: 4px; opacity: .6; }

/* Actions cell */
.prog-actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.prog-edit-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: .78rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.prog-edit-btn:hover { border-color: var(--brand); color: var(--brand); }
.prog-expand-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: .72rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: transform .2s ease, border-color .15s;
  display: inline-block;
}
.prog-expand-btn:hover { border-color: var(--text-muted); color: var(--text); }
.prog-expand-btn.active { transform: rotate(180deg); border-color: var(--brand); color: var(--brand); }

/* Empty state */
.prog-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: .9rem;
}

/* Modal meta strip */
.prog-modal-meta {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.prog-modal-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ── History rows ────────────────────────────────────────────────────────── */
.prog-hist-row { background: var(--bg) !important; }
.prog-hist-cell {
  padding: 0 !important;
  border-bottom: 2px solid var(--border) !important;
}
.prog-hist-timeline {
  padding: 12px 20px 14px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.prog-hist-timeline::before {
  content: '';
  position: absolute;
  left: 52px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: var(--border);
}
.prog-hist-entry {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  position: relative;
}
.prog-hist-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--bg);
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.prog-hist-entry--done .prog-hist-dot { background: #1E7A39; }
.prog-hist-content { flex: 1; min-width: 0; }
.prog-hist-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
}
.prog-hist-change { font-weight: 700; color: var(--text); }
.prog-hist-entry--done .prog-hist-change { color: #1E7A39; }
.prog-hist-by  { color: var(--text-muted); }
.prog-hist-ts  { color: var(--text-muted); margin-left: auto; white-space: nowrap; font-size: .7rem; }
.prog-hist-notes {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
  border-left: 2px solid var(--border-soft);
  padding-left: 8px;
}
.prog-hist-empty {
  padding: 12px 20px;
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* Dark-mode RAG tint tweaks */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prog-row.rag-red   { background: rgba(168,57,43,.07); }
  :root:not([data-theme="light"]) .prog-row.rag-amber { background: rgba(200,130,0,.07); }
  :root:not([data-theme="light"]) .prog-table tbody .prog-row.rag-red:hover   { background: rgba(168,57,43,.12); }
  :root:not([data-theme="light"]) .prog-table tbody .prog-row.rag-amber:hover { background: rgba(200,130,0,.12); }
}
:root[data-theme="dark"] .prog-row.rag-red   { background: rgba(168,57,43,.07); }
:root[data-theme="dark"] .prog-row.rag-amber { background: rgba(200,130,0,.07); }

/* ════════════════════════════════════════════════════════════════════════════
   Dashboard — Launch Readiness card  (dashboard.php)  — Phase 5B
   ════════════════════════════════════════════════════════════════════════════ */
.db-lr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.db-lr-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.db-lr-pct {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  letter-spacing: 0.01em;
}
.db-lr-pct--good { background: rgba(30,122,57,.14);  color: #155C2A; }
.db-lr-pct--mid  { background: rgba(200,130,0,.12);  color: #856404; }
.db-lr-pct--low  { background: rgba(168,57,43,.12);  color: #A8392B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .db-lr-pct--good { background: rgba(91,190,99,.18);  color: #5BBE63; }
  :root:not([data-theme="light"]) .db-lr-pct--mid  { background: rgba(255,193,7,.15);   color: #ffc107; }
  :root:not([data-theme="light"]) .db-lr-pct--low  { background: rgba(168,57,43,.2);    color: #E08070; }
}
:root[data-theme="dark"] .db-lr-pct--good { background: rgba(91,190,99,.18);  color: #5BBE63; }
:root[data-theme="dark"] .db-lr-pct--mid  { background: rgba(255,193,7,.15);   color: #ffc107; }
:root[data-theme="dark"] .db-lr-pct--low  { background: rgba(168,57,43,.2);    color: #E08070; }
.db-lr-bar-wrap {
  height: 6px;
  background: var(--rule-soft);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
.db-lr-bar {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.db-lr-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}
.db-lr-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.db-lr-stat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-lr-dot--done    { background: #1E7A39; }
.db-lr-dot--inprog  { background: #1a73e8; }
.db-lr-dot--blocked { background: #A8392B; }
.db-lr-dot--ns      { background: var(--rule); }
.db-lr-stat-num {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.db-lr-stat--critical {
  margin-left: auto;
  background: rgba(168,57,43,.08);
  border: 1px solid rgba(168,57,43,.2);
  border-radius: 6px;
  padding: 2px 8px;
  color: #A8392B;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .db-lr-stat--critical {
    background: rgba(224,128,112,.1);
    border-color: rgba(224,128,112,.25);
    color: #E08070;
  }
}
:root[data-theme="dark"] .db-lr-stat--critical {
  background: rgba(224,128,112,.1);
  border-color: rgba(224,128,112,.25);
  color: #E08070;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE DASHBOARD  (performance.php)
   All perf-* classes. Brand tokens via CSS vars from hub.css :root.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.perf-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 0;
}
.perf-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.perf-tab:hover {
  color: var(--text);
  background: var(--rule-soft);
}
.perf-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: none;
}
.perf-tab-panel {
  animation: perfFadeIn 0.18s ease;
}
@keyframes perfFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Period row ──────────────────────────────────────────────────────────── */
.perf-period-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.perf-period-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.perf-period-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}
.perf-month-select {
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface, var(--bg));
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.perf-period-badge {
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--rule-soft);
  color: var(--text-muted);
  font-weight: 500;
}

/* ── KPI grid ────────────────────────────────────────────────────────────── */
.perf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.perf-kpi-card {
  background: var(--surface, var(--bg));
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.perf-kpi-icon {
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 4px;
}
.perf-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.perf-kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.perf-kpi-bar-track {
  height: 4px;
  background: var(--rule-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.perf-kpi-bar-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 2px;
  transition: width 0.5s ease;
  min-width: 2px;
}
.perf-kpi-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Generic perf card ───────────────────────────────────────────────────── */
.perf-card {
  background: var(--surface, var(--bg));
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.perf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.perf-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.perf-chart-wrap {
  position: relative;
  width: 100%;
}

/* ── Department section ──────────────────────────────────────────────────── */
.perf-dept-section {
  margin-bottom: 28px;
}
.perf-dept-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.perf-dept-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.perf-dept-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.perf-dept-count {
  font-size: 0.75rem;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--rule-soft);
  color: var(--text-muted);
  font-weight: 600;
  margin-left: auto;
}

/* ── Member grid ─────────────────────────────────────────────────────────── */
.perf-member-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Member card ─────────────────────────────────────────────────────────── */
.perf-member-card {
  background: var(--surface, var(--bg));
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.perf-member-card:hover {
  border-color: var(--brand);
}
.perf-member-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.perf-member-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.perf-member-info {
  flex: 1;
  min-width: 0;
}
.perf-member-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perf-member-role {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perf-member-chevron {
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  line-height: 1;
}
.perf-member-card--open .perf-member-chevron {
  transform: rotate(90deg);
}

/* ── Score chip ──────────────────────────────────────────────────────────── */
.perf-score-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.perf-score-chip small {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1px;
}
.score--exceptional {
  background: rgba(30,122,57,.12);
  color: #1E7A39;
}
.score--exceeds {
  background: rgba(59,130,246,.1);
  color: #3b82f6;
}
.score--meets {
  background: rgba(245,158,11,.1);
  color: #b45309;
}
.score--below {
  background: rgba(168,57,43,.1);
  color: #A8392B;
}
.score--empty {
  background: var(--rule-soft);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .score--exceptional { background: rgba(91,190,99,.12); color: #5BBE63; }
  :root:not([data-theme="light"]) .score--exceeds     { background: rgba(59,130,246,.15); color: #60a5fa; }
  :root:not([data-theme="light"]) .score--meets       { background: rgba(245,158,11,.12); color: #fbbf24; }
  :root:not([data-theme="light"]) .score--below       { background: rgba(224,128,112,.12); color: #E08070; }
}
:root[data-theme="dark"] .score--exceptional { background: rgba(91,190,99,.12); color: #5BBE63; }
:root[data-theme="dark"] .score--exceeds     { background: rgba(59,130,246,.15); color: #60a5fa; }
:root[data-theme="dark"] .score--meets       { background: rgba(245,158,11,.12); color: #fbbf24; }
:root[data-theme="dark"] .score--below       { background: rgba(224,128,112,.12); color: #E08070; }

/* ── Member detail (collapsed/expanded) ─────────────────────────────────── */
.perf-member-detail {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--rule-soft);
}
.perf-member-card--open .perf-member-detail {
  display: block;
  animation: perfFadeIn 0.15s ease;
}

/* ── Member KPI mini row ─────────────────────────────────────────────────── */
.perf-member-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.perf-mkpi {
  text-align: center;
}
.perf-mkpi-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.perf-mkpi-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.perf-mkpi-bar {
  height: 3px;
  background: var(--rule-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.perf-mkpi-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 2px;
  min-width: 2px;
}

/* ── Goals ───────────────────────────────────────────────────────────────── */
.perf-goals-section {
  margin: 12px 0;
}
.perf-section-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.perf-goals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.perf-goal-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.45;
}
.perf-goal-mark {
  flex-shrink: 0;
  font-size: 0.9rem;
  margin-top: 1px;
}
.perf-goal--done {
  color: var(--brand);
}
.perf-goal--done .perf-goal-mark {
  color: var(--brand);
  font-weight: 700;
}
.perf-goal--pending {
  color: var(--text-muted);
}

/* ── Mini chart ──────────────────────────────────────────────────────────── */
.perf-mini-chart-wrap {
  margin: 14px 0 8px;
  height: 80px;
  position: relative;
}
.perf-mini-chart {
  width: 100% !important;
  height: 80px !important;
}

/* ── Highlights row ──────────────────────────────────────────────────────── */
.perf-highlight-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.perf-highlight-block {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text);
}
.perf-highlight-block p {
  margin: 0;
}
.perf-highlight--good {
  background: rgba(30,122,57,.07);
  border-left: 3px solid var(--brand);
}
.perf-highlight--improve {
  background: rgba(59,130,246,.07);
  border-left: 3px solid #3b82f6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .perf-highlight--good    { background: rgba(91,190,99,.08); }
  :root:not([data-theme="light"]) .perf-highlight--improve { background: rgba(96,165,250,.08); }
}
:root[data-theme="dark"] .perf-highlight--good    { background: rgba(91,190,99,.08); }
:root[data-theme="dark"] .perf-highlight--improve { background: rgba(96,165,250,.08); }

/* ── Member actions ──────────────────────────────────────────────────────── */
.perf-member-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}

/* ── Quarterly KPI grid ──────────────────────────────────────────────────── */
.perf-q-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.perf-q-card {
  background: var(--surface, var(--bg));
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
}
.perf-q-card--active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(30,122,57,.08);
}
.perf-q-label {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.perf-q-months {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.perf-q-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.perf-q-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.perf-q-kv {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.perf-q-kl {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.current-chip {
  font-size: 0.65rem;
  background: var(--brand);
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Charts 2-col row ────────────────────────────────────────────────────── */
.perf-charts-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

/* ── Quarterly table ─────────────────────────────────────────────────────── */
.perf-table-scroll {
  overflow-x: auto;
}
.perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.perf-table th,
.perf-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.perf-table th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--rule-soft);
}
.perf-table tbody tr:last-child td {
  border-bottom: none;
}
.perf-table tbody tr:hover td {
  background: var(--rule-soft);
}
.perf-table .tabnum {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Annual scorecards grid ──────────────────────────────────────────────── */
.perf-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.perf-sc-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface, var(--bg));
}
.perf-sc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.perf-sc-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.perf-sc-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.perf-sc-dept {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
  line-height: 1.3;
}
.perf-sc-score {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 4px 8px;
}
.perf-sc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.perf-sc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.perf-sc-sv {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.perf-sc-sl {
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ── Log entry modal form rows ───────────────────────────────────────────── */
.perf-form-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.perf-form-row4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.perf-score-guide {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .perf-q-grid       { grid-template-columns: repeat(2, 1fr); }
  .perf-charts-row2  { grid-template-columns: 1fr; }
  .perf-member-kpis  { grid-template-columns: repeat(2, 1fr); }
  .perf-form-row4    { grid-template-columns: repeat(2, 1fr); }
  .perf-highlight-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .perf-tab-bar      { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .perf-tab          { padding: 8px 14px; font-size: 0.82rem; white-space: nowrap; }
  .perf-q-grid       { grid-template-columns: 1fr; }
  .perf-kpi-grid     { grid-template-columns: repeat(2, 1fr); }
  .perf-member-kpis  { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .perf-form-row2    { grid-template-columns: 1fr; }
  .perf-scorecard-grid { grid-template-columns: 1fr; }
  .perf-member-header { flex-wrap: wrap; }
  .perf-score-chip   { order: 3; }
}

/* ── Dashboard: My Tasks + Mail side-by-side row ─────────────────── */
.db-tasks-mail-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.db-tasks-mail-row > .card {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
/* Stack vertically on small screens */
@media (max-width: 700px) {
  .db-tasks-mail-row {
    flex-direction: column;
  }
  .db-tasks-mail-row > .card {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIL — full-page mail client
   ════════════════════════════════════════════════════════════════════════════ */

/* Account chip in page header */
.mail-account-chip {
  display:inline-flex; align-items:center;
  padding:.25rem .7rem; border-radius:100px;
  font-size:.78rem; font-weight:500;
  background:var(--bg-alt); border:1px solid var(--rule-soft);
  color:var(--text-muted);
}

/* No-credentials empty state */
.mail-no-creds {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1rem;
  padding:4rem 2rem; text-align:center;
  border:1px solid var(--rule-soft); border-radius:10px;
  background:var(--bg-alt);
}
.mail-no-creds-icon { font-size:2.5rem; }
.mail-no-creds h2   { font-size:1.2rem; font-weight:700; color:var(--ink); margin:0; }
.mail-no-creds p    { font-size:.875rem; color:var(--text-muted); max-width:36ch; margin:0; }

/* ── Three-pane shell ─────────────────────────────────────────────────────── */
.mail-shell {
  display:grid;
  grid-template-columns:176px 300px 1fr;
  grid-template-rows:1fr;
  height:calc(100vh - 160px);
  min-height:520px;
  border:1px solid var(--rule-soft);
  border-radius:10px;
  overflow:hidden;
  background:var(--bg);
}

/* ── Folder sidebar ───────────────────────────────────────────────────────── */
.mail-folders {
  display:flex; flex-direction:column; gap:2px;
  padding:.75rem .5rem;
  background:var(--bg-alt);
  border-right:1px solid var(--rule-soft);
  overflow-y:auto;
}

/* Folder nav buttons — match hub filter tab style */
.mail-folder-btn {
  display:flex; align-items:center; gap:.5rem;
  width:100%; padding:.5rem .75rem;
  border:none; border-radius:7px;
  background:transparent;
  font-family:inherit; font-size:.8375rem; font-weight:500;
  color:var(--text-muted);
  cursor:pointer; text-align:left;
  transition:background .13s, color .13s;
  outline:none;
}
.mail-folder-btn:hover {
  background:var(--rule-soft); color:var(--ink);
}
.mail-folder-btn:focus-visible {
  box-shadow:0 0 0 3px rgba(30,122,57,.2);
}
.mail-folder-btn.active {
  background:var(--brand); color:#fff;
  font-weight:600;
}
.mail-folder-icon {
  font-size:.95em; flex-shrink:0;
}
.mail-folder-label {
  flex:1;
}
.mail-folder-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.2rem; height:1.2rem; padding:0 .3rem;
  border-radius:100px; font-size:.68rem; font-weight:700;
  background:rgba(255,255,255,.22); color:inherit;
}
.mail-folder-btn:not(.active) .mail-folder-badge {
  background:var(--brand); color:#fff;
}

/* ── Message list pane ────────────────────────────────────────────────────── */
.mail-list-pane {
  display:flex; flex-direction:column;
  border-right:1px solid var(--rule-soft);
  overflow:hidden;
}
.mail-list-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem; border-bottom:1px solid var(--rule-soft);
  background:var(--bg-alt); flex-shrink:0;
}
.mail-folder-title {
  font-size:.8125rem; font-weight:700; color:var(--ink);
}
.mail-refresh-btn {
  border:none; background:none; cursor:pointer;
  font-size:1.05rem; color:var(--text-muted); padding:.1rem .25rem;
  border-radius:5px; line-height:1; transition:color .13s, background .13s;
}
.mail-refresh-btn:hover { color:var(--brand); background:var(--rule-soft); }

.mail-list {
  flex:1; overflow-y:auto;
}

.mail-loading,
.mail-empty,
.mail-error {
  padding:2rem 1rem; text-align:center;
  font-size:.83rem; color:var(--text-muted);
}
.mail-error { color:var(--oxblood); }

/* Message row */
.mail-row {
  display:flex; align-items:flex-start; gap:.6rem;
  width:100%; padding:.75rem 1rem;
  border:none; border-bottom:1px solid var(--rule-soft);
  background:transparent;
  font-family:inherit; text-align:left; cursor:pointer;
  transition:background .1s;
  outline:none;
}
.mail-row:hover                  { background:var(--bg-alt); }
.mail-row--active                { background:var(--rule-soft) !important; }
.mail-row:focus-visible          { box-shadow:inset 0 0 0 2px rgba(30,122,57,.25); }

.mail-row-dot {
  flex-shrink:0; width:.5rem; height:.5rem; border-radius:50%;
  margin-top:.3rem;
  background:transparent;
}
.mail-row--unread .mail-row-dot  { background:var(--brand); }

.mail-row-main { flex:1; min-width:0; }
.mail-row-meta {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.5rem; margin-bottom:.15rem;
}
.mail-row-from {
  font-size:.82rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mail-row--unread .mail-row-from { color:var(--brand); }
.mail-row-date {
  font-size:.72rem; color:var(--text-muted); flex-shrink:0; white-space:nowrap;
}
.mail-row-subject {
  font-size:.8rem; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mail-row--unread .mail-row-subject { color:var(--ink); font-weight:500; }
.mail-row-flag { color:#e6b800; font-size:.9rem; align-self:center; }

/* ── Read pane ────────────────────────────────────────────────────────────── */
.mail-read-pane {
  display:flex; flex-direction:column;
  overflow:hidden;
}
.mail-read-placeholder {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.75rem;
  text-align:center; color:var(--text-muted);
  padding:2rem;
}
.mail-read-placeholder-icon { font-size:2.25rem; }
.mail-read-placeholder p    { font-size:.85rem; margin:0; }

.mail-read-wrap {
  flex:1; overflow-y:auto; display:flex; flex-direction:column;
}
.mail-read-header {
  padding:1.25rem 1.5rem 1rem;
  border-bottom:1px solid var(--rule-soft);
  flex-shrink:0;
}
.mail-read-subject {
  font-size:1.1rem; font-weight:700; color:var(--ink);
  margin:0 0 .4rem;
}
.mail-read-from, .mail-read-date {
  font-size:.8rem; color:var(--text-muted); margin:.1rem 0;
}
.mail-read-from strong { color:var(--ink); }
.mail-read-actions {
  display:flex; gap:.5rem; margin-top:.85rem;
}
.mail-attachments {
  padding:.65rem 1.5rem;
  border-bottom:1px solid var(--rule-soft);
  font-size:.8rem; color:var(--text-muted);
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
}
.mail-attach-chip {
  display:inline-flex; align-items:center; gap:.2rem;
  padding:.2rem .55rem; border-radius:5px;
  background:var(--bg-alt); border:1px solid var(--rule-soft);
  font-size:.78rem; color:var(--ink);
}
.mail-attach-size { color:var(--text-muted); }

/* External images blocked banner */
.mail-images-banner {
  padding:.5rem 1.5rem;
  background:var(--bg-alt);
  border-bottom:1px solid var(--rule-soft);
  font-size:.8rem; color:var(--text-muted);
  display:flex; align-items:center; gap:.5rem;
}
.mail-show-images-btn {
  background:none; border:none; padding:0;
  color:var(--brand); font-size:.8rem;
  cursor:pointer; text-decoration:underline;
}
.mail-show-images-btn:hover { color:var(--brand-hover); }

.mail-read-body {
  flex:1; padding:1.25rem 1.5rem;
  font-size:.875rem; line-height:1.65; color:var(--ink);
  overflow-y:auto;
}
.mail-read-body a        { color:var(--brand); }
.mail-read-body blockquote {
  border-left:3px solid var(--rule); padding-left:1rem;
  margin:.75rem 0; color:var(--text-muted); font-style:italic;
}

/* Plain-text email body rendered in <pre> */
.mail-plain-text {
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  margin: 0;
  background: transparent;
}

/* ── Compose modal — hub-pattern rich composer ────────────────────────────── */
.mail-compose-modal {
  width:min(680px,96vw);
  max-height:92vh;
  display:flex; flex-direction:column;
  padding:0; overflow:hidden;
}

/* Header wrap — gives the hub-modal-header its own padding zone */
.compose-head-wrap {
  padding:1.1rem 1.4rem .9rem;
  border-bottom:1px solid var(--rule-soft);
  flex-shrink:0;
}
.compose-head-wrap .hub-modal-header { margin-bottom:0; }

/* Address fields section */
.compose-address-section {
  padding:.85rem 1.4rem .6rem;
  border-bottom:1px solid var(--rule-soft);
  flex-shrink:0;
}
.compose-address-section .prf-field { margin-bottom:10px; }
.compose-address-section .prf-field:last-child { margin-bottom:.2rem; }
.compose-to-label-row {
  display:flex; align-items:center; margin-bottom:4px;
}
.compose-to-label-row .prf-label { margin-bottom:0; }

/* Cc / Bcc toggle chips inside the To label */
.compose-cc-btns { display:flex; gap:.25rem; margin-left:auto; }
.compose-cc-toggle {
  border:1px solid var(--rule); background:none; padding:.1rem .4rem;
  font-size:.72rem; font-weight:700; color:var(--text-muted);
  border-radius:4px; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
  text-transform:uppercase; letter-spacing:.03em;
}
.compose-cc-toggle:hover { background:var(--bg-alt); color:var(--ink); }
.compose-cc-toggle.active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Formatting toolbar — matches notes-fmt-toolbar style */
.compose-toolbar {
  display:flex; align-items:center; gap:3px;
  padding:.4rem .9rem;
  border-bottom:1px solid var(--rule-soft);
  flex-shrink:0; flex-wrap:wrap;
  background:var(--bg-alt);
}
.compose-fmt-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:26px; padding:0 .3rem;
  background:var(--surface-alt, rgba(0,0,0,.04));
  border:1px solid var(--rule); border-radius:4px;
  font-family:inherit; font-size:.82rem; color:var(--ink);
  cursor:pointer; transition:background .12s, color .12s, border-color .12s;
}
.compose-fmt-btn:hover  { background:var(--brand); color:#fff; border-color:var(--brand); }
.compose-fmt-btn.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.compose-fmt-btn b { font-weight:900; }
.compose-fmt-btn i { font-style:italic; }
.compose-fmt-sep {
  width:1px; height:16px; background:var(--rule);
  margin:0 .2rem; flex-shrink:0;
}
.compose-fmt-hint {
  font-size:.72rem; color:var(--text-muted); margin-left:.4rem;
}
.compose-fmt-select {
  height:26px; padding:0 .35rem;
  border:1px solid var(--rule); border-radius:4px;
  background:var(--surface-alt, rgba(0,0,0,.04));
  font-family:inherit; font-size:.78rem; color:var(--ink);
  cursor:pointer;
}

/* Scrollable middle area — body + signature + attachments scroll as one unit;
   toolbar above and footer below are anchored outside this container */
.compose-scroll-area {
  flex:1; min-height:0; overflow-y:auto;
}

/* Editable body — styled like prf-input / prf-textarea */
.compose-body {
  min-height:140px;
  overflow-y:visible; /* parent .compose-scroll-area handles the scroll */
  margin:.75rem 1.4rem;
  padding:.75rem .9rem;
  font-size:.875rem; line-height:1.65; color:var(--ink);
  outline:none;
  background:var(--bg);
  border:1px solid var(--rule-soft); border-radius:7px;
  transition:border-color .2s, box-shadow .2s;
}
.compose-body:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(30,122,57,.12);
}
.compose-body:empty::before {
  content:attr(data-placeholder);
  color:var(--text-muted); pointer-events:none;
}
.compose-body ul, .compose-body ol { padding-left:1.5rem; }
.compose-body a { color:var(--brand); }

/* Signature bar + picker */
.compose-sig-bar {
  border-top:1px solid var(--rule-soft);
  padding:.3rem 1.1rem; flex-shrink:0;
}
.compose-sig-toggle-btn {
  border:none; background:none; padding:.25rem .5rem;
  font-size:.78rem; color:var(--text-muted); cursor:pointer;
  border-radius:5px; display:inline-flex; align-items:center; gap:.4rem;
  transition:background .12s, color .12s;
}
.compose-sig-toggle-btn:hover { background:var(--bg-alt); color:var(--ink); }
.compose-sig-active-name { color:var(--brand); font-weight:600; }
.compose-sig-picker {
  border-top:1px solid var(--rule-soft);
  padding:.5rem 1.1rem; flex-shrink:0;
  display:flex; flex-direction:column; gap:.4rem;
  max-height:200px; overflow-y:auto;
}
.compose-sig-picker.hidden { display:none; }
.compose-sig-opt {
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.45rem .6rem; border-radius:7px; cursor:pointer;
  border:1px solid transparent; transition:border-color .13s, background .13s;
}
.compose-sig-opt:hover { background:var(--bg-alt); }
.compose-sig-opt.selected { border-color:var(--brand); background:color-mix(in srgb, var(--brand) 6%, transparent); }
.compose-sig-opt input[type=radio] { margin-top:.15rem; accent-color:var(--brand); flex-shrink:0; }
.compose-sig-opt-body { flex:1; min-width:0; }
.compose-sig-opt-name { font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:.3rem; }
.compose-sig-preview {
  font-size:.72rem; color:var(--text-muted);
  border:1px solid var(--rule-soft); border-radius:5px;
  padding:.35rem .6rem; background:var(--bg-alt);
  max-height:72px; overflow:hidden; pointer-events:none;
}
.compose-sig-preview * { font-size:.72rem !important; line-height:1.4 !important; }

/* Attachment chips */
.compose-attach-list {
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:0 1.4rem .4rem;
}
.compose-attach-list:empty { display:none; }
.compose-attach-chip {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .5rem; border-radius:5px;
  background:var(--bg-alt); border:1px solid var(--rule-soft);
  font-size:.77rem; color:var(--ink);
}
.compose-attach-chip-remove {
  border:none; background:none; padding:0 .1rem;
  font-size:.8rem; color:var(--text-muted); cursor:pointer; line-height:1;
}
.compose-attach-chip-remove:hover { color:var(--danger, #c0392b); }

/* Footer / action bar */
.compose-footer {
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem 1.4rem .9rem;
  border-top:1px solid var(--rule-soft);
  flex-shrink:0; flex-wrap:wrap;
}
.compose-footer .inline-flash { font-size:.8rem; flex:1; text-align:center; }
.compose-footer .prf-btn { padding:8px 20px; }
.compose-attach-label {
  display:inline-flex; align-items:center; gap:.3rem;
  border:1px solid var(--rule); background:none; padding:.3rem .65rem;
  font-size:.82rem; color:var(--text-muted); cursor:pointer;
  border-radius:6px; transition:background .12s, border-color .12s;
}
.compose-attach-label:hover { background:var(--bg-alt); }
.compose-attach-label-text { font-size:.78rem; font-weight:600; }
.compose-discard-btn {
  border:none; background:none; padding:.35rem .55rem;
  font-size:1rem; color:var(--text-muted); cursor:pointer;
  border-radius:6px; transition:background .12s, color .12s;
}
.compose-discard-btn:hover { background:color-mix(in srgb, #c0392b 10%, transparent); color:#c0392b; }

/* ── Signature management (profile page) ────────────────────────────────── */
.sig-slots { display:flex; flex-direction:column; gap:1rem; }
.sig-slot {
  border:1px solid var(--rule-soft); border-radius:8px;
  overflow:hidden;
}
.sig-slot-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem; background:var(--bg-alt);
  border-bottom:1px solid var(--rule-soft);
}
.sig-slot-num { font-size:.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.sig-slot-label {
  flex:1; font-family:inherit; font-size:.9rem; font-weight:600;
  color:var(--ink); padding:0 .75rem;
}
.sig-slot-sub {
  font-size:.72rem; color:var(--text-muted); font-weight:400; margin-left:.3rem;
}
.sig-slot-body { padding:.75rem 1rem; }
.sig-html-editor {
  width:100%; min-height:96px; resize:vertical;
  border:1px solid var(--rule-soft); border-radius:6px;
  padding:.6rem .75rem; font-family:monospace; font-size:.78rem;
  color:var(--ink); background:var(--bg); outline:none;
  transition:border-color .13s; box-sizing:border-box;
}
.sig-html-editor:focus { border-color:var(--brand); }
.sig-preview-label { font-size:.75rem; color:var(--text-muted); margin:.6rem 0 .25rem; font-weight:600; }
.sig-live-preview {
  border:1px solid var(--rule-soft); border-radius:6px;
  padding:.6rem .75rem; min-height:40px;
  background:var(--bg-alt); font-size:.83rem;
}
.sig-slot-footer {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem .7rem;
}
.sig-slot-flash { font-size:.78rem; flex:1; }

@media (max-width:700px) {
  .mail-compose-modal { max-height:98vh; }
  .compose-body { min-height:70px; margin:.5rem .75rem; }
  .compose-address-section { padding-left:.75rem; padding-right:.75rem; }
  .compose-head-wrap { padding-left:.75rem; padding-right:.75rem; }
  .compose-footer, .compose-attach-list { padding-left:.75rem; padding-right:.75rem; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .mail-shell {
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr;
    height:auto; min-height:unset;
  }
  .mail-folders {
    flex-direction:row; flex-wrap:wrap;
    border-right:none; border-bottom:1px solid var(--rule-soft);
    padding:.5rem;
  }
  .mail-folder-btn { width:auto; }
  .mail-list-pane  { border-right:none; border-bottom:1px solid var(--rule-soft); max-height:320px; }
  .mail-read-pane  { min-height:300px; }
}

/* ── Inline flash (global utility — profile.php + mail.php) ─────────────── */
.inline-flash {
  font-size: .85rem;
  min-height: 1.2em;
  display: none;
}
.inline-flash.ok,
.inline-flash.flash-ok  { color: var(--brand); display: inline-block; }
.inline-flash.err,
.inline-flash.flash-err { color: #A8392B;      display: inline-block; }

/* ── Profile page ────────────────────────────────────────────────────────── */
.profile-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 720px) {
  .profile-layout { grid-template-columns: 1fr; }
}

.profile-left {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--rule);
  background: var(--rule-soft);
}
.avatar-upload-label {
  display: inline-block;
  margin-top: .25rem;
  cursor: pointer;
  font-size: .85rem;
  color: var(--brand);
  font-weight: 600;
  padding: .35rem .9rem;
  border: 1px solid var(--brand);
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.avatar-upload-label:hover { background: var(--brand); color: #fff; }
#avatar-file-input { display: none; }
.avatar-upload-status { font-size: .8rem; min-height: 1.2em; }
.avatar-upload-status.ok  { color: var(--brand); }
.avatar-upload-status.err { color: #A8392B; }
.profile-name { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0; }

.profile-right { display: flex; flex-direction: column; gap: 1.5rem; }

.profile-section {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.5rem;
}
.profile-section h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule-soft);
}

/* Password strength */
.pw-strength-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--rule-soft);
  margin-top: .4rem;
  overflow: hidden;
}
.pw-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width .2s, background .2s;
}
.pw-strength-label {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .25rem;
  min-height: 1em;
}

/* Profile form helpers */
.prf-field-static { font-size: .95rem; color: var(--ink); padding: .4rem 0; }
.prf-form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }

/* Read-only info grid */
.prf-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1.25rem;
  align-items: baseline;
  margin-bottom: 16px;
}
.prf-info-grid .prf-info-label { font-size: .82rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.prf-info-grid .prf-info-value { font-size: .92rem; color: var(--ink); }
.prf-info-grid .prf-info-note  { font-size: .78rem; color: var(--text-muted); grid-column: 2; margin-top: -.25rem; }
.prf-info-value--connected { color: var(--brand) !important; }

/* Context spacing — email settings / signatures notes and forms */
#email-settings  > .prf-note { margin-bottom: 16px; }
#email-signatures > .prf-note { margin-bottom: 20px; }
#form-mail-addr { margin-bottom: 20px; }

/* Signature slot — delete button flush right */
.sig-delete-btn { margin-left: auto; }

/* Empty signature preview placeholder */
.prf-sig-empty { color: var(--text-muted); font-size: .82rem; }

@media (max-width: 480px) {
  .prf-info-grid { grid-template-columns: 1fr; gap: .25rem; }
  .prf-info-grid .prf-info-label { font-size: .78rem; }
  .prf-info-grid .prf-info-note  { grid-column: 1; }
  .profile-section { padding: 1rem; }
  .profile-left    { padding: 1.5rem 1rem; }
  .prf-form-actions { flex-wrap: wrap; }
}

/* ── Preview page ────────────────────────────────────────────────────────── */
/* Full-height iframe layout — .main becomes a flex column filling 100vh     */
body:has(.preview-content) .main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
body:has(.preview-content) .main > .content {
  flex: 1;
  min-height: 0;
}
/* Override hub.css content padding for this page only */
.preview-content.content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

/* Toolbar */
.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: var(--card-bg);
  flex-shrink: 0;
  gap: 1rem;
  flex-wrap: wrap;
}
.preview-toolbar-left {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.preview-label {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.preview-url-badge {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: var(--text-muted);
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 20px;
  padding: .2rem .65rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.preview-toolbar-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* URL editor strip */
.preview-url-editor {
  padding: .875rem 1.25rem;
  background: var(--rule-soft);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.preview-url-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 640px;
}
.preview-url-input-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.preview-url-input-row .form-control {
  flex: 1;
  min-width: 220px;
}
.preview-url-hint {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 0;
}

/* Loading overlay */
.preview-frame-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: var(--bg);
  color: var(--text-muted);
  font-size: .9375rem;
  pointer-events: none;
  transition: opacity .3s;
}
.preview-frame-loading.hidden { opacity: 0; }
.preview-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--rule);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Small button size modifier (global utility) */
.btn-sm {
  padding: 5px 12px !important;
  font-size: .8rem !important;
}

/* ── Timetable page ────────────────────────────────────────────────────────── */
.page-inner { padding: 28px 24px; }

/* Header */
.tt-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.tt-title  { font-size:1.25rem; font-weight:700; color:var(--ink); margin:0; }
.tt-week-nav { display:flex; align-items:center; gap:8px; }
.tt-week-label {
  font-size:.8125rem; font-weight:600; color:var(--text-muted);
  background:var(--rule-soft); border:1px solid var(--rule);
  border-radius:8px; padding:6px 14px;
}

/* Tabs */
.tt-tabs { display:flex; gap:4px; border-bottom:2px solid var(--rule); margin-bottom:28px; }
.tt-tab  {
  padding:8px 18px; font-size:.875rem; font-weight:600; color:var(--text-muted);
  cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent; margin-bottom:-2px; transition:.15s;
}
.tt-tab.active { color:var(--brand); border-bottom-color:var(--brand); }
.tt-tab:hover:not(.active) { color:var(--ink); }
.tt-panel { display:none; }
.tt-panel.active { display:block; }

/* Tool booking cards */
.cards-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-tool-name {
  display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:700; color:var(--ink);
}
.card-tool-icon {
  font-size:1.2rem; width:32px; height:32px; border-radius:8px;
  background:color-mix(in srgb,var(--brand) 10%,transparent);
  display:flex; align-items:center; justify-content:center;
}
.card-empty {
  text-align:center; padding:20px 0; color:var(--text-muted);
  font-size:.8125rem; border:1.5px dashed var(--rule); border-radius:8px;
}
.card-empty-icon { font-size:1.5rem; display:block; margin-bottom:6px; opacity:.4; }
.booking-list  { display:flex; flex-direction:column; gap:8px; }
.booking-item  {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:8px; background:var(--rule-soft); border-radius:8px; padding:10px 12px;
}
.booking-item.mine { background:color-mix(in srgb,var(--brand) 10%,transparent); }
.booking-meta  { flex:1; min-width:0; }
.booking-slot  { font-size:.8125rem; font-weight:700; color:var(--ink); }
.booking-who   { font-size:.75rem; color:var(--brand); font-weight:600; margin-top:2px; }
.booking-note  {
  font-size:.75rem; color:var(--text-muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Cancel and nav buttons */
.btn-cancel {
  background:none; border:none; cursor:pointer; color:var(--text-muted);
  font-size:.75rem; padding:2px 6px; border-radius:5px; flex-shrink:0; margin-top:1px;
}
.btn-cancel:hover { color:#A8392B; background:color-mix(in srgb,#A8392B 8%,transparent); }
.nav-btn {
  background:var(--rule-soft); border:1px solid var(--rule); border-radius:7px;
  padding:6px 12px; font-size:.8rem; font-weight:600; cursor:pointer;
  color:var(--text-muted); text-decoration:none; display:inline-block;
}
.nav-btn:hover { border-color:var(--brand); color:var(--brand); }

/* Flash messages (base + error — success already defined globally) */
.flash {
  padding:10px 16px; border-radius:8px; font-size:.875rem; font-weight:500; margin-bottom:20px;
}
.flash-error { background:color-mix(in srgb,#A8392B 10%,transparent); color:#A8392B; }

/* Availability cards — max 4 per row */
.avail-cards {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media (max-width:1100px) { .avail-cards { grid-template-columns:repeat(3,1fr); } }
@media (max-width:780px)  { .avail-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px)  { .avail-cards { grid-template-columns:1fr; } }
.avail-card {
  background:var(--card-bg); border:1px solid var(--rule);
  border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:14px;
}
.avail-card-head {
  display:flex; align-items:center; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--rule);
}
.avail-avatar {
  width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff;
  font-size:.72rem; font-weight:800; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:.03em; text-transform:uppercase;
}
.avail-person-info  { flex:1; min-width:0; }
.avail-person-name  {
  font-size:.9rem; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.avail-you-chip {
  display:inline-block; font-size:.65rem; font-weight:700;
  color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,transparent);
  border-radius:4px; padding:1px 5px; margin-left:4px; vertical-align:middle;
}
.avail-person-role  { font-size:.72rem; color:var(--text-muted); margin-top:2px; text-transform:capitalize; }
.avail-days         { display:flex; flex-direction:column; gap:7px; }
.avail-day-row      { display:flex; align-items:center; gap:8px; }
.avail-day-label    { display:flex; align-items:baseline; gap:8px; flex-shrink:0; min-width:68px; }
.avail-day-name     { font-size:.8rem; font-weight:700; color:var(--text-muted); min-width:28px; }
.avail-day-date     { font-size:.8rem; font-weight:400; color:var(--text-muted); opacity:.6; min-width:20px; }
.avail-badge {
  display:inline-flex; align-items:center; gap:3px; padding:2px 8px;
  border-radius:10px; font-size:.72rem; font-weight:700;
}
.av-yes     { background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand); }
.av-partial { background:color-mix(in srgb,#D97706 14%,transparent); color:#D97706; }
.av-no      { background:color-mix(in srgb,var(--text-muted) 10%,transparent); color:var(--text-muted); }
.av-unset   { color:var(--text-muted); opacity:.35; font-size:.75rem; }
.avail-set-btn {
  margin-left:auto; background:none; border:1px solid var(--rule);
  border-radius:6px; padding:2px 8px; font-size:.7rem; cursor:pointer;
  color:var(--text-muted); font-family:inherit; white-space:nowrap;
}
.avail-set-btn:hover { border-color:var(--brand); color:var(--brand); }

/* Timetable modal (solid overlay, distinct from .hub-modal) */
.modal-overlay {
  position:fixed; inset:0; background-color:var(--overlay-bg);
  z-index:9000; display:flex; align-items:center; justify-content:center; padding:16px;
  visibility:hidden; opacity:0; transition:opacity .15s ease,visibility .15s ease;
}
.modal-overlay.open { visibility:visible; opacity:1; }
.modal {
  background-color:var(--card-bg); border-radius:14px; padding:24px;
  width:100%; max-width:400px; box-shadow:0 8px 40px rgba(0,0,0,.28); position:relative;
}
.modal h3 { margin:0 0 18px; font-size:1rem; font-weight:700; color:var(--ink); }

/* Generic form row (label + input) */
.form-row { margin-bottom:14px; }
.form-row label {
  display:block; font-size:.78rem; font-weight:600; color:var(--text-muted);
  margin-bottom:5px; letter-spacing:.02em; text-transform:uppercase;
}
.form-row select,
.form-row input,
.form-row textarea {
  width:100%; box-sizing:border-box; padding:9px 11px; border-radius:8px;
  border:1px solid var(--rule); background:var(--input-bg);
  color:var(--ink); font-size:.875rem; font-family:inherit;
}
.form-row select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C564E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px;
}
.form-row textarea { resize:vertical; min-height:64px; }
.checkbox-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.checkbox-row label {
  display:flex; align-items:center; gap:4px; font-size:.78rem; font-weight:500;
  background:var(--rule-soft); border:1px solid var(--rule); border-radius:6px;
  padding:4px 8px; cursor:pointer; color:var(--ink);
  text-transform:none; letter-spacing:0;
}
.checkbox-row input[type=checkbox] { width:auto; accent-color:var(--brand); margin:0; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
/* Label sub-text — muted optional hint inside a form label */
.label-note { font-weight:400; opacity:.6; text-transform:none; }

/* ── Reminders page ───────────────────────────────────────────────────────── */

/* ── Reminders ─────────────────────────────────────────────── */
.rem-page-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
}
.rem-page-sub {
    font-size: 0.83rem;
    color: var(--text-muted);
    margin: 5px 0 0;
}
.rem-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

/* Summary strip */
.rem-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.rem-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 12px 18px;
    min-width: 110px;
}
.rem-tile-n {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rem-tile-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.4;
}
.rem-tile.t-overdue .rem-tile-n { color: #A8392B; }
.rem-tile.t-urgent  .rem-tile-n { color: #C85A2A; }
.rem-tile.t-warning .rem-tile-n { color: #927010; }
.rem-tile.t-ok      .rem-tile-n { color: var(--brand); }

/* Section heading */
.rem-section-hd {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Card grid */
.rem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}
.rem-card {
    background: var(--card-bg);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--rule);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s;
}
.rem-card:hover { box-shadow: 0 2px 14px rgba(0,0,0,.07); }
.rem-card.u-overdue { border-left-color: #A8392B; }
.rem-card.u-urgent  { border-left-color: #C85A2A; }
.rem-card.u-warning { border-left-color: #927010; }
.rem-card.u-ok      { border-left-color: var(--brand); }
.rem-card.dismissed { opacity: .55; border-left-color: var(--rule); }

.rem-card-title {
    font-weight: 700;
    font-size: 0.93rem;
    color: var(--ink);
    line-height: 1.35;
}
.rem-card-desc {
    font-size: 0.845rem;
    color: var(--text-muted);
    line-height: 1.6;
    white-space: pre-wrap;
}
.rem-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.rem-cat {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--rule-soft);
    color: var(--text-muted);
}
.rem-cat.c-infrastructure { background: #E5F1FB; color: #155E9A; }
.rem-cat.c-security       { background: #FDEDEC; color: #A8392B; }
.rem-cat.c-sprint         { background: #EAF7ED; color: #1A6B32; }
.rem-cat.c-finance        { background: #FDF5DC; color: #7A5810; }
.rem-urg {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
}
.rem-urg.u-overdue { background: #FDEDEC; color: #A8392B; }
.rem-urg.u-urgent  { background: #FDECE0; color: #C85A2A; }
.rem-urg.u-warning { background: #FDF5DC; color: #7A5810; }
.rem-urg.u-ok      { background: #EAF7ED; color: #1A6B32; }

.rem-due {
    font-size: 0.77rem;
    color: var(--text-muted);
}
.rem-due strong {
    color: var(--ink);
    font-weight: 600;
}
.rem-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Dark mode badge overrides */
:root[data-theme="dark"] .rem-cat.c-infrastructure { background: #173350; color: #7AB8E8; }
:root[data-theme="dark"] .rem-cat.c-security       { background: #38191A; color: #E08070; }
:root[data-theme="dark"] .rem-cat.c-sprint         { background: #162E1C; color: #5BBE63; }
:root[data-theme="dark"] .rem-cat.c-finance        { background: #2E2200; color: #D4A840; }
:root[data-theme="dark"] .rem-urg.u-overdue  { background: #38191A; color: #E08070; }
:root[data-theme="dark"] .rem-urg.u-urgent   { background: #351A0D; color: #E0896A; }
:root[data-theme="dark"] .rem-urg.u-warning  { background: #2E2200; color: #D4A840; }
:root[data-theme="dark"] .rem-urg.u-ok       { background: #162E1C; color: #5BBE63; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rem-cat.c-infrastructure { background: #173350; color: #7AB8E8; }
    :root:not([data-theme="light"]) .rem-cat.c-security       { background: #38191A; color: #E08070; }
    :root:not([data-theme="light"]) .rem-cat.c-sprint         { background: #162E1C; color: #5BBE63; }
    :root:not([data-theme="light"]) .rem-cat.c-finance        { background: #2E2200; color: #D4A840; }
    :root:not([data-theme="light"]) .rem-urg.u-overdue  { background: #38191A; color: #E08070; }
    :root:not([data-theme="light"]) .rem-urg.u-urgent   { background: #351A0D; color: #E0896A; }
    :root:not([data-theme="light"]) .rem-urg.u-warning  { background: #2E2200; color: #D4A840; }
    :root:not([data-theme="light"]) .rem-urg.u-ok       { background: #162E1C; color: #5BBE63; }
}

/* Empty state */
.rem-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
}
.rem-empty-icon { font-size: 2.2rem; opacity: .35; margin-bottom: 14px; }
.rem-empty h3   { font-size: .95rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.rem-empty p    { font-size: .83rem; margin: 0; }

/* Dismissed toggle */
.toggle-link {
    font-size: .78rem;
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
}
.toggle-link:hover { text-decoration: underline; }

/* Modal form helpers */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label  { display: block; font-size: .81rem; font-weight: 600; color: var(--ink); }
.form-control {
    width: 100%; padding: 8px 12px; box-sizing: border-box;
    border: 1px solid var(--rule); border-radius: 8px;
    background: var(--input-bg); color: var(--ink);
    font-size: .87rem; font-family: inherit; line-height: 1.5;
    transition: border-color .15s;
}
.form-control:focus { outline: none; border-color: var(--brand); }
textarea.form-control { resize: vertical; }
select.form-control   { cursor: pointer; }
.form-row-2 { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.form-row-2 .form-group { flex: 1; min-width: 150px; }

@media (max-width: 640px) {
    .rem-grid { grid-template-columns: 1fr; }
    .rem-strip { gap: 8px; }
    .rem-tile  { min-width: 90px; padding: 10px 14px; }
    .rem-tile-n { font-size: 1.4rem; }
}

/* Danger-coloured ghost button (delete/dismiss actions) */
.btn-ghost-danger { color: #A8392B !important; }
.btn-ghost-danger:hover { border-color: #A8392B !important; background: color-mix(in srgb, #A8392B 8%, transparent) !important; }

/* Required field asterisk */
.req { color: #A8392B; }

/* Hub modal medium-width variant */
.hub-modal--md { max-width: 500px; width: 100%; }

/* Reminders dismiss wrapper */
.rem-dismiss-wrap { margin-top: 16px; }

/* ── Marketing page ───────────────────────────────────────────────────────── */

/* ── Tab navigation ─────────────────────────────────────────────────────── */
.mkt-tabs { display:flex; gap:4px; margin-bottom:1.5rem; border-bottom:2px solid var(--rule); padding-bottom:0; }
.mkt-tab-btn {
    padding:.55rem 1.2rem; font-size:.875rem; font-weight:700; border:none; background:none;
    color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent;
    margin-bottom:-2px; transition:color .15s,border-color .15s; border-radius:6px 6px 0 0;
}
.mkt-tab-btn:hover { color:var(--ink); background:var(--rule-soft); }
.mkt-tab-btn.active { color:var(--brand); border-bottom-color:var(--brand); background:none; }
.mkt-tab-pane { display:none; }
.mkt-tab-pane.active { display:block; }

/* ── Segment row ────────────────────────────────────────────────────────── */
.segment-row { display:flex; gap:.75rem; margin-bottom:1.5rem; flex-wrap:wrap; align-items:center; }
.segment-chip {
    display:flex; align-items:center; gap:.45rem; padding:.35rem .85rem;
    border-radius:999px; border:1px solid var(--rule); background:var(--card-bg);
    font-size:.82rem; font-weight:600;
}
.segment-chip .dot { width:8px; height:8px; border-radius:50%; }
.dot-retailer   { background:var(--brand); }
.dot-wholesaler { background:#E09B3B; }
.dot-bulk_buyer { background:#5B8EBE; }

/* ── Target burn bar ────────────────────────────────────────────────────── */
.mkt-burn-card { margin-bottom:24px; }
.mkt-burn-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.mkt-burn-title  { font-weight:700; font-size:.93rem; display:block; }
.mkt-burn-sub    { font-size:.76rem; color:var(--text-muted); margin-top:2px; display:block; }
.mkt-burn-track  { background:var(--rule-soft); border-radius:99px; height:10px; overflow:hidden; margin-bottom:6px; }
.mkt-burn-bar    { height:10px; border-radius:99px; transition:width .6s; }
.mkt-burn-legend { display:flex; gap:16px; font-size:.76rem; color:var(--text-muted); }
.mkt-burn-legend span { display:flex; align-items:center; gap:5px; }
.mkt-leg-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.mkt-filter-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; align-items:center; }
.mkt-filter-btn {
    padding:6px 14px; border-radius:20px; border:1px solid var(--rule);
    background:var(--card-bg); color:var(--ink); font-size:.8rem; font-weight:600;
    cursor:pointer; transition:all .15s;
}
.mkt-filter-btn:hover  { border-color:var(--brand); color:var(--brand); }
.mkt-filter-btn.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.mkt-filter-count {
    background:rgba(255,255,255,.25); border-radius:99px; padding:0 5px;
    font-size:.72rem; margin-left:3px; font-variant-numeric:tabular-nums;
}
.mkt-filter-btn:not(.active) .mkt-filter-count { background:var(--rule-soft); color:var(--text-muted); }
.mkt-filter-select {
    padding:6px 12px; border-radius:20px; border:1px solid var(--rule);
    background:var(--card-bg); color:var(--ink); font-size:.8rem; font-weight:600;
    cursor:pointer; margin-left:auto;
}
.kanban-col.filtered-out { opacity:.25; pointer-events:none; }
.prospect-card.filtered-out { display:none; }

/* ── Section headers ────────────────────────────────────────────────────── */
.section-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.section-hd h2 { font-size:1rem; font-weight:700; margin:0; }

/* ── Kanban board ───────────────────────────────────────────────────────── */
.kanban-wrap { overflow-x:auto; margin-bottom:2rem; padding-bottom:.5rem; }
.kanban-board { display:flex; gap:.85rem; min-width:max-content; padding:.25rem .1rem .75rem; }
.kanban-col { width:210px; flex-shrink:0; display:flex; flex-direction:column; gap:.6rem; }
.kanban-col-hd {
    display:flex; align-items:center; justify-content:space-between;
    padding:.5rem .6rem; background:var(--card-bg); border:1px solid var(--rule);
    border-radius:8px; font-size:.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
}
.kanban-col-hd .col-count {
    background:var(--rule-soft); border-radius:999px; padding:.1rem .5rem;
    font-size:.72rem; color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.kanban-col[data-stage="onboarded"] .kanban-col-hd,
.kanban-col[data-stage="live"] .kanban-col-hd { color:var(--brand); border-color:var(--brand); }
.kanban-col[data-stage="lost"] .kanban-col-hd,
.kanban-col[data-stage="churned"] .kanban-col-hd { color:var(--emphasis); border-color:var(--emphasis); }
.kanban-cards {
    display:flex; flex-direction:column; gap:.5rem;
    min-height:60px; border-radius:8px; padding:.3rem; transition:background .15s;
}
.kanban-cards.drag-over { background:rgba(30,122,57,.08); }
.prospect-card {
    background:var(--card-bg); border:1px solid var(--rule); border-radius:8px;
    padding:.7rem .8rem; font-size:.82rem; cursor:default;
    transition:box-shadow .15s, opacity .15s;
}
.prospect-card[draggable="true"] { cursor:grab; }
.prospect-card[draggable="true"]:hover { box-shadow:0 2px 10px rgba(0,0,0,.1); }
.prospect-card.dragging { opacity:.4; }
.card-company { font-weight:700; margin-bottom:.18rem; }
.card-contact { color:var(--text-muted); font-size:.76rem; margin-bottom:.3rem; }
.card-value { font-size:.75rem; color:var(--brand); font-weight:600; margin-bottom:.3rem; font-variant-numeric:tabular-nums; }
.card-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.card-meta-row { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:.3rem; }
.seg-badge {
    font-size:.68rem; font-weight:700; padding:.15rem .45rem;
    border-radius:4px; text-transform:uppercase; letter-spacing:.03em;
}
.seg-badge.seg-retailer   { background:#E8F5EB; color:#1E7A39; }
.seg-badge.seg-wholesaler { background:#FFF3CD; color:#856404; }
.seg-badge.seg-bulk_buyer { background:#E3F2FD; color:#1565C0; }
.seg-badge.seg-fmcg       { background:#E8F5EB; color:#1E7A39; }
.seg-badge.seg-agri       { background:#FFF8E1; color:#795548; }
.seg-badge.seg-electronics { background:#E3F2FD; color:#1565C0; }
.seg-badge.seg-building   { background:#FBE9E7; color:#BF360C; }
.seg-badge.seg-clothing   { background:#F3E5F5; color:#7B1FA2; }
.seg-badge.seg-pharma     { background:#E0F7FA; color:#006064; }
.seg-badge.seg-other      { background:var(--rule-soft); color:var(--text-muted); }
.stale-badge {
    font-size:.68rem; font-weight:700; padding:.15rem .45rem; border-radius:4px;
}
.stale-warn  { background:#FFF3CD; color:#856404; }
.stale-alert { background:#FBEEEC; color:#A8392B; }
.credit-chip { font-size:.68rem; background:#E3F2FD; color:#1565C0; padding:.1rem .4rem; border-radius:4px; font-weight:700; }
.follow-chip { font-size:.68rem; color:var(--text-muted); display:flex; align-items:center; gap:.2rem; }
.follow-chip.overdue { color:var(--emphasis); font-weight:600; }
.card-actions { display:flex; gap:.35rem; margin-top:.5rem; }
.card-btn {
    font-size:.72rem; padding:.2rem .55rem; border-radius:5px;
    border:1px solid var(--rule); background:transparent; cursor:pointer;
    color:var(--ink); font-weight:600;
}
.card-btn:hover { background:var(--rule-soft); }
.card-btn.btn-act { border-color:var(--brand); color:var(--brand); }
.card-btn.btn-act:hover { background:#E8F5EB; }
.act-count-badge {
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--brand); color:#fff; border-radius:99px;
    font-size:.6rem; font-weight:700; padding:0 4px; min-width:14px; height:14px;
    margin-left:2px; vertical-align:middle;
}

/* ── Contacts pills ─────────────────────────────────────────────────────── */
.contacts-row { display:flex; flex-wrap:wrap; gap:.35rem; margin:.4rem 0; }
.contact-pill {
    font-size:.7rem; padding:.2rem .55rem; border-radius:99px;
    border:1px solid var(--rule); background:var(--card-bg);
    color:var(--text-muted); display:inline-flex; align-items:center; gap:.3rem;
    cursor:pointer; transition:border-color .15s;
}
.contact-pill:hover { border-color:var(--brand); color:var(--ink); }
.contact-pill.primary { border-color:var(--brand); color:var(--brand); font-weight:700; }

/* ── Monthly trend chart ─────────────────────────────────────────────────── */
.mkt-chart-card { margin-bottom:2rem; }
.mkt-chart-legend { display:flex; gap:1.25rem; margin-bottom:.75rem; font-size:.78rem; }
.mkt-chart-legend span { display:flex; align-items:center; gap:.4rem; font-weight:600; }
.legend-dot { width:10px; height:10px; border-radius:2px; display:inline-block; }

/* ── Partnerships table ──────────────────────────────────────────────────── */
.pship-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.pship-table th {
    text-align:left; padding:.6rem .85rem; font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
    border-bottom:2px solid var(--rule); background:var(--card-bg);
}
.pship-table td { padding:.7rem .85rem; border-bottom:1px solid var(--rule-soft); vertical-align:middle; font-size:.82rem; }
.pship-table tr:hover td { background:var(--rule-soft); }
.pship-status {
    font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:99px;
    text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.ps-exploring  { background:#FFF3CD; color:#856404; }
.ps-mou_signed { background:#E3F2FD; color:#1565C0; }
.ps-active     { background:#E8F5EB; color:#1E7A39; }
.ps-lapsed     { background:var(--rule-soft); color:var(--text-muted); }
.pship-type-chip {
    font-size:.7rem; padding:.15rem .45rem; border-radius:4px;
    background:var(--rule-soft); color:var(--text-muted); font-weight:600;
}

/* ── Activity log ───────────────────────────────────────────────────────── */
.activity-list { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; max-height:260px; overflow-y:auto; }
.activity-entry {
    background:var(--rule-soft); border-radius:7px; padding:.55rem .75rem;
    font-size:.8rem; display:flex; align-items:flex-start; gap:.6rem;
}
.act-icon { font-size:1rem; flex-shrink:0; margin-top:.05rem; }
.act-body { flex:1; }
.act-type { font-weight:700; text-transform:capitalize; }
.act-meta { font-size:.7rem; color:var(--text-muted); margin-top:.15rem; }
.act-outcome { font-size:.72rem; padding:.1rem .4rem; border-radius:4px; font-weight:600; margin-left:.3rem; }
.outcome-positive { background:#E8F5EB; color:#1E7A39; }
.outcome-neutral  { background:#FFF3CD; color:#856404; }
.outcome-negative { background:#FBEEEC; color:#A8392B; }
.outcome-no_answer { background:var(--rule-soft); color:var(--text-muted); }

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    display:none; align-items:center; justify-content:center; z-index:1000;
}
.modal-overlay.active { display:flex; }
.modal {
    background:var(--card-bg); border-radius:12px; padding:1.5rem;
    width:min(92vw,560px); max-height:90vh; overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal h3 { margin:0 0 1.1rem; font-size:1rem; font-weight:800; }
.form-row { margin-bottom:.85rem; }
.form-row label {
    display:block; font-size:.76rem; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem;
}
.form-row input,.form-row select,.form-row textarea {
    width:100%; padding:.55rem .75rem; border:1px solid var(--rule);
    border-radius:7px; background:var(--card-bg); color:var(--ink);
    font-size:.88rem; font-family:inherit; box-sizing:border-box;
}
.form-row textarea { resize:vertical; min-height:70px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.75rem; }
.modal-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.25rem; }
.btn { padding:.5rem 1.1rem; border-radius:7px; font-size:.88rem; cursor:pointer; font-weight:600; border:none; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-hover); }
.btn-ghost { background:transparent; border:1px solid var(--rule); color:var(--ink); }
.btn-ghost:hover { background:var(--rule-soft); }
.btn-danger { background:var(--emphasis); color:#fff; }
.notes-thread { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; max-height:200px; overflow-y:auto; }
.note-entry { background:var(--rule-soft); border-radius:7px; padding:.6rem .75rem; font-size:.8rem; }
.note-meta { font-size:.7rem; color:var(--text-muted); margin-top:.2rem; }
.checkbox-row { display:flex; align-items:center; gap:.6rem; font-size:.88rem; cursor:pointer; }
.checkbox-row input[type="checkbox"] { width:16px; height:16px; cursor:pointer; }

/* KPI icon color variants */
.fin-kpi-icon--green  { background: #E8F5EB; }
.fin-kpi-icon--blue   { background: #E3F2FD; }
.fin-kpi-icon--amber  { background: #FFF3CD; }
.fin-kpi-icon--purple { background: #F3E8FD; }
.fin-kpi-icon--red    { background: #FBEEEC; }
[data-theme="dark"] .fin-kpi-icon--green  { background: rgba(30,122,57,.2); }
[data-theme="dark"] .fin-kpi-icon--blue   { background: rgba(91,142,190,.2); }
[data-theme="dark"] .fin-kpi-icon--amber  { background: rgba(217,119,6,.2); }
[data-theme="dark"] .fin-kpi-icon--purple { background: rgba(147,51,234,.15); }
[data-theme="dark"] .fin-kpi-icon--red    { background: rgba(168,57,43,.2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fin-kpi-icon--green  { background: rgba(30,122,57,.2); }
  :root:not([data-theme="light"]) .fin-kpi-icon--blue   { background: rgba(91,142,190,.2); }
  :root:not([data-theme="light"]) .fin-kpi-icon--amber  { background: rgba(217,119,6,.2); }
  :root:not([data-theme="light"]) .fin-kpi-icon--purple { background: rgba(147,51,234,.15); }
  :root:not([data-theme="light"]) .fin-kpi-icon--red    { background: rgba(168,57,43,.2); }
}

/* KPI value color modifiers */
.fin-kpi-value--brand    { color: var(--brand); }
.fin-kpi-value--emphasis { color: var(--emphasis); }
.fin-kpi-value--sm       { font-size: 1rem; }

/* Burn bar / legend */
.mkt-burn-pct    { font-weight: 400; font-size: .78rem; color: var(--text-muted); }
.mkt-burn-exceed { color: #A8392B; font-weight: 600; }
.legend-dot--brand { background: var(--brand); }
.legend-dot--blue  { background: #5B8EBE; }
.legend-dot--rule  { background: var(--rule); }

/* Segment chip count & layout */
.seg-count         { margin-left: .25rem; }
.segment-chip--right { margin-left: auto; }
.mkt-chip-label    { color: var(--text-muted); font-size: .76rem; }
.mkt-chip-emphasis { color: var(--emphasis); }

/* Hint / info notes */
.mkt-hint    { font-size: .76rem; color: var(--text-muted); }
.mkt-hint-sm { font-size: .7rem;  color: var(--text-muted); }

/* Tab action bar */
.mkt-tab-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Activity count note */
.mkt-act-note { font-size: .7rem; color: var(--text-muted); margin-top: .3rem; }

/* Horizontal scroll wrapper */
.mkt-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Chart SVG */
.mkt-chart-svg { display: block; min-width: 100%; }

/* Empty state card */
.card--empty-state { text-align: center; padding: 2.5rem; color: var(--text-muted); }
.mkt-empty-icon    { font-size: 2rem; margin-bottom: .75rem; }
.mkt-empty-title   { font-weight: 700; margin-bottom: .4rem; }
.mkt-empty-sub     { font-size: .85rem; }

/* Partnerships table column hints */
.pship-td--numeric { font-variant-numeric: tabular-nums; }
.pship-td--notes   { font-size: .8rem; color: var(--text-muted); max-width: 240px; }

/* Modal narrow/medium variants */
.modal--narrow { max-width: 380px; }
.modal--medium { max-width: 420px; }

/* Multi-select tall */
.select-tall { height: 80px; }

/* Textarea tall */
.textarea-tall { min-height: 90px; }

/* Inline hint below a form field */
.field-hint { font-size: .72rem; color: var(--text-muted); }

/* Toast notification */
.mkt-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--brand); color: #fff;
  padding: .65rem 1.1rem; border-radius: 8px;
  font-size: .85rem; font-weight: 600;
  z-index: 2000; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

/* Kanban info note */
.mkt-info-note { font-size: .82rem; color: var(--text-muted); }

/* Burn legend inline brand value */
.mkt-burn-value { font-size: .88rem; font-weight: 700; }


/* ── Notes page ── */
.notes-tag-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-radius: 6px 6px 0 0;
  margin: -16px -16px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  flex-wrap: wrap;
}
.notes-tag-label { letter-spacing: .02em; }
.notes-pin-marker { color: var(--text-muted); font-weight: 400; }
.notes-resolved-marker { color: var(--brand); font-weight: 500; }
.notes-ticket-ref {
  margin-left: auto;
  font-family: monospace;
  font-size: 0.75rem;
  background: var(--surface-alt, #f0f0f0);
  color: var(--ink);
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.notes-body { padding: 0 0 8px; }
.notes-title { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.notes-title--resolved { opacity: 0.55; text-decoration: line-through; }
.notes-text { color: var(--text-muted); font-size: 0.875rem; line-height: 1.7; }
.notes-text p { margin: 0 0 14px; }
.notes-text p:last-child { margin-bottom: 0; }
.notes-tagged {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--surface-alt, rgba(0,0,0,.04));
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
}
.notes-blocker-cleared {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--brand);
  font-weight: 500;
}
.notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  gap: 8px;
  flex-wrap: wrap;
}
.notes-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.notes-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notes-time { color: var(--text-muted); font-size: 0.78rem; }
.notes-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.notes-action-btn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 0.76rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
.notes-action-btn:hover { background: var(--surface-alt, rgba(0,0,0,.05)); color: var(--ink); }
.notes-resolve-btn { color: var(--brand); border-color: var(--brand); }
.notes-resolve-btn:hover { background: var(--brand); color: #fff; }
.notes-edit-btn:hover { background: var(--surface-alt, rgba(0,0,0,.06)); color: var(--ink); }
.notes-delete-btn:hover { background: #A8392B; color: #fff; border-color: #A8392B; }
.notes-edited-marker { font-size: 0.76rem; color: var(--text-muted); font-style: italic; }
.notes-card--resolved { opacity: 0.7; }
.notes-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 8px 0 10px;
}
.notes-section-label--resolved { margin-top: 28px; }
.notes-resolved-count {
  font-size: 0.8rem;
  background: var(--brand);
  color: #fff;
  border-radius: 10px;
  padding: 1px 8px;
  margin-left: 8px;
}
.notes-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.notes-filter-tab {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
.notes-filter-tab:hover { background: var(--surface-alt, rgba(0,0,0,.04)); color: var(--ink); }
.notes-filter-tab--active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.notes-tag-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.notes-tag-user-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  cursor: pointer;
  background: var(--surface-alt, rgba(0,0,0,.03));
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 10px;
}
.notes-tag-user-opt input { cursor: pointer; }
.notes-empty { text-align: center; padding: 48px 20px; }
.notes-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.notes-empty-text { color: var(--text-muted); }
.notes-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px;
  background: var(--surface-alt, rgba(0,0,0,.03));
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-size: 0.82rem;
  max-width: 100%;
}
.notes-attachment-icon { flex-shrink: 0; }
.notes-attachment-link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notes-attachment-link:hover { text-decoration: underline; }
.notes-attachment-size {
  color: var(--text-muted);
  font-size: 0.76rem;
  white-space: nowrap;
  flex-shrink: 0;
}
/* ── Replies ────────────────────────────────────────────────────────────── */
.notes-replies-toggle-row {
  padding: 8px 0 4px;
  border-top: 1px solid var(--rule);
  margin-top: 10px;
}
.notes-replies-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  transition: color .15s;
}
.notes-replies-toggle:hover { color: var(--brand); }
.notes-replies-wrap {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notes-replies-wrap[hidden] { display: none !important; }

.notes-reply-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-alt, rgba(0,0,0,.03));
  border-radius: 7px;
  border: 1px solid var(--rule-soft, var(--rule));
}
.notes-reply-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--text-muted);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.notes-reply-content { flex: 1; min-width: 0; }
.notes-reply-meta {
  font-size: 0.8rem;
  color: var(--ink);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.notes-reply-body {
  font-size: 0.855rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.notes-reply-body p { margin: 0 0 8px; }
.notes-reply-body p:last-child { margin-bottom: 0; }
.notes-reply-btn { color: var(--brand); border-color: var(--brand); }
.notes-reply-btn:hover { background: var(--brand); color: #fff; }
/* ── Formatting toolbar ─────────────────────────────────────────────────── */
.notes-fmt-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.notes-fmt-btn {
  background: var(--surface-alt, rgba(0,0,0,.04));
  border: 1px solid var(--rule);
  border-radius: 4px;
  width: 28px; height: 26px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.notes-fmt-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.notes-fmt-hint { font-size: 0.74rem; color: var(--text-muted); margin-left: 4px; }
/* ── Extra .notes-* utilities ──────────────────────────────────────────── */
.notes-attachment--reply { margin-top: 6px; }
.notes-reply-actions { display: flex; gap: 6px; margin-top: 8px; }
.notes-action-btn--xs { font-size: .73rem; }
.notes-form-inline { display: inline; }
.notes-cat-field { flex: 1; }
.notes-reply-context {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--surface-alt, rgba(0,0,0,.04));
  border-radius: 6px;
  border-left: 3px solid var(--rule);
}
.notes-section-label--recent { margin-top: 24px; }
.hub-modal--560 { max-width: 560px; }

/* ── Finance page ── */
/* ── Finance page styles ─────────────────────────────────────────────────── */

/* KPI strip */
.fin-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.fin-kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.fin-kpi-card.fin-kpi-danger { border-color: #A8392B33; }
.fin-kpi-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.fin-kpi-body { min-width: 0; }
.fin-kpi-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.fin-kpi-value { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }
.fin-kpi-sub { font-size: 11px; color: var(--text-muted); }
.fin-val--red { color: #A8392B !important; }
.fin-pbar-wrap { height: 4px; background: var(--rule); border-radius: 2px; margin: 4px 0 2px; overflow: hidden; }
.fin-pbar { height: 100%; border-radius: 2px; transition: width .3s; }
.fin-pbar-label { font-size: 10px; color: var(--text-muted); }

/* ── Period burn bar ─────────────────────────────────────────────────────── */
.fin-burn-card    { padding: 16px 20px; margin-bottom: 20px; }
.fin-burn-header  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; }
.fin-burn-title   { font-size: .9375rem; font-weight: 600; display: block; margin-bottom: 2px; }
.fin-burn-sub     { font-size: .75rem; color: var(--text-muted); }
.fin-burn-amounts { text-align: right; white-space: nowrap; }
.fin-burn-spent   { font-size: .875rem; font-weight: 600; color: var(--brand); display: block; }
.fin-burn-pending-lbl { font-size: .75rem; color: #B45309; }
[data-theme="dark"] .fin-burn-pending-lbl { color: #FCD34D; }
.fin-burn-track   { height: 12px; background: var(--rule-soft, var(--rule)); border-radius: 6px;
                    position: relative; overflow: hidden; margin-bottom: 10px; }
.fin-burn-fill    { position: absolute; top: 0; left: 0; height: 100%; background: var(--brand);
                    border-radius: 6px; transition: width .4s ease; }
.fin-burn-fill.fin-burn--warn   { background: #D97706; }
.fin-burn-fill.fin-burn--danger { background: var(--oxblood, #A8392B); }
.fin-burn-pending-fill { position: absolute; top: 0; height: 100%; background: #FCD34D; opacity: .65; }
.fin-burn-legend  { display: flex; gap: 16px; flex-wrap: wrap; font-size: .75rem; color: var(--text-muted); align-items: center; }
.fin-burn-dot     { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }
.fin-burn-dot--approved { background: var(--brand); }
.fin-burn-dot--pending  { background: #FCD34D; }
.fin-burn-remaining { margin-left: auto; font-weight: 600; color: var(--ink); }

/* ── Request filter bar ──────────────────────────────────────────────────── */
.fin-filter-bar     { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-filter-btn     { background: none; border: 1px solid var(--rule); border-radius: 20px;
                      padding: 5px 14px; font-size: .8125rem; cursor: pointer;
                      color: var(--text-muted); transition: all .15s; display: inline-flex; align-items: center; gap: 5px; }
.fin-filter-btn:hover  { border-color: var(--brand); color: var(--brand); }
.fin-filter-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.fin-filter-count   { background: rgba(255,255,255,.3); color: inherit; font-size: .7rem; font-weight: 700;
                      border-radius: 8px; padding: 1px 5px; min-width: 16px; text-align: center; }
.fin-filter-btn.active .fin-filter-count { background: rgba(255,255,255,.35); }

/* Tabs */
.fin-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.fin-tab {
  padding: 8px 18px; border: none; background: none;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: 6px 6px 0 0; transition: color .15s;
}
.fin-tab:hover { color: var(--ink); }
.fin-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.fin-badge {
  display: inline-block; background: #A8392B; color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 10px;
  padding: 1px 6px; margin-left: 4px; vertical-align: middle;
}
.fin-panel { }
.fin-panel--hidden { display: none; }

/* Two-column layout */
.fin-main-grid { display: grid; grid-template-columns: 1fr 380px; gap: 16px; }
@media (max-width: 900px) { .fin-main-grid { grid-template-columns: 1fr; } }
.fin-left-col { min-width: 0; }
.fin-right-col { min-width: 0; }

/* Chart containers */
.fin-chart-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.fin-chart-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.fin-chart-subtitle { font-size: 11px; color: var(--text-muted); }
.fin-chart-body { position: relative; }

/* Donut */
.fin-donut-wrap { position: relative; display: flex; justify-content: center; align-items: center; }
.fin-donut-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; pointer-events: none;
}
.fin-donut-pct { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; }
.fin-donut-sub { font-size: 11px; color: var(--text-muted); }

/* Donut legend */
.fin-pie-legend { display: flex; flex-direction: column; gap: 6px; }
.fin-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.fin-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fin-legend-label { flex: 1; color: var(--text-muted); }
.fin-legend-pct { font-weight: 600; color: var(--ink); font-size: 11px; }

/* Line chart custom legend */
.fin-line-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 11px; }
.fin-ll-item { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.fin-ll-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.fin-ll-ring { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #A8392B; display: inline-block; }

/* Category breakdown */
.fin-cat-breakdown { display: flex; flex-direction: column; gap: 10px; }
.fin-cat-row { display: flex; flex-direction: column; gap: 4px; }
.fin-cat-row-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.fin-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fin-cat-name { flex: 1; color: var(--ink); font-weight: 500; }
.fin-cat-pct { color: var(--text-muted); min-width: 30px; text-align: right; }
.fin-cat-amount { font-weight: 600; color: var(--ink); min-width: 80px; text-align: right; }
.fin-cat-orig { color: var(--text-muted); font-weight: 400; font-size: 10px; margin-left: 4px; }
.fin-cat-bar-track { height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.fin-cat-bar { height: 100%; border-radius: 3px; transition: width .4s; }

/* Currency badge */
.cur-badge { font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px; margin-left: 4px; }
.cur-badge-kes { background: #E8F5EB; color: #1E7A39; }
.cur-badge-usd { background: #E3F2FD; color: #1565C0; }
.cur-badge-zar { background: #FFF3E0; color: #E65100; }

/* Approved transactions */
.fin-tx-list { display: flex; flex-direction: column; gap: 10px; }
.fin-tx-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.fin-tx-row:last-child { border-bottom: none; padding-bottom: 0; }
.fin-tx-date-badge {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  background: var(--surface-alt, rgba(0,0,0,.04)); border-radius: 5px;
  padding: 3px 7px; white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}
.fin-tx-body { flex: 1; min-width: 0; }
.fin-tx-desc { font-size: 12px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-tx-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.fin-cat-chip {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
  background: var(--surface-alt, rgba(0,0,0,.04)); color: var(--text-muted); text-transform: capitalize;
}
/* Category chip colour variants */
.fin-cat-chip--development  { background: #E8F5EB; color: #1E7A39; }
.fin-cat-chip--design       { background: #E8F3FB; color: #1565C0; }
.fin-cat-chip--infrastructure { background: #F3EAF8; color: #6A1B9A; }
.fin-cat-chip--hosting      { background: #E3F6FB; color: #00838F; }
.fin-cat-chip--clickup      { background: #FFF4E5; color: #E65100; }
.fin-cat-chip--claude       { background: #EDFAF0; color: #2E7D32; }
.fin-cat-chip--admin        { background: #F5F5F5; color: #546E7A; }
.fin-cat-chip--other        { background: var(--surface-alt, rgba(0,0,0,.04)); color: var(--text-muted); }
.fin-tx-by { font-size: 11px; color: var(--text-muted); }
.fin-tx-amount { text-align: right; flex-shrink: 0; }
.fin-tx-primary { font-size: 12px; font-weight: 700; color: var(--ink); }
.fin-tx-kes { font-size: 10px; color: var(--text-muted); }
.fin-dl-btn {
  display: inline-block; font-size: 11px; color: var(--brand);
  text-decoration: none; margin-top: 3px;
}
.fin-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 24px 0; }

/* Pending card */
.fin-pending-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fin-pending-card:hover { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft, #E8F5EB); }

/* Request cards */
.fin-req-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.fin-req-card {
  background: var(--card-bg); border: 1px solid var(--rule);
  border-radius: 10px; padding: 14px 16px; position: relative;
}
.fin-req-card.fin-req--approved { border-left: 3px solid #1E7A39; }
.fin-req-card.fin-req--rejected { border-left: 3px solid #A8392B; }
.fin-req-card.fin-req--pending  { border-left: 3px solid #FFA700; }
.fin-req-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.fin-req-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fin-req-type { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.fin-req-item { font-size: 14px; font-weight: 600; color: var(--ink); }
.fin-req-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fin-req-amount { font-size: 15px; font-weight: 700; color: var(--ink); }
.fin-status-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
.fin-status--pending  { background: #FFF3CD; color: #856404; }
.fin-status--approved { background: #E8F5EB; color: #1E7A39; }
.fin-status--rejected { background: #FBEEEC; color: #A8392B; }
.fin-req-sub { font-size: 11px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fin-req-notes { color: var(--text-muted); font-style: italic; }
.fin-req-review-note {
  font-size: 12px; color: var(--text-muted); background: var(--surface-alt, rgba(0,0,0,.04));
  border-radius: 6px; padding: 6px 10px; margin-bottom: 8px;
}
.fin-review-by { font-weight: 600; margin-right: 4px; }
.fin-req-actions { display: flex; gap: 8px; }
.btn-approve {
  padding: 5px 14px; font-size: 12px; font-weight: 600; border: none;
  border-radius: 6px; cursor: pointer; background: #1E7A39; color: #fff; transition: background .15s;
}
.btn-approve:hover { background: #155C2A; }
.btn-reject {
  padding: 5px 14px; font-size: 12px; font-weight: 600; border: none;
  border-radius: 6px; cursor: pointer; background: #A8392B; color: #fff; transition: background .15s;
}
.btn-reject:hover { background: #7D2A1F; }
.fin-req-delete {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; cursor: pointer; font-size: 14px;
  opacity: .4; transition: opacity .15s;
}
.fin-req-delete:hover { opacity: 1; }

/* Budget summary bar in requests tab */
.fin-budget-summary {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 12px 16px;
}
.fin-budget-meta { display: flex; align-items: center; gap: 8px; }
.fin-budget-period { font-size: 13px; font-weight: 600; color: var(--ink); }
.fin-budget-tag { font-size: 11px; color: var(--text-muted); background: var(--surface-alt, rgba(0,0,0,.04)); border-radius: 4px; padding: 2px 7px; }
.fin-budget-figures { display: flex; gap: 20px; }
.fin-bfig { display: flex; flex-direction: column; }
.fin-bfig-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.fin-bfig-value { font-size: 15px; font-weight: 700; color: var(--ink); }
.fin-val--amber { color: #856404; }

/* Budget form */
.fin-budget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fin-section-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.fin-section-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

/* Tool catalogue */
.fin-cat-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.fin-tool-group { margin-bottom: 24px; }
.fin-tool-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px; display: inline-block;
  background: var(--surface-alt, rgba(0,0,0,.04)); padding: 3px 10px; border-radius: 10px;
}
.fin-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fin-tool-card {
  background: var(--card-bg); border: 1px solid var(--rule);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.fin-tool-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fin-tool-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.fin-tool-actions { display: flex; gap: 4px; flex-shrink: 0; }
.fin-tool-btn { background: none; border: none; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; opacity: .5; transition: opacity .15s; }
.fin-tool-btn:hover { opacity: 1; }
.fin-tool-btn--del:hover { color: #A8392B; }
.fin-tool-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.fin-tool-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule-soft); }
.fin-tool-cost { font-size: 13px; font-weight: 700; color: var(--ink); }
.fin-tool-billing { font-size: 10px; color: var(--text-muted); background: var(--surface-alt, rgba(0,0,0,.04)); border-radius: 4px; padding: 2px 7px; }

/* Tool picker in request form */
.fin-tool-picker { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; border: 1px solid var(--rule); border-radius: 8px; padding: 6px; }
.fin-tool-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: background .1s; }
.fin-tool-option:hover { background: var(--surface-alt, rgba(0,0,0,.04)); }
.fin-tool-option input[type=radio] { flex-shrink: 0; accent-color: var(--brand); }
.fin-tool-opt-name { flex: 1; color: var(--ink); }
.fin-tool-opt-cost { color: var(--text-muted); font-size: 11px; }

/* Modal */
.fin-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px;
}
.modal-box {
  background: var(--card-bg); border: 1px solid var(--rule);
  border-radius: 14px; width: 100%; max-width: 500px;
  max-height: 90vh; overflow-y: auto;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--rule); }
.modal-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.modal-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.fin-form-row { display: flex; gap: 12px; }
.form-error { background: #FBEEEC; color: #A8392B; font-size: 12px; padding: 8px 12px; border-radius: 6px; }

/* Empty state */
.fin-empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.fin-empty-icon { font-size: 32px; margin-bottom: 12px; }
.card-link { font-size: 12px; color: var(--brand); text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* Configure budget modal */
.modal-box--wide { max-width: 640px; }
.cfg-line-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cfg-line-row .cfg-line-label { flex: 2; min-width: 0; }
.cfg-line-row .cfg-line-amt   { flex: 1; min-width: 60px; }
.cfg-line-row .cfg-line-cur   { flex: 0 0 84px; }
.cfg-line-color { width: 36px; height: 36px; padding: 2px; border-radius: 4px; border: 1px solid var(--rule); cursor: pointer; flex-shrink: 0; }
.cfg-line-remove { background: none; border: none; color: var(--accent-red, #A8392B); cursor: pointer; font-size: 14px; flex-shrink: 0; padding: 4px 6px; border-radius: 3px; }
.cfg-line-remove:hover { background: #FBEEEC; }
/* ── Investment cards ──────────────────────────────────────────────────────── */
.fin-inv-list { display:flex;flex-direction:column;gap:10px; }
.fin-inv-card {
  display:flex;align-items:center;gap:14px;
  background:var(--card-bg);border:1px solid var(--rule);border-radius:10px;
  padding:14px 16px;
}
.fin-inv-icon { font-size:22px;flex-shrink:0; }
.fin-inv-body { flex:1;min-width:0; }
.fin-inv-investor { font-weight:600;font-size:.95rem;color:var(--ink); }
.fin-inv-meta { font-size:.8rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.fin-inv-note-text { font-style:italic; }
.fin-inv-amount { text-align:right;flex-shrink:0; }
.fin-inv-kes { font-weight:700;font-size:1rem;color:var(--brand); }
.fin-inv-orig { font-size:.78rem;color:var(--text-muted);margin-top:2px; }
.fin-inv-del {
  background:none;border:none;cursor:pointer;font-size:16px;
  color:var(--text-muted);padding:4px 6px;border-radius:6px;transition:color .15s,background .15s;
  flex-shrink:0;
}
.fin-inv-del:hover { color:var(--oxblood,#A8392B);background:var(--danger-bg,#FBEEEC); }

/* exchange rate editor removed — rates are now auto-fetched */
/* ── Extra .fin-* utilities ────────────────────────────────────────────── */
.fin-access-denied { padding: 48px; text-align: center; }
.page-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fin-kpi-icon--sky { background: #E6F4FF; }
.fin-kpi-card--clickable { cursor: pointer; }
.card--mb { margin-bottom: 16px; }
.fin-live-badge { font-size: .72rem; opacity: .6; }
.fin-rate-bar { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--surface-alt, rgba(0,0,0,.04)); border: 1px solid var(--rule); font-size: .78rem; color: var(--text-muted); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.fin-rate-strip { font-size: 0.8rem; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.fin-rate-val { font-weight: 600; color: var(--ink); }
.fin-rate-note { opacity: .6; }
.fin-chart-title--mb { margin-bottom: 12px; }
.fin-pie-legend--mt { margin-top: 16px; }
.fin-pending-inner { display: flex; align-items: center; gap: 10px; }
.fin-pending-icon { font-size: 22px; }
.fin-pending-arrow { margin-left: auto; color: var(--text-muted); }
.fin-chart-header--mb { margin-bottom: 14px; }
.ml-auto { margin-left: auto; }
.fin-budget-summary--empty { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.fin-budget-empty-msg { flex: 1; color: var(--text-muted); font-size: 0.88rem; }
.fin-section-desc--highlight { margin-top: 4px; font-weight: 600; color: var(--brand); }
.fin-inv-empty { padding: 48px 0; text-align: center; color: var(--text-muted); }
.fin-amount-row { display: flex; gap: 8px; }
.fin-input--flex { flex: 1; }
.fin-input--100 { width: 100px; }
.fin-field--flex { flex: 1; }
.fin-field--110 { width: 110px; }
.fin-field--mt4 { margin-top: 4px; }
.fin-cfg-hint { font-size: 0.78rem; color: var(--text-muted); margin: 4px 0 10px; }
.fin-btn-mt { margin-top: 8px; }
.hub-modal--500 { max-width: 500px; width: 100%; }
.fin-modal-desc { margin: 0 0 16px; font-size: 0.88rem; color: var(--text-muted); }
.hub-modal-actions--mt { margin-top: 16px; }

/* ── Timeline page ── */
/* ══════════════════════════════════════════════
   12-WEEK ROADMAP — VISUAL HORIZONTAL CHART
   (scoped to timeline.php only)
══════════════════════════════════════════════ */
.rdmap-chart-outer { overflow-x: auto; margin-top: 8px; }
.rdmap-chart-inner { min-width: 3900px; }

.rdmap-spr-row { display: flex; gap: 4px; margin-bottom: 8px; }
.rdmap-spr-hdr {
  flex: 1; min-width: 170px; padding: 11px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 700; color: #fff;
  text-align: center; line-height: 1.4; letter-spacing: 0.01em;
}
.rdmap-spr--s1 { background: #3A3328; }
.rdmap-spr--s2 { background: #28201A; }
.rdmap-spr--s3 { background: #1E7A39; }
.rdmap-spr--s4 { background: #354A52; }
.rdmap-spr--s5 { background: #5C4828; }
.rdmap-spr--s6 { background: #6B1C1C; }
.rdmap-spr--s7 { background: #1A3A52; }
.rdmap-spr--s8 { background: #2E3820; }
.rdmap-spr--s9 { background: #3A2A52; }
.rdmap-spr--s10 { background: #1E4A3A; }
.rdmap-spr--s11 { background: #4A3A1E; }

.rdmap-wk-row { display: flex; gap: 4px; }
.rdmap-wk-hdr {
  flex: 1; min-width: 170px; background: var(--bg-card); border: 1px solid var(--rule-soft);
  border-radius: 4px; padding: 7px 8px; font-size: 12px; font-weight: 700;
  text-align: center; color: var(--ink); line-height: 1.35;
}
.rdmap-wk-hdr .wk-date { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.rdmap-wk-hdr--cur { border-color: var(--brand); color: var(--brand); }
.rdmap-wk-hdr--cur .wk-date { color: var(--brand); opacity: 0.75; }

.rdmap-arrow-row { position: relative; height: 20px; display: flex; align-items: center; margin: 4px 0 2px; }
.rdmap-arrow-line { flex: 1; height: 2px; background: var(--text-muted); position: relative; }
.rdmap-arrow-line::after {
  content: ''; position: absolute; right: -7px; top: -4px;
  width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid var(--text-muted);
}

.rdmap-task-cols { display: flex; gap: 6px; align-items: flex-start; }
.rdmap-col { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 6px; }
.rdmap-col-dash { width: 1px; height: 10px; border-left: 1px dashed var(--rule); margin: 0 auto; }

details.rdmap-tc {
  border-radius: 4px; overflow: hidden;
  color: rgba(255,255,255,0.95);
}
details.rdmap-tc > summary {
  padding: 10px 12px; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; line-height: 1.45;
}
details.rdmap-tc > summary::-webkit-details-marker { display: none; }
details.rdmap-tc[open] > summary { border-bottom: 1px solid rgba(255,255,255,0.18); }
.rdmap-tc-body { padding: 7px 12px 10px; display: flex; flex-direction: column; gap: 0; }
.rdmap-mt {
  font-size: 11px; color: rgba(255,255,255,0.82); padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1); line-height: 1.45;
}
.rdmap-mt:last-child { border-bottom: none; padding-bottom: 0; }

.rdmap-tc--s1 { background: #3A3328; }
.rdmap-tc--s2 { background: #28201A; }
.rdmap-tc--s3 { background: #1A6E33; }
.rdmap-tc--s4 { background: #2E4650; }
.rdmap-tc--s5 { background: #524022; }
.rdmap-tc--s6 { background: #611818; }
.rdmap-tc--s7 { background: #163348; }
.rdmap-tc--s8 { background: #28321A; }
.rdmap-tc--s9 { background: #332448; }
.rdmap-tc--s10 { background: #1A4234; }
.rdmap-tc--s11 { background: #42341A; }

/* ══════════════════════════════════════════════
   KPI STRIP ROW 2 + WHERE WE ARE STATUS BAR
══════════════════════════════════════════════ */
.tl-kpi-strip--row2 { margin-top: 6px; }
.tl-kpi-card--velocity { border-top-color: #7A52BE; }
.tl-kpi-card--prog     { border-top-color: var(--brand); }
.tl-kpi-card--days     { border-top-color: #B0760A; }
.tl-kpi-card--blocks   { border-top-color: var(--oxblood); }
.tl-where-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding: 8px 12px; border-radius: 6px;
  background: var(--bg-card2); border: 1px solid var(--rule-soft);
  font-size: 12px; line-height: 1.4;
}
.tl-where-stat { color: var(--ink); }
.tl-where-stat--active { font-weight: 600; color: var(--brand); }
.tl-where-stat--launch { font-weight: 600; color: var(--oxblood); }
.tl-where-dot { color: var(--text-muted); }

/* ══════════════════════════════════════════════
   SPRINT OVERVIEW HEALTH % COMPLETION
══════════════════════════════════════════════ */
.tl-hpct {
  font-size: 11px; font-weight: 600; margin-top: 6px;
  padding: 2px 0; font-family: var(--ff-sans);
}
.tl-hpct--done   { color: var(--brand); }
.tl-hpct--active { color: #B0760A; }
.tl-hpct--plan   { color: var(--text-muted); }
.tl-health-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 900px) { .tl-health-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tl-health-grid { grid-template-columns: 1fr; } }

/* Sprint detail pts badge */
.tl-spr-pts-badge {
  display: inline-block; margin-top: 4px; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--brand);
  background: var(--badge-done); padding: 3px 10px; border-radius: 999px;
}
.tl-spr-pts-badge--active { color: #B0760A; background: rgba(176,118,10,0.12); }

/* Assignee chip on deliverable row */
.tl-deliv-assignee {
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-card2); padding: 1px 7px; border-radius: 999px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   BLOCKERS & RISKS (developer-only)
══════════════════════════════════════════════ */
.bl-header-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px;
  margin-top: 6px;
}
.bl-header-pills { display: flex; gap: 6px; }
.bl-header-pill {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 2px 9px; border-radius: 999px;
}
.bl-header-pill--critical { background: rgba(168,57,43,0.15); color: var(--oxblood); }
.bl-header-pill--high     { background: rgba(176,118,10,0.15); color: #B0760A; }
.bl-header-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.bl-header-owner { font-size: 12px; color: var(--ink); font-weight: 600; }
.bl-header-source { font-size: 11px; color: var(--text-muted); font-style: italic; }

.bl-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bl-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border-radius: 6px;
  border-left: 4px solid transparent; font-size: 13px; line-height: 1.5;
}
.bl-item--critical { background: rgba(168,57,43,0.08); border-color: var(--oxblood); }
.bl-item--high     { background: rgba(176,118,10,0.06); border-color: #B0760A; }
.bl-item-left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex-shrink: 0; min-width: 76px; }
.bl-id {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-muted); font-family: var(--ff-mono, monospace);
}
.bl-severity {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px;
}
.bl-severity--critical { background: rgba(168,57,43,0.18); color: var(--oxblood); }
.bl-severity--high     { background: rgba(176,118,10,0.15); color: #B0760A; }
.bl-text { flex: 1; color: var(--ink); min-width: 0; }
.bl-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.bl-desc code { font-family: var(--ff-mono, monospace); font-size: 11px; background: var(--bg-card2); padding: 1px 4px; border-radius: 3px; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; font-size: 11px; }
.bl-owner-tag { color: var(--text-muted); }
.bl-owner-tag strong { color: var(--ink); }
.bl-resolves { color: var(--text-muted); }
.bl-action { color: var(--brand); font-weight: 600; }

/* ══════════════════════════════════════════════
   INFRASTRUCTURE MILESTONES (developer-only)
══════════════════════════════════════════════ */
.infra-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.infra-table--5col th:nth-child(1) { width: 13%; }
.infra-table--5col th:nth-child(2) { width: 30%; }
.infra-table--5col th:nth-child(3) { width: 11%; }
.infra-table--5col th:nth-child(4) { width: 7%; }
.infra-table--5col th:nth-child(5) { width: 39%; }
.infra-table th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); padding: 7px 12px;
  border-bottom: 2px solid var(--rule);
}
.infra-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.infra-table tr:last-child td { border-bottom: none; }
.infra-table tr:hover td { background: var(--bg-card2); }
.infra-layer { font-weight: 600; color: var(--ink); font-size: 13px; }
.infra-sublabel { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.infra-tech { font-size: 12px; color: var(--ink); line-height: 1.4; }
.infra-tech-note { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.infra-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.infra-note code { font-size: 11px; background: var(--bg-card2); padding: 1px 4px; border-radius: 3px; }
.infra-sprint-num {
  font-size: 12px; font-weight: 700; color: var(--brand);
  background: var(--badge-done); display: inline-block;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}
.infra-detail { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.infra-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.infra-pill--live       { background: rgba(91,190,99,0.18); color: #1E7A39; }
.infra-pill--configured { background: rgba(91,190,99,0.14); color: #1E7A39; }
.infra-pill--degraded   { background: rgba(168,57,43,0.12); color: var(--oxblood); }
.infra-pill--migrating  { background: rgba(176,118,10,0.14); color: #A07820; }
.infra-pill--planned    { background: var(--badge-plan); color: var(--text-muted); }
.infra-pill--pending    { background: var(--badge-plan); color: var(--text-muted); }

/* ══════════════════════════════════════════════
   SCHEDULE ANALYSIS — WEEK/TASK LEVEL
══════════════════════════════════════════════ */
details.sched-wk-detail {
  border: 1px solid var(--rule-soft); border-radius: 5px;
  background: var(--bg-card2); overflow: hidden;
}
summary.sched-wk-sum {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; cursor: pointer; list-style: none; font-family: var(--ff-sans);
}
summary.sched-wk-sum::-webkit-details-marker { display: none; }
details.sched-wk-detail[open] > summary.sched-wk-sum {
  border-bottom: 1px solid var(--rule-soft);
}
.sched-wk-label {
  font-size: 13px; font-weight: 600; color: var(--ink); flex: 1;
}
.sched-wk-task-count {
  font-size: 11px; color: var(--text-muted); flex-shrink: 0;
  background: var(--bg-card); padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--rule-soft);
}
.sched-wk-tasks {
  padding: 6px 13px 10px; display: flex; flex-direction: column; gap: 1px;
}
.sched-task-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--rule-soft);
  font-size: 12px; line-height: 1.4;
}
.sched-task-row:last-child { border-bottom: none; }
.sched-task-row--done { opacity: 0.7; }
.sched-task-icon {
  font-size: 12px; flex-shrink: 0; width: 16px; text-align: center;
  color: var(--brand);
}
.sched-task-row:not(.sched-task-row--done) .sched-task-icon { color: var(--text-muted); }
.sched-task-text { flex: 1; color: var(--ink); }
.sched-task-text--done { text-decoration: line-through; color: var(--text-muted); }
.sched-task-assignee {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-card); padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--rule-soft); white-space: nowrap; flex-shrink: 0;
}
/* legacy week-row for sprints without task data */
.sched-wk-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}
.sched-wk-row:last-child { border-bottom: none; }
.sched-wk-focus { color: var(--ink); flex: 1; }

/* ══════════════════════════════════════════════
   VIEW TOGGLE BAR
══════════════════════════════════════════════ */
.tl-view-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--rule-soft);
  border-radius: var(--r); padding: 9px 14px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.tl-view-bar-label { font-size: 12px; color: var(--text-muted); flex: 1; }
.tl-view-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; padding: 4px 12px; border-radius: 999px;
  border: none; cursor: default; font-family: var(--ff-sans);
}
.tl-view-pill--dev  { background: var(--brand-dim); color: var(--brand); }
.tl-view-pill--stk  { background: var(--ox-dim);    color: var(--oxblood); }
.tl-view-btn {
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: var(--r); border: 1px solid var(--rule);
  background: var(--bg-card2); color: var(--text-muted);
  cursor: pointer; font-family: var(--ff-sans); transition: background 0.15s, color 0.15s;
}
.tl-view-btn:hover { background: var(--rule-soft); color: var(--ink); }

/* ══════════════════════════════════════════════
   SPRINT / WEEK / DAY / TASK ACCORDIONS
══════════════════════════════════════════════ */
.stk-list { display: flex; flex-direction: column; gap: 10px; }

/* Sprint-level accordion */
details.stk-spr {
  border: 1px solid var(--rule-soft); border-radius: var(--r);
  overflow: hidden; background: var(--bg-card);
}
details.stk-spr--active { border-color: var(--brand); }
details.stk-spr[open] > summary { border-bottom: 1px solid var(--rule-soft); }
summary.stk-spr-sum {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  font-family: var(--ff-sans);
}
summary.stk-spr-sum::-webkit-details-marker { display: none; }
.stk-chevron {
  font-size: 10px; color: var(--text-muted); flex-shrink: 0;
  transition: transform 0.18s; display: inline-block;
}
details.stk-spr[open] .stk-chevron { transform: rotate(90deg); }
.stk-spr-meta { flex: 1; min-width: 0; }
.stk-spr-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.stk-spr-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stk-spr-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }

/* Schedule Analysis — week rows inside sprint body */
.sched-wk-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--rule-soft); font-size: 13px; line-height: 1.45;
}
.sched-wk-row:last-child { border-bottom: none; }
.sched-wk-label { font-weight: 600; min-width: 150px; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.sched-wk-focus { color: var(--text-muted); flex: 1; }

/* Week-level accordion */
details.stk-wk {
  border: 1px solid var(--rule-soft); border-radius: 6px; overflow: hidden;
}
details.stk-wk[open] > summary { border-bottom: 1px solid var(--rule-soft); }
summary.stk-wk-sum {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  cursor: pointer; list-style: none; background: var(--bg-card2);
}
summary.stk-wk-sum::-webkit-details-marker { display: none; }
.stk-wk-label { font-size: 13px; font-weight: 700; color: var(--ink); flex-shrink: 0; white-space: nowrap; }
.stk-wk-focus { font-size: 12px; color: var(--text-muted); flex: 1; }
.stk-wk-chev { font-size: 9px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s; }
details.stk-wk[open] .stk-wk-chev { transform: rotate(90deg); }
.stk-wk-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }

/* Day-level accordion */
details.stk-day { border-left: 2px solid var(--rule); padding-left: 10px; }
details.stk-day[open] > summary { color: var(--brand); }
summary.stk-day-sum {
  display: flex; align-items: center; gap: 6px; padding: 5px 0;
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: var(--ink);
}
summary.stk-day-sum::-webkit-details-marker { display: none; }
.stk-day-chev { font-size: 9px; color: var(--text-muted); transition: transform 0.15s; }
details.stk-day[open] .stk-day-chev { transform: rotate(90deg); }
.stk-day-body { padding: 6px 0 6px 14px; display: flex; flex-direction: column; gap: 6px; }

/* Task-level accordion */
details.stk-task { }
details.stk-task[open] > summary .task-dot { background: var(--brand); }
summary.stk-task-sum {
  display: flex; align-items: flex-start; gap: 7px; padding: 4px 0;
  cursor: pointer; list-style: none; font-size: 12px; color: var(--ink); line-height: 1.45;
}
summary.stk-task-sum::-webkit-details-marker { display: none; }
.task-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted);
  flex-shrink: 0; margin-top: 5px; transition: background 0.15s;
}
.task-dot--done  { background: var(--brand); }
.task-dot--open  { background: var(--rule); border: 1.5px solid var(--text-muted); width: 6px; height: 6px; }
.stk-task-body { padding: 4px 0 4px 14px; display: flex; flex-direction: column; gap: 3px; }

/* Mini-task rows */
.mini-task {
  font-size: 11.5px; color: var(--text-muted); padding: 2px 0;
  border-bottom: 1px solid var(--rule-soft); line-height: 1.4;
}
.mini-task:last-child { border-bottom: none; }
.mini-task code { font-size: 10.5px; background: var(--bg-card2); padding: 1px 4px; border-radius: 3px; color: var(--ink); }

/* Sprint status row at bottom of sprint body */
.stk-status-row {
  display: flex; align-items: center; gap: 8px; padding-top: 8px;
  border-top: 1px solid var(--rule-soft); margin-top: 4px;
}

/* Status badges */
.status-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  letter-spacing: 0.4px; flex-shrink: 0; white-space: nowrap;
}
.status-badge--complete { background: var(--badge-done); color: var(--brand); }
.status-badge--active   { background: var(--badge-act);  color: var(--brand); }
.status-badge--planned  { background: var(--badge-plan); color: var(--text-muted); }
.status-badge--cancelled{ background: var(--badge-cancel); color: var(--oxblood); }
/* ── Extra .tl-* utilities ─────────────────────────────────────────────── */
.tl-sprint-form-panel { margin-bottom: 20px; }
.tl-sprint-form-title { margin-bottom: 16px; }
.tl-btn-row { display: flex; gap: 10px; margin-top: 4px; }
.tl-form-reset { margin: 0; }
.tl-days-badge { margin-left: 8px; font-weight: 700; }
.tl-days-badge--ok   { color: var(--brand); }
.tl-days-badge--late { color: var(--accent); }
.tl-empty-hint { color: var(--text-muted); font-size: 0.85rem; padding: 8px 0; }
.tl-scroll-x    { overflow-x: auto; }
.tl-scroll-both { overflow-x: auto; overflow-y: auto; }
.stk-list--mt { margin-top: 16px; }
.tl-spr-badge { font-family: var(--ff-sans); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin-left: 8px; }
.tl-spr-badge--act  { background: var(--badge-act);  color: var(--brand); }
.tl-spr-badge--done { background: var(--badge-done); color: var(--brand); }
.tl-sched-pending { color: var(--text-muted); font-style: italic; }
.tl-gantt-inner { min-width: 1400px; }
.tl-breakdown-note { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 4px 0; }
.tl-task-note { font-size: 11px; color: var(--text-muted); }

/* ══ Payments & invoices ledger (expenses.php #tool-payments) ═══════════════ */
.tpl-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.tpl-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tpl-sub { font-size: .8rem; color: var(--text-muted); margin-top: 4px; max-width: 60ch; }
.tpl-hd__actions { display: flex; gap: 8px; align-items: center; }
.tpl-month-sel { min-width: 150px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tpl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.tpl-kpi { background: var(--brand-light); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tpl-kpi__lbl { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.tpl-kpi__val { font-size: 1rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tpl-kpi__sub { font-size: .7rem; color: var(--text-muted); }
.tpl-over  { color: var(--accent); }
.tpl-under { color: var(--brand); }

.tpl-empty { font-size: .85rem; color: var(--text-muted); padding: 18px 0; }
.tpl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: 8px; }
.tpl-table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 760px; }
.tpl-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--rule); background: var(--card-bg); }
.tpl-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; color: var(--ink); }
.tpl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpl-owner { display: block; font-size: .72rem; color: var(--text-muted); }
.tpl-note  { display: block; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.tpl-ref   { max-width: 220px; }
.tpl-files__list { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.tpl-missing { font-size: .72rem; font-weight: 600; color: var(--accent); }
.tpl-actions { text-align: right; white-space: nowrap; }
.tpl-table td.tpl-files { min-width: 180px; }
.tpl-row--refund td { color: var(--text-muted); }
.tpl-subtotal td { background: var(--brand-light); font-weight: 600; font-size: .78rem; }

.tpl-kind { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--rule); color: var(--text-muted); }
.tpl-kind--charge  { color: var(--brand); border-color: var(--brand); }
.tpl-kind--prorata { color: var(--ink); }
.tpl-kind--refund  { color: var(--accent); border-color: var(--accent); }

.tpl-modal { max-width: min(640px, calc(100vw - 32px)); }
.tpl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tpl-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tpl-field--wide { grid-column: 1 / -1; }
.tpl-hint { font-weight: 400; color: var(--text-muted); font-size: .72rem; }
.tpl-amount { display: grid; grid-template-columns: 1fr 84px; gap: 6px; }
.tpl-filelist { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.tpl-filelist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; padding: 6px 8px; border: 1px solid var(--rule-soft); border-radius: 6px; }
.tpl-file-rm { background: none; border: none; color: var(--accent); font-size: .75rem; font-weight: 600; cursor: pointer; }
.tpl-file-input { font-size: .8rem; color: var(--ink); }
.tpl-delete { margin-right: auto; color: var(--accent); border-color: var(--accent); }

@media (max-width: 720px) {
  .tpl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpl-form-grid { grid-template-columns: 1fr; }
  .tpl-hd__actions { width: 100%; }
  .tpl-month-sel { flex: 1; }
}

/* ══ Dashboard fixes — 16 Oct 2026 ═════════════════════════════════════════
   Module progress · Dev activity · Expenses at 25% / 50% / 25%.            */
.db-three-col { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1200px) {
  .db-three-col { grid-template-columns: 1fr 1fr; }
  .db-three-col .card:last-child { grid-column: auto; }
  .db-three-col > .card:nth-child(2) { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 900px) {
  .db-three-col { grid-template-columns: 1fr; }
  .db-three-col > .card:nth-child(2) { grid-column: auto; order: 0; }
}

/* Dev activity — one card per event, spaced like My Tasks. Scoped to
   .activity-feed because a later global .activity-entry rule (partnership
   activity log) turned these into compact flex rows. */
.activity-feed { display: flex; flex-direction: column; gap: 8px; }
.activity-feed .activity-entry {
  display: block; padding: 10px 12px; font-size: inherit;
  background: var(--bg); border: 1px solid var(--rule-soft); border-radius: 8px;
  transition: border-color .15s;
}
.activity-feed .activity-entry:hover { border-color: var(--brand); }
.activity-feed .activity-entry:last-child { border-bottom: 1px solid var(--rule-soft); }
.activity-feed .activity-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.activity-feed .activity-time { margin-left: auto; }
.activity-feed .activity-message { margin: 0 0 4px; font-size: .84rem; line-height: 1.45; }
.activity-feed .activity-meta { margin: 0; overflow-wrap: anywhere; }

/* Mail preview — one card per message, same pattern as My Tasks */
.mail-preview-list { display: flex; flex-direction: column; gap: 8px; }
.mail-preview-row {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
  align-items: center; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--rule-soft); border-radius: 8px;
  text-decoration: none; color: var(--ink); transition: border-color .15s;
}
.mail-preview-row:hover { border-color: var(--brand); }
.mail-preview-dot { grid-row: 1 / span 2; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.mail-preview-row--unread .mail-preview-dot { background: var(--brand); }
.mail-preview-from { grid-column: 2; font-size: .8rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-preview-row--unread .mail-preview-from { font-weight: 800; }
.mail-preview-subject { grid-column: 2 / span 2; font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-preview-date { grid-column: 3; grid-row: 1; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.mail-preview-status { font-size: .72rem; color: var(--text-muted); margin-top: 8px; }

/* ── Finance: spend-by-category doughnut (crisp, 3D-style, labelled) ───── */
.fin-donut3d { position: relative; width: 100%; max-width: 280px; height: 260px; margin: 4px auto 12px; }
.fin-donut3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.fin-donut3d__center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; max-width: 52%;
}
.fin-donut3d__val { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fin-donut3d__sub { margin-top: 4px; font-size: .7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 420px) { .fin-donut3d { height: 230px; } }

/* Payments & invoices — money cells and headings line up on the right */
.tpl-table th.tpl-num { text-align: right; }
.tpl-table td.tpl-num .mc-wrap { align-items: flex-end; }
.tpl-table td.tpl-num .mc-subs { justify-content: flex-end; }
.tpl-kpi__val .mc-wrap { align-items: flex-start; }
.fin-donut3d__kes { margin-top: 2px; font-size: .72rem; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fin-legend-amt { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 8px; }