/* ═══════════════════════════════════════════════════════════════════
   BASE DESIGN SYSTEM — Proxy Voting Platform
   Brand colours are injected via CSS custom properties set by the
   <style> block in base.html so any white-label firm can swap them
   by changing brand_config.json without touching CSS.
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

/* ── CSS Custom Properties (overridden per brand in base.html) ── */
:root {
  /* Brand — defaults to Rebel Financial; overridden in <head> */
  --brand:        #7a449a;
  --brand-dark:   #5e2f7f;
  --brand-light:  #f3e8f7;
  --brand-mid:    #e4cff0;
  --page-bg:      #f8f5fb;

  /* Profile colours — constant across all firms */
  --delegator:    #2563eb;
  --delegator-bg: rgba(37,99,235,.1);
  --profit:       #d97706;
  --profit-bg:    rgba(217,119,6,.1);
  --esg:          #059669;
  --esg-bg:       rgba(5,150,105,.1);
  --rf:           var(--brand);
  --rf-bg:        rgba(122,68,154,.1);

  /* Neutrals */
  --surface:      #ffffff;
  --surface2:     var(--brand-light);
  --border:       var(--brand-mid);
  --border-light: #ede0f5;
  --text:         #1e1030;
  --muted:        #7a6b8a;

  /* Semantic */
  --success:      #059669; --success-bg: #ecfdf5;
  --warning:      #d97706; --warning-bg: #fffbeb;
  --danger:       #dc2626; --danger-bg:  #fef2f2;
  --info:         #0891b2; --info-bg:    #ecfeff;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.1);
}

/* ── Typography ──────────────────────────────────────────────── */
h1 { font-size: 2rem;   font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
h3 { font-size: 1.1rem; font-weight: 700; }
h4 { font-size: .95rem; font-weight: 700; }
p  { color: var(--muted); }
a  { color: var(--brand); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
small { font-size: .8rem; color: var(--muted); }

/* ── Layout helpers ──────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-8); }
.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); }
.gap-3 { gap: var(--sp-3); } .gap-6 { gap: var(--sp-6); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mb-4  { margin-bottom: var(--sp-4); }
.text-center { text-align: center; }
.text-muted  { color: var(--muted); font-size: .875rem; }
.w-full { width: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-light);
}
.card-header h3 { font-size: .875rem; font-weight: 700; color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 10px 20px; border-radius: var(--r-md); border: none;
  font-family: inherit; font-size: .875rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .18s;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.18); color: #fff; text-decoration: none; }
.btn-secondary {
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); text-decoration: none; }
.btn-danger { background: var(--danger-bg); color: var(--danger); border: 1.5px solid rgba(220,38,38,.2); }
.btn-danger:hover { background: var(--danger); color: #fff; text-decoration: none; }
.btn-sm { padding: 7px 14px; font-size: .8rem; }
.btn-lg { padding: 13px 28px; font-size: 1rem; font-weight: 700; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Form fields ─────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-4); }
.form-label {
  display: block; font-size: .7rem; font-weight: 700;
  color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.form-control {
  width: 100%; padding: 11px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text); font-family: inherit; font-size: .875rem;
  transition: border-color .2s, box-shadow .2s; outline: none;
  appearance: none;
}
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}
.form-control::placeholder { color: #b8a8c8; }
.form-control.is-invalid { border-color: var(--danger); }
.form-hint { font-size: .75rem; color: var(--muted); margin-top: var(--sp-1); }
.form-error { font-size: .75rem; color: var(--danger); margin-top: var(--sp-1); }

/* ── Flash messages ──────────────────────────────────────────── */
.flash-messages { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 380px; }
.flash {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 12px 16px; border-radius: var(--r-md);
  font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-md);
  animation: slideIn .25s ease;
}
.flash-success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(5,150,105,.2); }
.flash-error   { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(220,38,38,.2); }
.flash-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(217,119,6,.2); }
.flash-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(8,145,178,.2); }
.flash-close { margin-left: auto; cursor: pointer; opacity: .6; font-size: 1rem; background: none; border: none; color: inherit; }
.flash-close:hover { opacity: 1; }
@keyframes slideIn { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .7rem; font-weight: 700;
}
.badge-delegator { background: var(--delegator-bg); color: var(--delegator); }
.badge-profit    { background: var(--profit-bg);    color: var(--profit);    }
.badge-esg       { background: var(--esg-bg);       color: var(--esg);       }
.badge-rf        { background: var(--rf-bg);        color: var(--brand);     }
.badge-success   { background: var(--success-bg);   color: var(--success);   }
.badge-warning   { background: var(--warning-bg);   color: var(--warning);   }
.badge-danger    { background: var(--danger-bg);    color: var(--danger);    }
.badge-muted     { background: #f1f5f9; color: var(--muted); }

/* ── Table ───────────────────────────────────────────────────── */
.table-wrapper {
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap; gap: var(--sp-3);
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { background: var(--page-bg); }
.data-table th {
  padding: 10px 16px; text-align: left;
  font-size: .68rem; font-weight: 700; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.data-table td {
  padding: 12px 16px; font-size: .875rem;
  border-top: 1px solid var(--border-light); vertical-align: middle;
}
.data-table tbody tr:hover td { background: var(--brand-light); }
.table-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; border-top: 1px solid var(--border-light);
  font-size: .8rem; color: var(--muted);
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display: flex; gap: 4px; }
.page-btn {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: .8rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s; text-decoration: none;
}
.page-btn:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); text-decoration: none; }
.page-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Search box ──────────────────────────────────────────────── */
.search-box {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--page-bg); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 6px 12px;
}
.search-box input {
  background: none; border: none; outline: none;
  color: var(--text); font-size: .8rem; font-family: inherit; width: 160px;
}
.search-box .icon { color: var(--muted); font-size: .9rem; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: 236px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand) 100%);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-logo-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
.sidebar-logo-name { font-size: 13px; font-weight: 700; color: #fff; }
.sidebar-section { padding: 14px 10px 4px; }
.sidebar-section-label {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,.35);
  letter-spacing: .12em; text-transform: uppercase; padding: 0 8px; margin-bottom: 3px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; transition: all .15s;
  font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.65);
  margin-bottom: 1px; text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.nav-item.active { background: rgba(255,255,255,.17); color: #fff; font-weight: 600; }
.nav-item .nav-icon { font-size: .875rem; width: 18px; text-align: center; }
.nav-badge {
  margin-left: auto; background: rgba(255,255,255,.22); color: #fff;
  font-size: .65rem; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-full);
}
.sidebar-footer { margin-top: auto; padding: 14px 10px; border-top: 1px solid rgba(255,255,255,.1); }
.user-chip {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 8px; background: rgba(255,255,255,.1);
}
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.25); border: 1.5px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-name  { font-size: .75rem; font-weight: 600; color: #fff; }
.user-role  { font-size: .65rem; color: rgba(255,255,255,.5); }

/* ── Dashboard layout ────────────────────────────────────────── */
.dash-layout  { display: flex; min-height: 100vh; }
.dash-content { flex: 1; background: var(--page-bg); overflow-x: hidden; }
.dash-header  { padding: 24px 28px 0; display: flex; align-items: flex-start; justify-content: space-between; }
.dash-title   { font-size: 1.3rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.dash-subtitle{ color: var(--muted); font-size: .875rem; margin-top: 4px; }

/* ── KPI cards ───────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; padding: 18px 28px; }
.kpi-card {
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: var(--r-lg); padding: 18px 20px; position: relative;
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.kpi-brand::before      { background: linear-gradient(90deg,var(--brand-dark),var(--brand)); }
.kpi-delegator::before  { background: linear-gradient(90deg,#1d4ed8,#2563eb); }
.kpi-profit::before     { background: linear-gradient(90deg,#b45309,#d97706); }
.kpi-esg::before        { background: linear-gradient(90deg,#047857,#059669); }
.kpi-label { font-size: .68rem; font-weight: 700; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.kpi-value { font-size: 1.9rem; font-weight: 800; color: var(--text); margin: 6px 0 3px; letter-spacing: -.03em; }
.kpi-sub   { font-size: .75rem; font-weight: 500; color: var(--success); }
.kpi-sub.neutral { color: var(--muted); }
.kpi-icon  { position: absolute; top: 16px; right: 16px; font-size: 1.5rem; opacity: .15; }

/* ── Toggle switch ───────────────────────────────────────────── */
.toggle { position: relative; display: inline-block; width: 44px; height: 23px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #ccc; border-radius: 23px; cursor: pointer; transition: .3s;
}
.toggle-slider::before {
  content: ''; position: absolute; height: 17px; width: 17px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s;
}
.toggle input:checked + .toggle-slider { background: var(--brand); }
.toggle input:checked + .toggle-slider::before { transform: translateX(21px); }

/* ── Divider ─────────────────────────────────────────────────── */
.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.divider hr { flex: 1; border: none; border-top: 1px solid var(--border-light); }
.divider span { font-size: .7rem; color: var(--muted); font-weight: 600; }

/* ── Avatar ──────────────────────────────────────────────────── */
.avatar-sm {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #a065c0);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; color: #fff; flex-shrink: 0;
}

/* ── Misc utils ──────────────────────────────────────────────── */
.icon-btn {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: .8rem;
  transition: all .15s; text-decoration: none;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

.filter-chip {
  padding: 5px 11px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: .75rem; font-weight: 600; cursor: pointer;
}
.filter-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .sidebar  { width: 200px; }
  .dash-header { flex-direction: column; gap: var(--sp-4); }
  .table-toolbar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .sidebar  { display: none; }
}
