/*
 * Zanini Services - Admin Design System
 * ---------------------------------------------------------------------
 * This file is the single source of truth for admin UI tokens and core
 * components. Reuse these classes in every new sub-app rather than
 * writing bespoke CSS - see docs/UI_GUIDELINES.md for the full catalog.
 *
 * Mobile-first: base rules target small screens; min-width media queries
 * progressively enhance the layout at >=768px and >=900px.
 *
 * DARK MODE: The theme is controlled via [data-theme="dark"] on <html>.
 * All color tokens are defined as CSS variables and overridden in dark mode.
 * New components MUST use these variables instead of hardcoded colors.
 */

/* ------------------------------------------------------------------ */
/* Design tokens (Light theme - default)                               */
/* ------------------------------------------------------------------ */
:root {
  /* Brand */
  --admin-primary: #4f46e5;
  --admin-primary-hover: #4338ca;
  --admin-primary-active: #3730a3;
  --admin-primary-ring: rgba(79, 70, 229, 0.35);
  --admin-primary-soft: #eef2ff;

  /* Accent gradient, used sparingly (login hero, topbar logo mark) */
  --admin-accent-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);

  /* Surfaces & text */
  --admin-bg: #f8fafc;
  --admin-surface: #ffffff;
  --admin-surface-elevated: #ffffff;
  --admin-border: #e2e8f0;
  --admin-muted: #64748b;
  --admin-text: #0f172a;

  /* Sidebar (dark, "Silicon Valley SaaS" look) */
  --admin-sidebar-bg: #0f172a;
  --admin-sidebar-border: rgba(255, 255, 255, 0.08);
  --admin-sidebar-text: #94a3b8;
  --admin-sidebar-text-active: #ffffff;
  --admin-sidebar-active-bg: rgba(79, 70, 229, 0.35);
  --admin-sidebar-hover-bg: rgba(255, 255, 255, 0.06);

  /* Status colors */
  --admin-success: #16a34a;
  --admin-success-soft: #f0fdf4;
  --admin-success-text: #166534;
  --admin-warning: #d97706;
  --admin-warning-soft: #fffbeb;
  --admin-warning-text: #92400e;
  --admin-danger: #dc2626;
  --admin-danger-soft: #fef2f2;
  --admin-danger-text: #991b1b;

  /* Neutral badge colors */
  --admin-neutral-soft: #f1f5f9;
  --admin-neutral-text: #64748b;

  /* Ledger row tints */
  --admin-ledger-rent: #ecfdf5;
  --admin-ledger-expense: #fef2f2;
  --admin-ledger-distribution: #fefce8;

  /* Shape & sizing */
  --admin-radius: 10px;
  --admin-radius-sm: 8px;
  --admin-control-height: 44px;
  --admin-control-font-size: 15px;
  --admin-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --admin-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);

  --admin-topbar-height: 60px;
  --admin-sidebar-width: 240px;

  /* Table hover */
  --admin-table-hover: #f8fafc;

  /* Button hover (ghost/secondary) */
  --admin-btn-hover: #f1f5f9;

  /* Auth page gradient */
  --admin-auth-gradient: radial-gradient(circle at top, #eef2ff 0%, var(--admin-bg) 60%);

  /* Link color */
  --admin-link: var(--admin-primary);

  /* Input background */
  --admin-input-bg: var(--admin-surface);

  /* Modal backdrop */
  --admin-modal-backdrop: rgba(15, 23, 42, 0.45);

  /* FAB shadow */
  --admin-fab-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  --admin-fab-secondary-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);

  /* Pagination disabled */
  --admin-pagination-disabled-opacity: 0.5;
}

/* ------------------------------------------------------------------ */
/* Design tokens (Dark theme)                                          */
/* ------------------------------------------------------------------ */
[data-theme="dark"] {
  /* Brand - slightly brighter for dark bg */
  --admin-primary: #6366f1;
  --admin-primary-hover: #818cf8;
  --admin-primary-active: #a5b4fc;
  --admin-primary-ring: rgba(99, 102, 241, 0.4);
  --admin-primary-soft: rgba(99, 102, 241, 0.15);

  /* Accent gradient */
  --admin-accent-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

  /* Surfaces & text */
  --admin-bg: #0f172a;
  --admin-surface: #1e293b;
  --admin-surface-elevated: #334155;
  --admin-border: #334155;
  --admin-muted: #94a3b8;
  --admin-text: #f1f5f9;

  /* Sidebar (slightly lighter than bg in dark mode) */
  --admin-sidebar-bg: #1e293b;
  --admin-sidebar-border: rgba(255, 255, 255, 0.06);
  --admin-sidebar-text: #94a3b8;
  --admin-sidebar-text-active: #ffffff;
  --admin-sidebar-active-bg: rgba(99, 102, 241, 0.3);
  --admin-sidebar-hover-bg: rgba(255, 255, 255, 0.05);

  /* Status colors - adjusted for dark backgrounds */
  --admin-success: #22c55e;
  --admin-success-soft: rgba(34, 197, 94, 0.15);
  --admin-success-text: #86efac;
  --admin-warning: #f59e0b;
  --admin-warning-soft: rgba(245, 158, 11, 0.15);
  --admin-warning-text: #fcd34d;
  --admin-danger: #ef4444;
  --admin-danger-soft: rgba(239, 68, 68, 0.15);
  --admin-danger-text: #fca5a5;

  /* Neutral badge colors */
  --admin-neutral-soft: rgba(148, 163, 184, 0.15);
  --admin-neutral-text: #94a3b8;

  /* Ledger row tints - darker versions */
  --admin-ledger-rent: rgba(34, 197, 94, 0.1);
  --admin-ledger-expense: rgba(239, 68, 68, 0.1);
  --admin-ledger-distribution: rgba(234, 179, 8, 0.1);

  /* Shadow - stronger for dark mode */
  --admin-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --admin-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* Table hover */
  --admin-table-hover: #334155;

  /* Button hover (ghost/secondary) */
  --admin-btn-hover: #334155;

  /* Auth page gradient */
  --admin-auth-gradient: radial-gradient(circle at top, #1e293b 0%, var(--admin-bg) 60%);

  /* Link color */
  --admin-link: #818cf8;

  /* Input background */
  --admin-input-bg: #0f172a;

  /* Modal backdrop */
  --admin-modal-backdrop: rgba(0, 0, 0, 0.6);

  /* FAB shadow */
  --admin-fab-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  --admin-fab-secondary-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------ */
/* Base / reset                                                        */
/* ------------------------------------------------------------------ */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--admin-control-font-size);
  color: var(--admin-text);
  background: var(--admin-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--admin-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  margin: 0 0 8px;
  line-height: 1.25;
}

p {
  margin: 0 0 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* App shell: topbar + sidebar + main                                  */
/* ------------------------------------------------------------------ */
.admin-shell {
  min-height: 100vh;
}

.admin-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--admin-topbar-height);
  background: var(--admin-surface);
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 40;
}

.admin-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--admin-text);
}

.admin-topbar__logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--admin-accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.admin-topbar__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  margin-right: 8px;
  cursor: pointer;
}

.admin-topbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-sidebar {
  position: fixed;
  top: var(--admin-topbar-height);
  left: 0;
  width: var(--admin-sidebar-width);
  /* Use explicit height instead of bottom:0 for better cross-browser support.
     Some browsers/configs have issues with fixed elements using top+bottom.
     100dvh handles mobile browser address bar changes; 100vh is fallback. */
  height: calc(100vh - var(--admin-topbar-height));
  height: calc(100dvh - var(--admin-topbar-height));
  background: var(--admin-sidebar-bg);
  border-right: 1px solid var(--admin-sidebar-border);
  overflow-y: auto;
  z-index: 30;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}

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

.admin-sidebar__section {
  padding: 16px 12px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-sidebar-text);
  opacity: 0.7;
}

.admin-sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 4px 8px;
}

.admin-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-sidebar-text);
  font-weight: 500;
  font-size: 14px;
}

.admin-sidebar__link:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
  text-decoration: none;
}

.admin-sidebar__link.is-active {
  background: var(--admin-sidebar-active-bg);
  color: var(--admin-sidebar-text-active);
}

.admin-sidebar__icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.admin-sidebar__backdrop {
  position: fixed;
  inset: 0;
  top: var(--admin-topbar-height);
  background: rgba(15, 23, 42, 0.45);
  z-index: 20;
  display: none;
}

.admin-sidebar__backdrop.is-open {
  display: block;
}

.admin-main {
  padding-top: var(--admin-topbar-height);
  min-height: 100vh;
}

.admin-content {
  padding: 20px 16px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.admin-page-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.admin-page-header h1 {
  font-size: 22px;
}

.admin-page-header__subtitle {
  color: var(--admin-muted);
  font-size: 14px;
}

/* >=900px: persistent sidebar, no drawer/backdrop */
@media (min-width: 900px) {
  .admin-topbar__menu-btn {
    display: none;
  }

  .admin-sidebar {
    transform: none;
  }

  .admin-sidebar__backdrop {
    display: none !important;
  }

  .admin-main {
    margin-left: var(--admin-sidebar-width);
  }

  .admin-content {
    padding: 28px 32px 48px;
  }
}

/* ------------------------------------------------------------------ */
/* Flash / alert banners                                               */
/* ------------------------------------------------------------------ */
.admin-flash {
  border-radius: var(--admin-radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid transparent;
}

.admin-flash--success {
  background: var(--admin-success-soft);
  color: var(--admin-success-text);
  border-color: var(--admin-success);
}

.admin-flash--warning {
  background: var(--admin-warning-soft);
  color: var(--admin-warning-text);
  border-color: var(--admin-warning);
}

.admin-flash--error {
  background: var(--admin-danger-soft);
  color: var(--admin-danger-text);
  border-color: var(--admin-danger);
}

/* ------------------------------------------------------------------ */
/* Cards                                                                */
/* ------------------------------------------------------------------ */
.admin-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow-sm);
  padding: 18px;
  margin-bottom: 20px;
}

.admin-card--narrow {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.admin-card__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--admin-control-height);
  padding: 0 18px;
  font-size: var(--admin-control-font-size);
  font-weight: 600;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-btn:hover {
  background: var(--admin-btn-hover);
  text-decoration: none;
}

.admin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--admin-primary-ring);
}

.admin-btn--primary {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: #fff;
}

.admin-btn--primary:hover {
  background: var(--admin-primary-hover);
  border-color: var(--admin-primary-hover);
}

.admin-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--admin-muted);
}

.admin-btn--ghost:hover {
  background: var(--admin-btn-hover);
  color: var(--admin-text);
}

.admin-btn--danger {
  background: var(--admin-danger);
  border-color: var(--admin-danger);
  color: #fff;
}

.admin-btn--danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  opacity: 0.9;
}

/* --sm is not shorter, only tighter horizontally, to preserve the 44px target */
.admin-btn--sm {
  padding: 0 12px;
  font-size: 13px;
}

.admin-btn--block {
  width: 100%;
}

.admin-btn:disabled,
.admin-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.admin-btn--primary:disabled:hover,
.admin-btn--primary[aria-disabled="true"]:hover {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */
.admin-form-group {
  margin-bottom: 16px;
}

.admin-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--admin-text);
}

.admin-input,
.admin-select,
.admin-textarea {
  width: 100%;
  min-height: var(--admin-control-height);
  padding: 0 14px;
  font-size: var(--admin-control-font-size);
  font-family: inherit;
  color: var(--admin-text);
  background: var(--admin-input-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
}

.admin-textarea {
  min-height: 110px;
  padding: 10px 14px;
  resize: vertical;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px var(--admin-primary-ring);
}

.admin-input--error,
.admin-textarea--error {
  border-color: var(--admin-danger);
}

.admin-form-help {
  margin-top: 6px;
  font-size: 12px;
  color: var(--admin-muted);
}

.admin-form-error {
  margin-top: 6px;
  font-size: 12px;
  color: var(--admin-danger);
}

.admin-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

@media (min-width: 768px) {
  .admin-form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Password show/hide toggle */
.admin-password-field {
  position: relative;
}

.admin-password-field .admin-input {
  padding-right: 48px;
}

.admin-password-field__toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: var(--admin-control-height);
  border: none;
  background: transparent;
  color: var(--admin-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

/* CAD currency input (calculator-style mask) */
.admin-currency-input {
  position: relative;
  display: block;
}

.admin-currency-input__prefix {
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--admin-muted);
  font-weight: 600;
  pointer-events: none;
  z-index: 1;
}

.admin-currency-input__field {
  padding-left: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Checkbox */
.admin-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
  color: var(--admin-text);
}

.admin-checkbox input[type="checkbox"],
.admin-checkbox input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--admin-primary);
}

/* ------------------------------------------------------------------ */
/* Filters bar                                                         */
/* ------------------------------------------------------------------ */
.cp-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.cp-filters__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  flex: 1;
}

.cp-filters__actions {
  display: flex;
  gap: 10px;
}

@media (min-width: 768px) {
  .cp-filters {
    flex-direction: row;
    align-items: flex-end;
  }

  .cp-filters__fields {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */
.admin-table-scroll {
  overflow-x: auto;
  margin: -18px;
  padding: 18px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 480px;
}

.admin-table th,
.admin-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--admin-border);
  vertical-align: middle;
}

.admin-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--admin-muted);
  font-weight: 600;
  white-space: nowrap;
}

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

.admin-table__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}

.admin-table__empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--admin-muted);
}

/* Status badges */
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.admin-badge--active {
  background: var(--admin-success-soft);
  color: var(--admin-success-text);
}

.admin-badge--archived {
  background: var(--admin-neutral-soft);
  color: var(--admin-neutral-text);
}

.admin-badge--paid,
.admin-badge--applied,
.admin-badge--occupied {
  background: var(--admin-success-soft);
  color: var(--admin-success-text);
}

.admin-badge--pending,
.admin-badge--held {
  background: var(--admin-warning-soft);
  color: var(--admin-warning-text);
}

.admin-badge--refunded,
.admin-badge--ended,
.admin-badge--vacant {
  background: var(--admin-neutral-soft);
  color: var(--admin-neutral-text);
}

.admin-badge--owner {
  background: #dbeafe;
  color: #1e40af;
}

.admin-badge--positive {
  background: var(--admin-success-soft);
  color: #166534;
}

/* ------------------------------------------------------------------ */
/* Sub-app tab navigation (e.g. Moore Park)                            */
/* ------------------------------------------------------------------ */
.mp-subnav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--admin-border);
  -webkit-overflow-scrolling: touch;
}

.mp-subnav__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--admin-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.mp-subnav__link:hover {
  color: var(--admin-text);
}

.mp-subnav__link.is-active {
  color: var(--admin-primary);
  border-bottom-color: var(--admin-primary);
}

/* Financial Ledger: compact rows + type tint */
.mp-ledger-table th,
.mp-ledger-table td {
  padding: 4px 10px;
}

.mp-ledger-status {
  white-space: nowrap;
}

.mp-ledger-status__meta {
  margin-right: 8px;
  font-size: 12px;
  color: var(--admin-muted);
}

.mp-ledger-table tbody tr:hover {
  background: inherit;
  filter: brightness(0.985);
}

.mp-ledger-row--rent {
  background: var(--admin-ledger-rent);
}

.mp-ledger-row--expense {
  background: var(--admin-ledger-expense);
}

.mp-ledger-row--distribution {
  background: var(--admin-ledger-distribution);
}

.mp-ledger-mark-paid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--admin-primary);
  background: transparent;
  border: 1px solid var(--admin-primary);
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.mp-ledger-mark-paid::-webkit-details-marker {
  display: none;
}

.mp-ledger-mark-paid:hover {
  background: var(--admin-primary-soft);
}

.mp-ledger-mark-paid--danger {
  color: var(--admin-danger);
  border-color: var(--admin-danger);
}

.mp-ledger-mark-paid--danger:hover {
  background: var(--admin-danger-soft);
}

.mp-ledger-diff {
  font-weight: 600;
  white-space: nowrap;
}

.mp-ledger-diff--over {
  color: var(--admin-success-text);
}

.mp-ledger-diff--under {
  color: var(--admin-danger-text);
}

/* Floating action buttons (Financial Ledger quick-add) */
.admin-fab-group {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 40;
}

.admin-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--admin-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--admin-fab-shadow);
}

.admin-fab:hover {
  background: var(--admin-primary-hover);
}

button.admin-fab {
  font: inherit;
  cursor: pointer;
}

.admin-fab--secondary {
  background: var(--admin-surface);
  color: var(--admin-text);
  border: 1px solid var(--admin-border);
  box-shadow: var(--admin-fab-secondary-shadow);
}

.admin-fab--secondary:hover {
  background: var(--admin-btn-hover);
}

/* ------------------------------------------------------------------ */
/* Modal dialogs                                                       */
/* ------------------------------------------------------------------ */
.admin-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  padding: 16px;
  align-items: flex-end;
  justify-content: center;
}

.admin-modal.is-open {
  display: flex;
}

.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--admin-modal-backdrop);
}

.admin-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: min(92vh, 720px);
  overflow: auto;
  background: var(--admin-surface);
  border-radius: var(--admin-radius) var(--admin-radius) 0 0;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
  padding: 16px;
}

.admin-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.admin-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-control-height);
  height: var(--admin-control-height);
  border: 0;
  background: transparent;
  color: var(--admin-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--admin-radius-sm);
}

.admin-modal__close:hover {
  background: var(--admin-btn-hover);
  color: var(--admin-text);
}

@media (min-width: 640px) {
  .admin-modal {
    align-items: center;
  }

  .admin-modal__dialog {
    border-radius: var(--admin-radius);
    padding: 20px;
  }
}

/* ------------------------------------------------------------------ */
/* Stat grid (dashboard figures)                                       */
/* ------------------------------------------------------------------ */
.mp-dashboard-figures {
  margin-top: 4px;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.admin-stat {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 14px 16px;
}

.admin-stat__label {
  font-size: 12px;
  color: var(--admin-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.admin-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--admin-text);
}

.admin-stat__value--positive {
  color: var(--admin-success);
}

.admin-stat__value--negative {
  color: var(--admin-danger);
}

.admin-stat__sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--admin-muted);
}

.admin-month-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-month-nav__label {
  font-weight: 700;
  font-size: 22px;
  color: var(--admin-primary);
}

.admin-month-nav__btn {
  border: 1px solid var(--admin-border);
  color: var(--admin-text);
}

.admin-month-nav__btn:hover {
  border-color: var(--admin-primary);
  color: var(--admin-primary);
}

.admin-month-nav__init,
.mp-initialize-month {
  display: flex;
  justify-content: flex-end;
}

.admin-month-nav__init {
  flex: 1 0 100%;
}

@media (min-width: 640px) {
  .admin-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Login screen                                                        */
/* ------------------------------------------------------------------ */
.admin-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--admin-auth-gradient);
}

.admin-auth-card {
  width: 100%;
  max-width: 400px;
}

.admin-auth-card__logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--admin-accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  margin: 0 auto 16px;
}

.admin-auth-card__title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.admin-auth-card__subtitle {
  text-align: center;
  color: var(--admin-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ------------------------------------------------------------------ */
/* Pagination (Laravel's tailwind view is not used; keep it minimal)   */
/* ------------------------------------------------------------------ */
.admin-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.admin-pagination a,
.admin-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border);
  color: var(--admin-text);
  font-size: 13px;
}

.admin-pagination a:hover {
  background: var(--admin-btn-hover);
  text-decoration: none;
}

.admin-pagination .is-active {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: #fff;
}

.admin-pagination .is-disabled {
  color: var(--admin-muted);
  opacity: 0.5;
}

/* ------------------------------------------------------------------ */
/* Theme toggle                                                        */
/* ------------------------------------------------------------------ */
.admin-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-control-height);
  height: var(--admin-control-height);
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-muted);
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-theme-toggle:hover {
  background: var(--admin-btn-hover);
  color: var(--admin-text);
}

.admin-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--admin-primary-ring);
}

.admin-theme-toggle__icon--light,
.admin-theme-toggle__icon--dark {
  display: none;
}

[data-theme="light"] .admin-theme-toggle__icon--light,
:root:not([data-theme]) .admin-theme-toggle__icon--light {
  display: inline;
}

[data-theme="dark"] .admin-theme-toggle__icon--dark {
  display: inline;
}

/* Archive filter toggle */
.admin-archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: var(--admin-control-height);
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--admin-muted);
  text-decoration: none;
}

.admin-archive-toggle:hover {
  background: var(--admin-btn-hover);
  text-decoration: none;
}

.admin-archive-toggle.is-active {
  background: var(--admin-primary-soft);
  border-color: var(--admin-primary);
  color: var(--admin-primary);
}

/* Empty state placeholder */
.admin-empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--admin-muted);
  font-size: 14px;
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-surface);
  margin-bottom: 20px;
}

.admin-empty-state__title {
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 4px;
}

/* Section header with action */
.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-section-header__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}