/*
 * SEUK Database — the only stylesheet. Bootstrap utilities first; add CSS here only for
 * what utilities can't do. Colours are tokens so a re-skin is a one-place change.
 */

:root {
  --seuk-brand: #13315c;          /* navy */
  --seuk-brand-2: #1d4e89;
  --seuk-accent: #e4572e;         /* Spy orange-red */
  --seuk-sidebar-w: 248px;
  --seuk-topbar-h: 56px;
  --seuk-bg: #f4f6f9;
  --bs-primary: #1d4e89;
  --bs-primary-rgb: 29, 78, 137;
  --bs-link-color: #1d4e89;
  --bs-link-color-rgb: 29, 78, 137;
}

body.seuk-app { background: var(--seuk-bg); }

.btn-primary {
  --bs-btn-bg: var(--seuk-brand-2);
  --bs-btn-border-color: var(--seuk-brand-2);
  --bs-btn-hover-bg: var(--seuk-brand);
  --bs-btn-hover-border-color: var(--seuk-brand);
  --bs-btn-active-bg: var(--seuk-brand);
}

/* ── Top bar ─────────────────────────────────────────────── */
.seuk-topbar {
  background: linear-gradient(90deg, var(--seuk-brand), var(--seuk-brand-2));
  min-height: var(--seuk-topbar-h);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.seuk-topbar .navbar-brand { color: #fff; }
.seuk-search { min-width: 360px; }
.seuk-search .form-select { max-width: 140px; }

/* ── Layout ──────────────────────────────────────────────── */
.seuk-layout { display: flex; min-height: calc(100vh - var(--seuk-topbar-h)); }
.seuk-main { flex: 1 1 auto; min-width: 0; padding: 1.25rem; }
@media (min-width: 992px) {
  .seuk-sidebar {
    width: var(--seuk-sidebar-w);
    flex: 0 0 var(--seuk-sidebar-w);
    background: #fff;
    border-right: 1px solid var(--bs-border-color);
    position: sticky;
    top: var(--seuk-topbar-h);
    height: calc(100vh - var(--seuk-topbar-h));
    overflow-y: auto;
  }
  .seuk-main { padding: 1.5rem 2rem; }
}

/* ── Sidebar nav ─────────────────────────────────────────── */
.seuk-nav { padding: .75rem .5rem 2rem; width: 100%; }
.seuk-nav-group {
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bs-secondary-color); padding: 1rem .75rem .35rem;
}
.seuk-nav .nav-link {
  display: flex; align-items: center; gap: .6rem;
  color: var(--bs-body-color); border-radius: .375rem; padding: .4rem .75rem; font-size: .925rem;
}
.seuk-nav .nav-link .bi { font-size: 1rem; opacity: .75; }
.seuk-nav .nav-link:hover { background: var(--bs-tertiary-bg); }
.seuk-nav .nav-link.active { background: rgba(var(--bs-primary-rgb), .1); color: var(--seuk-brand-2); font-weight: 600; }
.seuk-nav .nav-link.active .bi { opacity: 1; }

/* ── Tables ──────────────────────────────────────────────── */
.seuk-table-wrap { padding: .75rem 1rem 1rem; }
.seuk-table-wrap .fixed-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.seuk-table-wrap .fixed-table-toolbar .search { margin-left: auto; }
.seuk-table-wrap thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.seuk-table-wrap .bootstrap-table .fixed-table-container .table thead th .th-inner { padding: .55rem .5rem; }
.seuk-table-wrap tbody td { font-size: .9rem; }
.seuk-table-wrap tr[data-clickable] { cursor: pointer; }
.seuk-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.seuk-table-toolbar .form-select, .seuk-table-toolbar .form-control { width: auto; }

/* ── KPIs ────────────────────────────────────────────────── */
.seuk-kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.seuk-kpi-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.seuk-kpi-hint { font-size: .8rem; color: var(--bs-secondary-color); }

/* ── Offcanvas detail panels ─────────────────────────────── */
.seuk-panel.offcanvas-end { --bs-offcanvas-width: min(720px, 100vw); }

.seuk-daterange { width: auto; flex: 0 0 auto; min-width: 250px; }
.seuk-daterange .form-control { width: 210px; flex: 0 0 auto; }
.seuk-table-wrap .fixed-table-toolbar .bs-bars { float: none !important; flex: 1 1 auto; }
.seuk-table-wrap .fixed-table-toolbar::after { display: none; }
.seuk-daterange input[readonly] { background: var(--bs-body-bg); cursor: pointer; }

/* ── Login ───────────────────────────────────────────────── */
body.seuk-login {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 20% 10%, #24538f 0%, transparent 60%),
              linear-gradient(160deg, #0c1f3b 0%, #13315c 55%, #0a1a31 100%);
}
.seuk-login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.seuk-login-card { width: 100%; max-width: 420px; border-radius: 1rem; }
.seuk-login-mark {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 1rem; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--seuk-brand-2), var(--seuk-brand)); color: #fff; font-size: 2rem;
  box-shadow: 0 8px 20px rgba(19, 49, 92, .35);
}
.seuk-login-or { display: flex; align-items: center; gap: .75rem; color: var(--bs-secondary-color); font-size: .8rem; }
.seuk-login-or::before, .seuk-login-or::after { content: ""; flex: 1; border-top: 1px solid var(--bs-border-color); }
.seuk-login-password summary { cursor: pointer; list-style: none; }
.seuk-login-password summary::-webkit-details-marker { display: none; }