/* =====================================================================
   MAXPOINT V7 — ADMIN PANEL UI/UX POLISH LAYER
   ─────────────────────────────────────────────────────────────────────
   Purpose: elevates the admin panel's visual quality and usability:
   • Stronger page-head hierarchy (icon + title + sub on one line)
   • Refined KPI/stat cards with trend accents + hover lift
   • Better table density + hover states + sticky header polish
   • Refined tab navigation with active underline
   • Premium button states in admin context
   • Better empty states with clearer iconography
   • Improved form field grouping + focus rings
   • Sidebar rail active-state polish (Nova) + sidebar-item (Classic)
   • Topbar spacing & avatar polish (Nova)
   • Status badges with subtle gradient backgrounds
   • Refined skeleton loading states

   Loaded AFTER polish.css so it wins the cascade for admin surfaces.
   Scoped to body[data-role="admin"] so public pages stay untouched.
   ===================================================================== */

/* Only applies inside the admin shell (Classic sidebar or Nova rail). */
body[data-role="admin"] {

  /* ============================================================
     1. PAGE HEAD — confident hierarchy
     ============================================================ */
  .page-head {
    padding-block: 4px 8px;
    margin-bottom: 28px;
  }
  .page-head::after {
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-2), color-mix(in srgb, var(--gold-2) 40%, transparent));
    border-radius: 99px;
  }
  .page-title {
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.3;
  }
  .page-sub {
    font-size: .85rem;
    line-height: 1.85;
    color: var(--t2);
    margin-top: 6px;
  }

  /* ============================================================
     2. STAT CARDS / KPIs — premium depth + trend accents
     ============================================================ */
  .stat-card {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    box-shadow: var(--mx-card-shadow);
    transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
  }
  .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mx-card-shadow-hover);
  }
  .stat-card::before {
    /* Subtle gold accent strip on the leading edge */
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--gold-2), color-mix(in srgb, var(--gold-2) 30%, transparent));
    opacity: .7;
  }
  .stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--gold-soft);
    color: var(--gold-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-2) 20%, transparent);
  }
  .stat-icon svg { width: 19px; height: 19px; }
  .stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--t1);
  }
  .stat-label {
    font-size: .74rem;
    font-weight: 700;
    color: var(--t3);
    letter-spacing: -.005em;
  }
  .stat-card::after {
    /* Decorative bottom-right circle — gold tint */
    content: '';
    position: absolute;
    inset-inline-end: -28px;
    bottom: -28px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--gold-soft);
    opacity: .5;
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
  }
  .stat-card > * { position: relative; z-index: 1; }

  /* ============================================================
     3. TABLES — refined density + sticky header + hover states
     ============================================================ */
  .table-wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--mx-card-shadow);
  }
  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
  }
  .table th {
    background: color-mix(in srgb, var(--raised-2) 92%, var(--gold-soft));
    color: var(--t1);
    font-weight: 800;
    text-align: start;
    padding: 12px 14px;
    border-bottom: 2px solid color-mix(in srgb, var(--gold-2) 25%, var(--line));
    letter-spacing: -.005em;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--t2);
    vertical-align: middle;
  }
  .table tbody tr {
    transition: background var(--d-fast) var(--e-out);
  }
  .table tbody tr:hover {
    background: color-mix(in srgb, var(--gold-soft) 45%, var(--raised));
  }
  .table tbody tr:last-child td {
    border-bottom: none;
  }
  .table tbody td b,
  .table tbody td strong {
    color: var(--t1);
    font-weight: 700;
  }

  /* ============================================================
     4. TABS — active underline + smoother transitions
     ============================================================ */
  .tabs {
    padding: 5px;
    border-radius: 14px;
    background: var(--raised);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
  }
  .tab-btn {
    min-height: 42px;
    padding: 9px 16px;
    font-size: .83rem;
    font-weight: 700;
    color: var(--t2);
    border-radius: 10px;
    transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
  }
  .tab-btn:hover:not(.active) {
    background: var(--sunken);
    color: var(--t1);
  }
  .tab-btn.active {
    background: var(--ink-grad);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  [data-theme="dark"] .tab-btn.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold-2) 25%, var(--raised-2)), var(--raised-2));
    color: var(--gold-1);
    box-shadow: inset 0 -2px 0 var(--gold-2), 0 4px 14px -6px rgba(0, 0, 0, .4);
  }

  /* ============================================================
     5. ADMIN-SPECIFIC BUTTON POLISH
     ============================================================ */
  .btn--gold {
    /* Stronger shadow in admin context for clearer CTAs */
    box-shadow:
      0 3px 8px rgba(237, 169, 34, .42),
      inset 0 1px 0 rgba(255, 255, 255, .4),
      inset 0 -1px 0 rgba(0, 0, 0, .08);
  }
  .btn--gold:hover {
    box-shadow:
      0 14px 32px -8px rgba(237, 169, 34, .55),
      inset 0 1px 0 rgba(255, 255, 255, .5),
      inset 0 -1px 0 rgba(0, 0, 0, .08);
  }
  .btn--outline {
    /* Slightly heavier border in admin context */
    border-width: 1.5px;
  }
  .btn--soft {
    /* Refined soft button — warmer gold tint */
    background: color-mix(in srgb, var(--gold-soft) 60%, var(--raised));
    color: var(--gold-ink);
    border: 1px solid color-mix(in srgb, var(--gold-2) 25%, transparent);
  }
  .btn--soft:hover {
    background: color-mix(in srgb, var(--gold-soft) 90%, var(--raised));
    border-color: color-mix(in srgb, var(--gold-2) 45%, transparent);
  }

  /* ============================================================
     6. CARDS & PANELS — premium depth in admin context
     ============================================================ */
  .card, .panel {
    border-radius: var(--r-lg);
    box-shadow: var(--mx-card-shadow) !important;
  }
  .panel-head {
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .panel-title {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.012em;
    color: var(--t1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* ============================================================
     7. FORM FIELDS — premium focus + grouping
     ============================================================ */
  .field-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.005em;
    margin-bottom: 6px;
    display: block;
  }
  .field-box {
    border-radius: 12px;
    background: var(--raised);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow var(--d-fast) var(--e-out);
  }
  .field-box:hover {
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }
  .field-input {
    background: transparent;
    border: none;
    padding: 11px 14px;
    font-size: .88rem;
    color: var(--t1);
    min-height: 44px;
  }
  .field-input::placeholder {
    color: var(--t3);
    font-size: .84rem;
  }
  .field--icon .lead {
    color: var(--t3);
    margin-inline-end: 6px;
  }
  .field-input:focus,
  .field-input:focus-visible {
    outline: none;
  }
  .field-box:focus-within {
    box-shadow: inset 0 0 0 2px var(--gold-2), 0 0 0 3px var(--gold-soft);
  }
  .field-note {
    font-size: .72rem;
    color: var(--t3);
    margin-top: 5px;
    line-height: 1.7;
  }

  /* ============================================================
     8. STATUS BADGES — gradient backgrounds for richer feel
     ============================================================ */
  .badge {
    font-size: .72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: -.005em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.5;
  }
  .badge--gold {
    background: var(--gold-1);
    color: #3f2900;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-2) 35%, transparent);
  }
  [data-theme="dark"] .badge--gold {
    background: linear-gradient(135deg, rgba(240, 181, 69, .18), rgba(240, 181, 69, .12));
    color: var(--gold-1);
    box-shadow: inset 0 0 0 1px rgba(240, 181, 69, .3);
  }
  .badge--ok {
    background: var(--ok-soft);
    color: var(--ok-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent);
  }
  .badge--mut {
    background: var(--sunken);
    color: var(--t3);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .badge--info {
    background: var(--info-soft);
    color: var(--info);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 30%, transparent);
  }

  /* ============================================================
     9. EMPTY STATES — refined iconography
     ============================================================ */
  .empty-state, .empty {
    border-radius: var(--r-lg);
    padding: 36px 24px;
    text-align: center;
    background: var(--raised-2);
    border: 1.5px dashed var(--line-strong);
  }
  .empty-state svg, .empty-art svg {
    width: 44px;
    height: 44px;
    color: var(--t3);
    opacity: .6;
    margin-bottom: 8px;
  }
  .empty-state h3, .empty h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 6px;
  }
  .empty-state p, .empty p {
    font-size: .82rem;
    color: var(--t3);
    line-height: 1.85;
    max-width: 42ch;
    margin: 0 auto 16px;
  }

  /* ============================================================
     10. SKELETON LOADING — refined shimmer
     ============================================================ */
  .skeleton {
    background: linear-gradient(90deg, var(--sunken) 25%, var(--raised-2) 50%, var(--sunken) 75%);
    background-size: 200% 100%;
    animation: mx-admin-skel 1.6s ease-in-out infinite;
    border-radius: 12px;
  }
  @keyframes mx-admin-skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .skeleton-card { height: 120px; border-radius: var(--r-lg); }

  /* ============================================================
     11. NOVA-SPECIFIC ADMIN POLISH (rail + topbar)
     ============================================================ */
  .nv-rail__item.is-active {
    background: linear-gradient(135deg, var(--nv-accent-soft), color-mix(in srgb, var(--nv-accent) 6%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nv-accent) 25%, transparent),
                inset 3px 0 0 var(--nv-accent);
  }
  .nv-rail__item.is-active .nv-rail__label {
    font-weight: 800;
    color: var(--nv-accent);
  }
  .nv-rail__item.is-active svg {
    color: var(--nv-accent);
  }
  .nv-rail__head {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--nv-t3);
    padding: 14px 12px 8px;
  }
  .nv-rail__item:hover:not(.is-active) {
    background: var(--nv-sunken);
  }

  /* Topbar avatar polish */
  .nv-account {
    border: 1px solid var(--nv-line);
    background: var(--nv-surface);
    border-radius: 99px;
    padding: 4px 12px 4px 6px;
    transition: background var(--nv-d-fast), border-color var(--nv-d-fast);
  }
  .nv-account:hover {
    background: var(--nv-sunken);
    border-color: var(--nv-line-strong);
  }
  .nv-account__avatar {
    background: linear-gradient(135deg, var(--nv-accent), var(--nv-accent-2));
    color: #fff;
    font-weight: 800;
  }

  /* ============================================================
     12. CLASSIC-SPECIFIC ADMIN POLISH (sidebar)
     ============================================================ */
  .app-sidebar .sidebar-item.active {
    background: linear-gradient(135deg, var(--gold-soft), color-mix(in srgb, var(--gold-2) 4%, transparent));
    box-shadow: inset 3px 0 0 var(--gold-2), inset 0 0 0 1px color-mix(in srgb, var(--gold-2) 12%, transparent);
    font-weight: 700;
    color: var(--gold-ink);
  }
  .app-sidebar .sidebar-item.active svg {
    color: var(--gold-2);
  }
  .app-sidebar .sidebar-item:hover:not(.active) {
    background: var(--sunken);
    color: var(--t1);
  }
  .app-sidebar .brand {
    padding-block: 4px 16px;
  }
  .app-sidebar .brand-title {
    font-weight: 900;
    letter-spacing: -.01em;
  }

  /* ============================================================
     13. KPI GRID — better responsive behavior
     ============================================================ */
  .stats-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  /* ============================================================
     14. MODALS & SHEETS in admin context
     ============================================================ */
  .modal {
    border-radius: var(--r-xl);
    box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .4), 0 0 0 1px var(--line-strong);
  }
  .modal-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
  }
  .modal-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.015em;
  }
  .modal-sub {
    font-size: .78rem;
    color: var(--t3);
    margin-top: 4px;
  }
  .modal-body {
    padding: 20px 22px;
  }
  .modal-foot {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* ============================================================
     15. LIST ROWS — refined hover + spacing
     ============================================================ */
  .list-row {
    padding: 14px 16px;
    border-radius: 13px;
    background: var(--raised);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
  }
  .list-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--e2);
    border-color: color-mix(in srgb, var(--gold-2) 25%, var(--line));
  }

  /* ============================================================
     16. RESPONSIVE — keep admin polish on mobile
     ============================================================ */
  @media (max-width: 639px) {
    .stat-card { padding: 14px 16px; }
    .stat-value { font-size: 1.25rem; }
    .stat-icon { width: 34px; height: 34px; }
    .stat-icon svg { width: 17px; height: 17px; }
    .page-head { margin-bottom: 22px; }
    .page-title { font-size: 1.2rem; }
    .panel { padding: 16px; }
    .table { font-size: .76rem; }
    .table th, .table td { padding: 9px 10px; }
  }
}

/* Reduced motion — disable admin hover lifts too */
@media (prefers-reduced-motion: reduce) {
  body[data-role="admin"] .stat-card:hover,
  body[data-role="admin"] .list-row:hover,
  body[data-role="admin"] .card-hover:hover {
    transform: none !important;
  }
  body[data-role="admin"] .skeleton {
    animation: none;
    background: var(--sunken);
  }
}

/* =====================================================================
   12. OPERATIONAL DENSITY — ADMIN IS A WORKSPACE, NOT A MARKETING SURFACE
   ===================================================================== */
body[data-role="admin"] {
  .stat-card,
  .card,
  .panel,
  .table-wrap {
    box-shadow: none !important;
  }

  .stat-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
  }

  .stat-card:hover {
    transform: none;
    box-shadow: none !important;
    border-color: var(--line-strong);
  }

  .stat-card::after {
    display: none;
  }

  .card, .panel {
    border-radius: 12px;
  }

  .table-wrap {
    border: 1px solid var(--line);
  }

  .btn--gold,
  .btn--gold:hover {
    box-shadow: none;
  }
}

/* =====================================================================
   PHASE 4 ADDENDUM — range pills & date chips (were unstyled <button>s)
   Scoped: body[data-role="admin"]; theme-aware via CSS custom properties.
   ===================================================================== */
body[data-role="admin"] .mx-days-pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
body[data-role="admin"] .mx-day-pill,
body[data-role="admin"] .mx-date-chip {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t2, var(--nv-t2));
  background: transparent;
  border: 1px solid var(--line, var(--nv-line));
  transition: background var(--d-fast, var(--nv-d-fast)) var(--e-out, var(--nv-ease)),
              color var(--d-fast, var(--nv-d-fast)) var(--e-out, var(--nv-ease)),
              border-color var(--d-fast, var(--nv-d-fast)) var(--e-out, var(--nv-ease)),
              box-shadow var(--d-fast, var(--nv-d-fast)) var(--e-out, var(--nv-ease));
}
body[data-role="admin"] .mx-day-pill:hover,
body[data-role="admin"] .mx-date-chip:hover {
  color: var(--gold-ink, var(--nv-accent));
  border-color: var(--gold-2, var(--nv-accent));
  background: var(--gold-soft, var(--nv-accent-soft));
}
body[data-role="admin"] .mx-day-pill:active,
body[data-role="admin"] .mx-date-chip:active {
  transform: scale(.96);
}
body[data-role="admin"] .mx-day-pill.is-active,
body[data-role="admin"] .mx-day-pill[aria-pressed="true"],
body[data-role="admin"] .mx-date-chip.is-active,
body[data-role="admin"] .mx-date-chip[aria-pressed="true"] {
  color: var(--gold-ink, #fff);
  background: var(--gold-soft, var(--nv-accent));
  border-color: var(--gold-2, var(--nv-accent));
}
html[data-ui-theme="nova"] body[data-role="admin"] .mx-day-pill.is-active,
html[data-ui-theme="nova"] body[data-role="admin"] .mx-day-pill[aria-pressed="true"],
html[data-ui-theme="nova"] body[data-role="admin"] .mx-date-chip.is-active,
html[data-ui-theme="nova"] body[data-role="admin"] .mx-date-chip[aria-pressed="true"] {
  color: #fff;
  box-shadow: var(--nv-e-accent, none);
}
body[data-role="admin"] .mx-day-pill:focus-visible,
body[data-role="admin"] .mx-date-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg, var(--nv-bg)), 0 0 0 4px var(--gold-2, var(--nv-accent));
}
/* keep the pill row on one line beside the page title on desktop */
@media (min-width: 1024px) {
  body[data-role="admin"] .page-head { flex-wrap: nowrap; }
}