/* Apple-style liquid glass (soft; minimal refraction) */
:root {
  --glass-blur: 24px;
  --glass-blur-strong: 36px;
  --glass-saturate: 155%;
  --glass-tint: rgba(255, 255, 255, 0.06);
  --glass-tint-strong: rgba(255, 255, 255, 0.09);
  --glass-tint-deep: rgba(14, 20, 28, 0.5);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-soft: rgba(255, 255, 255, 0.08);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 12px 40px rgba(8, 14, 22, 0.28);
  --glass-shadow-soft: 0 4px 24px rgba(8, 14, 22, 0.18);
  --glass-radius: 16px;
  --glass-radius-sm: 12px;
  --glass-radius-lg: 22px;

  --bg: #111820;
  --bg-elevated: rgba(26, 36, 48, 0.65);
  --bg-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.15);
  --accent-muted: rgba(106, 171, 188, 0.2);
  --radius: 14px;
  --radius-sm: 10px;
  --desktop-surface: rgba(26, 36, 48, 0.58);
  --desktop-surface-raised: rgba(31, 42, 56, 0.68);
  --desktop-surface-soft: rgba(255, 255, 255, 0.05);
  --desktop-border: rgba(255, 255, 255, 0.09);
  --desktop-shadow-soft: var(--glass-shadow-soft);
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 85% 65% at 12% -12%, rgba(106, 171, 188, 0.22), transparent 58%),
    radial-gradient(ellipse 70% 50% at 92% 8%, rgba(126, 200, 227, 0.12), transparent 52%),
    radial-gradient(ellipse 60% 45% at 50% 105%, rgba(90, 130, 160, 0.1), transparent 55%),
    radial-gradient(ellipse 40% 35% at 8% 75%, rgba(92, 184, 138, 0.06), transparent 48%);
  background-attachment: fixed;
}

/* ——— Sidebar & shell ——— */
.sidebar {
  background: var(--glass-tint-deep) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  border-color: var(--glass-border-soft) !important;
  box-shadow: var(--glass-shadow-soft), var(--glass-highlight);
}

.brand {
  border-bottom-color: var(--glass-border-soft) !important;
}

.brand-mark,
.brand-logo {
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-soft), var(--glass-highlight);
}

.nav-item {
  position: relative;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-item:hover {
  background: var(--glass-tint) !important;
  border-color: var(--glass-border-soft);
}

.nav-item.active {
  background: rgba(106, 171, 188, 0.2) !important;
  border-color: rgba(106, 171, 188, 0.28);
  box-shadow: 0 4px 16px rgba(106, 171, 188, 0.15), var(--glass-highlight);
}

.sidebar-footer {
  border-top-color: var(--glass-border-soft) !important;
}

.sidebar-footer .btn,
.import-label {
  background: var(--glass-tint) !important;
  backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: var(--glass-highlight);
}

.sidebar-footer .btn:hover,
.import-label:hover {
  background: var(--glass-tint-strong) !important;
  border-color: var(--glass-border) !important;
}

.main {
  background: transparent !important;
}

.topbar {
  border-bottom-color: var(--glass-border-soft) !important;
}

/* ——— Cards, tables, calendar ——— */
.insight-card,
.stat-card,
.dashboard-panel,
.cards-grid .card {
  background: var(--glass-tint) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow-soft), var(--glass-highlight);
}

.table-wrap,
.compact-table-wrap,
.calendar-grid,
.calendar-day-detail {
  background: var(--glass-tint) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow-soft), var(--glass-highlight);
}

.data-table th,
.month-group-columns-head td.month-group-col-head,
#showsTable tr.shows-month-header td,
#paymentsTable tr.shows-month-header td,
.calendar-weekdays {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--glass-border-soft) !important;
}

.data-table td {
  border-bottom-color: var(--glass-border-soft) !important;
}

.stat-card-icon {
  background: rgba(106, 171, 188, 0.12) !important;
  color: var(--accent-hover);
  box-shadow: var(--glass-highlight);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ——— Controls ——— */
.input,
.select,
.textarea,
.select:not(.status-select) {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: var(--glass-highlight);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(106, 171, 188, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(106, 171, 188, 0.14), var(--glass-highlight);
}

.btn-primary {
  background: linear-gradient(
    180deg,
    rgba(133, 196, 212, 0.92) 0%,
    rgba(106, 171, 188, 0.9) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 6px 22px rgba(106, 171, 188, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  color: #0f1820 !important;
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-ghost {
  background: var(--glass-tint) !important;
  backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: var(--glass-highlight);
}

/* ——— Modals & sheets ——— */
dialog.modal .modal-content,
dialog.modal form.modal-content {
  background: rgba(22, 30, 40, 0.75) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-lg) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

dialog.modal::backdrop {
  background: rgba(8, 12, 18, 0.52) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.notification-sheet-panel,
.profile-sheet-panel {
  background: rgba(20, 28, 38, 0.8) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

.toast {
  background: rgba(26, 36, 48, 0.88) !important;
  backdrop-filter: blur(20px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-soft), var(--glass-highlight);
}

.calendar-day {
  border-color: var(--glass-border-soft) !important;
}

.calendar-day.selected {
  box-shadow: 0 0 0 1px rgba(106, 171, 188, 0.4), 0 4px 16px rgba(106, 171, 188, 0.18);
}

.login-card,
.auth-card {
  background: rgba(22, 30, 40, 0.75) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* ——— Invoices: rounded table frames like Shows / Payments ——— */
#view-invoices .invoice-tables-grid > .insight-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  overflow: visible;
}

#view-invoices .invoice-tables-grid > .insight-card > h3 {
  margin-bottom: 0.65rem;
}

#view-invoices .invoice-tables-grid > .insight-card > .invoice-table-filters {
  margin-bottom: 0.65rem;
}

#view-invoices .invoice-tables-grid > .insight-card > .table-wrap {
  margin-top: 0;
  overflow: hidden;
}

#view-invoices #invoiceShowsTable,
#view-invoices #invoiceHistoryTable {
  border-collapse: separate;
  border-spacing: 0;
}

#view-invoices #invoiceShowsTable tr.month-group-toggle td,
#view-invoices #invoiceHistoryTable tr.month-group-toggle td {
  background: rgba(255, 255, 255, 0.04) !important;
  border-top: 1px solid var(--glass-border-soft);
  border-bottom: 1px solid var(--glass-border-soft);
}

#view-invoices #invoiceShowsTable tr.month-group-columns-head td.month-group-col-head,
#view-invoices #invoiceHistoryTable tr.month-group-columns-head td.month-group-col-head {
  background: rgba(255, 255, 255, 0.05) !important;
}

#view-invoices #invoiceShowsTable tr.shows-month-header td,
#view-invoices #invoiceHistoryTable tr.shows-month-header td {
  background: rgba(255, 255, 255, 0.04) !important;
}

@media (min-width: 769px) {
  :root {
    --desktop-radius: var(--glass-radius);
    --desktop-radius-sm: var(--glass-radius-sm);
    --desktop-radius-lg: var(--glass-radius-lg);
  }

  .sidebar {
    border-right: 1px solid var(--glass-border-soft) !important;
  }
}

@media (max-width: 768px) {
  :root {
    --mobile-glass: rgba(14, 20, 28, 0.62);
    --mobile-surface: rgba(255, 255, 255, 0.05);
    --mobile-surface-raised: rgba(255, 255, 255, 0.08);
    --mobile-surface-soft: rgba(255, 255, 255, 0.04);
    --mobile-border: var(--glass-border-soft);
    --mobile-radius: var(--glass-radius);
    --mobile-radius-sm: var(--glass-radius-sm);
  }

  .mobile-bottom-nav {
    background: rgba(14, 20, 28, 0.58) !important;
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    border-top: 1px solid var(--glass-border-soft) !important;
    box-shadow: 0 -4px 32px rgba(8, 14, 22, 0.24), var(--glass-highlight);
  }

  .mobile-tab.active {
    background: rgba(106, 171, 188, 0.24) !important;
    border: 1px solid rgba(106, 171, 188, 0.28);
    box-shadow: 0 4px 16px rgba(106, 171, 188, 0.16);
  }
}