/*
 *  admin.css
 *  Wayfare — the console on the admin host
 *
 *  A tool, not a page of the product. The Index does not apply here:
 *  system chrome, a sidebar, dense tables, and a form you can finish.
 */

:root {
    --cms-bg: #101114;
    --cms-panel: #17181c;
    --cms-raised: #1e2026;
    --cms-line: #2c2e35;
    --cms-ink: #e8eaed;
    --cms-dim: #9aa0a8;
    --cms-faint: #6b7078;
    --cms-accent: #3b82f6;
    --cms-accent-soft: rgba(59, 130, 246, 0.14);
    --cms-ok: #34d399;
    --cms-warn: #fbbf24;
    --cms-hot: #f87171;
    --cms-field: #121318;
    /* Categorical series order for the Analytics charts. Fixed order, never
       cycled; validated for contrast and color-vision separation on
       --cms-bg. Distinct from ok/warn/hot, which are status colors and
       never carry a series. */
    --cms-cat-1: #3987e5;
    --cms-cat-2: #d95926;
    --cms-cat-3: #199e70;
    --cms-cat-4: #c98500;
    --cms-cat-5: #d55181;
    --cms-cat-6: #008300;
    --cms-cat-7: #9085e9;
    --cms-cat-8: #e66767;
    --nav: 232px;
    --bar: 52px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--cms-bg);
    color: var(--cms-ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

a { color: var(--cms-ink); }

.cms-login {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.cms-login__box {
    width: 100%;
    max-width: 320px;
    display: grid;
    gap: 20px;
}

.cms-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cms-brand img {
    width: 17px;
    height: 32px;
    display: block;
}

.cms-brand span {
    font-size: 18px;
    font-weight: 560;
    letter-spacing: -0.02em;
}

.cms-login__box label {
    display: grid;
    gap: 6px;
    font-size: 12px;
    color: var(--cms-dim);
}

.cms-login__box input,
.cms-field input,
.cms-field textarea,
.cms-field select {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--cms-line);
    border-radius: 8px;
    background: var(--cms-field);
    color: var(--cms-ink);
}

.cms-field textarea {
    min-height: 72px;
    resize: vertical;
}

.cms-login__box input:focus,
.cms-field input:focus,
.cms-field textarea:focus,
.cms-btn:focus-visible,
.cms-nav a:focus-visible {
    outline: 2px solid var(--cms-accent);
    outline-offset: 1px;
}

.cms-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--cms-line);
    border-radius: 8px;
    background: var(--cms-raised);
    cursor: pointer;
}

.cms-btn:hover { border-color: #3d404a; }

.cms-btn--primary {
    background: var(--cms-accent);
    border-color: var(--cms-accent);
    color: #fff;
    font-weight: 560;
}

.cms-btn--danger {
    background: transparent;
    border-color: #5a2a2a;
    color: var(--cms-hot);
}

.cms-btn[disabled],
.cms-btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

.cms-login .providers {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}

.cms-login .providers__label {
    margin: 0;
    color: var(--cms-faint);
    font-size: 12px;
}

.cms-login .providers__row {
    display: flex;
    gap: 8px;
}

.cms-login .providers__mark {
    width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--cms-line);
    border-radius: 8px;
    background: var(--cms-raised);
    color: var(--cms-ink);
    cursor: pointer;
}

.cms-login .providers__mark:hover {
    border-color: #3d404a;
}

.cms-login .providers__glyph {
    width: 20px;
    height: 20px;
    display: block;
}

.cms-login .providers__glyph--google {
    width: 18px;
    height: 18px;
}

.cms-error {
    margin: 0;
    color: var(--cms-hot);
    font-size: 13px;
}

.cms-ok {
    margin: 0;
    color: var(--cms-ok);
    font-size: 13px;
}

.cms-app {
    display: flex;
    min-height: 100svh;
}

.cms-nav {
    width: var(--nav);
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--cms-panel);
    border-right: 1px solid var(--cms-line);
}

.cms-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--cms-line);
    text-decoration: none;
}

.cms-nav__brand img {
    width: 15px;
    height: 28px;
}

.cms-nav__brand span {
    font-weight: 560;
    letter-spacing: -0.02em;
}

.cms-nav__links {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 10px 8px;
}

.cms-nav__links a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--cms-dim);
    text-decoration: none;
}

.cms-nav__links a[aria-current="page"],
.cms-nav__links a:hover {
    background: var(--cms-accent-soft);
    color: var(--cms-ink);
}

.cms-nav__foot {
    padding: 12px;
    border-top: 1px solid var(--cms-line);
    display: grid;
    gap: 8px;
}

.cms-nav__foot p {
    margin: 0;
    font-size: 12px;
    color: var(--cms-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.cms-bar {
    min-height: var(--bar);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    border-bottom: 1px solid var(--cms-line);
}

.cms-bar h1 {
    margin: 0;
    font-size: 15px;
    font-weight: 560;
}

.cms-bar p {
    margin: 0;
    color: var(--cms-dim);
    font-size: 13px;
}

.cms-bar__end {
    margin-left: auto;
}

.cms-page {
    flex: 1;
    padding: 24px;
    max-width: 1180px;
}

.cms-flash {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.cms-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 0 0 24px;
}

.cms-stat {
    padding: 12px 14px;
    border: 1px solid var(--cms-line);
    border-radius: 10px;
    background: var(--cms-panel);
}

.cms-stat dt {
    margin: 0;
    color: var(--cms-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cms-stat dd {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 560;
    letter-spacing: -0.03em;
}

.cms-section {
    margin: 28px 0 0;
}

.cms-section h2 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 560;
    color: var(--cms-dim);
}

.cms-table {
    width: 100%;
    border-collapse: collapse;
}

.cms-table th,
.cms-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--cms-line);
    text-align: left;
    vertical-align: top;
}

.cms-table th {
    color: var(--cms-faint);
    font-size: 11px;
    font-weight: 560;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cms-table a {
    color: var(--cms-ink);
    text-decoration: none;
}

.cms-table a:hover { color: var(--cms-accent); }

.cms-table__row--hit {
    cursor: pointer;
}

.cms-table__row--hit:hover {
    background: var(--cms-raised);
}

.cms-table__row--on {
    cursor: pointer;
    background: var(--cms-raised);
}

.cms-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--cms-raised);
    color: var(--cms-dim);
    font-size: 11px;
}

.cms-badge--hot {
    background: rgba(248, 113, 113, 0.14);
    color: var(--cms-hot);
}

.cms-badge--ok {
    background: rgba(52, 211, 153, 0.12);
    color: var(--cms-ok);
}

.cms-badge--warn {
    background: rgba(251, 191, 36, 0.14);
    color: var(--cms-warn);
}

.cms-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
}

.cms-toolbar .cms-field { flex: 1; min-width: 200px; }

.cms-field {
    display: grid;
    gap: 6px;
}

.cms-field > span {
    font-size: 12px;
    color: var(--cms-dim);
}

.cms-checks {
    display: grid;
    gap: 8px;
}

.cms-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cms-ink);
}

.cms-check input { width: auto; min-height: 0; }

.cms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.cms-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--cms-line);
}

.cms-tabs a,
.cms-tabs button {
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--cms-dim);
    cursor: pointer;
    text-decoration: none;
}

.cms-tabs [aria-current="page"],
.cms-tabs [aria-pressed="true"] {
    color: var(--cms-ink);
    border-bottom-color: var(--cms-accent);
}

.cms-pager {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    color: var(--cms-faint);
    font-size: 12px;
}

.cms-pre {
    margin: 12px 0 0;
    padding: 12px;
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--cms-line);
    border-radius: 8px;
    background: var(--cms-field);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

.cms-pre--log { max-height: 520px; }

.cms-fold {
    margin-top: 12px;
    border: 1px solid var(--cms-line);
    border-radius: 8px;
    background: var(--cms-field);
}

.cms-fold summary {
    padding: 10px 12px;
    cursor: pointer;
    color: var(--cms-dim);
}

.cms-fold[open] summary { color: var(--cms-ink); }

.cms-fold .cms-pre {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--cms-line);
    border-radius: 0;
}

.cms-toolbar--filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}

.cms-back {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--cms-dim);
    text-decoration: none;
    font-size: 13px;
}

.cms-back:hover { color: var(--cms-ink); }

.cms-hold {
    padding: 10px 12px;
    border: 1px solid #5a2a2a;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.08);
    color: var(--cms-hot);
}

.cms-photo {
    display: block;
    max-width: min(100%, 480px);
    margin: 12px 0;
    border-radius: 8px;
}

.cms-note {
    margin: 0 0 12px;
    color: var(--cms-dim);
}

.cms-grid-2 {
    display: grid;
    gap: 14px;
}

@media (min-width: 720px) {
    .cms-grid-2 { grid-template-columns: 1fr 1fr; }
}

.cms-chart {
    margin: 4px 0 0;
}

.cms-chart__svg {
    display: block;
    width: 100%;
    height: auto;
}

.cms-chart--wide { overflow-x: auto; }
.cms-chart--wide .cms-chart__svg { min-width: 760px; }

.cms-chart__tick,
.cms-chart__label,
.cms-chart__value,
.cms-chart__svg text {
    fill: var(--cms-dim);
    font-family: inherit;
    font-size: 10px;
}

.cms-chart__label { font-size: 11px; }
.cms-chart__value { fill: var(--cms-ink); font-size: 11px; }
.cms-chart__dim { color: var(--cms-faint); }

.cms-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 8px;
    color: var(--cms-dim);
    font-size: 12px;
}

.cms-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cms-legend__chip {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.cms-range {
    display: inline-flex;
    gap: 4px;
}

.cms-range .cms-btn[aria-pressed="true"] {
    border-color: var(--cms-accent);
    color: var(--cms-ink);
}

.cms-chart-grid {
    display: grid;
    gap: 18px;
}

@media (min-width: 900px) {
    .cms-chart-grid { grid-template-columns: 1fr 1fr; }
}

.cms-chart-cell h3 {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 560;
    color: var(--cms-dim);
}

.cms-heat {
    display: inline-block;
    min-width: 44px;
    padding: 1px 6px;
    border-radius: 6px;
    text-align: right;
}

@media (max-width: 720px) {
    .cms-app { flex-direction: column; }
    .cms-nav { width: 100%; }
    .cms-nav__links { grid-auto-flow: column; overflow-x: auto; }
    .cms-page { padding: 16px; }
}

/* ── The Board ──────────────────────────────────────────────────────────
   The task board: groups of rows the way monday.com drew them, with the
   console's chrome. Every cell is the control that edits it. */

.cms-board-group {
    margin: 24px 0 0;
    border: 1px solid var(--cms-line);
    border-radius: 10px;
    background: var(--cms-panel);
    overflow: hidden;
}

.cms-board-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cms-line);
}

.cms-board-group__fold {
    border: 0;
    background: none;
    color: var(--cms-dim);
    cursor: pointer;
    padding: 2px 4px;
}

.cms-board-group__chip {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    flex: none;
}

.cms-board-group__title {
    font-weight: 560;
    font-size: 15px;
    max-width: 420px;
}

.cms-board-group__count {
    color: var(--cms-faint);
    font-size: 12px;
}

.cms-dist {
    display: flex;
    flex: 1;
    max-width: 220px;
    height: 8px;
    margin-left: auto;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cms-raised);
}

.cms-dist__part { flex-basis: 0; }
.cms-dist__part--done { background: #00c875; }
.cms-dist__part--working { background: #fdab3d; }
.cms-dist__part--stuck { background: #df2f4a; }
.cms-dist__part--not_started { background: #4c4f58; }

.cms-board-table { margin: 0; }

.cms-board-table th:nth-child(2) { width: 110px; }
.cms-board-table th:nth-child(3) { width: 150px; }
.cms-board-table th:nth-child(4) { width: 150px; }
.cms-board-table th:nth-child(5) { width: 90px; }

.cms-cell-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--cms-ink);
}

.cms-cell-input:hover { border-color: var(--cms-line); }

.cms-cell-input:focus {
    outline: none;
    border-color: var(--cms-accent);
    background: var(--cms-field);
}

.cms-cell-date { color-scheme: dark; }

.cms-cell-date--late { color: var(--cms-hot); }

.cms-status {
    width: 100%;
    min-height: 28px;
    padding: 2px 8px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 560;
    color: #14150f;
    cursor: pointer;
}

.cms-status--not_started { background: #c4c4c4; }
.cms-status--working { background: #fdab3d; }
.cms-status--stuck { background: #df2f4a; color: #fff; }
.cms-status--done { background: #00c875; }

.cms-btn--slim {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

.cms-btn--marked { border-color: var(--cms-accent); }

.cms-board-note td {
    background: var(--cms-raised);
    padding: 12px 14px;
}

.cms-note-editor {
    width: 100%;
    min-height: 110px;
    padding: 10px 12px;
    border: 1px solid var(--cms-line);
    border-radius: 8px;
    background: var(--cms-field);
    color: var(--cms-ink);
    resize: vertical;
}

.cms-note-meta {
    color: var(--cms-faint);
    font-size: 12px;
    margin-right: auto;
}

.cms-board-note .cms-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.cms-board-note .cms-btn--danger { margin-left: auto; }

.cms-board-note .cms-note-meta { margin-right: 0; }

.cms-board-add {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 10px;
}

.cms-board-add .cms-cell-input { max-width: 420px; }

.cms-board-add--group {
    padding: 20px 0 0;
}

.cms-name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cms-rb {
    color: var(--cms-hot);
    flex: none;
    cursor: default;
}

.cms-board-note .cms-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--cms-dim);
}

.cms-tnum {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: var(--cms-faint);
    flex: none;
    letter-spacing: 0.02em;
}

.cms-task-open {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.cms-task-open__name {
    font-weight: 560;
}

.cms-task-open:hover .cms-task-open__name {
    text-decoration: underline;
}

.cms-board-detail {
    display: grid;
    gap: 8px;
    max-width: 760px;
}

.cms-board-detail .cms-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.cms-board-detail .cms-btn--danger { margin-left: auto; }

.cms-note-editor--full {
    min-height: 320px;
    white-space: pre-wrap;
}

.cms-field--status .cms-status {
    width: 100%;
    min-height: 40px;
    border: 0;
    font-size: 13px;
}

.cms-field--status .cms-status--not_started { background: #c4c4c4; color: #14150f; }
.cms-field--status .cms-status--working { background: #fdab3d; color: #14150f; }
.cms-field--status .cms-status--stuck { background: #df2f4a; color: #fff; }
.cms-field--status .cms-status--done { background: #00c875; color: #14150f; }

.cms-board-detail .cms-field input.cms-cell-date--late { color: var(--cms-hot); }

.cms-notes-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.cms-pr-link {
    font-size: 11px;
    font-weight: 560;
    color: var(--cms-accent);
    text-decoration: none;
    border: 1px solid var(--cms-line);
    border-radius: 6px;
    padding: 3px 7px;
}

.cms-pr-link:hover { border-color: var(--cms-accent); }

.cms-git {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.cms-git__branch { max-width: 340px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.cms-git__pr { max-width: 340px; font-size: 12px; }