/* ── anka.css — Jindal Accounts design system ─────────────────────────────
   Loaded after Bootstrap. Overrides typography, layout, cards, tables.
   Uses !important where Bootstrap's specificity or load order would win.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --font-sans:    system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --nb-h:         52px;
  --sb-w:         220px;

  /* Layout */
  --bg-main:      #F2F1ED;
  --card-bg:      #ffffff;
  --card-border:  #e0ddd8;
  --card-radius:  12px;

  /* Brand */
  --color-primary:   #134E48;  /* Anka deep teal */
  --color-secondary: #B1D0C8;  /* Anka mint */

  /* Sidebar */
  --sb-bg:        #1C1C1A;

  /* Text */
  --text-body:    #1a1814;
  --text-muted:   #888580;
  --text-section: rgba(255,255,255,.28);

  /* Role dot colours */
  --dot-home:     #9CA3AF;
  --dot-intake:   #3B82F6;
  --dot-dept:     #14B8A6;
  --dot-proc:     #F59E0B;
  --dot-approver: #22C55E;
  --dot-cfo:      #A855F7;
  --dot-admin:    #d1cec9;
  --dot-tracker:  #9CA3AF;

  /* Sidebar badge */
  --sb-badge-bg:   #F59E0B;
  --sb-badge-text: #1a1814;
}

/* ── Base typography ─────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans) !important;
  font-size:   13px !important;
  font-weight: 400 !important;
  background:  var(--bg-main) !important;
  color:       var(--text-body) !important;
}

/* Headings: weight 500 everywhere, suppress Bootstrap's bold */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 500 !important;
}

/* Page titles — h1 and h2 used as dashboard page titles */
h1, h2 {
  font-size: 20px !important;
}

/* Suppress bold on inline elements */
b, strong, .fw-bold, .fw-semibold, .badge {
  font-weight: 500 !important;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.anka-navbar {
  height:        var(--nb-h);
  min-height:    var(--nb-h);
  background:    var(--sb-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding:       0 1rem;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  position:      fixed;
  top:           0;
  left:          0;
  right:         0;
  z-index:       1040;
}

.anka-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.anka-brand-link {
  display:         inline-flex;
  align-items:     center;
  text-decoration: none;
  line-height:     0;
}

.anka-navbar-logo {
  max-width:  140px;
  max-height: 36px;
  width:      auto;
  height:     auto;
  background: transparent;
  object-fit: contain;
  display:    block;
}

.anka-login-logo {
  max-width: 180px;
  width:     100%;
  height:    auto;
  display:   block;
  margin:    0 auto;
}

.anka-env-label {
  font-size: 11px;
  color:     rgba(255,255,255,.3);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebarDesktop {
  width:          var(--sb-w);
  background:     var(--sb-bg);
  border-right:   1px solid rgba(255,255,255,.05);
  position:       fixed;
  top:            var(--nb-h);
  left:           0;
  height:         calc(100vh - var(--nb-h));
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  z-index:        1030;
}

#sidebarMobile {
  width:      var(--sb-w) !important;
  background: var(--sb-bg) !important;
}

.sb-section {
  padding:        .8rem 1rem .3rem;
  font-size:      9px;
  font-weight:    500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--text-section);
}

.sb-link {
  display:         flex;
  align-items:     center;
  padding:         .42rem .9rem;
  color:           rgba(255,255,255,.62);
  text-decoration: none;
  border-left:     2px solid transparent;
  gap:             9px;
  transition:      background .1s, color .1s, border-color .1s;
}

.sb-link:hover {
  color:             rgba(255,255,255,.9);
  background:        rgba(255,255,255,.06);
  border-left-color: rgba(255,255,255,.15);
}

.sb-link.active {
  color:             #fff;
  background:        rgba(59,130,246,.13);
  border-left-color: #3B82F6;
}

.sb-item-content { flex: 1; min-width: 0; }

.sb-role-name {
  display:       block;
  font-size:     13px !important;
  font-weight:   500 !important;
  color:         inherit;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.25;
}

.sb-person {
  display:       block;
  font-size:     10px !important;
  color:         rgba(255,255,255,.35);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.3;
}

.sb-link.active .sb-person { color: rgba(255,255,255,.48); }

.sb-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    1px;
}

.sb-dot-home     { background: var(--dot-home); }
.sb-dot-intake   { background: var(--dot-intake); }
.sb-dot-dept     { background: var(--dot-dept); }
.sb-dot-proc     { background: var(--dot-proc); }
.sb-dot-approver { background: var(--dot-approver); }
.sb-dot-cfo      { background: var(--dot-cfo); }
.sb-dot-admin    { background: var(--dot-admin); }
.sb-dot-tracker  { background: var(--dot-tracker); }

.sb-badge {
  font-size:     10px !important;
  font-weight:   500 !important;
  background:    var(--sb-badge-bg);
  color:         var(--sb-badge-text);
  border-radius: 10px;
  padding:       1px 6px;
  flex-shrink:   0;
  line-height:   1.5;
}

.sb-divider {
  height:     1px;
  background: rgba(255,255,255,.07);
  margin:     .35rem .75rem;
}

.sb-footer {
  padding:    .75rem 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.sb-footer-name {
  font-size:     11px;
  color:         rgba(255,255,255,.48);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  margin-bottom: 2px;
}

.sb-footer-logout {
  font-size:       11px;
  color:           rgba(255,255,255,.3);
  text-decoration: none;
}

.sb-footer-logout:hover { color: rgba(255,255,255,.6); }

/* ── Page body & main content ───────────────────────────────────────────── */
#page-body {
  padding-top: var(--nb-h);   /* push below fixed navbar */
  min-height:  100vh;
}

#main-content {
  min-width:   0;
  margin-left: var(--sb-w);   /* push right of fixed sidebar */
  background:  var(--bg-main) !important;
}

#main-content .inner-wrap { padding: 1.5rem 1.75rem; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background:    var(--card-bg) !important;
  border:        0.5px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow:    none !important;
}

/* Coloured border overrides (warning/danger cards) */
.card.border-warning { border-color: #ffc107 !important; }
.card.border-danger  { border-color: #dc3545 !important; }
.card.border-success { border-color: #198754 !important; }
.card.border-info    { border-color: #0dcaf0 !important; }
.card.border-primary { border-color: #0d6efd !important; }

/* Card header: 10px uppercase muted — must beat Bootstrap's .card-header */
.card-header {
  background:     transparent !important;
  border-bottom:  0.5px solid var(--card-border) !important;
  font-size:      10px !important;
  font-weight:    500 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color:          var(--text-muted) !important;
  padding:        .6rem 1.25rem !important;
}

/* Card body */
.card-body {
  padding: 1rem 1.25rem !important;
}

/* KPI numbers inside card-body — preserve larger size for stat cards */
.card-body .h2, .card-body .h3, .card-body .h4 {
  font-size:            24px !important;
  font-weight:          500 !important;
  font-variant-numeric: tabular-nums;
  line-height:          1.1;
}

.card-footer {
  background:  transparent !important;
  border-top:  0.5px solid var(--card-border) !important;
  padding:     .6rem 1.25rem !important;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table {
  font-size: 12px !important;
  color:     var(--text-body) !important;
}

.table th {
  font-size:      10px !important;
  font-weight:    500 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color:          var(--text-muted) !important;
  border-color:   var(--card-border) !important;
  vertical-align: middle !important;
}

.table td {
  border-color:   var(--card-border) !important;
  vertical-align: middle !important;
  font-size:      12px !important;
}

/* Hairline borders */
.table-bordered > :not(caption) > * > * { border-width: 0.5px !important; }
.table > :not(caption) > * > *           { border-bottom-width: 0.5px !important; }

/* Amounts: tabular nums on all right-aligned cells */
.text-end { font-variant-numeric: tabular-nums; }

/* Remove Bootstrap's table-light tint from header rows */
.table-light {
  --bs-table-bg:           transparent;
  --bs-table-border-color: var(--card-border);
  background-color:        transparent !important;
}

/* ── Age colour helpers ──────────────────────────────────────────────────── */
.age-ok   { color: #16A34A !important; }
.age-warn { color: #D97706 !important; }
.age-old  { color: #DC2626 !important; }

/* ── Bottleneck bar colours (CFO dashboard) ─────────────────────────────── */
.bar-dept     { background: #14B8A6 !important; }
.bar-proc     { background: #F59E0B !important; }
.bar-approver { background: #22C55E !important; }
.bar-export   { background: #3B82F6 !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  #sidebarDesktop { display: none !important; }
  #main-content   { margin-left: 0 !important; }
  #main-content .inner-wrap { padding: 1rem; }
}