:root{ --brand:#00308F; --brand-600:#0a49c1; --panel:#f8f8ff; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
.bg-brand{ background:var(--brand); }

/* Cards */
.card{ background:#fff; border:1px solid #e6e8ee; border-radius:14px; box-shadow:0 8px 24px rgba(2,18,46,.06); }

/* Inputs & Buttons */
.input{ background:#fff; border:1px solid #d8dbe3; border-radius:10px; padding:.55rem .7rem; font-size:.925rem; color:#111827; }
.input--sm{ padding:.4rem .6rem; font-size:.85rem; }
.input::placeholder{ color:#6b7280; }
.input:focus{ outline:2px solid var(--brand-600); outline-offset:0; border-color:var(--brand-600); }

/* Buttons */
.btn{ background:var(--brand); color:#fff; border-radius:10px; padding:.6rem .9rem; font-weight:600; box-shadow:0 6px 16px rgba(0,48,143,.18); }
.btn:hover{ filter:brightness(1.05); }
.btn--sm{ padding:.45rem .7rem; font-weight:600; font-size:.85rem; }
.btn--light{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); }

/* Sidebar nav */
.navbtn{ text-align:left; background:#fff; border:1px solid #e6e8ee; border-radius:10px; padding:.55rem .7rem; font-weight:600; }
.navbtn[aria-current="page"], .navbtn.active{ background:var(--panel); border-color:var(--brand-600); color:#0a215a; }

/* Table */
.table-wrap{ overflow:auto; max-height:65vh; }
.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.92rem; }
.table th,.table td{ padding:.6rem .75rem; border-bottom:1px solid #eef0f5; }
.table thead th{ position:sticky; top:0; background:#fff; z-index:1; border-bottom:1px solid #e4e7ee; }
.table tbody tr:nth-child(odd){ background:#fafbff; }
.table tbody tr:hover{ background:#f2f6ff; }

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; }
.badge--ok{ color:#065f46; background:#d1fae5; }
.badge--err{ color:#7f1d1d; background:#fee2e2; }
.badge--warn{ color:#92400e; background:#fef3c7; }

/* Spinner */
.spinner{ width:16px; height:16px; border:2px solid #c7d2fe; border-top-color:var(--brand); border-radius:50%; display:inline-block; animation:spin .75s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Toasts */
.toast{ color:#fff; padding:.6rem .8rem; border-radius:12px; box-shadow:0 10px 24px rgba(2,18,46,.18); font-weight:600; }
.toast--ok{ background:#059669; }
.toast--err{ background:#dc2626; }
.toast--info{ background:#1f2937; }
/* Column header styling + resizer + sort indicators */
.th.head { position: sticky; top: 0; background: #fff; z-index: 2; border-bottom: 1px solid #e4e7ee; }
.th-inner { position: relative; display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.th-label { white-space: nowrap; font-size: 12px; text-transform: uppercase; color: #475569; font-weight: 600; letter-spacing: .03em; }
.th-resizer { position: absolute; right: 0; top: 0; width: 6px; height: 100%; cursor: col-resize; background: transparent; }
.th-resizer:hover { background: rgba(0,0,0,.06); }
.cell { white-space: nowrap; }

/* Sort chevrons */
.th-sort { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .35; }
.th-sort.asc { border-bottom: 6px solid #0a49c1; }
.th-sort.desc { border-top: 6px solid #0a49c1; }
/* Header tooltip chip */
.th-info{
    display:inline-flex; align-items:center; justify-content:center;
    width:14px; height:14px; margin-left:6px;
    font-size:10px; font-weight:700; line-height:1;
    border-radius:999px; border:1px solid #94a3b8; color:#475569;
    background:#fff; cursor:help;
  }
  .th-info:hover{ background:#eef2f7; }