/* LOCKED COLOR SYSTEM - DO NOT MODIFY THESE VALUES */
/* These are the permanent, approved MyLoanLogix colors (per Patrick). Do NOT
   change any value in the block below in any future session without explicit
   instruction from Patrick. login.html is the reference and is exempted at the
   bottom of this block via its unique .bg-grid element — never edit login.html. */
/* ============================================================================
   MyLoanLogix — shared design system
   Token values are taken verbatim from the specification. Pages should consume
   the variables and component classes here rather than redeclaring colours, so
   a theme change is one edit in one file.
   ==========================================================================*/

/* ---------- DARK (default) — LOCKED ---------- */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  /* --- Backgrounds --- */
  --app-bg: #070D1A;
  --app-bg-deep: #070D1A;
  --sidebar-bg: #0F1E35;
  --sidebar-bg-secondary: #0F1E35;
  --topbar-bg: #0F1E35;
  --header-bg: #0F1E35;
  --card-bg: #0F1E35;
  --surface-1: #0F1E35;
  --surface-2: #0F1D30;
  --surface-3: #16263F;
  --surface-raised: #0F1E35;
  /* --- Inputs --- */
  --input-bg: #16263F;
  --input-border: rgba(0,212,240,0.45);
  --surface-input: #16263F;
  --surface-hover: #16263F;
  /* --- Borders --- */
  --card-border: 1px solid rgba(0,212,240,0.15);
  --border-soft: rgba(0,212,240,0.15);
  --border-default: rgba(0,212,240,0.45);
  --border-strong: rgba(0,212,240,0.60);
  /* --- Text --- */
  --text1: #ffffff;
  --text2: rgba(255,255,255,0.6);
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.6);
  --text-muted: rgba(255,255,255,0.40);
  --text-disabled: rgba(255,255,255,0.28);
  /* --- Accents --- */
  --cyan: #00D4F0;
  --cyan-soft: rgba(0,212,240,0.13);
  --primary: #00D4F0;
  --primary-hover: #34DEF7;
  --primary-soft: rgba(0,212,240,0.14);
  --gold: #F5C518;
  --accent: #F5C518;
  --accent-hover: #E8A800;
  --accent-text: #05080F;
  /* --- Status --- */
  --success: #00E676;
  --success-soft: rgba(0,230,118,0.14);
  --warning: #FFB300;
  --warning-soft: rgba(255,179,0,0.14);
  --danger: #FF3D57;
  --danger-soft: rgba(255,61,87,0.14);
  --info: #4D9EFF;
  --info-soft: rgba(77,158,255,0.14);
  /* --- Shadows: soft cyan halo (cards float off the dark background) --- */
  --card-shadow: 0 0 8px rgba(0,212,240,0.15), 0 0 20px rgba(0,212,240,0.08), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-card: 0 0 8px rgba(0,212,240,0.15), 0 0 20px rgba(0,212,240,0.08), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-raised: 0 0 8px rgba(0,212,240,0.15), 0 0 20px rgba(0,212,240,0.08), 0 4px 12px rgba(0,0,0,0.4);
  --focus-ring: 0 0 0 3px rgba(0,212,240,0.24);
}

/* login.html EXEMPTION — the reference page keeps its own lighter palette.
   Keyed on login's unique .bg-grid so login.html itself is NEVER edited. */
html[data-theme="dark"]:has(.bg-grid) {
  --app-bg: #07111f;
  --app-bg-deep: #050b14;
  --surface-1: #0f2137;
  --text-primary: #EAF2FF;
  --text1: #EAF2FF;
}

/* ---------- LIGHT ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --app-bg: #edf3fa;
  --app-bg-deep: #e5edf7;
  --sidebar-bg: #0b2a50;          /* sidebar stays dark navy in both themes */
  --sidebar-bg-secondary: #103762;
  --topbar-bg: rgba(255,255,255,0.96);
  --surface-1: #ffffff;
  --surface-2: #f8fbff;
  --surface-3: #f0f5fb;
  --surface-raised: #ffffff;
  --surface-input: #f6f9fd;
  --surface-hover: #edf4fd;
  --border-soft: #d9e3ef;
  --border-default: #c7d5e5;
  --border-strong: #aebfd3;
  --text-primary: #102a4d;
  --text-secondary: #425d7c;
  --text-muted: #6e829b;
  --text-disabled: #9aabbd;
  --primary: #1769d2;
  --primary-hover: #0f5dbf;
  --primary-soft: rgba(23,105,210,0.10);
  --cyan: #008fbd;
  --cyan-soft: rgba(0,143,189,0.10);
  --accent: #ffbf24;
  --accent-hover: #f59e0b;
  --accent-text: #10223c;
  --success: #15975a;
  --success-soft: rgba(21,151,90,0.10);
  --warning: #d98000;
  --warning-soft: rgba(217,128,0,0.10);
  --danger: #e0314d;
  --danger-soft: rgba(224,49,77,0.10);
  --info: #2478d4;
  --info-soft: rgba(36,120,212,0.10);
  --shadow-card: 0 8px 22px rgba(32,64,100,0.11), 0 1px 2px rgba(32,64,100,0.08);
  --shadow-raised: 0 14px 32px rgba(32,64,100,0.15), 0 2px 4px rgba(32,64,100,0.08);
  --focus-ring: 0 0 0 3px rgba(23,105,210,0.18);
}

:root {
  --mll-font: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-card: 16px;
  --radius-control: 10px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
}

/* ---------- shell ---------- */
.app-shell { display: flex; min-height: 100vh; background: var(--app-bg); color: var(--text-primary); font-family: var(--mll-font); }
.app-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; transition: width .18s ease; overflow: hidden; }
.app-sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.app-sidebar.collapsed .sidebar-link span, .app-sidebar.collapsed .sidebar-group-label, .app-sidebar.collapsed .sidebar-hide-collapsed { display: none; }
.app-workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { height: var(--topbar-h); flex-shrink: 0; background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.app-main { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.page-header { flex-shrink: 0; padding: 14px 16px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.page-content { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 16px; }

/* ---------- sidebar ---------- */
.sidebar-group { padding: 10px 8px 2px; }
.sidebar-group-label { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); padding: 0 8px; margin-bottom: 6px; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; text-decoration: none; border-left: 2px solid transparent; margin-bottom: 2px; }
.sidebar-link:hover { background: var(--sidebar-bg-secondary); color: var(--text-primary); }
.sidebar-link.active { background: var(--primary-soft); color: var(--cyan); border-left-color: var(--cyan); }
.sidebar-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- cards ---------- */
.app-card { background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.app-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); flex-shrink: 0; }
.app-card__title { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cyan); }
.app-card__body { padding: 12px 14px; flex: 1; min-height: 0; overflow: auto; }
.clickable-card { cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.clickable-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.clickable-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.metric-card { background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 12px 14px; box-shadow: var(--shadow-card); }
.metric-card__label { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.metric-card__value { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1.15; }
.alert-card { border-left: 3px solid var(--danger); background: var(--danger-soft); border-radius: var(--radius-control); padding: 10px 12px; }

/* ---------- chips / badges ---------- */
.status-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.status-chip--success { background: var(--success-soft); color: var(--success); border: 1px solid var(--success); }
.status-chip--warning { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }
.status-chip--danger  { background: var(--danger-soft);  color: var(--danger);  border: 1px solid var(--danger); }
.status-chip--info    { background: var(--info-soft);    color: var(--info);    border: 1px solid var(--info); }
.status-chip--neutral { background: var(--surface-3);    color: var(--text-secondary); border: 1px solid var(--border-default); }

/* ---------- forms ---------- */
.form-control { width: 100%; min-height: 40px; background: var(--surface-input); border: 1px solid var(--border-default); border-radius: var(--radius-control); color: var(--text-primary); font-family: var(--mll-font); font-size: 13px; font-weight: 600; padding: 9px 11px; outline: none; }
.form-control::placeholder { color: var(--text-muted); opacity: 1; font-weight: 500; }
.form-control:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.form-control:disabled { color: var(--text-disabled); background: var(--surface-2); cursor: not-allowed; }
.form-label { display: block; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }

/* ---------- buttons ---------- */
.button-primary, .button-secondary, .button-ghost { font-family: var(--mll-font); font-weight: 700; border-radius: var(--radius-control); cursor: pointer; padding: 9px 16px; font-size: 12px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.button-primary { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--accent-text); font-weight: 800; }
.button-primary:hover { filter: brightness(1.06); }
.button-secondary { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.button-secondary:hover { background: var(--primary); color: #fff; }
.button-ghost { background: transparent; border-color: var(--border-default); color: var(--text-secondary); }
.button-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.button-primary:focus-visible, .button-secondary:focus-visible, .button-ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.button-primary:disabled, .button-secondary:disabled, .button-ghost:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* ---------- theme switcher ---------- */
.theme-switcher { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-input); border: 1px solid var(--border-default); color: var(--text-secondary); border-radius: 20px; padding: 5px 11px; cursor: pointer; font-family: var(--mll-font); font-size: 11px; font-weight: 700; }
.theme-switcher:hover { border-color: var(--cyan); color: var(--cyan); }
.theme-switcher:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- table ---------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); padding: 7px 9px; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.data-table td { padding: 8px 9px; border-bottom: 1px solid var(--border-soft); font-size: 12px; font-weight: 600; color: var(--text-primary); }
.data-table tbody tr:hover { background: var(--surface-hover); }
.data-table tr:last-child td { border-bottom: none; }

/* ---------- progress ---------- */
.progress-bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.progress-bar__fill { height: 100%; border-radius: 4px; background: var(--success); transition: width .3s ease; }
.progress-bar__fill--behind { background: var(--accent); }

/* ---------- avatar ---------- */
.user-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; background: var(--primary); }

/* ---------- modal / drawer / toast ---------- */
.modal { position: fixed; inset: 0; background: rgba(3,8,16,0.78); z-index: 900; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal__panel { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); width: min(720px, 96vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.right-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 96vw); background: var(--surface-1); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-raised); transform: translateX(100%); transition: transform .2s ease; z-index: 880; display: flex; flex-direction: column; }
.right-drawer.open { transform: translateX(0); }
.toast { position: fixed; bottom: 18px; right: 18px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-control); box-shadow: var(--shadow-raised); padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--text-primary); z-index: 950; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast--success { border-left: 3px solid var(--success); }
.toast--danger { border-left: 3px solid var(--danger); }

/* ---------- empty / loading ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px; text-align: center; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.loading-state::before { content: ''; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--border-default); border-top-color: var(--cyan); animation: mll-spin .7s linear infinite; }
@keyframes mll-spin { to { transform: rotate(360deg); } }

/* ---------- alert pulse (Row 1 / Card 2) ---------- */
@keyframes mll-alert-pulse { 0%,100% { border-color: var(--danger); box-shadow: 0 0 0 0 var(--danger-soft); } 50% { border-color: var(--danger); box-shadow: 0 0 0 5px var(--danger-soft); } }
.alert-pulse { animation: mll-alert-pulse 1.7s ease-in-out infinite; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .alert-pulse { animation: none; border-color: var(--danger); }
  .loading-state::before { animation: none; }
}

/* ---------- legacy bridge ----------
   Existing pages predate .app-sidebar and use .sidebar. The spec requires the
   sidebar to stay dark navy in BOTH themes, so it is pinned to --sidebar-bg
   rather than following --surface-1 into white on light. */
.sidebar { background: var(--sidebar-bg) !important; }
.sidebar .sid-lbl, .sidebar .office-txt { color: #8fa7c4 !important; }
.sidebar .nav-item { color: #eaf2ff; }