@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Brand tokens ────────────────────────────────────────────────────────── */
:root {
  --xa-navy:    #0B1F3A;
  --xa-cream:   #F5F2EC;
  --xa-paper:   #ECE6DA;
  --xa-ink:     #14110D;
  --xa-warm:    #6E6557;
  --xa-blue:    #2F6BFF;
  --xa-success: #3F9D6E;
  --xa-danger:  #C4302B;
  --xa-gold:    #C8A45C;
  --xa-line:    rgba(20,17,13,.12);

  --sidebar-bg:    var(--xa-navy);
  --sidebar-width: 260px;
  --topbar-height: 56px;

  /* Override Bootstrap core tokens */
  --bs-primary:           #2F6BFF;
  --bs-primary-rgb:       47,107,255;
  --bs-body-bg:           #F5F2EC;
  --bs-body-color:        #14110D;
  --bs-secondary-color:   #6E6557;
  --bs-border-radius:     0px;
  --bs-border-radius-sm:  0px;
  --bs-border-radius-lg:  2px;
  --bs-border-radius-xl:  4px;
  --bs-border-color:      rgba(20,17,13,.12);
  --bs-font-sans-serif:   'Geist', system-ui, sans-serif;
  --bs-success:           #3F9D6E;
  --bs-danger:            #C4302B;
  --bs-success-rgb:       63,157,110;
  --bs-danger-rgb:        196,48,43;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 0.9rem;
  background: var(--xa-cream);
  color: var(--xa-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar {
  background: var(--xa-navy);
  transition: width 0.2s ease;
}
#sidebar.collapsed {
  width: 64px !important;
}
#sidebar.collapsed .nav-link span,
#sidebar.collapsed .brand-text,
#sidebar.collapsed .sidebar-footer-text {
  display: none !important;
}
#sidebar .nav-link {
  transition: background 0.15s, color 0.15s;
  border-radius: 0 !important;
  color: rgba(255,255,255,.55);
}
#sidebar .nav-link:hover {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
}
#sidebar .nav-link.active {
  background: var(--xa-blue) !important;
  color: #fff !important;
}
#sidebar .nav-link.active i,
#sidebar .nav-link.active span {
  color: #fff !important;
  opacity: 1 !important;
}
.sidebar-brand-border {
  border-color: rgba(255,255,255,.1) !important;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.navbar.topbar-main {
  background: var(--xa-cream) !important;
  border-bottom: 1px solid var(--xa-line) !important;
  height: var(--topbar-height);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--xa-line);
  border-radius: 0 !important;
  background: #fff;
}
.card-header {
  border-bottom: 1px solid var(--xa-line);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table th {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--xa-warm);
  background: var(--xa-paper);
  border-bottom: 1px solid var(--xa-line);
}
.table td {
  vertical-align: middle;
  font-size: .875rem;
  border-color: var(--xa-line);
}
.table-hover tbody tr:hover {
  background-color: var(--xa-paper);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  border-radius: 0 !important;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
}
.btn-primary {
  background: var(--xa-blue);
  border-color: var(--xa-blue);
}
.btn-primary:hover, .btn-primary:focus {
  background: #1a56e8;
  border-color: #1a56e8;
}
.btn-outline-primary {
  color: var(--xa-blue);
  border-color: var(--xa-blue);
}
.btn-outline-primary:hover {
  background: var(--xa-blue);
  border-color: var(--xa-blue);
}
.btn-success {
  background: var(--xa-success);
  border-color: var(--xa-success);
}
.btn-danger {
  background: var(--xa-danger);
  border-color: var(--xa-danger);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--xa-ink);
}
.form-control, .form-select {
  font-size: .875rem;
  border-radius: 0 !important;
  border-color: var(--xa-line);
  background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--xa-blue);
  box-shadow: 0 0 0 2px rgba(47,107,255,.15);
}
.input-group-text {
  border-radius: 0 !important;
  background: var(--xa-paper);
  border-color: var(--xa-line);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  font-weight: 500;
  font-size: .75rem;
  border-radius: 2px !important;
}
.bg-success { background: var(--xa-success) !important; }
.bg-danger  { background: var(--xa-danger)  !important; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination .page-link {
  font-size: .8rem;
  padding: .35rem .6rem;
  color: var(--xa-blue);
  border-radius: 0 !important;
  border-color: var(--xa-line);
}
.pagination .page-item.active .page-link {
  background: var(--xa-blue);
  border-color: var(--xa-blue);
}

/* ── Dropdown ────────────────────────────────────────────────────────────── */
.dropdown-menu {
  border-radius: 0 !important;
  border: 1px solid var(--xa-line);
  box-shadow: 0 8px 24px rgba(20,17,13,.1);
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
  border-radius: 0 !important;
  border: 1px solid var(--xa-line);
}
.modal-header {
  border-bottom: 1px solid var(--xa-line);
}
.modal-footer {
  border-top: 1px solid var(--xa-line);
}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
#toastContainer .toast {
  min-width: 280px;
  border-radius: 0 !important;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header {
  padding-bottom: .75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--xa-line);
}
.page-header h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.3px;
}

/* ── Action buttons in tables ────────────────────────────────────────��───── */
.btn-action {
  padding: .2rem .5rem;
  font-size: .8rem;
}

/* ── Typography utilities ────────────────────────────────────────────────── */
.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .85em;
}
.text-serif-italic {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
}
.text-warm  { color: var(--xa-warm)   !important; }
.text-ink   { color: var(--xa-ink)    !important; }
.text-navy  { color: var(--xa-navy)   !important; }
.text-xa-blue { color: var(--xa-blue) !important; }

/* ── Background utilities ────────────────────────────────────────────────── */
.bg-cream   { background: var(--xa-cream) !important; }
.bg-paper   { background: var(--xa-paper) !important; }
.bg-navy    { background: var(--xa-navy)  !important; }

.bg-navy-grid {
  background-color: var(--xa-navy);
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  border-radius: 0 !important;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb-item a {
  color: var(--xa-blue);
}
.breadcrumb-item.active {
  color: var(--xa-warm);
}

/* ── User avatar in topbar ───────────────────────────────────────────────── */
.topbar-avatar {
  background: var(--xa-blue);
  border-radius: 0 !important;
}