/* Dark ops console — overrides Django admin's CSS variables (Django >= 4.2).
   The palette is applied for every value of html[data-theme] so Django's own
   light/dark/auto switching never leaks its default colours in. */
:root, html[data-theme="light"], html[data-theme="dark"], html[data-theme="auto"] {
  --primary: #3d7bff; --secondary: #15171c; --accent: #8db2ff; --primary-fg: #fff;
  --body-fg: #f4f5f7; --body-bg: #0b0c0f; --body-quiet-color: #9a9ea8; --body-medium-color: #c3c6cd; --body-loud-color: #fff;
  --header-color: #f4f5f7; --header-branding-color: #f4f5f7; --header-bg: #15171c; --header-link-color: #f4f5f7;
  --breadcrumbs-fg: #9a9ea8; --breadcrumbs-bg: #0b0c0f; --breadcrumbs-link-fg: #8db2ff;
  --link-fg: #8db2ff; --link-hover-color: #b9d0ff; --link-selected-fg: #3d7bff;
  --hairline-color: #262931; --border-color: #262931;
  --error-fg: #ff5c5c; --message-success-bg: #12301f; --message-warning-bg: #3a2f10; --message-error-bg: #3a1717;
  --darkened-bg: #15171c; --selected-bg: #15233f; --selected-row: #15233f;
  --button-fg: #fff; --button-bg: #3d7bff; --button-hover-bg: #2f6af0; --default-button-bg: #3d7bff; --default-button-hover-bg: #2f6af0;
  --close-button-bg: #262931; --close-button-hover-bg: #3a3e47; --delete-button-bg: #ff5c5c; --delete-button-hover-bg: #e64b4b;
  --object-tools-fg: #fff; --object-tools-bg: #262931; --object-tools-hover-bg: #3d7bff;
  --font-family-primary: "Inter Tight", "IBM Plex Sans Arabic", system-ui, sans-serif;
  /* project tokens */
  --panel-bg: #15171c; --panel-bg-2: #1c1e24; --panel-bg-3: #121419; --radius: 14px; --radius-sm: 10px;
  --ok: #2fbf71; --warn: #f5b731; --bad: #ff5c5c; --muted: #6b6f78;
}
html { color-scheme: dark; }
.theme-toggle { display: none; } /* single-theme console: the toggle would do nothing */

/* ---------- header ---------- */
#header { border-bottom: 1px solid var(--hairline-color); }
#branding h1 { font-weight: 600; letter-spacing: -.01em; }
#branding h1 small { font-size: .6em; opacity: .7; letter-spacing: .08em; margin-inline-start: 6px; }
#user-tools .lang-form { display: inline; }
#user-tools .lang-form select { padding: 2px 6px; font-size: 12px; }
.hdr-badges { display: flex; gap: 12px; align-items: center; }
.hdr-badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.hdr-badge::before { content: "● "; }
/* id+class beats Django's "#header a:link" so the badge keeps its own colour */
#header a.hdr-badge.bad { color: var(--bad); background: #3a1717; }
#header a.hdr-badge.warn { color: var(--warn); background: #3a2f10; }

/* Django 6.1 underlines content links for accessibility; keep that for text links but not for pill-style components */
/* the upstream rule scores (1,1,2) because of "#content-main.app-list a" inside :not(); these score (1,2,2) */
#content-main div.states a:is(:link, :visited), #content-main div.attn a:is(:link, :visited),
#content-main div.kpi a:is(:link, :visited), #content-main p.paginator a:is(:link, :visited) { text-decoration: none; }
#content-main div.attn a:hover, #content-main div.states a:hover { text-decoration: underline; }

/* ---------- modules, lists, forms ---------- */
.module h2, .module caption, .inline-group h2 { background: var(--panel-bg-2); color: #9a9ea8; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.module, fieldset.module, #changelist, #changelist-filter { background: var(--panel-bg); border: 1px solid #262931; border-radius: var(--radius); }
#changelist table thead th { background: var(--panel-bg); color: #9a9ea8; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
#changelist table tbody tr:hover { background: #181b21; }
.row1 { background: transparent; } .row2 { background: var(--panel-bg-3); }
#changelist-filter h3 { color: #9a9ea8; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
#changelist-filter li.selected a { color: #8db2ff; }
.actions { background: var(--panel-bg-2); border-radius: var(--radius) var(--radius) 0 0; }
input, select, textarea { background: var(--panel-bg-2) !important; color: #f4f5f7 !important; border: 1px solid #262931 !important; border-radius: var(--radius-sm) !important; }
input:focus, select:focus, textarea:focus { border-color: #3d7bff !important; box-shadow: 0 0 0 3px #15233f; outline: 0; }
.button, input[type=submit], input[type=button], .submit-row input { border-radius: var(--radius-sm); font-weight: 600; }
.submit-row { background: var(--panel-bg-2); border-radius: var(--radius); }
.submit-row a.deletelink { border-radius: var(--radius-sm); }
.paginator .this-page { background: #15233f; color: #8db2ff; border-radius: 6px; padding: 4px 9px; }
/* related-object icons (add / change / delete / view) are Django's saturated defaults; mute them until hovered */
.related-widget-wrapper-link img { filter: grayscale(1) brightness(1.7); opacity: .45; transition: opacity .15s, filter .15s; }
.related-widget-wrapper-link:hover img, .related-widget-wrapper-link:focus img { filter: none; opacity: 1; }
/* tabular inlines: drop the redundant "<object repr>" caption above each row */
.inline-group .tabular td.original p { display: none; }
.inline-group .tabular tr.has_original td { padding-top: 8px; }

/* status pills rendered by admin display functions */
.pill { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-open { background: #15233f; color: #3d7bff; } .pill-full { background: #15233f; color: #8db2ff; }
.pill-in_progress { background: #12301f; color: var(--ok); } .pill-finished { background: #3a2f10; color: var(--warn); }
.pill-closed { background: var(--panel-bg-2); color: #9a9ea8; } .pill-cancelled { background: #3a1717; color: var(--bad); }
.rel-ok { color: var(--ok); font-weight: 600; } .rel-warn { color: var(--warn); font-weight: 600; } .rel-bad { color: var(--bad); font-weight: 600; }
.badge-unreliable { background: #3a1717; color: var(--bad); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.muted { color: var(--muted); }

/* ---------- dashboard ---------- */
/* Django pins the dashboard to a 600px column with a floated 260px sidebar; use the full width instead. */
.dashboard #content { width: auto; }
.dashboard .colMS { margin-right: 0; }
.dashboard #content-main { float: none; width: auto; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ov-head h2 { margin: 0; font-size: 13px; font-weight: 600; color: #9a9ea8; text-transform: uppercase; letter-spacing: .08em; }
.range-form select { padding: 4px 10px; font-size: 13px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi { background: var(--panel-bg); border: 1px solid #262931; border-radius: var(--radius); padding: 16px 18px; }
.kpi .label { font-size: 12px; color: #9a9ea8; display: flex; justify-content: space-between; gap: 8px; }
.kpi .value { font-size: 30px; font-weight: 600; letter-spacing: -.03em; margin: 8px 0; }
.kpi .bar { height: 4px; background: var(--panel-bg-2); border-radius: 2px; overflow: hidden; } .kpi .bar i { display: block; height: 100%; }
.kpi .bar .ok { background: var(--ok); } .kpi .bar .bad { background: var(--bad); }
.kpi .sub { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.ov-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 12px; }
.panel { background: var(--panel-bg); border: 1px solid #262931; border-radius: var(--radius); padding: 18px; min-width: 0; }
.panel h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #f4f5f7; background: none; padding: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.legend { display: flex; gap: 12px; font-size: 11px; color: #9a9ea8; font-weight: 400; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-inline-end: 5px; vertical-align: 0; }
.legend .p { background: #3d7bff; } .legend .c { background: var(--bad); }
.funnel { display: flex; align-items: flex-end; gap: 4px; height: 160px; border-bottom: 1px solid #262931; }
.funnel > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.funnel .p { background: #3d7bff; border-radius: 3px 3px 0 0; } .funnel .c { background: var(--bad); opacity: .7; }
.funnel-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.states a { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; color: inherit; }
.dist-row { display: grid; grid-template-columns: 170px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; margin: 6px 0; }
.dist-row > a { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-row > a:hover { color: #3d7bff; }
.place-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); margin: -4px 0 10px; }
.place-crumbs a { color: #3d7bff; } .place-crumbs .sep { color: var(--muted); }
.dist-bar { height: 8px; background: var(--panel-bg-2); border-radius: 4px; overflow: hidden; }
.dist-bar i { display: block; height: 100%; background: #3d7bff; border-radius: 4px; }
.dist-row .n { text-align: end; color: #9a9ea8; }
.attn a { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #262931; color: inherit; }
.attn a:last-child { border-bottom: 0; }
.panel-stack { display: grid; gap: 12px; align-content: start; min-width: 0; }
#recent-actions-module .actionlist { margin: 0; padding: 0; list-style: none; font-size: 13px; }
#recent-actions-module .actionlist li { padding: 6px 0; border-bottom: 1px solid #262931; background: none; }
#recent-actions-module .actionlist li:last-child { border-bottom: 0; }
#recent-actions-module .mini.quiet { font-size: 11px; color: var(--muted); }

/* ---------- report change form: chat context ---------- */
.ctx { padding: 14px; }
.ctx-msg { display: flex; gap: 8px; font-size: 13px; margin: 6px 0; padding: 4px 6px; border-radius: 6px; }
.ctx-msg.flag { background: #3a1717; color: var(--bad); }
.ctx-msg time { margin-inline-start: auto; color: var(--muted); white-space: nowrap; }
.ctx-note { color: #9a9ea8; font-size: 12px; margin: 12px 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .kpis, .ov-grid { grid-template-columns: 1fr; }
  .dist-row { grid-template-columns: 120px 1fr 32px; }
  .hdr-badges { flex-wrap: wrap; }
}

/* ---------- match change form: ratings matrix ---------- */
.matrix-wrap { padding: 12px 14px; overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.matrix th, .matrix td { padding: 6px 8px; text-align: start; border-bottom: 1px solid #262931; white-space: nowrap; }
.matrix thead th { color: #9a9ea8; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: none; }
.matrix thead th.rater { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.matrix tbody th { font-weight: 600; }
.vote { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.vote-present { background: #12301f; color: var(--ok); } .vote-late { background: #3a2f10; color: var(--warn); }
.vote-absent { background: #3a1717; color: var(--bad); } .vote-undetermined { background: var(--panel-bg-2); color: #9a9ea8; }
.vote.auto { outline: 1px dashed currentColor; outline-offset: 1px; }

/* ---------- forms: Django 6.1 stacks labels over fields; on wide screens lay each row out as label | field ---------- */
@media (min-width: 1024px) {
  .aligned .form-row { padding: 8px 12px; }
  .aligned .form-row > .flex-container:not(.checkbox-row) {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; justify-items: start;
  }
  .aligned .form-row > .flex-container:not(.checkbox-row) > label { grid-column: 1; margin: 0; }
  .aligned .form-row > .flex-container > :not(label) { grid-column: 2; }
  .aligned .form-row > .flex-container > .help { margin: 0; font-size: 12px; }
  .aligned .form-row > .flex-container > .readonly { padding: 4px 0; }
  .aligned .checkbox-row { padding-inline-start: 196px; }
  /* several fields on one row: keep them side by side, each as label | field, the first label aligned to the column */
  .aligned .form-row.form-multiline { display: flex; gap: 8px 28px; align-items: center; }
  .aligned .form-row.form-multiline > .fieldBox { display: flex; flex-direction: row; align-items: center; gap: 10px; }
  .aligned .form-row.form-multiline > .fieldBox:first-child > label { width: 180px; margin-inline-end: 6px; }
  .aligned .form-row.form-multiline > .fieldBox > label { margin: 0; }
  .aligned .form-row .datetime { margin: 0; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
  .aligned .form-row .datetime br { display: none; }
}
.aligned .form-row .related-widget-wrapper { display: inline-flex; align-items: center; gap: 4px; }

/* readonly-style inlines (Timeline, Score history, Matches, Reports): denser rows */
.inline-group .tabular td { font-size: 13px; padding: 8px 10px; vertical-align: middle; }
.inline-group .tabular td p, .inline-group .tabular td .readonly { margin: 0; padding: 0; }
.inline-group .tabular thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #9a9ea8; }

/* ---------- login ---------- */
.login #header { justify-content: center; padding: 28px 16px 20px; border-bottom: 0; background: transparent; }
.login #branding h1 { font-size: 2.4rem; margin: 0; }
.login #branding h1 small { display: block; text-align: center; font-size: .45em; letter-spacing: .2em; margin: 6px 0 0; }
.login #container { background: transparent; border: 0; }
.login #content { background: var(--panel-bg); border: 1px solid #262931; border-radius: var(--radius); padding: 24px; }
.login .login-tagline { margin: 0 0 18px; text-align: center; color: #9a9ea8; font-size: 13px; }
.login .submit-row { background: none; padding: 8px 0 0; }
.login .submit-row input { width: 100%; }