/* Optional "Mobile" theme — a pluggable alternative to the default "classic" pine-and-clay
   theme (theme.css), aiming for a more app-like feel: brighter accent colors, rounder corners,
   bigger touch targets, and light/dark variants. Activated by [data-theme="mobile"] on <html>;
   dark mode additionally needs Bootstrap's native [data-bs-theme="dark"]. Fully opt-in and
   reversible — nothing here is loaded or applied unless the toggle (see theme-toggle.js /
   _ThemeToggle.cshtml) sets those attributes, and classic theme.css/dashboard.css are never
   modified by this file, only overridden at a higher specificity when the attribute is present.

   To remove this theme entirely: delete this file, wwwroot/js/theme-toggle.js,
   Views/Shared/_ThemeToggle.cshtml, and their <link>/<script>/<partial> references in
   _Layout.cshtml and _DashboardLayout.cshtml. */

/* ---------- Light mobile palette ---------- */
:root[data-theme="mobile"] {
  --brand-primary: #4F46E5;
  --brand-primary-hover: #4338CA;
  --brand-primary-active: #3730A3;
  --brand-primary-rgb: 79, 70, 229;
  --brand-primary-tint: #E0E7FF;
  --brand-accent-tint: #FEF3C7;
  --brand-info-tint: #DBEAFE;
  --brand-danger-tint: #FEE2E2;
  --brand-purple-tint: #EDE9FE;
  --brand-accent: #F59E0B;
  --brand-accent-hover: #D97706;
  --brand-accent-rgb: 245, 158, 11;
  --brand-sidebar-bg: #1E1B4B;
  --brand-sidebar-active: #312E81;
  --brand-bg: #F4F6F8;
  --brand-surface: #FFFFFF;
  --brand-border: #E5E7EB;
  --brand-border-strong: #D1D5DB;
  --brand-text: #111827;
  --brand-text-muted: #6B7280;

  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-primary-text-emphasis: var(--brand-primary-active);
  --bs-primary-bg-subtle: #EEEDFC;
  --bs-primary-border-subtle: #C7C3F5;

  --bs-success: var(--brand-primary);
  --bs-success-rgb: var(--brand-primary-rgb);
  --bs-success-text-emphasis: var(--brand-primary-active);
  --bs-success-bg-subtle: #EEEDFC;
  --bs-success-border-subtle: #C7C3F5;

  --bs-danger: #E11D48;
  --bs-danger-rgb: 225, 29, 72;
  --bs-danger-text-emphasis: #9F1239;
  --bs-danger-bg-subtle: #FCE7EC;
  --bs-danger-border-subtle: #F5BACB;

  --bs-warning: var(--brand-accent);
  --bs-warning-rgb: var(--brand-accent-rgb);
  --bs-warning-text-emphasis: #92400E;
  --bs-warning-bg-subtle: #FEF3C7;
  --bs-warning-border-subtle: #FCD98A;

  --bs-secondary: var(--brand-text-muted);
  --bs-secondary-rgb: 107, 114, 128;
  --bs-secondary-text-emphasis: #374151;
  --bs-secondary-bg-subtle: #F3F4F6;
  --bs-secondary-border-subtle: var(--brand-border-strong);

  --bs-body-color: var(--brand-text);
  --bs-body-bg: var(--brand-bg);
  --bs-border-color: var(--brand-border);
  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: var(--brand-primary-rgb);
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-link-hover-color-rgb: 67, 56, 202;
}

/* ---------- Dark mobile palette ---------- */
:root[data-theme="mobile"][data-bs-theme="dark"] {
  --brand-primary: #818CF8;
  --brand-primary-hover: #6366F1;
  --brand-primary-active: #A5B4FC;
  --brand-primary-rgb: 129, 140, 248;
  --brand-primary-tint: rgba(129, 140, 248, 0.16);
  --brand-accent-tint: rgba(251, 191, 36, 0.16);
  --brand-info-tint: rgba(96, 165, 250, 0.16);
  --brand-danger: #FB7185;
  --brand-danger-rgb: 251, 113, 133;
  --brand-danger-tint: rgba(251, 113, 133, 0.16);
  --brand-purple-tint: rgba(167, 139, 250, 0.16);
  --brand-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 34px -14px rgba(0, 0, 0, 0.5);
  --brand-accent: #FBBF24;
  --brand-accent-hover: #F59E0B;
  --brand-accent-rgb: 251, 191, 36;
  --brand-sidebar-bg: #0B0F19;
  --brand-sidebar-active: #1F2937;
  --brand-bg: #0F1117;
  --brand-surface: #181B24;
  --brand-border: #2D3140;
  --brand-border-strong: #3A3F52;
  --brand-text: #F3F4F6;
  --brand-text-muted: #9CA3AF;

  --bs-primary-bg-subtle: rgba(129, 140, 248, 0.16);
  --bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
  --bs-success-bg-subtle: rgba(129, 140, 248, 0.16);
  --bs-success-border-subtle: rgba(129, 140, 248, 0.35);

  --bs-danger: #FB7185;
  --bs-danger-rgb: 251, 113, 133;
  --bs-danger-text-emphasis: #FDA4AF;
  --bs-danger-bg-subtle: rgba(251, 113, 133, 0.16);
  --bs-danger-border-subtle: rgba(251, 113, 133, 0.35);

  --bs-warning-bg-subtle: rgba(251, 191, 36, 0.16);
  --bs-warning-border-subtle: rgba(251, 191, 36, 0.35);

  --bs-secondary-bg-subtle: #1F2330;

  --bs-btn-close-color: #F3F4F6;
}

:root[data-theme="mobile"][data-bs-theme="dark"] .card,
:root[data-theme="mobile"][data-bs-theme="dark"] .table {
  --bs-card-bg: var(--brand-surface);
  --bs-table-bg: transparent;
  --bs-table-color: var(--brand-text);
}

:root[data-theme="mobile"][data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-hover-bg: #232838;
  --bs-btn-active-bg: #2A3040;
}

/* ---------- "App" feel: rounder corners, bigger touch targets, softer elevation ---------- */
[data-theme="mobile"] .card {
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
}

[data-theme="mobile"][data-bs-theme="dark"] .card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-theme="mobile"] .btn {
  border-radius: 0.7rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

[data-theme="mobile"] .icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.6rem;
}

[data-theme="mobile"] .form-control,
[data-theme="mobile"] .form-select {
  border-radius: 0.65rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

[data-theme="mobile"] .pill,
[data-theme="mobile"] .badge {
  border-radius: 999px;
}

/* Sidebar / topbar */
[data-theme="mobile"] .dashboard-sidebar {
  background: var(--brand-sidebar-bg);
}

[data-theme="mobile"] .dashboard-topbar,
[data-theme="mobile"][data-bs-theme="dark"] .bottom-nav {
  background: var(--brand-surface);
}

[data-theme="mobile"][data-bs-theme="dark"] .dashboard-body {
  background: var(--brand-bg);
  color: var(--brand-text);
}

/* Bottom nav is the primary mobile navigation in the app-like theme — give it more presence */
[data-theme="mobile"] .bottom-nav {
  border-top: 1px solid var(--brand-border);
  box-shadow: 0 -2px 8px rgba(17, 24, 39, 0.06);
}

[data-theme="mobile"] .bottom-nav-item.active {
  color: var(--brand-primary);
}

/* Stat tile icon variants (dashboard.css hardcodes these — override the ones that clash) */
[data-theme="mobile"] .stat-icon-blue { background: var(--bs-primary-bg-subtle); color: var(--brand-primary); }
[data-theme="mobile"] .stat-icon-purple { background: var(--bs-primary-bg-subtle); color: var(--brand-primary-active); }
[data-theme="mobile"] .stat-icon-teal { background: #D1FAE5; color: #047857; }
[data-theme="mobile"] .stat-icon-indigo { background: var(--bs-primary-bg-subtle); color: var(--brand-primary); }
[data-theme="mobile"] .stat-icon-clay { background: var(--bs-warning-bg-subtle); color: var(--brand-accent-hover); }
[data-theme="mobile"] .stat-icon-rose { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }

/* Pill variants — bold solid fill, matching the classic theme's treatment, in the mobile
   theme's own indigo/amber palette instead of pine/clay. */
[data-theme="mobile"] .pill-blue { background: #0891B2; }
[data-theme="mobile"] .pill-green { background: var(--brand-primary); }
[data-theme="mobile"] .pill-amber { background: var(--brand-accent-hover); }
[data-theme="mobile"] .pill-red { background: var(--bs-danger); }
[data-theme="mobile"] .pill-teal { background: #047857; }
[data-theme="mobile"] .pill-purple { background: var(--brand-primary-active); }

[data-theme="mobile"] .icon-btn.icon-btn-view { color: #0891B2; }
[data-theme="mobile"] .icon-btn.icon-btn-view:hover { color: #0891B2; border-color: #A5F3FC; background: #ECFEFF; }

/* ---------- No tables on mobile: stack rows into labeled cards instead ---------- */
@media (max-width: 767.98px) {
  [data-theme="mobile"] .table-responsive table.table thead {
    display: none;
  }

  [data-theme="mobile"] .table-responsive table.table,
  [data-theme="mobile"] .table-responsive table.table tbody,
  [data-theme="mobile"] .table-responsive table.table tr,
  [data-theme="mobile"] .table-responsive table.table td {
    display: block;
    width: 100%;
  }

  [data-theme="mobile"] .table-responsive table.table tr {
    border: 1px solid var(--brand-border);
    border-radius: 0.85rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--brand-surface);
  }

  [data-theme="mobile"] .table-responsive table.table tr:last-child {
    margin-bottom: 0;
  }

  [data-theme="mobile"] .table-responsive table.table td {
    border: none;
    padding: 0.4rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: right;
  }

  /* A cell with no label (usually a checkbox or a name/title column meant to stay prominent)
     stays left-aligned and full width instead of being forced into the label/value row. */
  [data-theme="mobile"] .table-responsive table.table td:not([data-label]) {
    justify-content: flex-start;
    text-align: left;
  }

  [data-theme="mobile"] .table-responsive table.table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--brand-text-muted);
    text-align: left;
    padding-right: 0.75rem;
  }

  [data-theme="mobile"] .table-responsive table.table td.text-end {
    justify-content: flex-end;
  }
}