/* Control-plane polarity (§18.5).

   The same design language — same tokens, same fonts, same zero radii, same
   right-hand panels — with the polarity inverted. Confusing the control plane
   with the working application must be impossible, and colour is the only
   signal that works before anybody has read a word on the screen.

   This file redefines the palette and nothing else. It loads after tokens.css
   and before print.css, so every ported component picks the dark values up
   without a single rule being rewritten for the control plane. A separate set
   of dark component styles would be the thing that drifts.

   Provenance: --paper, --card, --ink, --rule and --rule2 are the landing page's
   dark section (maosh_landing.html: #101B20, #16252B, #DCE6E4, #24373F,
   #2B444C). The rest have no dark counterpart in the prototype and are derived
   here to hold contrast against them — stated because a value transcribed from
   the prototype and a value chosen by us should not look alike in six months. */

:root{
  --paper:#101B20; --card:#16252B; --sunk:#0C1519; --hover:#1C2F36;
  --ink:#DCE6E4; --ink2:#9FB6B8; --ink3:#7FA0A5;
  --rule:#24373F; --rule2:#2B444C;

  /* Service and client keep their meaning — teal is ours, red is theirs — and
     only their lightness changes, because the same hues at paper values go
     nearly black here. */
  --srv:#4FB3AE; --srv-bg:#122E2E; --srv-line:#2C5D5A;
  --cli:#E08B93; --cli-bg:#331F22; --cli-line:#5C3A3E;

  --del:#E4636B; --amber:#D8B75A; --amber-bg:#2E2818; --amber-line:#5A4E24;
  --ok:#6FBF7C; --sel:#1E3A3A; --shadow:rgba(0,0,0,.55); --mark:#4A3F14;

  /* The brand stays exactly as it is. It is the one thing both contours share
     on purpose: this is the same product. */
  --brand:#F5C400; --brand-ink:#141414; --brand-soft:#2A2410; --brand-line:#8A6E00;
  /* This contour's --brand-soft is dark, so text on it has to be light — the
     opposite of the tenant application's. Declared here rather than inherited,
     because the tenant value would be a dark olive on a dark tint. */
  --brand-sub:#F0E3B0; --brand-faint:#C9B87A; --brand-deep:#E8D79A;
}

/* Form controls do not inherit the page palette on their own, and a select that
   stays white on a dark screen is the detail that makes an interface look
   half-finished. */
input,select,textarea{background:var(--sunk);border-color:var(--rule2)}
select option{background:var(--card);color:var(--ink)}

/* A strip along the top of every control-plane page. Not decoration: it is
   what an administrator sees in a screenshot, in a shared window, and out of
   the corner of their eye when they meant to be in the tenant application. */
.cp-mark{
  height:3px;background:var(--brand);flex:0 0 auto;
}

/* ── The signed-in frame ─────────────────────────────────────
   Thin on purpose (see admin/layout.templ): nobody spends a working day here.
   Zero radii and 1px rules, as everywhere in the product. */
.cp{flex:1;display:flex;flex-direction:column;min-height:0}
.cp-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:11px 18px;border-bottom:1px solid var(--rule);
  background:var(--card);flex:0 0 auto}
.cp-brand{font-family:var(--head);font-variation-settings:"wdth" 110,"wght" 600;
  font-size:14px;letter-spacing:.02em}
.cp-brand span{color:var(--ink3)}
.cp-who{display:flex;align-items:center;gap:14px;font-size:12.5px}
.cp-who form{display:inline}
.cp-body{flex:1;overflow:auto;padding:22px 18px}

.lnk{color:var(--srv);border-bottom:1px solid var(--srv-line);padding:0}
.lnk:hover{color:var(--ink)}

/* ── Sign-in ─────────────────────────────────────────────────
   One column, centred. The tenant application's login has a hero beside it
   because it is a client's front door; this one is a staff entrance. */
.cp-auth{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.cp-form{display:flex;flex-direction:column;gap:13px;margin-top:18px}
.cp-form label{display:flex;flex-direction:column;gap:5px}
.cp-form label span{font-size:12px;color:var(--ink2)}
.cp-form input{padding:9px 11px;border:1px solid var(--rule2);background:var(--sunk)}
.cp-go{background:var(--brand);color:var(--brand-ink);padding:10px 14px;
  text-align:center;font-weight:600;border:1px solid var(--brand-line)}
.cp-go:hover{filter:brightness(1.06)}
.cp-foot{margin-top:20px;font-size:11.5px;color:var(--ink3);line-height:1.6}

/* ── Counters ────────────────────────────────────────────────
   §18.2: «счётчики, а не содержимое». The card shows a number and what it
   counts, and there is deliberately nothing to click through to. */
.cp-page{max-width:960px}
.cp-page h1{font-family:var(--head);font-variation-settings:"wdth" 110,"wght" 600;
  font-size:19px;margin-bottom:18px}
.cp-cards{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:18px}
.cp-card{border:1px solid var(--rule);background:var(--card);padding:14px 18px;min-width:150px}
.cp-num{font-family:var(--mono);font-size:26px;line-height:1.1}
.cp-lbl{font-size:12px;color:var(--ink3);margin-top:4px}
.cp-sub{font-family:var(--mono);font-size:12px;color:var(--ink3);margin:-12px 0 18px}

/* ── Navigation ──────────────────────────────────────────────
   Four flat items rather than the tenant application's sections and groups.
   A tree over four screens is furniture. */
.cp-nav{display:flex;gap:16px;margin-right:auto;margin-left:26px;font-size:12.5px}
.cp-nav a{color:var(--ink2);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent}
.cp-nav a:hover{color:var(--ink)}
.cp-nav a.on{color:var(--ink);border-bottom-color:var(--brand)}

/* ── The acts of §18.2 ───────────────────────────────────────
   Suspension is a destructive control and looks like one. It is also the only
   button in the product that stops several hundred people working, which is why
   it sits beside a field that will not let it be pressed without a reason. */
.cp-controls{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.cp-act{display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap;
  border:1px solid var(--rule);background:var(--card);padding:13px 15px}
.cp-act label{display:flex;flex-direction:column;gap:4px}
.cp-act label span{font-size:11px;color:var(--ink3)}
.cp-act input{padding:7px 9px;border:1px solid var(--rule2);background:var(--sunk)}
.cp-act input[type="text"]{min-width:260px}
.cp-act input[type="number"]{width:110px}
.cp-act .hint{font-size:11.5px;color:var(--ink3)}
.cp-danger{background:var(--cli-bg);color:var(--cli);border:1px solid var(--cli-line);
  padding:8px 14px;font-weight:600}
.cp-danger:hover{filter:brightness(1.15)}

/* ── The creation wizard ─────────────────────────────────────
   One screen, everything a contract says, entered once (§18.4). */
.cp-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.cp-head-row .cp-go{text-decoration:none;font-size:12.5px;padding:7px 12px}
.cp-form-wide{display:flex;flex-direction:column;gap:6px;max-width:900px}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:11px;margin-bottom:9px}
.cp-grid label{display:flex;flex-direction:column;gap:4px}
.cp-grid label span{font-size:11px;color:var(--ink3)}
.cp-grid label em{font-size:11px;color:var(--ink3);font-style:normal}
.cp-grid input{padding:7px 9px;border:1px solid var(--rule2);background:var(--sunk);width:100%}

/* The support link, shown once and never stored. Monospace and wrapping,
   because it is meant to be copied whole. */
.cp-link{border:1px solid var(--brand-line);background:var(--brand-soft);
  padding:11px 13px;margin-bottom:11px}
.cp-link code{font-family:var(--mono);font-size:12px;word-break:break-all;color:var(--ink)}

/* ═══ оформление тенанта ══════════════════════════════════════════ */
/* The logo previews on the tenant card. Two backdrops, because that is the
   whole point of there being two files: the light one is checked against a
   near-white surface and the coloured one against something dark, so an
   operator who uploaded them the wrong way round sees it here rather than a
   client seeing it on their sign-in page. */
.cp-logo{display:block;max-height:40px;max-width:220px;
  padding:6px 10px;border:1px solid var(--rule);background:#FBFCFB}
.cp-logo.dark{background:#14232A}