/* ==========================================================================
   Obgin FK-UMI — dashboard (/wp-admin)
   One stylesheet, no external fonts or CDNs: the CSP allows 'self' only.
   ========================================================================== */

:root {
  --navy-900: #06243a;
  --navy-800: #0a3251;
  --navy-700: #0d3b5c;
  --navy-600: #11507b;
  --navy-500: #1c6ea4;
  --navy-100: #e6f1f9;
  --navy-50:  #f4f9fd;

  --teal-600: #0d8a7d;
  --teal-500: #12a596;
  --teal-100: #e2f6f3;

  --gold-500: #d9a520;
  --gold-100: #fdf4dd;

  --red-600: #b3261e;
  --red-100: #fdecea;

  --ink-900: #0f1b24;
  --ink-700: #33454f;
  --ink-500: #5b6b76;
  --ink-300: #9aa8b1;

  --line:      #dde5ea;
  --surface:   #ffffff;
  --surface-2: #f6f9fb;
  --page:      #eef3f7;

  --brand:  var(--navy-700);
  --accent: var(--teal-600);

  --radius:    12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(6, 36, 58, .06), 0 1px 3px rgba(6, 36, 58, .08);
  --shadow-md: 0 6px 20px rgba(6, 36, 58, .10);
  --shadow-lg: 0 18px 48px rgba(6, 36, 58, .22);

  --sidebar-w: 264px;
  --topbar-h:  60px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --ink-900: #eaf1f6;
  --ink-700: #c2d0da;
  --ink-500: #93a5b1;
  --ink-300: #6b7d89;

  --line:      #1e3446;
  --surface:   #10222f;
  --surface-2: #0c1b26;
  --page:      #071219;

  --navy-100: #16324a;
  --navy-50:  #122735;
  --teal-100: #10322f;
  --gold-100: #33290f;
  --red-100:  #3a1714;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.admin {
  margin: 0;
  background: var(--page);
  color: var(--ink-900);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .6em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Bot traps: ours (.hp) and CodeIgniter's honeypot container (.hp-field).
   Hidden from the stylesheet because the CSP carries no 'unsafe-inline'. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp-field,
#hpc { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 8px; }

.muted { color: var(--ink-500); }
.hint  { display: block; color: var(--ink-500); font-size: .82rem; margin-top: .3rem; }
.req   { color: var(--red-600); font-style: normal; }

/* ------------------------------------------------------------------ shell */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--navy-900);
  color: #cfe0ec;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar__brand {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: sticky; top: 0; background: var(--navy-900); z-index: 2;
}

.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--teal-500), var(--navy-500));
  border-radius: 10px; font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: #fff;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__text strong { font-size: .95rem; }
.brand__text small { font-size: .72rem; color: #8fb1c9; }

.sidebar__close { display: none; color: #cfe0ec; }

.sidebar__nav { padding: 10px 10px 20px; flex: 1; }

.navgroup {
  margin: 16px 0 6px; padding: 0 10px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: #6d8ea8; font-weight: 700;
}

.navlink {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: #cfe0ec; font-size: .9rem; font-weight: 500;
  transition: background .14s ease, color .14s ease;
}
.navlink:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.navlink.is-active { background: var(--teal-600); color: #fff; }
.navlink svg { flex: 0 0 20px; opacity: .9; }
.navlink span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.navlink__badge {
  font-style: normal; font-size: .7rem; font-weight: 700;
  background: var(--gold-500); color: #26200a;
  border-radius: 999px; padding: 1px 7px;
}

.sidebar__foot { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-size: 1rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__tools { display: flex; align-items: center; gap: 6px; }
.topbar__toggle { display: none; }

.usermenu { position: relative; }
.usermenu summary {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px; border-radius: 999px; cursor: pointer;
  list-style: none; border: 1px solid var(--line); background: var(--surface-2);
}
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu__name { font-size: .86rem; font-weight: 600; }

.avatar {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--navy-600); color: #fff; font-weight: 700; font-size: .8rem;
}

.usermenu__panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  min-width: 230px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 30;
}
.usermenu__meta { font-size: .8rem; color: var(--ink-500); margin-bottom: 8px; }
.usermenu__panel a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-900); font-size: .88rem;
}
.usermenu__panel a:hover { background: var(--surface-2); text-decoration: none; }

.main { padding: 22px; flex: 1; max-width: 1400px; width: 100%; }

/* ------------------------------------------------------------- page header */

.pagehead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.pagehead__sub { color: var(--ink-500); font-size: .88rem; margin: 4px 0 0; }
.pagehead__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--surface-2); color: var(--ink-900);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .06s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.btn--primary:hover { background: var(--teal-500); border-color: var(--teal-500); }

.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink-900); }
.btn--ghost:hover { background: var(--surface-2); }

.btn--danger { color: var(--red-600); border-color: var(--red-600); background: transparent; }
.btn--danger:hover { background: var(--red-100); }

.btn--block { width: 100%; }
.btn--sm { padding: 6px 11px; font-size: .8rem; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-700); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink-900); }
.icon-btn--danger:hover { background: var(--red-100); color: var(--red-600); }

.inlineform { display: inline; }
.formrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.card__head h3 { display: flex; align-items: center; gap: 8px; }
.card__link { font-size: .82rem; font-weight: 600; }
.card__body { padding: 16px; }
.card__body--flush { padding: 0; }
.card__empty { padding: 22px 16px; color: var(--ink-500); text-align: center; }

details.card > summary.card__head { cursor: pointer; list-style: none; }
details.card > summary.card__head::-webkit-details-marker { display: none; }
details.card > summary.card__head::after {
  content: "▾"; color: var(--ink-500); font-size: .8rem; transition: transform .15s ease;
}
details.card[open] > summary.card__head::after { transform: rotate(180deg); }

.stack { display: flex; flex-direction: column; gap: 16px; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.grid--2tight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid--sidebar { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
.grid--fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--fields .field--wide { grid-column: 1 / -1; }

/* ------------------------------------------------------------------- tiles */

.tiles {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.tile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink-900); box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tile__icon {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  border-radius: 10px; background: var(--navy-100); color: var(--navy-700);
}
.tile__body { display: flex; flex-direction: column; min-width: 0; }
.tile__num { font-size: 1.3rem; font-weight: 700; line-height: 1.1; }
.tile__label { font-size: .84rem; font-weight: 600; }
.tile__meta { color: var(--ink-500); font-size: .74rem; }

.bignum { font-size: 1.1rem; font-weight: 650; }

.deflist { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; padding: 16px; }
.deflist dt { color: var(--ink-500); font-size: .86rem; }
.deflist dd { margin: 0; text-align: end; font-size: .86rem; font-weight: 600; }

/* -------------------------------------------------------------- list/table */

.list { list-style: none; margin: 0; padding: 0; }
.list__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.list__row:last-child { border-bottom: 0; }
.list__title { font-weight: 600; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__meta { display: flex; align-items: center; gap: 8px; color: var(--ink-500); font-size: .78rem; flex-shrink: 0; }

.tablewrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow-x: auto;
}
.table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.table th, .table td { padding: 11px 12px; text-align: start; vertical-align: middle; }
.table thead th {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); font-weight: 700;
  white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--line); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table--compact th, .table--compact td { padding: 8px 10px; font-size: .84rem; }
.table__empty { text-align: center; color: var(--ink-500); padding: 26px 12px; }
.table__title { font-weight: 600; display: block; }
.table__slug { display: block; color: var(--ink-500); font-size: .76rem; font-family: var(--mono); }
.table__thumb { width: 56px; }
.table__thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.table__actions { width: 1%; white-space: nowrap; text-align: end; }
.table__indent { color: var(--ink-300); margin-inline-end: 4px; }

.thumb--empty {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--surface-2); border-radius: var(--radius-sm); color: var(--ink-300);
}

.rowactions { display: inline-flex; gap: 2px; align-items: center; }

.userline { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.badge--ok    { background: var(--teal-100); color: var(--teal-600); }
.badge--warn  { background: var(--gold-100); color: #8a6b0c; }
.badge--info  { background: var(--navy-100); color: var(--navy-700); }
.badge--muted { background: var(--surface-2); color: var(--ink-500); border: 1px solid var(--line); }
.badge--bad   { background: var(--red-100); color: var(--red-600); }

/* ----------------------------------------------------------------- notices */

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  margin-bottom: 16px; font-size: .9rem;
}
.notice svg { flex: 0 0 20px; margin-top: 1px; }
.notice--ok   { background: var(--teal-100); border-color: var(--teal-500); color: #0a6459; }
.notice--warn { background: var(--gold-100); border-color: var(--gold-500); color: #7a5d09; }
.notice--bad  { background: var(--red-100); border-color: var(--red-600); color: #8a1d17; }
.notice--info { background: var(--navy-100); border-color: var(--navy-500); color: var(--navy-700); }
.notice__list { margin: 6px 0 0; padding-inline-start: 18px; }

.emptystate {
  display: grid; place-items: center; gap: 10px; text-align: center;
  padding: 46px 20px; background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-500);
}
.emptystate--page { padding: 70px 20px; }
.emptystate__icon { width: 40px; height: 40px; color: var(--ink-300); }

/* ------------------------------------------------------------------- forms */

.field { display: block; margin-bottom: 14px; }
.field > span:first-child { display: block; font-size: .82rem; font-weight: 650; margin-bottom: 5px; }
.field--inline { margin-bottom: 0; }
.field--nested { margin: 0 0 12px 26px; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-900);
  font: inherit; font-size: .9rem;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-300); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(18, 165, 150, .18);
}
input[readonly] { background: var(--surface-2); color: var(--ink-500); }
textarea { resize: vertical; min-height: 76px; }
input[type="color"] { padding: 3px; height: 38px; }

.field__wrap { position: relative; display: block; }
.field__wrap input { padding-inline-end: 42px; }
.field__reveal { position: absolute; inset-inline-end: 3px; top: 50%; transform: translateY(-50%); }

.check { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; font-size: .88rem; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 17px; accent-color: var(--teal-600); }

.checklist { max-height: 260px; overflow-y: auto; }
.checklist--cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-height: none; }
.check--card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; margin: 0; background: var(--surface-2);
}
.check--card strong { display: block; font-size: .9rem; }
.check--card small { color: var(--ink-500); font-size: .76rem; }

.fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin: 0 0 14px; }

.toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.toolbar .field--inline input, .toolbar .field--inline select { min-width: 190px; }

/* ------------------------------------------------------------------ subnav */

.subnav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.subnav__item {
  padding: 6px 12px; border-radius: 999px;
  font-size: .84rem; font-weight: 600; color: var(--ink-700);
  border: 1px solid transparent; background: var(--surface);
}
.subnav__item:hover { background: var(--surface-2); text-decoration: none; }
.subnav__item.is-active { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.subnav__item em { font-style: normal; opacity: .7; font-size: .78rem; margin-inline-start: 3px; }

/* -------------------------------------------------------------------- tabs */

.tabs__bar {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.tabs__tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-700); cursor: pointer;
}
.tabs__tab:hover { background: var(--surface-2); }
.tabs__tab.is-active { background: var(--navy-700); color: #fff; }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }

/* ------------------------------------------------------------------ pager */

.pager { margin-top: 16px; }
.pager ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pager a, .pager span {
  display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-700); font-size: .85rem; font-weight: 600;
}
.pager a:hover { background: var(--surface-2); text-decoration: none; }
.pager .is-current { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.pager__gap { border: 0; background: transparent; }

/* ------------------------------------------------------------------ editor */

.editor__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.editor__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.editor__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--topbar-h) + 16px); }

/* rich text */
.rte { display: flex; flex-direction: column; }
.rte__bar {
  display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.rte__btn {
  min-width: 32px; height: 30px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ink-700); font: inherit; font-size: .85rem; cursor: pointer;
  display: inline-grid; place-items: center;
}
.rte__btn:hover { background: var(--surface); border-color: var(--line); }
.rte__btn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 1px; }
.rte__btn--wide { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.rte__sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* The bar carries twenty-odd controls now. Grouping them by what they do —
   history, character, block, list, alignment, insertion — is what keeps it
   scannable, and each group wraps as a unit instead of the row breaking in an
   arbitrary place. The separator is drawn between groups rather than by the
   old .rte__sep spans, so no markup is needed to keep them aligned. */
.rte__group { display: flex; gap: 2px; align-items: center; }
.rte__group + .rte__group {
  margin-inline-start: 6px; padding-inline-start: 6px;
  border-inline-start: 1px solid var(--line);
}
.rte__group--end { margin-inline-start: auto; }

/* A pressed button reports the caret's state, so it has to read as held down,
   not merely hovered. */
.rte__btn.is-active {
  background: var(--teal-50, rgba(18, 165, 150, .12));
  border-color: var(--teal-500); color: var(--teal-700, var(--ink-900));
}

.rte__status {
  margin: 0; padding: 6px 12px; font-size: .74rem; color: var(--ink-500);
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.rte.is-source .rte__status { visibility: hidden; }

.rte__area {
  min-height: 340px; padding: 16px 18px; overflow-wrap: break-word;
  background: var(--surface); color: var(--ink-900);
}
.rte__area:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(18, 165, 150, .2); }
.rte__area img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.rte__area h2 { font-size: 1.25rem; margin: 1em 0 .4em; }
.rte__area h3 { font-size: 1.08rem; margin: 1em 0 .4em; }
.rte__area blockquote {
  margin: 1em 0; padding: .4em 0 .4em 1em;
  border-inline-start: 3px solid var(--teal-500); color: var(--ink-700);
}
.rte__area table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.rte__area td, .rte__area th { border: 1px solid var(--line); padding: 6px 8px; }
.rte__area th { background: var(--surface-2); font-weight: 700; text-align: start; }

/* The new toolbar can produce these, so the editing surface has to show them
   as something other than unstyled default text. */
.rte__area h4 { font-size: 1rem; margin: 1em 0 .35em; }
.rte__area pre {
  margin: 1em 0; padding: .7em .9em; overflow-x: auto;
  font-family: var(--mono); font-size: .82rem;
  background: var(--surface-2); border-radius: var(--radius-sm);
}
.rte__area hr { margin: 1.4em 0; border: 0; border-top: 1px solid var(--line); }
/* An embed has no intrinsic size inside contenteditable and collapses to a
   sliver, which reads as "nothing was inserted". */
.rte__area iframe {
  display: block; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; height: auto;
  margin: 1em 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.rte__source {
  display: none; border: 0; border-radius: 0; min-height: 340px;
  font-family: var(--mono); font-size: .82rem; background: var(--surface-2);
}
.rte.is-source .rte__area { display: none; }
.rte.is-source .rte__source { display: block; }

/* featured image */
.featured { display: flex; flex-direction: column; gap: 10px; }
.featured__preview {
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface-2); display: grid; place-items: center; overflow: hidden; min-height: 130px;
}
.featured__preview img { width: 100%; height: auto; display: block; object-fit: cover; }
.featured__empty { color: var(--ink-300); padding: 26px; }
.featured__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.featured--sm .featured__preview { min-height: 110px; max-width: 150px; border-radius: 50%; aspect-ratio: 1; }
.featured--sm .featured__preview img { aspect-ratio: 1; object-fit: cover; }

/* gallery + media field */
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery__items { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery__item { position: relative; margin: 0; }
.gallery__item img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.gallery__item .icon-btn {
  position: absolute; top: 2px; inset-inline-end: 2px;
  width: 24px; height: 24px; background: rgba(255, 255, 255, .92); border-radius: 50%;
}

.mediafield { display: flex; gap: 8px; align-items: center; }
.mediafield input { flex: 1; }

.settings__preview {
  margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 6px; max-width: 240px; height: auto;
}

/* ------------------------------------------------------------------- media */

.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 16px;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.is-over { border-color: var(--teal-500); background: var(--teal-100); }
.dropzone__label {
  display: grid; place-items: center; gap: 6px; padding: 28px 16px;
  cursor: pointer; text-align: center;
}
.dropzone__label small { color: var(--ink-500); font-size: .8rem; }
.dropzone__icon { width: 30px; height: 30px; color: var(--teal-600); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone__progress { padding: 0 16px 16px; }

.bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar__fill { display: block; height: 100%; width: 0; background: var(--teal-600); transition: width .2s ease; }

.medialist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.mediacard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.mediacard__head { display: grid; gap: 6px; padding: 12px; cursor: pointer; list-style: none; }
.mediacard__head::-webkit-details-marker { display: none; }
.mediacard__thumb {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden;
}
.mediacard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mediacard__doc { width: 34px; height: 34px; color: var(--ink-300); }
.mediacard__name { font-weight: 600; font-size: .85rem; word-break: break-all; }
.mediacard__meta { color: var(--ink-500); font-size: .75rem; }
.mediacard__body { padding: 0 12px 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.mediacard__url { display: flex; gap: 6px; margin-bottom: 10px; }
.mediacard__url input { font-family: var(--mono); font-size: .74rem; }
.mediacard__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mediacard__delete { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* media picker dialog */
.picker {
  width: min(880px, 94vw); max-height: 88vh; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-900);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.picker::backdrop { background: rgba(6, 36, 58, .55); backdrop-filter: blur(2px); }
.picker[open] { display: flex; flex-direction: column; }
.picker__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.picker__bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.picker__bar .field { flex: 1; margin: 0; }
.picker__upload { position: relative; overflow: hidden; }
.picker__upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* 120px fitted more tiles per row but left no room for a file name — every
   label ellipsised after about a dozen characters, which turned a library of
   `Undangan-Konferensi-Klinik-Minggu-*.pdf` into a wall of identical stubs.
   150px is the width at which those names start to differ on screen. */
.picker__grid {
  display: grid; gap: 10px; padding: 16px; overflow-y: auto; flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  /* Rows follow their contents and the grid scrolls. Both halves matter:
     without `min-content` the rows were divided up to fill the dialog instead —
     105px tall in a wide window, 71px in a narrow one — and since each tile is
     a <button> with `overflow: hidden`, whatever did not fit was cut off rather
     than pushed out. The name and size line lived in exactly that space, so
     they vanished with no error anywhere. (A grid item whose overflow is not
     `visible` has its automatic minimum size resolve to zero, which is why
     nothing stopped the squeeze.) */
  grid-auto-rows: min-content;
  align-content: start;
}
/* A <button> laid out as a flex column, not by the browser's default button
   layout. That default is what swallowed the file name: the tile's media box
   sizes itself from `aspect-ratio`, whose height follows a width the grid has
   not resolved yet, so the button reported an intrinsic height that ignored it.
   The grid then made the row 105px for content that needed 177px, and
   `overflow: hidden` — needed for the rounded corners — quietly cut the name
   and the size line off the bottom. Nothing errored; the label simply was not
   there. Declaring the layout explicitly makes the button's height the sum of
   its children again. */
.pickitem {
  display: flex; flex-direction: column;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer; overflow: hidden; padding: 0; text-align: start;
}
/* Neither the media box nor the labels may be compressed to make the tile fit;
   if anything has to give, the row grows. */
.pickitem > * { flex: 0 0 auto; }
.pickitem.is-selected { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(18, 165, 150, .2); }
.pickitem img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* A FIXED thumbnail height, deliberately, not `aspect-ratio`.
   aspect-ratio derives height from width, and the width here comes from a grid
   track the browser is still resolving while it sizes the row. Chrome settled
   that circle by giving the row 105px for a tile whose contents measured 177px
   — and since the tile is a <button> with `overflow: hidden`, the file name and
   size below the thumbnail were silently clipped away. A fixed height breaks
   the dependency: the row is always thumbnail + name + meta, whatever the
   column width turns out to be. */
.pickitem { --thumb: 104px; }
.pickitem__doc {
  display: grid; place-content: center; justify-items: center; gap: 5px;
  height: var(--thumb);
  color: var(--doc-ink, var(--ink-500));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.pickitem__glyph { width: 32px; height: 32px; }
.pickitem__ext {
  font-size: .63rem; font-weight: 700; letter-spacing: .08em;
}
.pickitem img { height: var(--thumb); aspect-ratio: auto; }

/* Four hues plus a neutral, all existing tokens — no new colours invented for
   this. They do not have to separate eight file types on their own, because
   the glyphs already do: a grid is a spreadsheet, bars are slides, a film strip
   is video. Colour is the second cue, which is why word and video can share
   navy without becoming confusable.

   The colour stays on the glyph and off the background. A tinted panel was the
   first attempt, and on this library it turned the whole modal pink: sixteen of
   the twenty-four files on page one are PDFs, so the "accent" became the
   background. A coloured mark on a plain surface gives the same cue and stays
   quiet when one type dominates. */
.pickitem__doc--pdf    { --doc-ink: var(--red-600); }
.pickitem__doc--word,
.pickitem__doc--video  { --doc-ink: var(--navy-500); }
.pickitem__doc--sheet,
.pickitem__doc--audio  { --doc-ink: var(--teal-600); }
.pickitem__doc--slides { --doc-ink: var(--gold-500); }
.pickitem__doc--zip,
.pickitem__doc--file   { --doc-ink: var(--ink-500); }

/* The dark theme redefines the ~100 tints but not the mid hues, so red-600 on
   the dark red tint is two dark colours on top of each other. These are lighter
   steps of the same four hues — extending the ramp, not adding a colour. */
[data-theme="dark"] .pickitem__doc--pdf    { --doc-ink: #e8837a; }
[data-theme="dark"] .pickitem__doc--word,
[data-theme="dark"] .pickitem__doc--video  { --doc-ink: #6fb3e0; }
[data-theme="dark"] .pickitem__doc--sheet,
[data-theme="dark"] .pickitem__doc--audio  { --doc-ink: #4fc9ba; }
[data-theme="dark"] .pickitem__doc--slides { --doc-ink: #e8bd53; }

/* Two lines, not one ellipsised line. A file name's distinguishing part is
   usually at the end — `…-Minggu-IV-Juli.pdf` — and single-line truncation cuts
   off precisely the part that tells one file from another. Long unbroken names
   still need an explicit break rule or they push the tile wider than its grid
   track. */
.pickitem__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  padding: 7px 8px 0; font-size: .72rem; line-height: 1.35;
  color: var(--ink-900); overflow: hidden;
  overflow-wrap: anywhere; word-break: break-word;
}
.pickitem__meta {
  display: block; padding: 2px 8px 7px;
  font-size: .68rem; color: var(--ink-500); font-variant-numeric: tabular-nums;
}
.picker__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.picker__pages { display: flex; gap: 4px; }

/* ------------------------------------------------------------------- menus */

.menutree { list-style: none; margin: 0; padding: 10px; }
.menuitem {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-bottom: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: grab;
}
.menuitem.is-dragging { opacity: .45; }
.menuitem.depth-1 { margin-inline-start: 28px; }
.menuitem.depth-2 { margin-inline-start: 56px; }
.menuitem.depth-3 { margin-inline-start: 84px; }
.menuitem__grip { color: var(--ink-300); display: grid; place-items: center; }
.menuitem__body { flex: 1; min-width: 0; }
.menuitem__body strong { display: block; font-size: .88rem; }
.menuitem__body small { color: var(--ink-500); font-size: .74rem; font-family: var(--mono); word-break: break-all; }
.menuitem__tools { display: flex; align-items: center; gap: 2px; }

/* ---------------------------------------------------------------- messages */

.msg--unread { border-inline-start: 3px solid var(--teal-600); }
.msg__head {
  display: grid; gap: 6px; padding: 13px 16px; cursor: pointer; list-style: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center;
}
.msg__head::-webkit-details-marker { display: none; }
.msg__from strong { display: block; font-size: .9rem; }
.msg__from small { color: var(--ink-500); font-size: .76rem; }
.msg__subject { font-size: .88rem; color: var(--ink-700); }
.msg__meta { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--ink-500); }
.msg__body { padding: 0 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.msg__text { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .9rem; }
.msg__tech { font-size: .76rem; color: var(--ink-500); margin: 10px 0; }
.msg__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ translations */

.transrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.transrow__source { padding: 14px 16px; background: var(--surface-2); border-inline-end: 1px solid var(--line); }
.transrow__label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); font-weight: 700; margin-bottom: 5px; }
.transrow__source p { font-size: .88rem; }
.transrow__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.transrow__target { padding: 14px 16px; }

/* -------------------------------------------------------------------- auth */

/* `body.admin` already sets a background, so this needs equal specificity to
   win — a bare `.admin--auth` loses to it and the sign-in page comes out grey. */
body.admin--auth {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700) 55%, var(--teal-600));
  min-height: 100vh;
}
.authwrap { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.authcard {
  width: min(430px, 100%); padding: 30px;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg);
}
.authcard__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.authcard__brand strong { display: block; font-size: .96rem; }
.authcard__brand small { color: var(--ink-500); font-size: .76rem; }
.authcard h1 { font-size: 1.3rem; margin-bottom: 5px; }
.authcard__sub { color: var(--ink-500); font-size: .87rem; margin-bottom: 18px; }
.authcard__links { margin-top: 16px; text-align: center; font-size: .84rem; color: var(--ink-500); display: flex; gap: 8px; justify-content: center; }

.captcha__row { display: flex; gap: 8px; align-items: center; }
.captcha__img {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; flex: 0 0 auto; background: #eef4fa;
}
.captcha__row input { flex: 1; }

/* ------------------------------------------------------------------- toast */

.toast {
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 90;
  display: none; max-width: 340px;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--navy-900); color: #fff; font-size: .88rem; box-shadow: var(--shadow-md);
}
.toast.is-visible { display: block; animation: toast-in .18s ease; }
.toast--bad { background: var(--red-600); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .grid--2, .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .editor__grid { grid-template-columns: minmax(0, 1fr); }
  .editor__side { position: static; }
}

@media (max-width: 860px) {
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.is-open { transform: none; }
  .sidebar__close { display: inline-grid; }
  .topbar__toggle { display: inline-grid; }
  .main { padding: 16px; }
  .grid--fields, .grid--2tight { grid-template-columns: minmax(0, 1fr); }
  .transrow { grid-template-columns: minmax(0, 1fr); }
  .transrow__source { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .msg__head { grid-template-columns: minmax(0, 1fr); }
  .usermenu__name { display: none; }
}

@media (max-width: 640px) {
  .hide-sm { display: none; }
  .pagehead { flex-direction: column; align-items: stretch; }
  .pagehead__actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .sidebar, .topbar, .toolbar, .pagehead__actions, .rowactions, .pager { display: none !important; }
  .main { padding: 0; }
  .card, .tablewrap { box-shadow: none; border-color: #ccc; }
}