/* ============================================================
   PuB-register — UBM Grafisk profil v4
   Inter (body+headings), UBM navy palette, gold accent
   ============================================================ */

/* --- Fonts: Inter (self-hosted, per UBM manual) --- */
@font-face { font-family:'Inter'; src:url('/static/fonts/inter-latin-ext.woff2')format('woff2'); font-weight:300 800; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family:'Inter'; src:url('/static/fonts/inter-latin.woff2')format('woff2'); font-weight:300 800; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- Reset --- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

/* --- Tokens --- */
:root {
  --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px;
  --space-xl:24px; --space-2xl:32px; --space-3xl:48px; --space-4xl:64px; --space-5xl:96px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --topnav-h:56px;
  /* UBM brand colors */
  --ubm-navy-1:#0A1628;  /* svart/mörkast */
  --ubm-navy-2:#0D1F42;  /* blå 1 */
  --ubm-navy-3:#1B3A6B;  /* blå 2 */
  --ubm-gold:#C9A84C;    /* guld accentlinje */
  --ubm-teal-1:#1A4A4A;  /* grön 1 */
  --ubm-teal-2:#2D7A7A;  /* grön 2 */
  --ubm-wine-1:#4A1A2A;  /* röd 1 */
  --ubm-wine-2:#7A2845;  /* röd 2 */
}

/* --- Light --- */
:root,[data-theme="light"] {
  --c-bg:#f5f6f8; --c-surface:#ffffff; --c-raised:#f0f1f4;
  --c-border:#d8dbe2; --c-border-subtle:#e8eaef;
  --c-text:#111827; --c-text2:#4b5563; --c-muted:#9ca3af;
  --c-primary:var(--ubm-navy-3); --c-primary-hover:var(--ubm-navy-2); --c-primary-subtle:#e8eef6; --c-primary-text:#ffffff;
  --c-accent:var(--ubm-gold);
  --c-success:#15803d; --c-success-bg:#dcfce7; --c-success-text:#14532d;
  --c-warning:#a16207; --c-warning-bg:#fef9c3; --c-warning-text:#713f12;
  --c-danger:#dc2626; --c-danger-bg:#fee2e2; --c-danger-text:#7f1d1d;
  --c-info:var(--ubm-navy-3); --c-info-bg:#dbeafe; --c-info-text:#1e3a5f;
  --c-nav:var(--ubm-navy-1); --c-nav-text:#ffffff; --c-nav-muted:rgba(255,255,255,0.6); --c-nav-hover:rgba(255,255,255,0.08);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06); --shadow-md:0 4px 16px rgba(0,0,0,0.1); --shadow-lg:0 12px 40px rgba(0,0,0,0.15);
  color-scheme:light;
}

/* --- Dark --- */
[data-theme="dark"] {
  --c-bg:#0c1220; --c-surface:#141c2e; --c-raised:#1a253d;
  --c-border:#2a3550; --c-border-subtle:#1f2b44;
  --c-text:#e8ecf4; --c-text2:#9ca8c0; --c-muted:#6b7a94;
  --c-primary:#5b9bd5; --c-primary-hover:#7db0e0; --c-primary-subtle:#1b2e4a; --c-primary-text:#0c1220;
  --c-accent:var(--ubm-gold);
  --c-success:#4ade80; --c-success-bg:#14532d; --c-success-text:#bbf7d0;
  --c-warning:#facc15; --c-warning-bg:#422006; --c-warning-text:#fef08a;
  --c-danger:#f87171; --c-danger-bg:#450a0a; --c-danger-text:#fecaca;
  --c-info:#60a5fa; --c-info-bg:#1e3a5f; --c-info-text:#bfdbfe;
  --c-nav:#060d1a; --c-nav-text:rgba(255,255,255,0.9); --c-nav-muted:rgba(255,255,255,0.45); --c-nav-hover:rgba(255,255,255,0.06);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.3); --shadow-md:0 4px 16px rgba(0,0,0,0.4); --shadow-lg:0 12px 40px rgba(0,0,0,0.5);
  color-scheme:dark;
}

/* --- Base --- */
html { font-size:100%; font-kerning:normal; scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--c-bg); color:var(--c-text); line-height:1.6; -webkit-font-smoothing:antialiased; }
[data-theme="dark"] body { line-height:1.65; font-weight:350; }

/* =============================================================
   TOP NAVIGATION — UBM navy + gold accent stripe
   ============================================================= */
.topnav {
  position:sticky; top:0; z-index:200;
  background:linear-gradient(135deg, var(--ubm-navy-1), var(--ubm-navy-2));
  color:var(--c-nav-text);
  border-bottom:3px solid var(--ubm-gold);
  height:var(--topnav-h);
}
[data-theme="dark"] .topnav { background:linear-gradient(135deg, #050a14, #0a1628); }

.topnav__inner {
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; gap:var(--space-xl);
  padding:0 var(--space-xl); height:100%;
}
.topnav__brand {
  display:flex; align-items:center; gap:var(--space-md);
  text-decoration:none; color:var(--c-nav-text); flex-shrink:0;
}
.topnav__logo {
  font-family:var(--font); font-size:1.3rem; font-weight:800;
  letter-spacing:-0.02em; line-height:1;
}
.topnav__title {
  font-size:0.72rem; color:var(--c-nav-muted);
  border-left:1px solid rgba(255,255,255,0.15); padding-left:var(--space-md);
  white-space:nowrap;
}
.topnav__hamburger {
  display:none; background:none; border:none; color:var(--c-nav-text);
  cursor:pointer; padding:var(--space-sm);
}
.topnav__links { display:flex; align-items:center; gap:2px; flex:1; }
.topnav__link {
  display:inline-flex; align-items:center;
  padding:var(--space-sm) var(--space-lg);
  font-family:var(--font); font-size:0.82rem; font-weight:600;
  color:var(--c-nav-muted); text-decoration:none;
  border-radius:var(--radius-sm);
  transition:background 0.12s,color 0.12s;
  background:transparent; border:none; cursor:pointer;
  white-space:nowrap; line-height:1;
}
.topnav__link:hover,.topnav__link.is-active { background:var(--c-nav-hover); color:var(--c-nav-text); }
.topnav__link.is-active { border-bottom:2px solid var(--ubm-gold); border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.topnav__dropdown { position:relative; }
.topnav__dropdown-menu {
  display:none; position:absolute; top:calc(100% + 8px); left:0;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius-md); padding:var(--space-xs) 0;
  min-width:200px; box-shadow:var(--shadow-lg); z-index:300;
}
.topnav__dropdown.is-open .topnav__dropdown-menu { display:block; }
.topnav__dropdown-item {
  display:block; padding:var(--space-sm) var(--space-xl);
  font-size:0.84rem; font-weight:500; color:var(--c-text);
  text-decoration:none; transition:background 0.1s;
}
.topnav__dropdown-item:hover { background:var(--c-raised); }
.topnav__dropdown-item.is-active { color:var(--c-primary); font-weight:700; }
.topnav__actions {
  display:flex; align-items:center; gap:var(--space-md); margin-left:auto; flex-shrink:0;
}
.topnav__user { font-size:0.78rem; font-weight:500; color:var(--c-nav-muted); white-space:nowrap; }
.topnav__user-role { font-size:0.68rem; opacity:0.65; }
.topnav__theme-btn {
  background:none; border:1px solid rgba(255,255,255,0.12);
  color:var(--c-nav-muted); width:30px; height:30px; display:flex;
  align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; font-size:0.8rem;
  transition:background 0.12s,color 0.12s;
}
.topnav__theme-btn:hover { background:var(--c-nav-hover); color:var(--c-nav-text); }

/* =============================================================
   PAGE CONTAINER + FOOTER
   ============================================================= */
.page-container {
  max-width:1100px; margin:0 auto;
  padding:var(--space-2xl) var(--space-xl);
  min-height:calc(100vh - var(--topnav-h) - 52px);
}
@media(min-width:1600px) { .page-container { max-width:1300px; padding:var(--space-3xl) var(--space-2xl); } }
.footer {
  text-align:center; padding:var(--space-lg);
  font-size:0.7rem; color:var(--c-muted);
  border-top:1px solid var(--c-border-subtle);
}

/* =============================================================
   TYPOGRAPHY — Inter with UBM weight system
   ============================================================= */
.page-eyebrow {
  font-size:0.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--ubm-gold); margin-bottom:var(--space-xs);
}
[data-theme="dark"] .page-eyebrow { color:var(--ubm-gold); }
h1,.h1 { font-size:1.75rem; font-weight:700; line-height:1.2; letter-spacing:-0.025em; color:var(--c-text); margin-bottom:var(--space-sm); }
h2,.h2 { font-size:1.1rem; font-weight:700; line-height:1.3; letter-spacing:-0.01em; color:var(--c-text); margin-bottom:var(--space-sm); }
h3,.h3 { font-size:0.95rem; font-weight:700; line-height:1.3; color:var(--c-text); }
a { color:var(--c-primary); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
.text-secondary { color:var(--c-text2); }
.text-muted { color:var(--c-muted); }
.text-sm { font-size:0.85rem; }

/* =============================================================
   CARDS — clean with subtle gold top-border option
   ============================================================= */
.card {
  background:var(--c-surface); border:1px solid var(--c-border-subtle);
  border-radius:var(--radius-md); padding:var(--space-xl);
  margin-bottom:var(--space-xl); box-shadow:var(--shadow-sm);
}
.card h2 { margin-bottom:var(--space-lg); }

/* =============================================================
   STATS
   ============================================================= */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-lg); margin-bottom:var(--space-2xl); }
.stat-card {
  background:var(--c-surface); border:1px solid var(--c-border-subtle);
  border-top:3px solid var(--ubm-navy-3);
  border-radius:var(--radius-md); padding:var(--space-xl);
  box-shadow:var(--shadow-sm); transition:box-shadow 0.2s var(--ease),transform 0.2s var(--ease);
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-card__value {
  font-size:2.2rem; font-weight:800; color:var(--ubm-navy-3);
  line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
}
[data-theme="dark"] .stat-card__value { color:var(--c-primary); }
.stat-card__label {
  font-size:0.7rem; font-weight:600; color:var(--c-muted);
  margin-top:var(--space-xs); text-transform:uppercase; letter-spacing:0.05em;
}

/* =============================================================
   FORMS
   ============================================================= */
.form-stack { display:flex; flex-direction:column; gap:var(--space-lg); }
.form-field { display:flex; flex-direction:column; gap:var(--space-xs); }
.form-field label,.form-label { font-size:0.82rem; font-weight:600; color:var(--c-text); }
.form-row { display:flex; gap:var(--space-md); align-items:end; flex-wrap:wrap; }
.form-row .form-field { flex:1; min-width:160px; }
input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="search"],input:not([type]),select,textarea {
  padding:10px var(--space-lg); border:1px solid var(--c-border); border-radius:var(--radius-sm);
  font-family:var(--font); font-size:0.88rem; background:var(--c-surface); color:var(--c-text);
  width:100%; transition:border-color 0.12s,box-shadow 0.12s; line-height:1.5;
}
input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--c-primary); outline-offset:1px; border-color:var(--c-primary);
}
textarea { min-height:80px; resize:vertical; }
select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-md) center; padding-right:var(--space-2xl);
}
.checkbox-group { display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-lg); padding:var(--space-sm) 0; }
.checkbox-label { display:flex; align-items:center; gap:6px; font-size:0.88rem; cursor:pointer; }
.checkbox-label input[type="checkbox"] { width:auto; accent-color:var(--c-primary); }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm);
  padding:9px var(--space-xl); font-family:var(--font); font-size:0.85rem; font-weight:600;
  border:none; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none;
  transition:background 0.12s,transform 0.06s; min-height:38px; line-height:1; white-space:nowrap;
}
.btn:active { transform:scale(0.97); }
.btn:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
.btn-primary { background:var(--c-primary); color:var(--c-primary-text); }
.btn-primary:hover { background:var(--c-primary-hover); text-decoration:none; }
.btn-secondary { background:var(--c-raised); color:var(--c-text); border:1px solid var(--c-border); }
.btn-secondary:hover { background:var(--c-border-subtle); text-decoration:none; }
.btn-success { background:var(--c-success); color:#fff; }
.btn-success:hover { opacity:0.9; text-decoration:none; }
.btn-ghost { background:transparent; color:var(--c-text2); }
.btn-ghost:hover { background:var(--c-primary-subtle); color:var(--c-primary); text-decoration:none; }
.btn-danger { background:var(--c-danger); color:#fff; }
.btn-xs { padding:3px var(--space-md) !important; font-size:0.72rem !important; min-height:26px !important; }
.btn-row { display:flex; gap:var(--space-md); flex-wrap:wrap; align-items:center; }

/* =============================================================
   BADGES
   ============================================================= */
.badge {
  display:inline-flex; align-items:center; padding:2px 10px; border-radius:var(--radius-sm);
  font-size:0.68rem; font-weight:700; line-height:1.7; white-space:nowrap;
  text-transform:uppercase; letter-spacing:0.04em;
}
.badge-ok { background:var(--c-success-bg); color:var(--c-success-text); }
.badge-warn { background:var(--c-warning-bg); color:var(--c-warning-text); }
.badge-info { background:var(--c-info-bg); color:var(--c-info-text); }
.badge-danger { background:var(--c-danger-bg); color:var(--c-danger-text); }

/* =============================================================
   TABLES
   ============================================================= */
.data-table { width:100%; border-collapse:collapse; font-size:0.87rem; }
.data-table th {
  text-align:left; padding:var(--space-sm) var(--space-lg);
  font-weight:700; font-size:0.68rem; color:var(--c-muted);
  border-bottom:2px solid var(--c-border); text-transform:uppercase; letter-spacing:0.05em;
}
.data-table td { padding:var(--space-md) var(--space-lg); border-bottom:1px solid var(--c-border-subtle); vertical-align:middle; }
.data-table tbody tr { transition:background 0.08s; }
.data-table tbody tr:hover td { background:var(--c-raised); }
.data-table td a { font-weight:600; text-decoration:none; color:var(--c-primary); }
.data-table td a:hover { text-decoration:underline; text-underline-offset:2px; }

/* Review table */
.review-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
.review-table td { padding:var(--space-sm) var(--space-md); border-bottom:1px solid var(--c-border-subtle); vertical-align:top; }
.review-table__key { font-weight:600; white-space:nowrap; width:38%; color:var(--c-text2); }

/* =============================================================
   FLASH / EMPTY STATE / SECTION
   ============================================================= */
.flash { padding:var(--space-md) var(--space-lg); border-radius:var(--radius-sm); margin-bottom:var(--space-lg); font-size:0.87rem; font-weight:500; }
.flash-success { background:var(--c-success-bg); color:var(--c-success-text); }
.flash-error { background:var(--c-danger-bg); color:var(--c-danger-text); }
.flash-warn { background:var(--c-warning-bg); color:var(--c-warning-text); }
.empty-state { text-align:center; padding:var(--space-4xl) var(--space-xl); color:var(--c-muted); }
.empty-state__heading { font-size:1.1rem; font-weight:700; color:var(--c-text2); margin-bottom:var(--space-sm); }
.empty-state__text { font-size:0.87rem; max-width:45ch; margin:0 auto; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xl); }
.section { margin-bottom:var(--space-2xl); }
.section-header { margin-bottom:var(--space-xl); }
.section-header p { color:var(--c-text2); font-size:0.88rem; max-width:65ch; line-height:1.55; }

/* =============================================================
   LOGIN PAGE — UBM dark gradient background
   ============================================================= */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--ubm-navy-1) 0%, var(--ubm-navy-2) 40%, var(--ubm-navy-3) 100%);
  padding:var(--space-xl);
}
.login-card {
  width:100%; max-width:420px; background:var(--c-surface);
  border:1px solid var(--c-border-subtle); border-radius:var(--radius-lg);
  padding:var(--space-3xl) var(--space-2xl) var(--space-xl);
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.login-card__brand {
  text-align:center; margin-bottom:var(--space-lg);
}
.login-card__logo-text {
  font-size:0.92rem; font-weight:700; color:var(--c-text);
  letter-spacing:-0.01em;
}
.login-card__gold-line {
  width:48px; height:3px; background:var(--ubm-gold);
  margin:0 auto var(--space-xl);
  border-radius:2px;
}
.login-card__title {
  font-size:1.5rem; font-weight:800; letter-spacing:-0.025em;
  text-align:center; margin-bottom:var(--space-xs); color:var(--c-text);
}
.login-card__subtitle {
  text-align:center; color:var(--c-muted); font-size:0.85rem;
  margin-bottom:var(--space-xl);
}
.login-alert {
  padding:var(--space-sm) var(--space-lg); border-radius:var(--radius-sm);
  font-size:0.84rem; font-weight:500; margin-bottom:var(--space-lg);
  background:var(--c-danger-bg); color:var(--c-danger-text);
}
.login-form { display:flex; flex-direction:column; gap:var(--space-lg); }
.login-field { display:flex; flex-direction:column; gap:var(--space-xs); }
.login-field__label { font-size:0.8rem; font-weight:600; color:var(--c-text2); }
.login-field__input {
  padding:11px var(--space-lg); border:1px solid var(--c-border); border-radius:var(--radius-sm);
  font-family:var(--font); font-size:0.92rem; background:var(--c-surface); color:var(--c-text);
  width:100%; transition:border-color 0.12s,box-shadow 0.12s;
}
.login-field__input:focus-visible { outline:2px solid var(--c-primary); outline-offset:1px; border-color:var(--c-primary); }
.login-field__hint { font-size:0.72rem; color:var(--c-muted); }
.login-btn {
  width:100%; padding:12px; margin-top:var(--space-sm);
  font-family:var(--font); font-size:0.9rem; font-weight:700;
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--ubm-navy-2); color:#ffffff;
  transition:background 0.12s,transform 0.06s; min-height:44px;
}
.login-btn:hover { background:var(--ubm-navy-3); }
.login-btn:active { transform:scale(0.98); }
.login-card__footer { display:flex; justify-content:center; margin-top:var(--space-xl); padding-top:var(--space-lg); border-top:1px solid var(--c-border-subtle); }
.login-theme-toggle {
  width:34px; height:34px; border:1px solid var(--c-border-subtle); border-radius:50%;
  background:transparent; color:var(--c-muted); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:0.85rem; transition:all 0.12s;
}
.login-theme-toggle:hover { color:var(--c-text); border-color:var(--c-border); background:var(--c-raised); }
[data-theme="light"] .login-theme-toggle__sun { display:none; }
[data-theme="dark"] .login-theme-toggle__moon { display:none; }

/* Sidebar compat (hidden) */
.sidebar,.sidebar__brand,.sidebar__app-title,.sidebar__section-label,.sidebar__nav,
.sidebar__link,.sidebar__spacer,.sidebar__user,.sidebar__user-info,.sidebar__user-name,
.sidebar__user-role,.sidebar__footer,.mobile-header,.mobile-header__toggle,.app-shell,
.main-content,.theme-toggle,.theme-toggle__icon { display:none; }

/* Animation */
.fade-in { animation:fadeIn 0.3s var(--ease); }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Responsive */
@media(max-width:768px) {
  .topnav__inner { flex-wrap:wrap; gap:var(--space-sm); padding:0 var(--space-lg); }
  .topnav { height:auto; min-height:var(--topnav-h); }
  .topnav__hamburger { display:flex; margin-left:auto; }
  .topnav__links { display:none; flex-direction:column; width:100%; padding:var(--space-sm) 0; gap:0; border-top:1px solid rgba(255,255,255,0.08); }
  .topnav__links.is-open { display:flex; }
  .topnav__link { width:100%; padding:var(--space-md); }
  .topnav__dropdown-menu { position:static; box-shadow:none; border:none; background:transparent; padding-left:var(--space-xl); }
  .topnav__dropdown-item { color:var(--c-nav-muted); }
  .topnav__dropdown.is-open .topnav__dropdown-menu { display:block; }
  .topnav__actions { width:100%; justify-content:space-between; padding:var(--space-sm) var(--space-md); border-top:1px solid rgba(255,255,255,0.08); }
  .page-container { padding:var(--space-xl) var(--space-lg); }
  .grid-2 { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr; }
  .form-row { flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; } }

/* Print */
@media print {
  .topnav,.footer,.btn,.no-print { display:none !important; }
  .page-container { padding:0; max-width:100%; }
  .card { box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
}