/* 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. */

:root {
    --admin-header: #476B85;
    --admin-header-yellow: #F4D158;
    --admin-subheader: #2C4655;
    --admin-canvas: #FAFAFA;
    --admin-card-border: #E5E7EB;
    --admin-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --admin-indigo: #6366F1;
    --admin-indigo-strong: #4F46E5;
    --admin-link: #2563EB;
}

.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 #E5E7EB;
}
.admin-tab {
    display: inline-block;
    padding: 12px 4px;
    margin-right: 28px;
    color: #4B5563;
    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: #94A3B8;
    font-weight: 500;
    margin: 24px 0 10px;
}

/* Cards */
.admin-card {
    background: #fff;
    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: #EEF2FF; color: #4F46E5; }
.admin-icon-tile.is-red    { background: #FEE2E2; color: #DC2626; }
.admin-icon-tile.is-green  { background: #DCFCE7; color: #15803D; }
.admin-icon-tile.is-purple { background: #EDE9FE; color: #6D28D9; }
.admin-icon-tile.is-amber  { background: #FEF3C7; color: #B45309; }
.admin-icon-tile.is-cyan   { background: #CFFAFE; color: #0E7490; }

/* 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: #CBD5E1;
    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: #DCFCE7; color: #166534; }
.admin-pill.is-amber  { background: #FEF3C7; color: #92400E; }
.admin-pill.is-gray   { background: #F1F5F9; color: #475569; }
.admin-pill.is-indigo { background: #E0E7FF; color: #4338CA; }
.admin-pill.is-red    { background: #FEE2E2; color: #991B1B; }
.admin-pill.is-blue   { background: #DBEAFE; color: #1E40AF; }
.admin-pill.is-purple { background: #EDE9FE; color: #5B21B6; }

/* 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: #F1F5F9;
    color: #334155;
}
.admin-chip.is-green  { background: #ECFDF5; color: #065F46; }
.admin-chip.is-purple { background: #F5F3FF; color: #5B21B6; }
.admin-chip.is-blue   { background: #EFF6FF; color: #1E40AF; }

/* 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;
}

/* 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 #D1D5DB;
    border-radius: 6px;
    background: #fff;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #111827;
}
.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: #9CA3AF; }

.admin-btn-primary {
    background: var(--admin-indigo-strong);
    color: #fff;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}
.admin-btn-primary:hover { background: #4338CA; }

.admin-btn-secondary {
    background: #F5F3FF;
    color: #4F46E5;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid #E0E7FF;
    cursor: pointer;
}
.admin-btn-secondary:hover { background: #EEF2FF; }

/* Key/value field rows used inside cards */
.admin-kv__label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748B;
    font-weight: 500;
}
.admin-kv__value {
    color: #111827;
    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 #F1F5F9;
    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: #334155;
    margin: 0;
}

/* 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: #F9FAFB;
    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-thead th {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748B;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--admin-card-border);
    background: #F9FAFB;
}