/* Cabinet styles. Hand-written on purpose: tailwind.config.js only scans
   ./src/**, so any utility class used solely in server/ markup would be purged
   from site.css and the page would render unstyled while the <link> still
   returned 200. Same palette as the site, no build step.

   The CSP is style-src 'self' with no unsafe-inline and no nonce, so every rule
   lives here — there is not one style="" attribute in the cabinet. */

:root {
  --ink: #0E1B33;
  --navy: #1A2C56;
  --accent: #A8313D;
  --accent-d: #8E2731;
  --cream: #F2ECDD;
  --cream-l: #F8F4E8;
  --line: #D9D0BC;
  --mute: #706B5C;
  --ok: #2E6B4F;
  --warn: #A8722E;
}

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

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

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-d); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ── header ─────────────────────────────────────────────────────────────── */
.top { background: var(--ink); color: var(--cream); padding: 14px 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 14px; color: var(--cream); text-decoration: none; }
.brand span { display: block; font-size: 9.5px; letter-spacing: .3em; color: rgba(242,236,221,.55); font-weight: 500; margin-top: 2px; }
.top nav { display: flex; align-items: center; gap: 16px; font-size: 13px; flex-wrap: wrap; }
.top nav a { color: rgba(242,236,221,.8); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--cream); }
.who { color: rgba(242,236,221,.55); font-size: 12.5px; }

/* a form styled as a link, so logout can be a POST and still read as a link */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: rgba(242,236,221,.8); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--cream); }

/* ── layout ─────────────────────────────────────────────────────────────── */
main { padding: 34px 0 60px; }
h1 { font-size: 27px; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 6px; font-weight: 600; }
h2 { font-size: 19px; margin: 34px 0 12px; font-weight: 600; letter-spacing: -.01em; }
.lead { color: rgba(14,27,51,.7); margin: 0 0 26px; }
.crumb { font-size: 13px; color: var(--mute); margin: 0 0 18px; }
.crumb a { color: var(--mute); }
.empty { color: var(--mute); padding: 26px 0; }

/* ── cards ──────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 18px 20px; text-decoration: none; color: inherit; display: block; }
.card:hover { border-color: rgba(14,27,51,.32); }
.card h3 { margin: 0; font-size: 17px; font-weight: 600; }
.card dl { margin: 12px 0 0; font-size: 13px; }
.card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.card dt { color: var(--mute); }
.card dd { margin: 0; text-align: right; }

/* ── tables ─────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
caption { text-align: left; padding: 14px 16px 0; color: var(--mute); font-size: 13px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 500; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.date { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── expiry state ───────────────────────────────────────────────────────── */
.tag { display: inline-block; font-size: 11.5px; line-height: 1.6; padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.tag-ok     { color: var(--ok);     background: rgba(46,107,79,.09);  border-color: rgba(46,107,79,.25); }
.tag-soon   { color: var(--warn);   background: rgba(168,114,46,.10); border-color: rgba(168,114,46,.30); }
.tag-urgent { color: var(--accent); background: rgba(168,49,61,.09);  border-color: rgba(168,49,61,.30); }
.tag-over   { color: #fff;          background: var(--accent);        border-color: var(--accent); }
.tag-none   { color: var(--mute);   background: rgba(112,107,92,.08); border-color: rgba(112,107,92,.22); }

/* the row itself, so an expired line reads without parsing the tag */
tr.row-over td { background: rgba(168,49,61,.045); }

/* ── forms ──────────────────────────────────────────────────────────────── */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 24px; max-width: 420px; }
.panel.wide { max-width: 720px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; letter-spacing: .04em; color: var(--mute); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(26,44,86,.10);
}
.hint { font-size: 12px; color: var(--mute); margin-top: 5px; }

button, .btn {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  background: var(--ink); color: var(--cream); border: 1px solid var(--ink);
  border-radius: 2px; padding: 10px 22px; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.btn-quiet { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--cream-l); color: var(--ink); border-color: rgba(14,27,51,.3); }

.msg { border-radius: 2px; padding: 12px 15px; margin-bottom: 18px; font-size: 14px; }
.msg-err { color: var(--accent-d); background: rgba(168,49,61,.07); border: 1px solid rgba(168,49,61,.3); }
.msg-ok  { color: var(--ok);      background: rgba(46,107,79,.08);  border: 1px solid rgba(46,107,79,.3); }

/* ── login ──────────────────────────────────────────────────────────────── */
.login { min-height: 72vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.login .panel { width: 100%; }
.login h1 { font-size: 22px; margin-bottom: 4px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 20px 0 40px; font-size: 12.5px; color: var(--mute); }
.foot a { color: var(--mute); }

@media (max-width: 560px) {
  h1 { font-size: 23px; }
  th, td { padding: 10px 12px; }
  .panel { padding: 18px; }
}

/* ── added with the certificate catalogue ───────────────────────────────── */

/* A tracked document whose date nobody entered yet. It must NOT look like
   tag-none: "no date on file" and "never expires" are opposite meanings, and
   the whole point of the cabinet is that the first one gets noticed. Dashed
   border reads as "incomplete" rather than "expired". */
.tag-missing {
  color: var(--warn);
  background: rgba(168, 114, 46, .07);
  border-color: rgba(168, 114, 46, .55);
  border-style: dashed;
}

/* .field input is width:100% — on a checkbox that produces a full-width bar. */
.field input[type="checkbox"],
.check input[type="checkbox"] { width: auto; }

/* ── checklist ──────────────────────────────────────────────────────────── */
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 18px; margin: 8px 0 22px; }
.check { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; font-size: 14px; cursor: pointer; }
.check input { margin: 3px 0 0; flex: 0 0 auto; }
.check span { min-width: 0; }
.check em { display: block; font-style: normal; font-size: 12px; color: var(--mute); margin-top: 2px; }
/* Already on the hull: ticked and locked. A tick that also means "delete" would
   destroy a real expiry date on one mis-click. */
.check-done { color: var(--mute); cursor: default; }
.check-done span::after { content: " · уже добавлен"; color: var(--ok); font-size: 12px; }

.subhead { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 500; margin: 22px 0 2px; }
.subhead:first-child { margin-top: 0; }

/* ── grouped document tables ────────────────────────────────────────────── */
tr.grouprow td { background: var(--cream-l); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 9px 16px; }
tr.row-missing td { background: rgba(168, 114, 46, .05); }

/* ── admin chrome ───────────────────────────────────────────────────────── */
.subnav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.subnav a { color: var(--mute); text-decoration: none; }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.actions .spacer { flex: 1 1 auto; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }

.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; line-height: 18px; text-align: center; background: var(--accent); color: #fff; }
.count-quiet { background: rgba(112, 107, 92, .18); color: var(--mute); }

.panel + .panel { margin-top: 16px; }
.stack { display: grid; gap: 16px; }

/* A destructive step gets its own colour, and only on the confirmation page. */
.btn-danger { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-danger:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }

.warnbox { border: 1px solid rgba(168, 49, 61, .35); background: rgba(168, 49, 61, .05); border-radius: 3px; padding: 14px 16px; margin: 0 0 18px; font-size: 14px; }

.audit td { font-size: 13px; }
.audit .when { color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--mute); word-break: break-word; }

@media (max-width: 560px) {
  .checks { grid-template-columns: 1fr; }
  .actions { gap: 8px; }
}

/* ── added with self-service portfolio uploads ─────────────────────────── */
.media-row { display: flex; gap: 16px; align-items: flex-start; }
.media-thumb { flex: 0 0 140px; }
.media-thumb img { display: block; width: 140px; height: auto; border-radius: 3px; border: 1px solid var(--line); }
.media-body { flex: 1 1 auto; min-width: 0; }
.media-body .field { margin-bottom: 8px; }

/* Public gallery grid — deliberately simpler than .cards (no dl/dt rows,
   this holds a picture and an optional one-line caption, nothing else). */
.media-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.media-grid .card { padding: 0; overflow: hidden; }
.media-grid img, .media-grid video { display: block; width: 100%; height: auto; background: var(--ink); }
.media-grid figcaption { padding: 10px 14px; font-size: 13px; color: var(--mute); }

/* Public gallery language controls only; closed cabinet UI is unchanged. */
.public-languages { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.public-languages a { display: inline-flex; align-items: center; min-height: 44px; }
html[lang="ko"] body { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
html[lang|="zh"] body { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }