/* Shared admin chrome — tokens + atomic .admin-* classes for custom admin views.
   Source design: docs/design/django-admin-ui (Claude Design handoff).
   Use these classes for cards, pills, chips, tabs, icon tiles, etc.
   Do not invent new colors — extend the token list here.

   Dark mode: every colour is light-dark(light, dark). The dark value is the
   Tailwind palette mirror of the light one (shade N -> 1000 - N, e.g. gray-200
   -> gray-800), the same rule css/admin/tailwind-dark-palette.css applies to
   the `tw:*` utilities, so chrome and utilities stay consistent. light-dark()
   follows the `color-scheme` Django's admin CSS sets on <html> for the theme
   toggle (light / dark / auto). */

:root {
    --admin-header: #476B85;
    --admin-header-yellow: #F4D158;
    --admin-subheader: #2C4655;
    --admin-canvas: light-dark(#FAFAFA, #121212);
    /* Card / panel background. Also `tw:bg-surface` (see includes/tailwind.html). */
    --admin-surface: light-dark(#fff, oklch(12.9% 0.042 264.695)); /* white / slate-950 */
    --admin-card-border: light-dark(#E5E7EB, #1F2937);               /* gray-200 / gray-800 */
    --admin-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --admin-indigo: #6366F1;                                          /* indigo-500 */
    --admin-indigo-strong: light-dark(#4F46E5, #818CF8);              /* indigo-600 / indigo-400 */
    --admin-link: light-dark(#2563EB, #60A5FA);                       /* blue-600 / blue-400 */
}

.admin-mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Tabs row (page-level tabs, not the admin_tab_strip component) */
.admin-tabs {
    border-bottom: 1px solid var(--admin-card-border);
}
.admin-tab {
    display: inline-block;
    padding: 12px 4px;
    margin-right: 28px;
    color: light-dark(#4B5563, #9CA3AF); /* gray-600 / gray-400 */
    border-bottom: 2px solid transparent;
    font-size: 15px;
    text-decoration: none;
}
.admin-tab.is-active {
    color: var(--admin-indigo-strong);
    border-bottom-color: var(--admin-indigo-strong);
    font-weight: 500;
}

/* Section labels (small uppercase eyebrow above a section's cards) */
.admin-section-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: light-dark(#94A3B8, #475569); /* slate-400 / slate-600 */
    font-weight: 500;
    margin: 24px 0 10px;
}

/* Cards */
.admin-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-card-border);
    border-radius: 10px;
    box-shadow: var(--admin-card-shadow);
}
.admin-card__pad {
    padding: 18px 22px;
}
.admin-card__divider {
    border-top: 1px solid var(--admin-card-border);
}

/* Card icon tile (40x40 letter or glyph) */
.admin-icon-tile {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}
.admin-icon-tile.is-indigo { background: light-dark(#EEF2FF, #1E1B4B); color: light-dark(#4F46E5, #818CF8); }
.admin-icon-tile.is-red    { background: light-dark(#FEE2E2, #7F1D1D); color: light-dark(#DC2626, #F87171); }
.admin-icon-tile.is-green  { background: light-dark(#DCFCE7, #14532D); color: light-dark(#15803D, #86EFAC); }
.admin-icon-tile.is-purple { background: light-dark(#EDE9FE, #4C1D95); color: light-dark(#6D28D9, #C4B5FD); }
.admin-icon-tile.is-amber  { background: light-dark(#FEF3C7, #78350F); color: light-dark(#B45309, #FCD34D); }
.admin-icon-tile.is-cyan   { background: light-dark(#CFFAFE, #164E63); color: light-dark(#0E7490, #67E8F9); }

/* Inline link list with pipe separators */
.admin-link-row a {
    color: var(--admin-link);
    font-size: 14px;
    text-decoration: none;
}
.admin-link-row a:hover {
    text-decoration: underline;
}
.admin-link-row .sep {
    color: light-dark(#CBD5E1, #334155); /* slate-300 / slate-700 */
    margin: 0 14px;
}

/* Inline body link. Use this instead of bare `tw:text-blue-600` —
   Django admin's `a:link, a:visited` rule has (0,1,1) specificity and would
   otherwise win over a single Tailwind utility class (0,1,0). */
a.admin-link {
    color: var(--admin-link);
    text-decoration: none;
}
a.admin-link:hover {
    text-decoration: underline;
}

/* Pill badges — state */
.admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.admin-pill.is-green  { background: light-dark(#DCFCE7, #14532D); color: light-dark(#166534, #BBF7D0); }
.admin-pill.is-amber  { background: light-dark(#FEF3C7, #78350F); color: light-dark(#92400E, #FDE68A); }
.admin-pill.is-gray   { background: light-dark(#F1F5F9, #0F172A); color: light-dark(#475569, #94A3B8); }
.admin-pill.is-indigo { background: light-dark(#E0E7FF, #312E81); color: light-dark(#4338CA, #A5B4FC); }
.admin-pill.is-red    { background: light-dark(#FEE2E2, #7F1D1D); color: light-dark(#991B1B, #FECACA); }
.admin-pill.is-blue   { background: light-dark(#DBEAFE, #1E3A8A); color: light-dark(#1E40AF, #BFDBFE); }
.admin-pill.is-purple { background: light-dark(#EDE9FE, #4C1D95); color: light-dark(#5B21B6, #DDD6FE); }

/* Code chip — identifiers (model names, namespaces, ids) */
.admin-chip {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: light-dark(#F1F5F9, #0F172A); /* slate-100 / slate-900 */
    color: light-dark(#334155, #CBD5E1);      /* slate-700 / slate-300 */
}
.admin-chip.is-green  { background: light-dark(#ECFDF5, #022C22); color: light-dark(#065F46, #A7F3D0); }
.admin-chip.is-purple { background: light-dark(#F5F3FF, #2E1065); color: light-dark(#5B21B6, #DDD6FE); }
.admin-chip.is-blue   { background: light-dark(#EFF6FF, #172554); color: light-dark(#1E40AF, #BFDBFE); }
/* Struck through: the identifier is real but unusable in this context (a gateway
   the domain does not offer, an inactive binding). */
.admin-chip.is-muted  { background: light-dark(#F8FAFC, #020617); color: light-dark(#94A3B8, #475569); text-decoration: line-through; }

/* Clickable affordance for chips/pills rendered as <button> (browsers default
   <button> to cursor: default; <a> already gets pointer from the UA sheet). */
button.admin-chip,
button.admin-pill {
    cursor: pointer;
    border: none;
}

/* A chip used as a link keeps the chip's own colour. Django admin's
   `a:link, a:visited` rule is (0,1,1) and outranks the single-class
   `.admin-chip` — the `.admin-chip.is-*` variants are (0,2,0) and already win,
   as do the `.admin-pill.is-*` ones. */
a.admin-chip {
    color: light-dark(#334155, #CBD5E1); /* slate-700 / slate-300 */
    text-decoration: none;
}
a.admin-chip:hover {
    text-decoration: underline;
}

/* Form controls */
.admin-input,
.admin-select {
    box-sizing: border-box;
    width: 100%;
    height: auto;             /* override Django admin's select { height: 1.875rem } */
    margin: 0;                /* override Django admin's input/select { margin: 2px 0 } */
    border: 1px solid light-dark(#D1D5DB, #374151); /* gray-300 / gray-700 */
    border-radius: 6px;
    background: var(--admin-surface);
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: light-dark(#111827, #F3F4F6); /* gray-900 / gray-100 */
}
.admin-input:focus,
.admin-select:focus {
    outline: none;
    border-color: var(--admin-indigo);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.admin-input::placeholder { color: light-dark(#9CA3AF, #4B5563); } /* gray-400 / gray-600 */

.admin-btn-primary {
    /* Saturated in both themes: indigo-600 / indigo-500 keep white text legible. */
    background: light-dark(#4F46E5, #6366F1);
    color: #fff;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}
.admin-btn-primary:hover { background: light-dark(#4338CA, #818CF8); } /* indigo-700 / indigo-400 */

.admin-btn-secondary {
    background: light-dark(#F5F3FF, #2E1065); /* violet-50 / violet-950 */
    color: var(--admin-indigo-strong);
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid light-dark(#E0E7FF, #312E81); /* indigo-100 / indigo-900 */
    cursor: pointer;
}
.admin-btn-secondary:hover { background: light-dark(#EEF2FF, #1E1B4B); } /* indigo-50 / indigo-950 */

/* Key/value field rows used inside cards */
.admin-kv__label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748B; /* slate-500: mid-scale, same in both themes */
    font-weight: 500;
}
.admin-kv__value {
    color: light-dark(#111827, #F3F4F6); /* gray-900 / gray-100 */
    font-size: 14px;
    margin-top: 2px;
}

/* Grid KV row: 110px label column, flexible value column, bottom-bordered.
   Use as `<dl> > <div class="admin-kv-row"> <dt class="admin-kv__label">…</dt>
   <dd>…</dd> </div>`. The last row has no border so it sits flush against the
   next .admin-card__divider or the card's rounded bottom. */
.admin-kv-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid light-dark(#F1F5F9, #0F172A); /* slate-100 / slate-900 */
    font-size: 14px;
}
.admin-kv-row:last-child {
    border-bottom: none;
}
.admin-kv-row > dt {
    align-self: start;
    margin-top: 2px;
}
.admin-kv-row > dd {
    color: light-dark(#334155, #CBD5E1); /* slate-700 / slate-300 */
    margin: 0;
    /* A value column in a narrow card holds ids and hostnames with no break
       opportunity; wrap them rather than push the grid wider than the card. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Compact fact list — the same label/value idea as .admin-kv-row, for a
   breakdown inside one column of a card rather than a full-width card row: no
   row borders, no card padding, and a narrow label column. Use as
   `<dl class="admin-facts"> > <div class="admin-fact"> <dt>…</dt> <dd>…</dd> </div>`. */
.admin-facts {
    display: grid;
    gap: 5px;
}
.admin-fact {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
}
.admin-fact > dt {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748B; /* slate-500: mid-scale, same in both themes */
    font-weight: 500;
}
.admin-fact > dd {
    margin: 0;
    min-width: 0;
    color: light-dark(#334155, #CBD5E1); /* slate-700 / slate-300 */
}

/* One line, ellipsis past the column. Pair with a title attribute — the full
   value has to stay reachable. */
.admin-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer link inside .admin-card — sticky-bottom "View all", "Edit in admin"
   anchor. Apply directly on the <a>; do not wrap in an extra div. */
a.admin-card__footer-link {
    display: block;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: var(--admin-link);
    text-decoration: none;
    border-top: 1px solid var(--admin-card-border);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
a.admin-card__footer-link:hover {
    background: light-dark(#F9FAFB, #030712); /* gray-50 / gray-950 */
    text-decoration: none;
}

/* Tables inside .admin-card — collapse borders so th and td align on a shared grid.
   Without preflight, browsers default to border-spacing: 2px which shifts columns. */
.admin-card table {
    border-collapse: collapse;
}

/* Table header used inside .admin-card tables.
   Padding here must match the per-cell td padding used in row templates —
   `.admin-table` below does that by declaring both. */
.admin-thead th {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748B; /* slate-500 */
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--admin-card-border);
    background: light-dark(#F9FAFB, #030712); /* gray-50 / gray-950 */
}

/* Opt-in table grid: `<table class="admin-table">` with an `.admin-thead`
   header. Header and body share one padding, so every column reads down from
   its own label.

   The body padding has to be declared here rather than as `tw:px-4` on each
   cell: Django admin's `td, th { padding: 8px }` is unlayered, and an unlayered
   rule outranks anything in a cascade layer — which is where Tailwind ships its
   utilities. So `tw:px-*`/`tw:py-*`/`tw:text-[…px]` on a <td> silently does
   nothing, and a header padded to 16px sits 8px off the column under it.
   Colours and `tw:tabular-nums` are unaffected and still belong in the row
   template. */
.admin-table td {
    padding: 12px 16px;
    font-size: 13px;
    border-bottom: 1px solid light-dark(#F1F5F9, #0F172A); /* slate-100 / slate-900 */
}
.admin-table tbody tr:last-child td {
    border-bottom: none;
}

/* Matrix cells that compare a platform against the base value. An inherited
   cell is a tilde, so the eye only stops on the ones that actually differ. */
.admin-table td.is-inherited {
    color: light-dark(#CBD5E1, #334155); /* slate-300 / slate-700 */
}
.admin-table td.is-override {
    background: light-dark(#FFFBEB, #451A03); /* amber-50 / amber-950 */
    color: light-dark(#92400E, #FDE68A);      /* amber-800 / amber-200 */
    font-weight: 600;
}