/* TeamsPlus Dashboard - CommsDesk theme layer (Forge FRG-0203, 2026-10-05).
   Loaded AFTER style.css. Brings the dashboard in line with the CommsDesk staff portal: near-black ground,
   layered dark surfaces, cyan-to-violet accent, Satoshi type. style.css is left untouched, so removing this
   file (and its <link>) restores the old look exactly. */

@font-face { font-family: "Satoshi"; src: url("/assets/brand/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/brand/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/brand/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  /* CommsDesk palette */
  --cd-bg: #0a0a0f;
  --cd-bg-2: #0f0f14;
  --cd-surface: #1b1b24;
  --cd-surface-2: #15151d;
  --cd-text: #f0f0f5;
  --cd-muted: #9090a0;
  --cd-muted-2: #7a7a88;
  --cd-line: rgba(255, 255, 255, 0.07);
  --cd-line-2: rgba(255, 255, 255, 0.12);
  --cd-violet: #7c3aed;
  --cd-violet-light: #c4b5fd;
  --cd-cyan: #22d3ee;
  --cd-green: #34d399;
  --cd-amber: #f0b429;
  --cd-red: #fb7185;
  --cd-blue: #60a5fa;
  --cd-grad: linear-gradient(135deg, #22d3ee, #7c3aed);
  --cd-r: 14px;
  --cd-r-sm: 10px;
  --cd-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* Re-map style.css's own variables */
  --primary-gradient: var(--cd-grad);
  --secondary-gradient: linear-gradient(135deg, #f472b6, #7c3aed);
  --dark-gradient: linear-gradient(180deg, #0f0f14, #0b0b10);
  --primary-color: var(--cd-cyan);
  --secondary-color: var(--cd-violet-light);
  --accent-color: #f472b6;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --info-color: #3b82f6;
  --dark-bg: var(--cd-bg);
  --darker-bg: var(--cd-bg-2);
  --card-bg: var(--cd-surface);
  --text-primary: var(--cd-text);
  --text-secondary: var(--cd-muted);
  --text-light: var(--cd-muted-2);
  --border-color: var(--cd-line);
  --shadow-sm: none;
  --shadow: var(--cd-shadow);
  --shadow-lg: var(--cd-shadow);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.5);
}

html, body {
  background: var(--cd-bg);
}
body {
  font-family: "Satoshi", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--cd-text);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(124, 58, 237, 0.12), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(34, 211, 238, 0.06), transparent 60%),
    var(--cd-bg);
  background-attachment: fixed;
}
a { color: var(--cd-cyan); }
a:hover { color: var(--cd-violet-light); }
::selection { background: rgba(124, 58, 237, 0.45); }
h1, h2, h3, h4, h5 { color: var(--cd-text); letter-spacing: -0.01em; }
code, .mono { color: var(--cd-violet-light); }

/* ---------- Sidebar ---------- */
.sidebar {
  background: linear-gradient(180deg, #101017, #0b0b10);
  border-right: 1px solid var(--cd-line);
}
.sidebar-header { border-bottom-color: var(--cd-line); }
.sidebar-logo .logo-icon,
.login-logo .logo-icon {
  background: transparent;
  box-shadow: none;
}
.sidebar-logo .logo-icon img { width: 40px; height: 40px; display: block; }
.sidebar-logo h2 { font-weight: 700; letter-spacing: -0.01em; }
.sidebar-logo span { color: var(--cd-muted); letter-spacing: 0.04em; }
.nav-section-title { color: var(--cd-muted-2); letter-spacing: 0.12em; }
.nav-item {
  color: #b4b4c2;
  margin: 2px 12px;
  padding: 10px 14px;
  border-left: 0;
  border-radius: var(--cd-r-sm);
}
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(124, 58, 237, 0.16));
  box-shadow: inset 2px 0 0 var(--cd-cyan);
}
.nav-item.active i { color: var(--cd-cyan); }
.nav-item.nav-portal i { color: var(--cd-violet-light); }
.nav-item.nav-portal .ext { margin-left: auto; font-size: 11px; opacity: 0.6; width: auto; }

/* ---------- Top bar ---------- */
.header {
  background: rgba(10, 10, 15, 0.78);
  border-bottom: 1px solid var(--cd-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header-left h1 { color: var(--cd-text); font-weight: 700; }
.user-dropdown-toggle { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--cd-line); }
.user-dropdown-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.user-avatar { background: var(--cd-grad); }
.user-info .name { color: var(--cd-text); }
.user-info .role { color: var(--cd-muted); }
.dropdown-menu {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-2);
  box-shadow: var(--shadow-xl);
}
.dropdown-menu a { color: var(--cd-text); }
.dropdown-menu a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.dropdown-divider { background: var(--cd-line); border-color: var(--cd-line); }

/* ---------- Surfaces ---------- */
.card,
.stat-card,
.quick-action-card,
.access-card,
.modal,
html body .cost-card,
html body .data-table-wrapper,
html body .loading-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    var(--cd-surface);
  border: 1px solid var(--cd-line);
  box-shadow: var(--cd-shadow);
  color: var(--cd-text);
}
.card-header { border-bottom-color: var(--cd-line); color: var(--cd-text); }
.card-header h2, .card-header h3, .card-header h4 { color: var(--cd-text); }
.card-header i, .card-header h3 i { color: var(--cd-cyan); }
.stat-info h3 { color: var(--cd-text); font-weight: 700; letter-spacing: -0.02em; }
.stat-info p { color: var(--cd-muted); }
.quick-action-card:hover,
.access-card:hover { border-color: rgba(124, 58, 237, 0.45); transform: translateY(-2px); }
.quick-action-card h4, .quick-action-card h3 { color: var(--cd-text); }
.quick-action-card i { color: var(--cd-cyan); }
.quick-action-card p { color: var(--cd-muted); }
.welcome-card {
  background:
    radial-gradient(600px 240px at 90% 0%, rgba(34, 211, 238, 0.35), transparent 60%),
    linear-gradient(135deg, #3b1d8f, #1e1b4b 55%, #0e2a3a);
  border: 1px solid rgba(124, 58, 237, 0.45);
  box-shadow: 0 20px 50px rgba(124, 58, 237, 0.25);
}
.modal-header, .modal-footer { border-color: var(--cd-line); }
.modal-backdrop { background: rgba(0, 0, 0, 0.7); }

/* ---------- Tables ---------- */
.table, html body .data-table { color: var(--cd-text); }
.table th,
html body .data-table th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--cd-muted);
  border-bottom: 1px solid var(--cd-line-2);
  letter-spacing: 0.06em;
}
.table td, html body .data-table td { border-bottom: 1px solid var(--cd-line); color: var(--cd-text); }
.table tbody tr:hover, html body .data-table tr:hover { background: rgba(255, 255, 255, 0.035); }
.table tfoot td, .table tr:last-child td { border-bottom-color: var(--cd-line); }

/* ---------- Forms & buttons ---------- */
.form-control,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="number"],
textarea,
html body .search-box input {
  background: var(--cd-bg-2);
  color: var(--cd-text);
  border: 1px solid var(--cd-line-2);
}
.form-control:focus, select:focus, input:focus, textarea:focus {
  border-color: var(--cd-violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
  outline: none;
}
.form-label, label { color: var(--cd-text); }
input::placeholder, textarea::placeholder { color: var(--cd-muted-2); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
.btn-primary { background: var(--cd-grad); box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35); }
.btn-primary:hover { box-shadow: 0 8px 26px rgba(124, 58, 237, 0.45); filter: brightness(1.08); }
.btn-secondary { background: transparent; color: var(--cd-text); border: 1px solid var(--cd-line-2); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.06); }
.action-btn { background: rgba(255, 255, 255, 0.05); color: var(--cd-text); }
html body .billing-tab { color: var(--cd-muted); }
html body .billing-tab.active { background: var(--cd-grad); color: #fff; }
html body .billing-tab:hover:not(.active) { background: rgba(255, 255, 255, 0.06); color: #fff; }
html body .pagination-bar button { background: var(--cd-surface-2); color: var(--cd-text); border: 1px solid var(--cd-line-2); }
html body .empty-state, html body .empty-state p { color: var(--cd-muted); }
html body .chart-container .chart-loading { background: rgba(15, 15, 20, 0.7); color: var(--cd-muted); }

/* ---------- Badges & alerts (tinted, readable on dark) ---------- */
.badge-primary { background: rgba(124, 58, 237, 0.18); color: var(--cd-violet-light); }
.badge-success { background: rgba(52, 211, 153, 0.14); color: var(--cd-green); }
.badge-warning { background: rgba(240, 180, 41, 0.14); color: var(--cd-amber); }
.badge-danger  { background: rgba(251, 113, 133, 0.14); color: var(--cd-red); }
.badge-info    { background: rgba(34, 211, 238, 0.12); color: var(--cd-cyan); }
.alert { border-width: 1px; border-style: solid; }
.alert-success { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.35); color: #a7f3d0; }
.alert-warning { background: rgba(240, 180, 41, 0.08); border-color: rgba(240, 180, 41, 0.35); color: #fde68a; }
.alert-danger  { background: rgba(251, 113, 133, 0.08); border-color: rgba(251, 113, 133, 0.35); color: #fecdd3; }
.alert-info    { background: rgba(34, 211, 238, 0.07); border-color: rgba(34, 211, 238, 0.3); color: #a5f3fc; }
.btn-close { filter: invert(1); }

/* ---------- Page-level inline colours written for a light page ---------- */
[style*="background: white"], [style*="background:white"], [style*="background: #fff;"], [style*="background:#fff;"],
[style*="background: #fff\""], [style*="background: #ffffff"], [style*="background-color: white"], [style*="background-color: #fff"] {
  background: var(--cd-surface) !important;
}
[style*="background: #f9fafb"], [style*="background:#f9fafb"], [style*="background: #f8fafc"], [style*="background:#f8fafc"],
[style*="background: #f8f9fa"], [style*="background: #f3f4f6"], [style*="background-color: #f9fafb"], [style*="background-color: #f8fafc"] {
  background: rgba(255, 255, 255, 0.03) !important;
}
[style*="background: #e5e7eb"], [style*="background:#e5e7eb"] { background: rgba(255, 255, 255, 0.08) !important; }
[style*="background: #f0f9ff"], [style*="background:#f0f9ff"] { background: rgba(34, 211, 238, 0.07) !important; }
[style*="background: #f0fdf4"], [style*="background:#f0fdf4"] { background: rgba(52, 211, 153, 0.07) !important; }
[style*="background: #fff7ed"], [style*="background:#fff7ed"], [style*="background: #fff3cd"] { background: rgba(240, 180, 41, 0.08) !important; }
[style*="background: #faf5ff"], [style*="background:#faf5ff"] { background: rgba(124, 58, 237, 0.08) !important; }
[style*="background: #f8d7da"] { background: rgba(251, 113, 133, 0.08) !important; }
[style*="color: #1f2937"], [style*="color:#1f2937"], [style*="color: #1e293b"], [style*="color: #374151"],
[style*="color: #333"], [style*="color:#333"], [style*="color: #111827"] { color: var(--cd-text) !important; }
[style*="color: #6b7280"], [style*="color:#6b7280"], [style*="color: #64748b"], [style*="color:#64748b"],
[style*="color: #666"], [style*="color: #999"], [style*="color: #94a3b8"], [style*="color: #9ca3af"] { color: var(--cd-muted) !important; }
[style*="color: #15803d"], [style*="color: #16a34a"], [style*="color: #155724"] { color: var(--cd-green) !important; }
[style*="color: #0369a1"], [style*="color: #0284c7"], [style*="color: #1e40af"] { color: #7dd3fc !important; }
[style*="color: #c2410c"], [style*="color: #9a3412"], [style*="color: #ea580c"], [style*="color: #856404"] { color: #fdba74 !important; }
[style*="color: #721c24"], [style*="color: #9d174d"] { color: #fda4af !important; }
[style*="color: #7e22ce"], [style*="color: #667eea"], [style*="color:#667eea"] { color: var(--cd-violet-light) !important; }
[style*="border: 1px solid #e5e7eb"], [style*="border-bottom: 1px solid #e5e7eb"], [style*="border-top: 1px solid #e5e7eb"],
[style*="border: 1px solid #f3f4f6"], [style*="border-bottom: 1px solid #f3f4f6"] { border-color: var(--cd-line) !important; }

/* ---------- Login ---------- */
.login-page {
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(124, 58, 237, 0.25), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(34, 211, 238, 0.12), transparent 60%),
    var(--cd-bg);
}
.login-page::before { display: none; }
.login-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--cd-surface);
  border: 1px solid var(--cd-line-2);
}
.login-logo .logo-icon img { width: 64px; height: 64px; display: block; }
.login-logo h1 { color: var(--cd-text); }
.login-logo p { color: var(--cd-muted); }
.login-form label { color: var(--cd-text); }
.login-form .input-group input { background: var(--cd-bg-2); border: 1px solid var(--cd-line-2); color: var(--cd-text); }
.login-portal-link { display: block; text-align: center; margin-top: 18px; color: var(--cd-muted); font-size: 13px; }

/* ---------- Loading overlay ---------- */
.loading-overlay { background: rgba(10, 10, 15, 0.86); }
.loading-spinner::before, .loading-progress-bar { background: var(--cd-grad); }

/* ---------- Scrollbars ---------- */
* { scrollbar-color: #2b2b38 transparent; }

/* ---------- Layout: a wide table must scroll inside its card, not widen the whole page ---------- */
.main-content { min-width: 0; }
.page-content { min-width: 0; }
.card-body, .table-responsive, html body .data-table-wrapper { overflow-x: auto; max-width: 100%; }

/* ---------- Narrow screens: the existing menu button (hidden inline) becomes visible ---------- */
@media (max-width: 992px) {
  .header [data-sidebar-toggle] { display: inline-flex !important; }
  .sidebar { box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); }
}