/* ===========================================================
   Admin Panel — theme tokens + chrome
   -----------------------------------------------------------
   Every colour in this file (and in page-builder.css /
   page-preview.css) resolves through a token defined below,
   and every one of those tokens now resolves through a BRAND
   token from assets/brand.css. A literal hex in this file is a
   bug by definition — it is a colour that cannot follow the
   brand and cannot follow the theme.

   What changed with the rebrand: the light/dark pairs that used
   to be spelled out twice here are mostly defined ONCE now.
   assets/brand.css already flips --ink/--paper/--grey/--line/
   --stone per theme, so "--admin-surface: var(--paper)" is
   correct in both. Only tokens that are genuinely
   theme-specific — the overlay washes, which tint with black on
   light and white on dark — still need a second definition.

   Load order (admin/partials/header.php): bootstrap.min.css,
   then brand.css, then this file.

   TEXT TIERS AND CONTRAST
   The four text tiers stay visually distinct rather than
   collapsing onto the 4.5:1 floor, and each is pinned against
   the WORST backdrop it lands on — the --grey band, in both
   themes. Measured (light / dark, against --grey):

       --admin-text          14.30 / 14.36
       --admin-text-soft      7.72 /  9.47
       --admin-text-muted     6.30 /  8.26
       --admin-text-faint     5.34 /  5.88   (= --stone)
       --admin-placeholder    3.29 /  4.06   (decorative, 3:1)

   Light mode is the tight one: --stone is only 5.34:1 on the
   grey band, so there is little room between it and the floor.
   Re-run the audit in infrastructure/decisions.md before
   changing any percentage below.
   =========================================================== */

/* ---- Structural (theme-independent) ---- */
:root {
    --sidebar-width: 240px;
    --topbar-height: 56px;
    --font-admin: var(--font-body);

    /* Accent. The panel's accent IS the brand's actionable colour;
       --admin-accent-rgb drives every translucent accent tint below, so
       overriding just these two (see BRAND_DASHBOARD_ACCENT in
       admin/partials/header.php) still recolours the whole panel for a
       white-label install. */
    --admin-accent: var(--cobalt);
    --admin-accent-rgb: 36, 84, 166;
}

/* ---- Semantic mapping onto the brand tokens ----
   Defined once; the brand tokens underneath flip per theme. */
:root {
    --sidebar-bg: var(--grey);
    --sidebar-border: var(--line);
    --sidebar-brand-color: var(--ink);
    --sidebar-link-color: var(--admin-text-muted);
    --sidebar-link-hover: var(--ink);
    --sidebar-link-active: var(--ink);
    --sidebar-sublink-color: var(--admin-text-faint);
    --sidebar-sublink-hover: var(--ink);
    --sidebar-muted: var(--admin-text-faint);

    --topbar-bg: var(--paper);
    --topbar-border: var(--line);
    --topbar-icon: var(--admin-text-faint);
    --topbar-icon-hover: var(--ink);

    --admin-surface: var(--paper);
    --admin-surface-alt: var(--grey);
    --admin-canvas-bg: var(--grey);
    --admin-border: var(--line);
    --admin-border-strong: color-mix(in srgb, var(--line) 86%, var(--ink));
    --admin-border-hover: color-mix(in srgb, var(--line) 70%, var(--ink));
    --admin-border-hover-strong: color-mix(in srgb, var(--line) 60%, var(--ink));

    --admin-heading: var(--ink);
    --admin-text: var(--ink);
    --admin-text-soft: color-mix(in srgb, var(--ink) 80%, var(--paper));
    --admin-text-muted: color-mix(in srgb, var(--ink) 74%, var(--paper));
    --admin-text-faint: var(--stone);
    --admin-placeholder-icon: color-mix(in srgb, var(--stone) 78%, var(--paper));

    /* Accent as *text*. --cobalt-text is already the theme-correct
       readable form of the accent (lifted on dark), so this no longer
       needs its own light/dark derivation. A white-label accent set via
       BRAND_DASHBOARD_ACCENT still gets the old color-mix treatment,
       since we cannot know its luminance ahead of time. */
    --admin-accent-text: var(--cobalt-text);

    /* Hairlines, not shadows — the guide's primary separation device.
       Kept as tokens rather than deleted at ~79 call sites, so a single
       edit here would bring shadows back if this ever proves too flat. */
    --admin-shadow-lg: none;
    --admin-shadow-card: none;
    --admin-shadow-sidebar: none;

    /* Badge tokens. Retained for any markup still using them; the state
       vocabulary in brand.css (.state / .state-*) is what actual status
       chips use now — see admin/lib/state.php. */
    --admin-badge-bg: var(--grey);
    --admin-badge-color: var(--admin-text-muted);
    --admin-badge-alt-bg: var(--grey);
    --admin-badge-alt-color: var(--admin-text-faint);
}

/* ---- Theme-specific only ----
   These cannot be expressed through a flipping brand token: a wash
   tints with black on light and with white on dark, and the sidebar
   scrim needs different opacity over a light vs dark page. */
:root {
    --sidebar-submenu-bg: rgba(0, 0, 0, 0.03);
    --sidebar-overlay-bg: rgba(0, 0, 0, 0.35);

    --admin-overlay-weak: rgba(0, 0, 0, 0.025);
    --admin-overlay: rgba(0, 0, 0, 0.04);
    --admin-overlay-strong: rgba(0, 0, 0, 0.07);
    --admin-inset: rgba(0, 0, 0, 0.03);

    /* Bootstrap's .btn-close is a dark glyph — correct as-is on light. */
    --admin-btn-close-filter: none;
}

:root[data-bs-theme="dark"] {
    --sidebar-submenu-bg: rgba(0, 0, 0, 0.15);
    --sidebar-overlay-bg: rgba(0, 0, 0, 0.55);

    --admin-overlay-weak: rgba(255, 255, 255, 0.03);
    --admin-overlay: rgba(255, 255, 255, 0.05);
    --admin-overlay-strong: rgba(255, 255, 255, 0.08);
    --admin-inset: rgba(0, 0, 0, 0.12);

    --admin-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- Bootstrap variable overrides ----
   brand.css already re-points the bulk of Bootstrap's variables at the
   brand tokens for every surface. These are the few the admin panel
   needs beyond that, and they are theme-independent now because the
   tokens they reference flip on their own. */
:root {
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--admin-text);
    --bs-secondary-bg: var(--grey);
    --bs-tertiary-bg: var(--grey);
    --bs-card-bg: var(--admin-surface);
    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);
    --bs-input-bg: var(--admin-surface);
}

/* ---- Base ---- */
body.admin-body {
    font-family: var(--font-admin);
    font-size: 0.875rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-admin);
}

/* ---- Login Page ---- */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.admin-login-page > * {
    width: 100%;
}

.admin-login-page .card {
    border: 1px solid var(--admin-border-strong);
    box-shadow: var(--admin-shadow-lg);
}

.admin-login-page h2 {
    font-size: 1.4rem;
    font-weight: 600;
}

/* Theme toggle on the login page — no topbar to hang it off, so it floats. */
.admin-login-theme {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* ---- Admin Layout ---- */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.admin-sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform 0.25s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sidebar brand */
.sidebar-brand {
    padding: 1.1rem 1.25rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--sidebar-brand-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.975rem;
    letter-spacing: 0.02em;
}

.sidebar-brand-link:hover {
    color: var(--sidebar-brand-color);
}

.sidebar-brand-link > i {
    color: var(--admin-accent);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sidebar-brand-logo {
    max-height: 36px;
    max-width: 160px;
    object-fit: contain;
}

/* Sidebar nav */
.sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
}

.sidebar-link,
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.575rem 1.25rem;
    color: var(--sidebar-link-color);
    text-decoration: none;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    font-family: var(--font-admin);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    text-align: left;
    line-height: 1.4;
}

.sidebar-link:hover,
.sidebar-group-toggle:hover {
    color: var(--sidebar-link-hover);
    background: var(--admin-overlay);
}

.sidebar-link.active {
    color: var(--sidebar-link-active);
    background: var(--sidebar-active-bg, rgba(var(--admin-accent-rgb), 0.13));
    border-left-color: var(--sidebar-active-border, var(--admin-accent));
}

.sidebar-link > i,
.sidebar-group-toggle > i:first-child {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

/* Sidebar group (collapsible) */
.sidebar-chevron {
    transition: transform 0.2s ease;
    font-size: 0.65rem;
    margin-left: auto;
    flex-shrink: 0;
}

.sidebar-group.is-open .sidebar-chevron {
    transform: rotate(180deg);
}

.sidebar-group-toggle.active {
    color: var(--sidebar-sublink-hover);
}

.sidebar-submenu {
    display: none;
    background: var(--sidebar-submenu-bg);
    padding: 0.2rem 0;
}

.sidebar-submenu.show {
    display: block;
}

.sidebar-sublink {
    display: block;
    padding: 0.45rem 1.25rem 0.45rem 3rem;
    color: var(--sidebar-sublink-color);
    text-decoration: none;
    font-size: 0.825rem;
    font-weight: 400;
    border-left: 3px solid transparent;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.sidebar-sublink:hover {
    color: var(--sidebar-sublink-hover);
    background: var(--admin-overlay);
}

.sidebar-sublink.active {
    color: var(--sidebar-link-active);
    background: rgba(var(--admin-accent-rgb), 0.1);
    border-left-color: var(--admin-accent);
}

/* Sidebar footer */
.sidebar-footer {
    flex-shrink: 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-link-external {
    opacity: 0.65;
}

.sidebar-link-external:hover {
    opacity: 1;
}

.sidebar-version {
    font-size: .65rem;
    color: var(--sidebar-muted);
    text-align: center;
    padding: .3rem 0 .15rem;
    letter-spacing: .04em;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--sidebar-overlay-bg);
    z-index: 1039;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
    display: block;
}

/* ---- Main wrapper ---- */
.admin-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ---- Top bar ---- */
.admin-topbar {
    position: sticky;
    top: 0;
    height: var(--topbar-height);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 0.75rem;
    z-index: 900;
    flex-shrink: 0;
}

.topbar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--topbar-icon);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 5px;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.topbar-toggle:hover {
    color: var(--topbar-icon-hover);
    background: var(--admin-overlay-strong);
}

.topbar-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--admin-heading);
    letter-spacing: 0.01em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.topbar-username {
    font-size: 0.8rem;
    color: var(--admin-text-muted);
}

/* ---- Theme toggle (topbar + login page) ---- */
.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--admin-text-faint);
    font-size: 0.975rem;
    padding: 0.35rem 0.5rem;
    border-radius: 5px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.theme-toggle-btn:hover,
.theme-toggle-btn[aria-expanded="true"] {
    color: var(--topbar-icon-hover);
    background: var(--admin-overlay-strong);
}

.theme-toggle-menu {
    min-width: 9rem;
    font-size: 0.825rem;
}

.theme-toggle-menu .dropdown-item {
    display: flex;
    align-items: center;
}

/* The tick marks the stored preference, not the resolved theme — "Auto" stays
   ticked whichever way the OS currently resolves it. */
.theme-toggle-check {
    visibility: hidden;
    font-size: 0.7rem;
}

.theme-toggle-menu .dropdown-item.active .theme-toggle-check {
    visibility: visible;
}

.theme-toggle-menu .dropdown-item.active {
    background: var(--admin-overlay);
    color: inherit;
}

/* ---- Persistent per-page save button (topbar-actions) ---- */
.topbar-save-btn {
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.topbar-save-btn.is-dirty {
    background-color: var(--admin-accent);
    border-color: var(--admin-accent);
    color: #fff;                          /* on a solid accent fill in both themes */
    box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), 0.25);
    animation: topbar-save-pulse 1.6s ease-in-out infinite;
}

@keyframes topbar-save-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), 0.25); }
    50%      { box-shadow: 0 0 0 5px rgba(var(--admin-accent-rgb), 0.12); }
}

.topbar-logout {
    color: var(--admin-text-faint);
    text-decoration: none;
    font-size: 0.975rem;
    padding: 0.35rem 0.5rem;
    border-radius: 5px;
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1;
}

.topbar-logout:hover {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.12);
}

/* ---- Content area ---- */
.admin-content {
    flex: 1;
    padding: 1.75rem 2rem 2.5rem;
}

/* ---- Page headings ---- */
.admin-content h1 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--admin-heading);
}

/* ---- Cards ---- */
.card {
    border-color: var(--admin-border) !important;
}

.card-header {
    border-bottom-color: var(--admin-border) !important;
    background: var(--admin-overlay-weak) !important;
}

.card-footer {
    border-top-color: var(--admin-border) !important;
    background: var(--admin-overlay-weak) !important;
}

/* ---- Dashboard stat cards ---- */
.stat-card {
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    padding: 1.5rem;
    background: var(--admin-surface);
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.stat-card:hover {
    border-color: var(--admin-border-hover);
    transform: translateY(-1px);
}

.stat-card .stat-icon {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    display: block;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.35rem;
    color: var(--admin-heading);
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0;
}

a .stat-card {
    cursor: pointer;
}

a .stat-card:hover {
    border-color: var(--admin-border-hover-strong);
}

/* ---- List groups ---- */
.list-group-item {
    color: var(--admin-text);
    background-color: transparent;
    border-color: var(--admin-border);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--admin-heading);
    background-color: var(--admin-overlay) !important;
}

.list-group-item-action:active {
    background-color: var(--admin-overlay-strong) !important;
}

/* ---- Tables ---- */
.table {
    --bs-table-striped-bg: var(--admin-overlay-weak);
    --bs-table-hover-bg: var(--admin-overlay);
    border-color: var(--admin-border);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--admin-border);
}

/* Replaces the theme-locked .table-dark this panel used to put on header rows —
   a header that stays near-black under a light theme. */
.table > thead.table-head {
    background: var(--admin-overlay-strong);
}

.table > thead.table-head th {
    color: var(--admin-heading);
    font-weight: 600;
    border-bottom-color: var(--admin-border-strong);
}

/* ---- Forms ---- */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--admin-accent-rgb), 0.5);
    box-shadow: 0 0 0 0.2rem rgba(var(--admin-accent-rgb), 0.15);
}

/* Code/script textareas */
textarea.font-monospace {
    font-size: 0.8rem;
    line-height: 1.6;
    tab-size: 4;
}

/* ---- Nav tabs (settings page) ---- */
.nav-tabs {
    border-color: var(--admin-border-strong);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    color: var(--admin-text-muted);
    border-color: transparent;
    border-bottom-color: transparent;
    border-radius: 6px 6px 0 0;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--admin-heading);
    background: var(--admin-overlay);
    border-color: transparent;
    border-bottom-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--admin-heading);
    background: var(--admin-surface);
    border-color: var(--admin-border-strong) var(--admin-border-strong) var(--admin-surface);
}

.tab-content > .tab-pane > .card {
    border-top-left-radius: 0;
}

/* ---- Alerts ---- */
.alert-dismissible .btn-close {
    filter: var(--admin-btn-close-filter);
}

/* ---- Badges ---- */
.badge.bg-secondary {
    background-color: var(--admin-badge-bg) !important;
    color: var(--admin-badge-color) !important;
}

.badge.bg-light {
    background-color: var(--admin-badge-alt-bg) !important;
    color: var(--admin-badge-alt-color) !important;
}

/* Neutral "chip" badges (page template, nav menu name, form field type).
   These carry .bg-body-tertiary, whose Bootstrap default text colour lands
   too close to its own background — drive them from the badge tokens, which
   are contrast-checked, instead. */
.badge.bg-body-tertiary {
    color: var(--admin-badge-color) !important;
}

/* ---- Bootstrap semantic colours, remapped onto the brand ----
   This block used to hold six contrast-corrected variants of Bootstrap's
   stock accents, defined twice. The brand has no green, no cyan and no
   second red, so the six roles collapse onto four brand tokens — and
   because those tokens flip per theme on their own, the dark half of this
   block is gone.

   The mapping follows the same rule as the state vocabulary in
   admin/lib/state.php: cobalt means you can act on it, amber means
   something external confirmed it, red means it failed, and everything
   else is a neutral text tier. `.text-warning` and `.text-info` have no
   brand colour of their own by design — caution is not a hue here.

   `.text-muted` still reads --bs-secondary-color, which brand.css points
   at --stone, so all 91 uses of it follow the brand without a rule here.
   Solid fills are handled by brand.css's Bootstrap bridge. */
:root {
    --admin-fg-primary:   var(--cobalt-text);
    --admin-fg-success:   var(--amber-text);
    --admin-fg-danger:    var(--flag-red);
    --admin-fg-info:      var(--admin-text-muted);
    --admin-fg-warning:   var(--admin-text-muted);
    --admin-fg-secondary: var(--admin-text-faint);

    /* Inline code is data, not status — the mono neutral, not a pink. */
    --bs-code-color:      var(--admin-text-muted);
}

.text-primary   { color: var(--admin-fg-primary)   !important; }
.text-success   { color: var(--admin-fg-success)   !important; }
.text-danger    { color: var(--admin-fg-danger)    !important; }
.text-info      { color: var(--admin-fg-info)      !important; }
.text-warning   { color: var(--admin-fg-warning)   !important; }
.text-secondary { color: var(--admin-fg-secondary) !important; }

/* ---- Buttons ---- */
/* Labels only — brand.css settles every outline variant's border (hairline)
   and neutral hover.

   The hard rule from the style guide applies here and this is the one place
   it is easy to break by accident: AMBER NEVER APPEARS ON A BUTTON. The
   --admin-fg-success token is amber because amber means "verified", and
   .text-success is used on statements of fact. A button is not a statement
   of fact, it is an action, so .btn-outline-success does NOT inherit that
   mapping — success/warning/info buttons take the neutral ink label instead.
   Only .btn-outline-primary (cobalt, actionable) and .btn-outline-danger
   (red, destructive) carry a colour at all. */
.btn-outline-primary   { --bs-btn-color: var(--admin-fg-primary); }
.btn-outline-danger    { --bs-btn-color: var(--admin-fg-danger);  }
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-secondary { --bs-btn-color: var(--admin-text); }

.btn-link { --bs-btn-color: var(--admin-fg-primary); }

/* Hover labels. brand.css turns every non-primary outline hover into the
   neutral --grey fill, so those keep the ink label and need no rule; only
   the two coloured variants fill solid and flip to white. */
.btn-outline-primary:hover,
.btn-outline-primary:active {
    color: #fff !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:active {
    color: var(--flag-red-label) !important;
}

/* ---- Content item cards (manage pages) ---- */
.item-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.item-card:hover {
    border-color: var(--admin-border-hover);
    box-shadow: var(--admin-shadow-card);
}

.item-card .item-card-img {
    height: 170px;
    object-fit: cover;
    width: 100%;
    display: block;
}

.item-card .item-card-img-placeholder {
    height: 170px;
    background: var(--admin-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-placeholder-icon, var(--admin-border-hover));
    font-size: 0.8rem;
}

.item-card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--admin-heading);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.item-card-meta {
    font-size: 0.775rem;
    color: var(--admin-text-muted);
    line-height: 1.5;
    flex: 1;
}

.item-card-meta i {
    width: 0.9rem;
    text-align: center;
    color: var(--admin-text-faint);
}

.item-card-badges {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.item-card-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--admin-border);
    background: var(--admin-inset);
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    align-items: center;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--admin-shadow-sidebar);
    }

    .admin-main {
        margin-left: 0;
    }

    .topbar-toggle {
        display: block;
    }

    .admin-content {
        padding: 1.25rem 1rem 2rem;
    }

    .admin-topbar {
        padding: 0 1rem;
    }

    .topbar-username {
        display: none;
    }
}

@media (min-width: 769px) {
    .topbar-toggle {
        display: none !important;
    }
}