/* ==========================================================================
   Modern theme — design tokens + progressive component restyling
   --------------------------------------------------------------------------
   Loaded LAST (see index.html) so it wins the cascade over the vendored
   "Limitless" admin theme without deleting/forking any of those files.
   Restyles visuals only — no JS/behavior lives here.
   See .project/decisions.md for the reasoning behind each choice below.
   ========================================================================== */

:root {
  /* ---- Color: primary (brand accent) — indigo, replaces old teal #22a2b1 ---- */
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;

  /* ---- Color: semantic ---- */
  --color-success: #16a34a;
  --color-success-bg: #ecfdf3;
  --color-success-border: #bbf7d0;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-info: #0891b2;
  --color-info-bg: #ecfeff;
  --color-info-border: #a5f3fc;

  /* ---- Color: neutrals (slate scale) ---- */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* ---- Color: semantic surface roles ---- */
  --color-bg-app: var(--color-neutral-50);
  --color-bg-surface: var(--color-neutral-0);
  --color-bg-sunken: var(--color-neutral-100);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-on-dark: rgba(255, 255, 255, 0.92);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.56);

  /* ---- Shell (header / sidebar) — near-black, matches Linear/Vercel dark chrome ---- */
  --shell-bg: #111827;
  --shell-bg-elevated: #161f32;
  --shell-border: rgba(255, 255, 255, 0.08);
  --shell-active-bg: rgba(99, 102, 241, 0.16);
  --shell-hover-bg: rgba(255, 255, 255, 0.06);

  /* ---- Typography ----
     Font stack intentionally has no new network dependency: Roboto is already
     self-hosted (public/assets/fonts/roboto-font) and loaded in index.html;
     the system-ui fallbacks match what Stripe/GitHub/Linear ship for the
     same reason (zero-latency, native rendering). See decisions.md. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radius ---- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ---- Shadow (soft, low-elevation — avoid heavy admin-theme drop shadows) ---- */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.08);

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

a {
  color: var(--color-primary-600);
}
a:hover {
  color: var(--color-primary-700);
}

/* Keyboard-only focus ring (mouse clicks don't get an outline) — accessibility
   pass groundwork for Phase 4, added now since it's a pure global rule. */
:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 1px;
}

/* ==========================================================================
   Brand "theme" color remap
   --------------------------------------------------------------------------
   .btn-theme / .text-theme / .bg-theme / .border-top-theme are the existing
   hand-rolled "current brand accent" utility classes (previously teal
   #22a2b1, see public/assets/css/style.css). Remapped here to the new
   primary palette instead of touching every call site.
   ========================================================================== */

.btn-theme {
  color: #fff;
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.btn-theme:hover,
.btn-theme:focus {
  color: #fff;
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}
.btn-theme.disabled,
.btn-theme:disabled {
  color: #fff;
  background-color: var(--color-primary-300);
  border-color: var(--color-primary-300);
}

.btn-theme-cancel {
  color: var(--color-text-secondary);
  background-color: var(--color-neutral-0);
  border-color: var(--color-border-strong);
}
.btn-theme-cancel:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-text-primary);
}

.text-theme {
  color: var(--color-primary-600) !important;
}
.bg-theme,
.bg-theme-600 {
  background-color: var(--color-primary-600) !important;
}
.border-top-theme,
.border-top-theme-600 {
  border-top-color: var(--color-primary-600) !important;
}

/* ==========================================================================
   Phase 1 — App shell & navigation
   ========================================================================== */

/* ---- Header (components/common/header.js) ---- */

.app-header {
  background-color: var(--shell-bg) !important;
  border-bottom: 1px solid var(--shell-border);
  box-shadow: none;
  height: 3.5rem;
}

.app-header-brand {
  display: flex;
  align-items: center;
}

.app-header-brand-icon {
  font-size: 1.1rem;
  color: var(--color-primary-400) !important;
}

.app-header-brand-text {
  color: var(--color-text-on-dark);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.app-header .header-nav-link {
  color: var(--color-text-on-dark-muted);
  transition: color var(--transition-fast);
}
.app-header .header-nav-link:hover,
.app-header .header-nav-link:focus {
  color: var(--color-text-on-dark);
}

.app-header-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-header-user-name {
  font-size: var(--text-sm);
  color: var(--color-text-on-dark);
}

.app-header-avatar {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.app-header .dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
}
.app-header .dropdown-item {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}
.app-header .dropdown-item:hover {
  background-color: var(--color-neutral-100);
}

/* ---- Sidebar (components/sidemenu/*) ---- */

.sidebar.sidebar-dark {
  background-color: var(--shell-bg);
  border-right: 1px solid var(--shell-border);
  box-shadow: none;
}

.sidebar.sidebar-dark .card-sidebar-mobile {
  background-color: transparent;
}

.sidebar.sidebar-dark .nav-item-header {
  color: var(--color-text-on-dark-muted);
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
}
.sidebar.sidebar-dark .nav-item-header i {
  display: none;
}

.sidebar.sidebar-dark .nav-sidebar > .nav-item > .nav-link {
  color: var(--color-text-on-dark-muted);
  border-radius: var(--radius-md);
  margin: 2px var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: var(--shell-hover-bg);
  color: var(--color-text-on-dark);
}

.sidebar.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--shell-active-bg);
  color: #fff;
  font-weight: var(--font-weight-semibold);
}

.sidebar.sidebar-dark .side-menu_icon {
  color: inherit;
  font-size: 0.9rem;
  text-align: center;
}

/* ---- Page shell / breadcrumb (components/common/application_container.js) ---- */

.app-page-content {
  background-color: var(--color-bg-app) !important;
}

.app-page-header {
  background-color: transparent;
}
.app-page-header .page-title h4 {
  font-size: var(--text-xl);
  margin-bottom: 0;
}
.app-page-subtitle {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}
.app-page-header .breadcrumb {
  background-color: transparent;
  padding-left: 0;
  font-size: var(--text-sm);
}

.content-wrapper {
  box-shadow: none;
}

/* ---- 404 / Access Denied (components/common/error404.js) ---- */

.app-error-page {
  padding: var(--space-12) 0;
}
.app-error-page .error-title {
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-800);
}

/* ---- Login (pages/authentication/login.js) ---- */

.app-auth-page {
  min-height: 100vh;
  display: flex;
}

.app-auth-brand-panel {
  flex: 1 1 45%;
  background: linear-gradient(135deg, var(--color-primary-700), var(--shell-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
}
.app-auth-brand-panel-inner {
  max-width: 26rem;
  text-align: center;
}
.app-auth-brand-mark {
  color: #fff;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-8);
}
.app-auth-illustration {
  max-width: 100%;
}

.app-auth-form-panel {
  flex: 1 1 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-surface);
  padding: var(--space-6);
}
.app-auth-card {
  width: 100%;
  max-width: 22rem;
}
.app-auth-title {
  margin-bottom: var(--space-1);
}
.app-auth-subtitle {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.app-auth-submit {
  margin-top: var(--space-2);
}

@media (max-width: 767px) {
  .app-auth-brand-panel {
    display: none;
  }
}

/* ==========================================================================
   Phase 2 — Shared primitives
   ========================================================================== */

/* ---- Unified data table (components/common/data_table.js) ---- */

.app-data-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.app-data-table-toolbar {
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4);
}

.app-data-table-scroll {
  width: 100%;
}

.app-table {
  margin-bottom: 0;
  font-size: var(--text-sm);
}
.app-table thead th {
  background-color: var(--color-bg-sunken);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
  border-top: none;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}
.app-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text-primary);
}
.app-table tbody tr:hover {
  background-color: var(--color-bg-sunken);
}

.app-table-empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-secondary);
}
.app-table-empty-icon {
  display: block;
  font-size: 1.75rem;
  margin-bottom: var(--space-2);
  color: var(--color-neutral-300);
}

/* ---- Unified upload form (components/common/upload_form.js) ---- */

.app-upload-form .form-group label {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.app-upload-form-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-regular) !important;
}
.app-upload-form-actions {
  margin-top: var(--space-4);
}

/* ---- Modal (components/common/modal.js) ---- */

.app-modal {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-modal-header {
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
}
.app-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.app-modal-danger .app-modal-header {
  border-bottom-color: var(--color-danger-border);
}
.app-modal-body {
  padding: var(--space-6);
  background-color: var(--color-bg-surface);
}
.app-modal-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-bg-surface);
}

/* ---- Spinner / loader (components/common/spinner.js, loader.js) ---- */

.app-inline-spinner {
  color: currentColor;
}

/* ---- Toast (components/common/toast_container.js, replaces PNotify) ---- */

.app-toast-container {
  position: fixed;
  top: 4.5rem;
  right: var(--space-6);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 22rem;
}

.app-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-neutral-400);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  animation: app-toast-in var(--transition-normal);
}

@keyframes app-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-toast-success { border-left-color: var(--color-success); }
.app-toast-error { border-left-color: var(--color-danger); }
.app-toast-info { border-left-color: var(--color-info); }
.app-toast-warning { border-left-color: var(--color-warning); }

.app-toast-icon {
  margin-top: 2px;
  font-size: var(--text-md);
}
.app-toast-success .app-toast-icon { color: var(--color-success); }
.app-toast-error .app-toast-icon { color: var(--color-danger); }
.app-toast-info .app-toast-icon { color: var(--color-info); }
.app-toast-warning .app-toast-icon { color: var(--color-warning); }

.app-toast-body {
  flex: 1;
}
.app-toast-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.app-toast-message {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.app-toast-close {
  background: none;
  border: none;
  color: var(--color-text-disabled);
  font-size: var(--text-xs);
  padding: 0;
  line-height: 1;
}
.app-toast-close:hover {
  color: var(--color-text-secondary);
}

/* ---- react-datepicker (stable class names — real CSS override, unlike react-select) ---- */

.react-datepicker {
  font-family: var(--font-sans);
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.react-datepicker__header {
  background-color: var(--color-bg-sunken);
  border-bottom-color: var(--color-border);
}
.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected,
.react-datepicker__time-list-item--selected {
  background-color: var(--color-primary-600) !important;
}
.react-datepicker__day:hover {
  background-color: var(--color-primary-100);
}

/* ==========================================================================
   Phase 3 — Per-page revamp
   ========================================================================== */

/* ---- Home / Dashboard (pages/customer/home/) ---- */

.app-stat-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}
.app-stat-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: #fff;
  margin-bottom: var(--space-4);
}
.app-stat-card-primary .app-stat-card-icon { background-color: var(--color-primary-600); }
.app-stat-card-info .app-stat-card-icon { background-color: var(--color-info); }
.app-stat-card-danger .app-stat-card-icon { background-color: var(--color-danger); }

.app-stat-card-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}
.app-stat-card-label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* ---- Contact List details (pages/customer/contactList/) ---- */

.app-back-link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.app-back-link:hover {
  color: var(--color-primary-600);
}

/* ---- Campaign table (pages/customer/campaign/components/table.js) ---- */

.app-action-btn {
  padding: 0.4375rem 0.875rem;
}
.app-campaign-progress {
  min-width: 8rem;
}

.app-campaign-form .nav-tabs-vertical .nav-link {
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.app-campaign-form .nav-tabs-vertical .nav-link.active {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Phase 4 — Responsive & accessibility pass
   --------------------------------------------------------------------------
   Every page's table already sits inside .app-data-table-scroll
   (table-responsive), so wide tables (Campaign's 7 columns especially)
   already scroll horizontally instead of overflowing the viewport — this
   section is the remaining shell/chrome adjustments for small screens, plus
   a few accessibility-only rules (visually-hidden helper, stronger focus
   ring on dark surfaces) that don't change any layout.
   ========================================================================== */

@media (max-width: 576px) {
  .app-header-user-name {
    display: none;
  }
  .app-toast-container {
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }
  .app-toast {
    min-width: 0;
  }
  .app-page-header .page-title h4 {
    font-size: var(--text-lg);
  }
}

@media (max-width: 767px) {
  .app-campaign-progress {
    min-width: 0;
  }
  .app-stat-card {
    margin-bottom: var(--space-4);
  }
}

/* Screen-reader-only helper (Bootstrap ships `.sr-only`; kept here too in
   case a future page needs it without depending on that specific class). */
.app-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;
}

/* Focus ring needs more contrast over the dark header/sidebar than the
   default indigo-400 ring used on light surfaces. */
.app-header :focus-visible,
.sidebar.sidebar-dark :focus-visible {
  outline-color: #fff;
}