/* ============================================================
   Norway Live — Admin / Homepage CMS  (redesign)
   Dark slate sidebar · clean light workspace.
   Self-contained: keyed to dashboard.php's existing class names so
   the server-rendered markup and save flow are untouched. The ops
   console keeps using admin.css — this file is loaded only by the
   homepage CMS (dashboard.php) and the login page.
   ============================================================ */

:root {
  /* workspace */
  --a-bg:       oklch(0.96 0.004 250);
  --a-card:     #ffffff;
  --a-ink:      oklch(0.27 0.02 250);
  --a-ink-soft: oklch(0.46 0.015 250);
  --a-mute:     oklch(0.60 0.012 250);
  --a-line:     oklch(0.91 0.005 250);
  --a-line-2:   oklch(0.86 0.006 250);
  --a-field:    oklch(0.985 0.003 250);

  /* sidebar */
  --side:       oklch(0.20 0.018 250);
  --side-2:     oklch(0.245 0.018 250);
  --side-ink:   oklch(0.86 0.01 250);
  --side-mute:  oklch(0.58 0.014 250);
  --side-line:  oklch(1 0 0 / 0.08);

  /* actions */
  --green:      oklch(0.62 0.15 152);
  --green-h:    oklch(0.55 0.15 152);
  --red:        oklch(0.58 0.21 26);
  --red-h:      oklch(0.51 0.21 26);
  --blue:       oklch(0.55 0.16 252);
  --warn:       oklch(0.74 0.15 70);

  --r: 12px; --r-sm: 8px;
  --shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 4px 14px -8px oklch(0 0 0 / 0.12);
  --shadow-pop: 0 12px 40px -10px oklch(0 0 0 / 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-w: 264px;

  /* legacy aliases — inline styles / Quill block reference these */
  --border:     var(--a-line-2);
  --text:       var(--a-ink);
  --text-muted: var(--a-mute);
  --accent:     var(--blue);
  --radius:     var(--r-sm);
  --card-bg:    var(--a-card);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ============================================================
   Login
   ============================================================ */
.login-body {
  background: var(--a-bg); min-height: 100vh;
  display: grid; place-items: center; color: var(--a-ink); padding: 24px;
}
.login-wrap {
  background: var(--a-card); border: 1px solid var(--a-line);
  border-radius: var(--r); padding: 0 36px 36px; width: 100%; max-width: 380px;
  box-shadow: var(--shadow); overflow: hidden;
}
/* Dark header band so the light brand wordmark stays legible on the white card. */
.login-logo {
  background: var(--side); margin: 0 -36px 28px; padding: 30px 36px;
  display: flex; flex-direction: column; gap: 9px;
}
.login-logo small { font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--side-mute); }
.brand-logo { display: inline-block; vertical-align: middle; width: auto; max-width: 170px; object-fit: contain; }
.brand-logo-sm { height: 20px; } .brand-logo-md { height: 24px; } .brand-logo-lg { height: 34px; }
.login-form .field { margin-bottom: 16px; }

/* ============================================================
   Layout shell
   ============================================================ */
.admin-body { background: var(--a-bg); min-height: 100vh; color: var(--a-ink); }
.admin-layout { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w); background: var(--side); color: var(--side-ink);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; overflow: hidden;
  z-index: 10; border-right: 1px solid var(--side-line);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  padding: 18px 20px; color: #fff; text-decoration: none;
  border-bottom: 1px solid var(--side-line); transition: background .15s;
}
.sidebar-brand:hover { background: oklch(1 0 0 / 0.04); }
.sidebar-brand small {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--side-mute);
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px; scrollbar-width: thin; }
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.1); border-radius: 8px; }

.nav-group { margin-top: 16px; }
.nav-group:first-of-type { margin-top: 4px; }
.nav-group-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 6px; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--side-mute); white-space: nowrap;
}
.nav-new {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  color: var(--side-mute); font-size: 1.05rem; line-height: 1; font-weight: 700;
  text-decoration: none; transition: background .15s, color .15s;
}
.nav-new:hover { background: oklch(1 0 0 / 0.1); color: var(--side-ink); }

.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 11px; border-radius: 8px; font-size: .85rem; font-weight: 500;
  color: var(--side-ink); text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: oklch(1 0 0 / 0.06); color: #fff; }
.nav-item.active { background: oklch(1 0 0 / 0.11); color: #fff; font-weight: 600; }
.nav-item.logout { color: var(--side-mute); }
.nav-item.logout:hover { background: oklch(1 0 0 / 0.06); color: var(--red); }

.sidebar-footer {
  border-top: 1px solid var(--side-line); padding: 12px; flex-shrink: 0;
  display: grid; gap: 2px;
}
.sidebar-footer .nav-item { color: var(--side-mute); font-size: .82rem; }
.sidebar-footer .nav-item:hover { color: var(--side-ink); background: oklch(1 0 0 / 0.06); }

/* ---- Main area ---- */
.admin-main {
  margin-left: var(--sidebar-w); flex: 1;
  padding: 28px 36px 64px; max-width: calc(1080px + var(--sidebar-w));
}

.admin-page-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--a-line);
}
.admin-page-header h1 { font-size: 1.45rem; font-weight: 700; }

/* ---- Alerts ---- */
.alert {
  padding: 12px 18px; border-radius: var(--r-sm); font-size: .9rem;
  font-weight: 500; margin-bottom: 22px;
}
.alert-success { background: oklch(0.62 0.15 152 / 0.12); color: var(--green-h); border: 1px solid oklch(0.62 0.15 152 / 0.3); }
.alert-error   { background: oklch(0.58 0.21 26 / 0.1); color: var(--red-h); border: 1px solid oklch(0.58 0.21 26 / 0.3); }

/* ============================================================
   Cards & forms
   ============================================================ */
.edit-form { display: flex; flex-direction: column; gap: 22px; }
.form-card {
  background: var(--a-card); border: 1px solid var(--a-line);
  border-radius: var(--r); padding: 22px; box-shadow: var(--shadow);
}
.card-title {
  font-size: .95rem; font-weight: 700; margin-bottom: 18px; color: var(--a-ink);
  padding-bottom: 14px; border-bottom: 1px solid var(--a-line);
}

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { font-size: .8rem; font-weight: 600; color: var(--a-ink-soft); }
.field-hint { font-size: .78rem; color: var(--a-mute); }

input[type="text"], input[type="password"], input[type="url"],
input[type="email"], input[type="tel"], input[type="number"],
textarea, select {
  width: 100%; padding: 10px 13px; font-size: .9rem; font-family: inherit;
  color: var(--a-ink); background: var(--a-field);
  border: 1px solid var(--a-line-2); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px oklch(0.55 0.16 252 / 0.13); background: #fff;
}
textarea { resize: vertical; line-height: 1.6; min-height: 110px; }
.code-area { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; }

input[type="file"] {
  padding: 10px; background: var(--a-field);
  border: 1.5px dashed var(--a-line-2); border-radius: var(--r-sm);
  cursor: pointer; font-size: .82rem; color: var(--a-ink-soft); width: 100%;
}
input[type="file"]:hover { border-color: var(--blue); background: oklch(0.55 0.16 252 / 0.04); }

.img-preview {
  max-width: 260px; max-height: 150px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--a-line-2);
}

/* checkbox grids (related / slider picker) */
.checkbox-grid, .slider-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px;
}
.checkbox-label {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  font-size: .85rem; cursor: pointer; user-select: none;
  border: 1px solid var(--a-line-2); border-radius: var(--r-sm); background: var(--a-field);
  transition: border-color .15s, background .15s;
}
.checkbox-label:hover { border-color: var(--a-mute); }
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--green); flex-shrink: 0; }
.checkbox-label:has(input:checked) {
  background: oklch(0.62 0.15 152 / 0.08); border-color: oklch(0.62 0.15 152 / 0.45);
}

/* YouTube live preview */
.yt-live-preview {
  position: relative; width: 100%; max-width: 420px; height: 0;
  padding-bottom: min(236px, 56.25%); margin-top: 14px;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--a-line-2); background: #000;
}
.yt-live-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-sm); font-size: .88rem; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { box-shadow: 0 6px 16px -6px var(--green); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { box-shadow: 0 6px 16px -6px var(--red); }
.btn-ghost { background: var(--a-card); color: var(--a-ink); border-color: var(--a-line-2); }
.btn-ghost:hover { border-color: var(--a-mute); background: var(--a-field); }
.btn-full { width: 100%; justify-content: center; padding: 12px; }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   Dashboard / welcome
   ============================================================ */
.welcome-screen { padding: 8px 0; }
.welcome-screen h1 { font-size: 1.9rem; font-weight: 800; margin-bottom: 4px; }
.welcome-screen > p { color: var(--a-mute); margin-bottom: 28px; }

.stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.stat-card {
  background: var(--a-card); border: 1px solid var(--a-line);
  border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow);
  min-width: 0; text-align: left;
}
.stat-num { font-size: 2rem; font-weight: 800; color: var(--a-ink); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: .8rem; color: var(--a-mute); font-weight: 500; }

.coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.coverage-card {
  background: var(--a-card); border: 1px solid var(--a-line);
  border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow);
}
.coverage-title { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--a-mute); }
.coverage-bar-wrap { height: 7px; border-radius: 999px; background: var(--a-line); margin: 12px 0 10px; overflow: hidden; }
.coverage-bar { height: 100%; border-radius: 999px; background: var(--green); transition: width .4s var(--ease); }
.coverage-meta { display: flex; gap: 12px; font-size: .82rem; }
.coverage-meta .ok { color: var(--green); font-weight: 600; }
.coverage-meta .warn { color: var(--red); font-weight: 600; }

.last-saved {
  background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--r);
  padding: 13px 18px; font-size: .85rem; color: var(--a-ink-soft); margin-bottom: 22px;
}
.last-saved strong { color: var(--a-ink); }

.quick-edit-section { margin-top: 4px; }
.quick-edit-title { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a-mute); margin-bottom: 12px; }
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-link {
  background: var(--a-card); border: 1px solid var(--a-line-2); border-radius: 999px;
  padding: 7px 14px; font-size: .82rem; font-weight: 600; color: var(--a-ink);
  transition: border-color .15s, color .15s;
}
.quick-link:hover { border-color: var(--blue); color: var(--blue); }

/* ============================================================
   Mobile
   ============================================================ */
.sidebar-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 20;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--side); border: none; color: #fff;
  align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 10px oklch(0 0 0 / 0.3);
}
.sidebar-overlay { display: none; position: fixed; inset: 0; background: oklch(0.2 0.02 250 / 0.5); z-index: 9; }
.sidebar-overlay.show { display: block; }

@media (max-width: 980px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .coverage-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sidebar-toggle { display: flex; }
  .sidebar { transform: translateX(-100%); transition: transform .25s var(--ease); z-index: 15; width: 280px; }
  .sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0 !important; padding: 60px 16px 48px; max-width: none; }
  .admin-page-header { flex-wrap: wrap; gap: 10px; }
  .admin-page-header h1 { font-size: 1.2rem; }
  .field-row { grid-template-columns: 1fr !important; }
  .form-card { padding: 18px 16px; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .quick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-link { text-align: center; white-space: normal; word-break: break-word; }
}

/* ============================================================
   Article block editor
   ============================================================ */
.btn-sm { padding: 6px 12px; font-size: .8rem; }
.blk-add-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--a-line); }
.blk-card { background: var(--a-field); border: 1px solid var(--a-line-2); border-radius: var(--r-sm); margin-bottom: 12px; overflow: hidden; }
.blk-card-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--a-card); border-bottom: 1px solid var(--a-line); }
.blk-type { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--a-mute); }
.blk-tools { display: flex; gap: 4px; }
.blk-tools button { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--a-line-2); background: var(--a-card); color: var(--a-ink); border-radius: 5px; cursor: pointer; font-size: .8rem; line-height: 1; }
.blk-tools button:hover { border-color: var(--a-mute); }
.blk-tools .blk-del:hover { border-color: var(--red); color: var(--red); }
.blk-card-body { padding: 14px; }
.blk-card-body .field:last-child { margin-bottom: 0; }
.blk-card-body .q-holder { background: #fff; border-radius: 6px; }

/* Article list rows */
.art-row { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--a-ink); border: 1px solid transparent; }
.art-row:hover { background: var(--a-field); border-color: var(--a-line-2); }
.art-row-title { font-weight: 600; flex: 1; min-width: 0; }
.art-row-meta { font-size: .82rem; color: var(--a-mute); font-variant-numeric: tabular-nums; }
.art-badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; background: var(--a-line); color: var(--a-mute); }
.art-badge.on { background: oklch(0.62 0.15 152 / 0.15); color: var(--green-h); }