/* ============================================================
   Ecobank TSquads — Design System
   DM Sans, rounded radii, Ecobank brand colours
   ============================================================ */

:root {
  --eco-blue: #005B82;
  --eco-blue-d: #003D5C;
  --eco-blue-l: #0082BB;
  --eco-green: #BED600;
  --eco-navy: #001E2F;
  --eco-amber: #D4830A;
  --eco-red: #C0392B;
  --eco-grey: #464646;
  --eco-mid-grey: #979797;
  --eco-border: #D5DDE3;
  --eco-border-2: #EEF1F3;
  --eco-bg: #EEF2F6;
  --eco-lb: #E5F3FA;
  --font: "DM Sans","Helvetica Neue",Arial,sans-serif;
  --r: 10px;
  --card-shadow: 0 4px 24px rgba(0,91,130,0.09), 0 1px 4px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 8px 32px rgba(0,91,130,0.15), 0 2px 8px rgba(0,0,0,0.07);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--eco-bg); color:var(--eco-grey); line-height:1.5; }
a { color:var(--eco-blue); text-decoration:none; }
a:hover { color:var(--eco-blue-d); }
img { max-width:100%; }

/* ── HEADER ── */
.site-header {
  position:sticky; top:0; z-index:1000;
  height:54px; background:var(--eco-navy);
  display:flex; align-items:center; padding:0 20px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.hdr-brand { display:flex; align-items:center; gap:10px; min-width:220px; }
.hdr-brand img.logo { height:36px; }
.hdr-brand-text { display:flex; flex-direction:column; }
.hdr-brand-name { font-size:15px; font-weight:700; color:#fff; line-height:1; }
.hdr-brand-sub { font-size:10px; color:var(--eco-green); letter-spacing:.5px; text-transform:uppercase; line-height:1; margin-top:2px; }
.hdr-nav { flex:1; display:flex; align-items:center; justify-content:center; gap:2px; }
.hdr-nav a {
  padding:6px 14px; color:rgba(255,255,255,.75); font-size:13px; font-weight:500;
  border-radius:var(--r); transition:background .15s,color .15s;
  display:flex; align-items:center; gap:6px;
}
.hdr-nav a:hover, .hdr-nav a.active { background:rgba(255,255,255,.12); color:#fff; }
.hdr-nav a.active { border-bottom:2px solid var(--eco-green); border-radius:0; }
.hdr-right { display:flex; align-items:center; gap:10px; min-width:220px; justify-content:flex-end; }
.lang-switcher { display:flex; gap:4px; }
.lang-btn {
  background:none; border:1px solid rgba(255,255,255,.2); border-radius:var(--r);
  color:rgba(255,255,255,.6); font-size:11px; font-weight:600; padding:3px 7px;
  cursor:pointer; transition:all .15s; font-family:var(--font);
}
.lang-btn:hover, .lang-btn.active { background:var(--eco-blue); border-color:var(--eco-blue); color:#fff; }
.user-chip {
  display:flex; align-items:center; gap:8px; cursor:pointer; position:relative;
}
.user-avatar {
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
}
.user-name { font-size:12px; color:rgba(255,255,255,.8); }
.user-role { font-size:10px; color:var(--eco-green); }
.user-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; min-width:180px;
  background:#fff; border:1px solid var(--eco-border); border-radius:var(--r);
  box-shadow:0 4px 16px rgba(0,0,0,.12); display:none; z-index:2000;
}
.user-chip:hover .user-dropdown { display:block; }
.user-dropdown a { display:flex; align-items:center; gap:8px; padding:10px 14px; color:var(--eco-grey); font-size:13px; }
.user-dropdown a:hover { background:var(--eco-bg); }
.user-dropdown .divider { border-top:1px solid var(--eco-border-2); margin:4px 0; }
.btn-signout { color:var(--eco-red) !important; }

/* ── MAIN CONTAINER ── */
.main-wrap { padding:24px 24px; min-height:calc(100vh - 54px); }

/* ── CARDS ── */
.card {
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(213,221,227,0.6);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--card-shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.card:hover { box-shadow:var(--card-shadow-hover); }
.card-header-line {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--eco-border-2);
}
.card-title { font-size:14px; font-weight:600; color:var(--eco-navy); }
.card-sm { padding:14px; }

/* ── KPI CARDS ── */
.kpi-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:20px; }
.kpi-card {
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(213,221,227,0.6);
  border-radius:var(--r);
  padding:16px;
  border-top:3px solid var(--eco-blue);
  cursor:pointer;
  transition:box-shadow .2s, transform .15s;
  box-shadow:var(--card-shadow);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.kpi-card:hover { box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }
.kpi-card.kpi-ongoing { border-top-color:var(--eco-blue-l); }
.kpi-card.kpi-completed { border-top-color:var(--eco-green); }
.kpi-card.kpi-overdue { border-top-color:var(--eco-red); }
.kpi-card.kpi-month { border-top-color:var(--eco-amber); }
.kpi-card.kpi-impact { border-top-color:var(--eco-navy); }
.kpi-value { font-size:28px; font-weight:700; color:var(--eco-navy); line-height:1; }
.kpi-label { font-size:11px; color:var(--eco-mid-grey); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }
.kpi-icon { font-size:22px; margin-bottom:8px; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px;
  font-family:var(--font); font-size:13px; font-weight:500;
  border-radius:var(--r); border:1px solid transparent; cursor:pointer;
  transition:all .15s; line-height:1.4;
}
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary { background:var(--eco-blue); color:#fff; border-color:var(--eco-blue); }
.btn-primary:hover { background:var(--eco-blue-d); border-color:var(--eco-blue-d); color:#fff; }
.btn-success { background:var(--eco-green); color:var(--eco-navy); border-color:var(--eco-green); }
.btn-danger { background:var(--eco-red); color:#fff; border-color:var(--eco-red); }
.btn-danger:hover { background:#a93226; color:#fff; }
.btn-outline { background:transparent; color:var(--eco-blue); border-color:var(--eco-border); }
.btn-outline:hover { background:var(--eco-lb); }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-xs { padding:3px 8px; font-size:11px; }

/* ── STATUS BADGES ── */
.badge {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:3px; font-size:11px; font-weight:600; letter-spacing:.3px;
  text-transform:uppercase;
}
.badge-new { background:#EEF1F3; color:var(--eco-grey); }
.badge-ongoing { background:var(--eco-lb); color:var(--eco-blue-d); }
.badge-hold { background:#FFF3E0; color:var(--eco-amber); }
.badge-completed { background:#F1F8E9; color:#558B2F; }
.badge-overdue { background:#FDECEA; color:var(--eco-red); }
.badge-theme { background:var(--eco-lb); color:var(--eco-blue); }
.badge-region { background:#F3E5F5; color:#6A1B9A; font-size:10px; }

/* ── DATATABLES ── */
table.dt { width:100%; border-collapse:collapse; font-size:13px; }
table.dt thead th {
  background:#F6F8FA; color:var(--eco-navy); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; padding:10px 12px;
  border-bottom:2px solid var(--eco-border); white-space:nowrap;
}
table.dt tbody tr { border-bottom:1px solid var(--eco-border-2); }
table.dt tbody tr:hover { background:#F7FBFF; }
table.dt tbody td { padding:10px 12px; vertical-align:middle; }

/* ── PROGRESS BAR ── */
.progress-bar-wrap {
  background:#EEF1F3; border-radius:2px; height:6px; overflow:hidden; min-width:80px;
}
.progress-bar-fill { height:100%; background:var(--eco-blue-l); border-radius:2px; transition:width .3s; }
.progress-bar-fill.done { background:var(--eco-green); }
.progress-bar-fill.over { background:var(--eco-red); }

/* ── FORMS ── */
.form-label { font-size:12px; font-weight:600; color:var(--eco-grey); margin-bottom:4px; display:block; text-transform:uppercase; letter-spacing:.3px; }
.form-control {
  width:100%; padding:8px 10px; font-family:var(--font); font-size:13px;
  border:1px solid var(--eco-border); border-radius:var(--r); color:var(--eco-grey);
  background:#fff; transition:border-color .15s;
}
.form-control:focus { outline:none; border-color:var(--eco-blue-l); box-shadow:0 0 0 2px rgba(0,130,187,.1); }
.form-control:disabled { background:#F6F8FA; }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23979797' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
.form-check { display:flex; align-items:center; gap:6px; }
.form-check input[type=checkbox] { width:15px; height:15px; accent-color:var(--eco-blue); }
.form-row { display:grid; gap:14px; }
.form-row.cols-2 { grid-template-columns:1fr 1fr; }
.form-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.form-row.cols-4 { grid-template-columns:repeat(4,1fr); }
.form-group { margin-bottom:14px; }
.form-section-title { font-size:12px; font-weight:700; color:var(--eco-blue); text-transform:uppercase; letter-spacing:.6px; padding:12px 0 8px; border-bottom:1px solid var(--eco-border-2); margin-bottom:14px; }
.invalid-feedback { font-size:11px; color:var(--eco-red); margin-top:3px; }

/* ── MODALS ── */
.modal-content { border-radius:var(--r) !important; box-shadow:0 16px 48px rgba(0,30,47,0.18), 0 4px 16px rgba(0,0,0,0.10); border:none !important; }
.modal-header { border-radius:var(--r) var(--r) 0 0 !important; }
.modal-header { background:var(--eco-navy); color:#fff; border-radius:0; border-bottom:none; }
.modal-header .btn-close { filter:invert(1); }
.modal-title { font-size:15px; font-weight:600; }
.modal-footer { border-top:1px solid var(--eco-border-2); }

/* ── TOASTR overrides ── */
#toast-container .toast { border-radius:var(--r); font-family:var(--font); font-size:13px; }

/* ── CHARTS ── */
.chart-container { position:relative; }

/* ── TIMELINE ── */
.timeline { list-style:none; }
.timeline-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--eco-border-2); }
.timeline-item:last-child { border-bottom:none; }
.tl-dot { width:32px; height:32px; border-radius:50%; background:var(--eco-lb); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.tl-body { flex:1; }
.tl-meta { font-size:11px; color:var(--eco-mid-grey); }
.tl-note { font-size:13px; margin-top:4px; }
.tl-pct { font-weight:700; color:var(--eco-blue); }

/* ── KANBAN ── */
.kanban-board { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start; }
.kanban-col { background:#F6F8FA; border:1px solid var(--eco-border); border-radius:var(--r); padding:0; }
.kanban-col-header { padding:12px 14px; background:var(--eco-navy); color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; border-radius:var(--r) var(--r) 0 0; display:flex; justify-content:space-between; align-items:center; }
.kanban-col-header .count-badge { background:rgba(255,255,255,.2); border-radius:10px; padding:2px 8px; font-size:11px; }
.kanban-cards { padding:10px; min-height:100px; }
.kanban-card {
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(213,221,227,0.7);
  border-radius:var(--r);
  padding:12px;
  margin-bottom:8px;
  cursor:grab;
  transition:box-shadow .2s, transform .15s;
  box-shadow:0 2px 10px rgba(0,91,130,0.07), 0 1px 3px rgba(0,0,0,0.04);
}
.kanban-card:hover { box-shadow:0 6px 20px rgba(0,91,130,0.14); transform:translateY(-1px); }
.kanban-card.dragging { opacity:.5; }
.kc-sn { font-size:10px; color:var(--eco-mid-grey); font-weight:600; }
.kc-name { font-size:13px; font-weight:600; color:var(--eco-navy); margin:4px 0; }
.kc-meta { font-size:11px; color:var(--eco-mid-grey); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.kc-date.overdue { color:var(--eco-red); font-weight:600; }

/* ── SQUAD ROOM ── */
.squad-hero { background:var(--eco-navy); color:#fff; border-radius:var(--r); padding:24px; margin-bottom:20px; }
.squad-hero h1 { font-size:22px; font-weight:700; }
.squad-hero p { color:rgba(255,255,255,.7); font-size:13px; margin-top:4px; }

/* ── PRESENTATION ── */
.present-layout { background:var(--eco-navy); color:#fff; min-height:100vh; font-family:var(--font); }
.present-section { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:60px; border-bottom:1px solid rgba(255,255,255,.1); }
.present-section:last-child { border-bottom:none; }
.present-title { font-size:36px; font-weight:700; color:#fff; margin-bottom:8px; }
.present-sub { font-size:16px; color:rgba(255,255,255,.6); margin-bottom:40px; }
.present-kpi-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.present-kpi { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:24px; text-align:center; }
.present-kpi-value { font-size:48px; font-weight:700; color:var(--eco-green); line-height:1; }
.present-kpi-label { font-size:12px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.5px; margin-top:8px; }
.present-nav { position:fixed; bottom:24px; right:24px; display:flex; gap:8px; z-index:100; }
.present-nav-btn { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); color:#fff; padding:10px 16px; border-radius:var(--r); cursor:pointer; font-family:var(--font); font-size:13px; }
.present-nav-btn:hover { background:rgba(255,255,255,.25); }
.present-section-cover { background:linear-gradient(135deg, var(--eco-navy) 0%, #003D5C 100%); }

/* ── MISC ── */
.page-title { font-size:20px; font-weight:700; color:var(--eco-navy); margin-bottom:4px; }
.page-sub { font-size:13px; color:var(--eco-mid-grey); margin-bottom:20px; }
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar-left { flex:1; display:flex; gap:8px; flex-wrap:wrap; }
.toolbar-right { display:flex; gap:8px; }
.filter-select { padding:6px 10px; font-family:var(--font); font-size:12px; border:1px solid var(--eco-border); border-radius:var(--r); background:#fff; color:var(--eco-grey); appearance:none; min-width:130px; }
.section-divider { border:none; border-top:1px solid var(--eco-border-2); margin:20px 0; }
.empty-state { text-align:center; padding:40px; color:var(--eco-mid-grey); }
.empty-state i { font-size:36px; margin-bottom:12px; display:block; }
.text-overdue { color:var(--eco-red); }
.text-success { color:#558B2F; }
.avatar-sm { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; }
.diagram-preview { border:1px solid var(--eco-border); border-radius:var(--r); overflow:hidden; margin-bottom:10px; }
.diagram-preview img { width:100%; max-height:200px; object-fit:contain; }
.two-panel { display:grid; grid-template-columns:60fr 40fr; gap:20px; }
.three-panel { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.analytics-tabs .nav-link { color:var(--eco-grey); border-radius:var(--r) var(--r) 0 0; font-size:13px; }
.analytics-tabs .nav-link.active { color:var(--eco-blue); border-color:var(--eco-border) var(--eco-border) #fff; }

/* ── RESPONSIVE ── */
@media(max-width:1200px) { .kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:900px) {
  .hdr-nav { display:none; }
  .two-panel { grid-template-columns:1fr; }
  .kanban-board { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .kanban-board { grid-template-columns:1fr; }
  .main-wrap { padding:12px; }
}