/* Industrial Precision — admin chrome (issue #80).
   ═══════════════════════════════════════════════
   The single home for the styling of every admin/maintenance screen: the page hero, the panels
   and tables, the accent button, status badges, and the corrections Bootstrap utilities need on
   the dark chrome.

   THE RULE THIS FILE INSTALLS: navy is chrome, white is content.

     page ................ --surface-2   --surface-ink   --surface-rule
     hero band ........... --chrome-fill --chrome-ink    --chrome-rule
     panel header strip .. --chrome-fill --chrome-ink    --chrome-rule
     panel BODY .......... --surface-1   --surface-ink   --surface-rule
     article toolbar ..... --chrome-fill --chrome-muted  (stays dark: sticky chrome)
     modal ............... navy header, light body

   Colours come from the semantic names in theme-surfaces.css, never from --navy/--white/--muted
   directly, so dark mode is a token flip rather than a rewrite of this file. Read that file's
   header for why the panel body is light at all.

   ── THE STALE-BUNDLE HAZARD. READ BEFORE EDITING. ────────────────────────────────────────────
   wwwroot/css/customerportal.min.css is a committed compiled artifact. Its SCSS source no longer
   defines the admin chrome, but the compiled copy still carries the PRE-ISSUE-#80 NAVY VERSIONS,
   because CustomerPortal.csproj compiles SCSS with `npx sass` under ContinueOnError="true" and
   Node is not installed — so the build reports success and never regenerates it. This file loads
   after that bundle and therefore wins ties, BUT ONLY ON PROPERTIES IT ACTUALLY DECLARES.

   Exactly eight rules are ghosted there:

       .admin-panel                     .admin-table tbody tr
       .admin-panel-header              .admin-table tbody tr:last-child
       .admin-table                     .admin-table tbody tr:hover
       .admin-table thead th            .admin-table tbody td

   Inside those eight: CHANGE VALUES, NEVER REMOVE A DECLARATION. A declaration deleted from one
   of them silently reverts to the old navy value. Nothing else here has a ghost — no badge,
   toolbar, modal, DataTables, hero or .btn-accent rule — so everywhere else, delete freely.
   AdminThemeTests derives the required property list from the bundle itself and fails if one
   goes missing, so this stays true even if the bundle is regenerated later.

   Plain CSS on purpose: like admin-nav.css it must not depend on the Dart Sass build step.
   Loaded by _Layout and _LayoutArticle after theme-surfaces.css. */

/* ── Page hero ───────────────────────────────────────────────────────────────
   One band, two class names. .cp-inner-hero is the customer-facing name (21 views, declared in
   Styles/modules/_industrial.scss and present in the compiled bundle); .inner-page-hero is the
   admin name (84 views, declared here). They were authored separately and drifted — different
   title scale, different subtitle colour — which is most of why admin and customer screens looked
   like different products. Every shared declaration lists both names.

   Deliberately NOT shared: padding, and .cp-inner-hero-sub's max-width. Re-declaring
   `.cp-inner-hero { padding }` here would kill the bundle's `@media (max-width:576px)` override,
   because a later stylesheet beats an earlier media query at equal specificity. Padding is layout,
   not visual language — leave it where it is. */

.inner-page-hero,
.cp-inner-hero {
    position: relative;
    background: var(--chrome-fill);
    border-bottom: 2px solid rgba(61, 184, 245, 0.15);
    overflow: hidden;
    /* Declares the band a dark surface so anything dropped into it inherits a dark-surface
       colour instead of body's --surface-ink. .admin-badge--muted relies on this. */
    color: var(--chrome-muted);
}

.inner-page-hero {
    padding: 30px 0 34px;
}

/* The precision grid, as on the public cp-inner-hero, without extra markup. Not applied to
   .cp-inner-hero: that band paints the same grid via its own child element, and adding it here
   would double it on 21 customer views. */
.inner-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(61, 184, 245, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 184, 245, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.inner-page-hero > .container {
    position: relative;
    z-index: 1;
}

.inner-page-hero-eyebrow,
.cp-inner-hero-badge {
    color: var(--chrome-link);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.inner-page-hero-eyebrow {
    margin: 0 0 6px;
}

.inner-page-hero-title,
.cp-inner-hero-title {
    font-family: 'Barlow Condensed', sans-serif;
    /* Was 26/3vw/38 on admin and 28/4vw/44 on customer; one scale for both. */
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: var(--chrome-ink);
    line-height: 1.05;
    margin: 0;
}

.inner-page-hero-sub,
.cp-inner-hero-sub {
    /* The customer band used rgba(255,255,255,.55) (~4.5:1); --chrome-muted is 11.3:1. */
    color: var(--chrome-muted);
    font-weight: 300;
    line-height: 1.7;
}

.inner-page-hero-sub {
    font-size: .9rem;
    margin: 6px 0 0;
}

.inner-page-hero-sub a,
.cp-inner-hero-sub a {
    color: var(--chrome-link);
}

/* ── Accent button ─────────────────────────────────────────────────────────── */
/* Accent fill with navy text is 8.3:1, so it reads on a light body and on navy chrome alike. */

.btn-accent {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--navy);
    font-weight: 600;
}

.btn-accent:hover,
.btn-accent:focus {
    background: var(--accent2);
    border-color: var(--accent2);
    color: var(--navy);
    box-shadow: 0 4px 14px rgba(61, 184, 245, 0.3);
}

.btn-accent:disabled,
.btn-accent.disabled {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--navy);
    opacity: .55;
}

/* ── Panels ────────────────────────────────────────────────────────────────── */
/* A light card with a navy header strip — the same object as .card / .card-header in
   Styles/modules/_industrial.scss, which HubspotImport, PublishNewErpRelease and
   PublishNewSfdRelease already use. This makes the other 45 views agree with those three.

   GHOSTED RULE: every declaration below is also set by the stale bundle. Change values only. */

.admin-panel {
    background: var(--surface-1);
    border: 1px solid var(--surface-rule);
    border-radius: 4px;             /* was 8px; 4px matches .card */
    overflow: hidden;               /* clips the header strip's top corners */
    padding: 0;                     /* the legacy pink class set 5px; keep explicit */
    color: var(--surface-ink);
    box-shadow: 0 1px 6px rgba(0, 20, 55, 0.06);   /* as .card */
}

/* GHOSTED RULE. */
.admin-panel-header {
    background: var(--chrome-fill);
    /* The bundle says var(--rule), a navy-tinted hairline that is invisible on navy. An accent
       hairline echoes the hero's own accent underline. */
    border-bottom: 1px solid var(--chrome-rule);
    padding: 12px 20px;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--chrome-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-panel a:not(.btn) {
    color: var(--surface-link);
}

.admin-panel a:not(.btn):hover {
    color: var(--surface-link-hover);
}

/* …but the header strip and the article-page toolbar are still dark surfaces. */
.admin-panel-header a:not(.btn),
.admin-toolbar a:not(.btn) {
    color: var(--chrome-link);
}

/* Inline code, app-wide. Bootstrap's CDN sets code { color: #d63384 } — Bootstrap pink, which is
   not in this palette — and the compiled bundle overrides only its background (#eff0f1), never
   its colour. On the old navy panel that inherited --white and rendered white-on-near-white at
   ~1.07:1, which is why every key in the permission catalogue was invisible.
   .article-body code and .visu-article-body code are more specific and already correct, so this
   only reaches the ones nothing ever styled — including the help paragraphs that sit outside a
   panel on the light page. */
code {
    color: var(--code-ink);
}

/* Inside a panel, give it a chip. */
.admin-panel code,
.admin-modal code {
    color: var(--code-ink);
    background: var(--surface-2);
    border: 1px solid var(--surface-rule);
    border-radius: 3px;
    padding: 1px 5px;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
/* GHOSTED RULE. */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin: 0;
    color: var(--surface-ink);
}

/* GHOSTED RULE. A tinted band, because a transparent header on white has nothing separating it
   from the first row. --surface-muted is 5.31:1 on --surface-2. */
.admin-table thead th {
    background: var(--surface-2);
    color: var(--surface-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-bottom: 1px solid var(--surface-rule);
    white-space: nowrap;
}

/* GHOSTED RULE. */
.admin-table tbody tr {
    border-bottom: 1px solid var(--surface-rule);
    transition: background .15s;
}

/* GHOSTED RULE. */
.admin-table tbody tr:last-child {
    border-bottom: none;
}

/* GHOSTED RULE. */
.admin-table tbody tr:hover {
    background: var(--surface-hover);
}

/* GHOSTED RULE. */
.admin-table tbody td {
    padding: 12px 20px;
    color: var(--surface-ink);
    vertical-align: middle;
    background: transparent;
}

/* Opt-in banding for the dense catalogues. NOT the default: Revisions.cshtml filters rows with
   `row.hidden = true`, which does not remove them from :nth-child, so banding would stagger as
   a filter is typed. */
.admin-table--zebra tbody tr:nth-child(even) {
    background: var(--surface-zebra);
}

.admin-table--zebra tbody tr:nth-child(even):hover {
    background: var(--surface-hover);
}

/* Denser rows for catalogue screens, replacing per-view inline font-size. */
.admin-table--dense thead th {
    padding: 8px 16px;
}

.admin-table--dense tbody td {
    padding: 8px 16px;
    font-size: .85rem;
}

/* Bootstrap's .table drives itself off CSS variables. Keep the Industrial hairline and hover
   rather than Bootstrap's #dee2e6 where the two are mixed (Users/Index uses a bare .table;
   Activity used table-dark). Same shape as before, light values.
   .admin-panel .table is (0,2,0) and so also beats .table-dark (0,1,0). */
.admin-table.table,
.admin-panel .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--surface-ink);
    --bs-table-border-color: var(--surface-rule);
    --bs-table-striped-bg: var(--surface-zebra);
    --bs-table-striped-color: var(--surface-ink);
    --bs-table-hover-bg: var(--surface-hover);
    --bs-table-hover-color: var(--surface-ink);
    color: var(--surface-ink);
}

/* ── Status badges ─────────────────────────────────────────────────────────── */
/* These appear on THREE surfaces on a single page — Revisions.cshtml puts one in the hero, one
   in a navy header strip and one in a light table body — so no per-surface override can work.
   Every variant has to read on navy and on white. */

.admin-badge {
    display: inline-block;
    padding: .3em .65em;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: 3px;
    line-height: 1;
}

/* Accent fill, navy text: 8.3:1 on either surface. */
.admin-badge--live {
    background: var(--accent);
    color: var(--navy);
}

/* An outline chip that takes its colour from whatever surface it lands on: --surface-ink inside
   a panel body, --chrome-ink inside a header strip, --chrome-muted inside a hero. */
.admin-badge--muted {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
}

/* Solid, not outline: the #ff8095 outline this replaced was 2.39:1 on a light body. */
.admin-badge--danger {
    background: var(--status-danger-fill);
    border: 1px solid var(--status-danger-fill);
    color: var(--status-danger-ink);
}

/* Count pills on panel headers ("Active Pages [12]"). */
.admin-badge--count {
    background: var(--accent);
    color: var(--navy);
    font-weight: 700;
    border-radius: 999px;
    padding: .3em .7em;
}

/* ── Bootstrap corrections on the dark chrome ─────────────────────────────────
   The panel BODY is a light surface now, so text-muted, form-label, form-text, badges and
   btn-outline-* are correct exactly as Bootstrap authors them, and the .admin-panel overrides
   that used to force them to --steel are gone.

   What is still dark is the chrome: the hero band, the header strip, the article toolbar and the
   modal header. Nine views put Bootstrap utilities inside a header strip (ConferenceResources,
   PartnerSubmissions, PageSections, VisUManagement, Capabilities, ChatBoards, ChatModeration,
   Pages, Revisions), so these rules moved rather than died. */

.inner-page-hero .text-muted,
.cp-inner-hero .text-muted,
.admin-panel-header .text-muted,
.admin-toolbar .text-muted,
.admin-modal .modal-header .text-muted {
    color: var(--chrome-muted) !important;
}

.admin-panel-header .badge.bg-secondary,
.inner-page-hero .badge.bg-secondary {
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--chrome-muted);
}

.inner-page-hero .btn-outline-secondary,
.cp-inner-hero .btn-outline-secondary,
.admin-panel-header .btn-outline-secondary {
    color: var(--chrome-control-ink);
    border-color: var(--chrome-control-border);
}

.inner-page-hero .btn-outline-secondary:hover,
.inner-page-hero .btn-outline-secondary:focus,
.cp-inner-hero .btn-outline-secondary:hover,
.cp-inner-hero .btn-outline-secondary:focus,
.admin-panel-header .btn-outline-secondary:hover,
.admin-panel-header .btn-outline-secondary:focus {
    background: var(--chrome-control-hover-bg);
    color: var(--chrome-ink);
    border-color: var(--chrome-control-hover-border);
}

/* VisUManagement is the one view with a delete button inside a header strip. */
.admin-panel-header .btn-outline-danger {
    color: var(--chrome-danger-ink);
    border-color: var(--chrome-danger-ink);
}

.admin-panel-header .btn-outline-danger:hover,
.admin-panel-header .btn-outline-danger:focus {
    background: rgba(220, 53, 69, 0.18);
    color: #ffb3c0;
    border-color: #ffb3c0;
}

/* Revisions.cshtml puts its filter box in the header strip; match the navbar's own search field
   rather than dropping a white block onto the navy. */
.admin-panel-header .form-control,
.admin-panel-header .form-control:focus {
    background: var(--chrome-control-hover-bg);
    border-color: var(--chrome-control-border);
    color: var(--chrome-ink);
}

.admin-panel-header .form-control::placeholder {
    color: var(--chrome-muted);
}

.admin-panel hr {
    border-color: var(--surface-rule);
    opacity: 1;
}

/* ── Admin toolbar strips on article pages ───────────────────────────────────
   Docs, KnowledgeBase and both ShowArticle views wrap their admin-only edit links in
   `admin-panel admin-toolbar`. Those are customer-facing article pages on the light canvas, and
   ShowArticle's strip is position:sticky over the article — so this one STAYS DARK on purpose.
   It is chrome, and a white sticky bar on an off-white article page would read as part of the
   article rather than as an admin control.

   (0,2,0), so it beats both .admin-panel above and the ghost in the bundle. */

.admin-panel.admin-toolbar {
    background: var(--chrome-fill);
    border: 1px solid var(--rule-dark);
    color: var(--chrome-muted);
}

.admin-toolbar {
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    font-size: .9rem;
    margin-bottom: 14px;
}

/* Destructive actions on the toolbar read as warnings, not the darkred-on-navy the old inline
   styles produced. */
.admin-panel a.admin-toolbar-danger {
    color: var(--chrome-danger-ink);
}

/* ── DataTables inside panels ────────────────────────────────────────────────
   Images, File Upload, Users and Customers run DataTables, whose CDN chrome assumes a white
   page — which the panel body now is, so most of the old dark skin is gone. What remains only
   aligns the CDN's typography and spacing with .admin-table. */

.admin-panel .dataTables_wrapper {
    padding: 14px 20px;
    color: var(--surface-muted);
}

.admin-panel .dataTables_wrapper .dataTables_length,
.admin-panel .dataTables_wrapper .dataTables_filter,
.admin-panel .dataTables_wrapper .dataTables_info,
.admin-panel .dataTables_wrapper .dataTables_processing,
.admin-panel .dataTables_wrapper .dataTables_paginate {
    color: var(--surface-muted);
}

.admin-panel table.dataTable thead th,
.admin-panel table.dataTable thead td {
    background: var(--surface-2);
    color: var(--surface-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--surface-rule);
    padding: 10px 12px;
}

.admin-panel table.dataTable tbody td {
    padding: 10px 12px;
    color: var(--surface-ink);
}

.admin-panel table.dataTable tbody tr {
    border-bottom: 1px solid var(--surface-rule);
}

.admin-panel table.dataTable tbody tr:hover {
    background: var(--surface-hover);
}

/* DataTables paints row selection as a box-shadow, which no background can override. */
.admin-panel table.dataTable tbody tr.selected,
.admin-panel table.dataTable tbody tr.selected > * {
    background: rgba(61, 184, 245, 0.16);
    color: var(--surface-ink);
    box-shadow: none !important;
}

.admin-panel .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.admin-panel .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--navy) !important;
    background: var(--accent);
    border-color: var(--accent);
}

/* ── Modals ──────────────────────────────────────────────────────────────────
   Confirmation dialogs on admin screens. Bootstrap's .modal-content is already a light surface,
   so only the navy header needs stating — and stating it explicitly is what keeps
   `btn-close-white` correct in Pages.cshtml without touching the view. */

.admin-modal .modal-header {
    background: var(--chrome-fill);
    color: var(--chrome-ink);
    border-bottom: 1px solid var(--chrome-rule);
}

.admin-modal .modal-title {
    color: var(--chrome-ink);
}

.admin-modal .modal-footer {
    border-color: var(--surface-rule);
}

/* --surface-1, not --surface-2: .modal-content computes to --offwhite, so a --surface-2 callout
   would be the same tone as the body it sits in and only its hairline would show. */
.admin-modal .callout {
    background: var(--surface-1);
    border: 1px solid var(--surface-rule);
    border-radius: 6px;
    padding: 12px 16px;
}

/* ── Image picker (issue #93) ────────────────────────────────────────────────
   The drag-and-drop image field on the admin editors (Views/Shared/_ImagePicker.cshtml). Its
   values were authored for a dark panel, but ConferenceEdit renders the picker directly on the
   light page — so those were already wrong before this change, not made wrong by it. */

.img-picker-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.img-picker-fields {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Fixed box so the row does not jump as previews of different sizes load. */
.img-picker-preview {
    flex: 0 0 auto;
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-1);
    border: 1px solid var(--surface-rule);
    border-radius: 4px;
    overflow: hidden;
}

.img-picker-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Shared with the file picker below: the two drop zones are the same control, and looking
   alike is the point — an admin should not have to learn a second one. */
.img-picker-drop,
.file-picker-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px dashed rgba(0, 55, 120, 0.28);
    border-radius: 5px;
    background: rgba(0, 55, 120, 0.03);
    color: var(--surface-muted);
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.img-picker-drop i,
.file-picker-drop i {
    font-size: 1.15rem;
}

.img-picker-drop:hover,
.img-picker-drop:focus-visible,
.file-picker-drop:hover,
.file-picker-drop:focus-visible {
    border-color: var(--accent);
    background: rgba(61, 184, 245, 0.08);
    color: var(--navy2);
    outline: none;
}

/* While a file is over the target. */
.img-picker-drop--over,
.file-picker-drop--over {
    border-color: var(--accent);
    border-style: solid;
    background: rgba(61, 184, 245, 0.14);
    color: var(--navy2);
}

.img-picker-status,
.file-picker-status {
    font-size: .78rem;
    color: var(--surface-link);
    min-height: 1.1em;
}

.img-picker-status--error,
.file-picker-status--error {
    color: #b02a37;
}

@media (max-width: 575px) {
    .img-picker-row {
        flex-direction: column;
    }
}

/* ── File picker ─────────────────────────────────────────────────────────────
   The drag-and-drop "Uploaded file Id" field (Views/Shared/_FilePicker.cshtml). It shares
   the drop zone above with the image picker and adds a line naming the file the id points
   at, because an id on its own tells an admin nothing. */

.file-picker-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.file-picker-current {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    min-width: 0;
}

.file-picker-current a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The variant that lives in a table cell: no label, no name box, and a drop zone slim
   enough that a row does not become twice as tall. */
.file-picker--compact .file-picker-drop {
    padding: 6px 8px;
    gap: 6px;
    font-size: .75rem;
}

.file-picker--compact .file-picker-drop i {
    font-size: .95rem;
}

.file-picker--compact .file-picker-current,
.file-picker--compact .file-picker-status {
    font-size: .72rem;
}