/* Kelvin Film Lab — Admin panel theme. Functional, not cinematic: a plain
   light UI reusing the site's brand tokens (graphite text, Kelvin red
   accent) so it's recognizably the same product family. */

:root {
  --bg: #f6f4ef;
  --panel: #ffffff;
  --line: #e2dfd7;
  --text: #16150f;
  --muted: #6f6b62;
  --red: #df2525;
  --sidebar: #0a0a0a;
  --sidebar-text: #f4f1eb;
  --sidebar-muted: #9b9b9b;
  --focus: #1a63d8;
  --ok-bg: #f2f8f1; --ok-line: #b9d6b3; --ok-text: #2c5e26;
  --warn-bg: #fff8ec; --warn-line: #e7cd8f; --warn-text: #7a5c14;
  --err-bg: #fbf1f1; --err-line: #e3b3b3; --err-text: #8f2626;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  margin: 0; color: var(--text); font-family: "Inter","Noto Sans","Noto Sans Armenian",Arial,sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
small { font-size: 13px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px;
}

.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--sidebar); color: var(--sidebar-text); padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px 22px; }
/* The sidebar is a solid dark ground, so it uses the dark logo asset. The
   old brightness(0) invert(1) forced every opaque pixel white, which erased
   the white "k" inside the badge — see docs/ARCHITECTURE.md. */
.admin-brand img { height: 26px; width: auto; }
.admin-brand-suffix { font-size: 13px; color: var(--sidebar-muted); font-weight: 500; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; color: var(--sidebar-muted); font-size: 14px; margin-bottom: 2px; min-height: 44px; }
.admin-nav a:hover, .admin-nav a:focus-visible { color: #fff; background: #1a1a1a; }
.admin-nav a[aria-current="page"] { color: #fff; background: #1a1a1a; }
.admin-nav .section-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #6d6d6d; padding: 18px 12px 6px; }

.admin-main { min-width: 0; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; gap: 12px; }
.admin-topbar h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.admin-user { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 14px; }
.admin-content { padding: 28px; max-width: 1180px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.card + .card { margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .admin-shell { grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; } }

.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi .value { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.kpi .label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi .value.is-disabled { color: var(--muted); font-size: 20px; font-weight: 500; }
.kpi .value.is-alert { color: var(--err-text); }

table.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th { text-align: left; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tr:hover td { background: #faf9f6; }
.table-scroll { overflow-x: auto; }

.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; border: 1px solid; }
.badge.draft { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.badge.published { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-text); }
.badge.archived { background: #f0eee8; border-color: var(--line); color: var(--muted); }
.badge.new { background: var(--err-bg); border-color: var(--err-line); color: var(--err-text); }
.badge.inprogress { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.badge.closed { background: #f0eee8; border-color: var(--line); color: var(--muted); }
.badge.priority-urgent { background: var(--err-bg); border-color: var(--err-line); color: var(--err-text); }
.badge.priority-high { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.badge.overdue { background: var(--err-bg); border-color: var(--err-line); color: var(--err-text); }

.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #c8c4bb; padding: 11px 18px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; background: #fff; color: var(--text); min-height: 44px; }
.btn:hover, .btn:focus-visible { border-color: #111; }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
/* "Small" buttons are for dense table rows and card action bars, where full
   44px controls would badly break row density — kept slightly under the
   general button-text floor as a deliberate, documented trade-off (still up
   from the original 12px/32px), not an oversight. See docs/PROGRESS.md. */
.btn.small { padding: 8px 14px; font-size: 14px; min-height: 36px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; }
.field .hint { font-size: 13px; color: var(--muted); }
/* Hints carry URLs and file names, which have no spaces to break at — without
   this a single long token widens its grid column and scrolls the whole page
   sideways on a narrow screen. */
.hint { overflow-wrap: anywhere; }
.field input, .field textarea, .field select {
  /* 16px, not 15 — anything smaller triggers iOS Safari's auto-zoom on focus,
     which is jarring on a form-heavy admin panel used from a phone/tablet. */
  border: 1px solid #c8c4bb; border-radius: 6px; padding: 12px 14px; background: #fff; font-size: 16px; min-height: 44px;
  width: 100%; max-width: 100%;
}
.field textarea { min-height: 100px; resize: vertical; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #c33; }
.field-error { color: #b02a2a; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-grid > * { min-width: 0; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 800px) { .form-grid { grid-template-columns: 1fr; } }
.grid-2 > *, .grid-3 > * { min-width: 0; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { min-height: auto; width: 18px; height: 18px; }
.tag-group { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-check { border: 1px solid #c8c4bb; border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tag-check input { margin: 0; }

.alert { border-radius: 8px; padding: 14px 16px; font-size: 14px; margin-bottom: 18px; border: 1px solid; }
.alert.success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-text); }
.alert.error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-text); }
.alert.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }

.state-block { border: 1px dashed var(--line); border-radius: 8px; padding: 40px; text-align: center; color: var(--muted); }
.state-block h3 { color: var(--text); margin: 0 0 8px; }

.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sidebar); padding: 20px; }
.login-card { background: #fff; border-radius: 12px; padding: 40px; max-width: 380px; width: 100%; }
.login-brand { display: block; height: 36px; width: auto; margin-bottom: 8px; }
.login-tagline { color: var(--muted); font-size: 13px; margin-bottom: 26px; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 12px; }
.media-item { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; text-align: left; padding: 0; }
.media-item img { width: 100%; height: 100px; object-fit: cover; }
.media-item .name { font-size: 13px; padding: 8px 8px 2px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-item[aria-pressed="true"] { outline: 2px solid var(--red); }
.media-item details summary { list-style: none; }
.media-item details summary::-webkit-details-marker { display: none; }

/* ---- Content tabs (HY/EN) ---- */
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab-bar button {
  border: 0; background: none; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 40px;
}
.tab-bar button.is-active, .tab-bar button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--red); }
.tab-bar button:hover { color: var(--text); }

/* ---- Media picker ---- */
/* The selected image, then a collapsible library of thumbnails, then upload.
   Tiles are labels wrapping a radio input: the native control keeps keyboard
   and screen-reader behaviour, CSS turns it into a picture grid. */
.media-picker-field { display: block; }
.media-picker-current { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin: 10px 0 14px; }
.media-picker-thumb {
  width: 170px; min-height: 110px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: #f7f6f3; padding: 6px; text-align: center;
}
.media-picker-thumb img { max-width: 100%; max-height: 140px; border-radius: 6px; display: block; }
.media-picker-meta { flex: 1; min-width: 200px; }
.media-picker-name { margin: 0 0 8px; font-size: 14px; font-weight: 600; word-break: break-all; }

.media-picker-alt { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-bottom: 14px; background: #fbfaf8; }

.media-picker-library { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.media-picker-library > summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 28px; }
.media-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; margin-top: 12px;
}
.media-tile { position: relative; cursor: pointer; display: block; }
/* Visually hidden, still focusable — the tile shows focus/selection instead. */
.media-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.media-tile-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid var(--line); border-radius: 8px; padding: 8px; min-height: 108px;
  background: #fff; font-size: 13px; text-align: center; overflow: hidden;
}
.media-tile img { max-width: 100%; max-height: 66px; object-fit: cover; border-radius: 4px; }
.media-tile-name { word-break: break-all; line-height: 1.25; color: var(--muted); }
.media-tile input:checked + .media-tile-body { border-color: var(--red); background: #fff5f4; }
.media-tile input:focus-visible + .media-tile-body { outline: 2px solid var(--red); outline-offset: 2px; }
.media-tile.is-empty .media-tile-body { color: var(--muted); font-weight: 600; }

.media-picker-upload input[type="file"] { font-size: 14px; max-width: 100%; }

/* ---- Published vs. unpublished-draft comparison in the section editor ---- */
.value-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.value-compare > div { padding: 12px 14px; min-width: 0; }
.value-compare > div + div { border-left: 1px solid var(--line); }
.value-compare .vc-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.value-compare .vc-value { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.value-compare .vc-live { background: #fbfaf8; }
.value-compare .vc-draft { background: #fff8f0; }
.value-compare .vc-empty { color: var(--muted); font-style: italic; }
@media (max-width: 640px) {
  .value-compare { grid-template-columns: 1fr; }
  .value-compare > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* --- the shared media field -------------------------------------------
   One uploader, used by every form that takes a picture or a video. */
.mediafield { margin: 18px 0; }
.mediafield-label label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.mediafield-hint { font-size: 13px; color: var(--muted, #6f6b62); margin: 0 0 8px; }

.mediafield-drop {
  border: 2px dashed #c9c4bb; border-radius: 10px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 132px; cursor: pointer; background: #fbfaf8;
  transition: border-color .15s ease, background .15s ease;
}
.mediafield-drop:hover, .mediafield-drop:focus-visible { border-color: #8d887f; background: #f6f4ef; }
.mediafield-drop.is-over { border-color: var(--red, #df2525); background: #fdf3f3; }

.mediafield-empty { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.mediafield-empty strong { font-size: 15px; }
.mediafield-empty span { font-size: 13px; color: var(--muted, #6f6b62); }
.mediafield-formats { font-size: 13px; }

.mediafield-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.mediafield-preview img, .mediafield-preview video { max-width: 100%; max-height: 220px; border-radius: 8px; display: block; }
.mediafield-preview.is-failed img { opacity: .5; }
.mediafield-caption { font-size: 13px; color: var(--muted, #6f6b62); text-align: center; word-break: break-word; }

.mediafield-progress { width: 100%; display: flex; align-items: center; gap: 10px; }
.mediafield-bar { flex: 1 1 auto; height: 8px; background: #e2ded6; border-radius: 999px; overflow: hidden; }
.mediafield-bar span { display: block; height: 100%; width: 0; background: var(--red, #df2525); transition: width .15s linear; }
.mediafield-percent { font-size: 13px; min-width: 42px; text-align: right; }
.mediafield-cancel { font: inherit; font-size: 13px; background: none; border: 0; color: var(--red, #df2525); cursor: pointer; text-decoration: underline; }

.mediafield-status { font-size: 13px; color: var(--muted, #6f6b62); margin: 8px 0 0; min-height: 18px; }
.mediafield-error { font-size: 14px; color: #8f2626; margin: 6px 0 0; font-weight: 600; }
.mediafield-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mediafield-alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2dfd7; }
.mediafield-poster { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2dfd7; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mediafield-poster-preview img { max-height: 80px; border-radius: 6px; display: block; }

/* --- the library picker ------------------------------------------------ */
.mediapicker {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.mediapicker-card {
  background: #fff; border-radius: 12px; width: min(920px, 100%); max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.mediapicker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e2dfd7; }
.mediapicker-grid { padding: 16px; overflow-y: auto; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.mediapicker-tile {
  border: 1px solid #d9d5cd; border-radius: 8px; background: #fbfaf8; padding: 8px;
  cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit; text-align: left;
}
.mediapicker-tile:hover, .mediapicker-tile:focus-visible { border-color: var(--red, #df2525); }
.mediapicker-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; display: block; }
.mediapicker-video { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #16150f; color: #fff; border-radius: 5px; font-size: 26px; }
.mediapicker-name { font-size: 13px; word-break: break-word; }
.mediapicker-tile.is-on { border-color: var(--red, #df2525); box-shadow: inset 0 0 0 2px var(--red, #df2525); }

/* --- the portfolio gallery --------------------------------------------- */
.mediagallery-drop {
  border: 2px dashed #cfcabf; border-radius: 10px; background: #fbfaf8;
  padding: 20px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.mediagallery-drop:hover, .mediagallery-drop:focus-visible, .mediagallery-drop.is-over { border-color: var(--red, #df2525); background: #fdf6f5; }
.mediagallery-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mediagallery-empty { font-size: 14px; color: var(--muted, #6f6b62); margin: 12px 0 0; }

.mediagallery-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.mediagallery-item {
  display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start;
  border: 1px solid #e2dfd7; border-radius: 10px; background: #fff; padding: 10px;
}
.mediagallery-item > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.mediagallery-item.is-cover { border-color: var(--red, #df2525); }
.mediagallery-item.is-dragging { opacity: .45; }
.mediagallery-item.is-drop-target { border-color: var(--red, #df2525); box-shadow: 0 -3px 0 -1px var(--red, #df2525); }
.mediagallery-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mediagallery-meta strong { font-size: 14px; word-break: break-word; }
.mediagallery-badge {
  align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  background: var(--red, #df2525); color: #fff; border-radius: 999px; padding: 2px 10px;
}
.mediagallery-alt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mediagallery-alt input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #d9d5cd; border-radius: 6px; }
.mediagallery-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* One column below the point where a 120px thumbnail plus controls stops
   fitting: at 360px the two-column form left the buttons three words wide. */
@media (max-width: 560px) {
  .mediagallery-item { grid-template-columns: 1fr; }
  .mediagallery-item > img { max-width: 180px; }
}