/* ═══════════════════════════════════════════════════════════════════════════
   MC FINANCE — LIGHT LAVENDER PURPLE THEME
   Layered on top of main.css. Only overrides visual/color properties.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --accent:       #7c5cbf;
  --accent-light: #ede9fb;
  --accent-muted: #a48ad4;
  --sidebar-w:    62px;   /* collapsed — theme-purple overrides main.css */
  --bg:           #f4f2fb;
  --border:       #ece8f5;
  --text:         #1e1a2e;
  --muted:        #7a6fa0;
  --success:      #38a169;
  --danger:       #e53e3e;
}

/* ── BODY ───────────────────────────────────────────────────────────────── */
body { background: var(--bg); }

/* ── SIDEBAR — COLLAPSIBLE ──────────────────────────────────────────────── */
#sidebar {
  background: linear-gradient(180deg, #b8aee8 0%, #cec6f2 30%, #e4e0f8 70%, #f0eeff 100%);
  border-right: 1px solid #c4bce8;
  box-shadow: 2px 0 20px rgba(100,70,200,.12);
  width: 64px;
  overflow: hidden;
  transition: width .24s cubic-bezier(.4,0,.2,1);
  z-index: 200;
}
#sidebar:hover { width: 250px; }

/* ── Logo card ── */
.sidebar-logo {
  margin: 10px 8px 8px;
  background: #fff;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 2px 12px rgba(100,70,200,.14);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 52px;
  transition: height .22s, margin .22s, padding .22s, border-radius .22s;
}
/* Collapsed: "M" monogram via pseudo-element, h2 hidden */
.sidebar-logo::after {
  content: "M";
  font-size: 22px; font-weight: 900;
  color: var(--accent);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sidebar-logo h2 { font-size: 0; overflow: hidden; }
.sidebar-logo p  { display: none; }

/* Expanded logo */
#sidebar:hover .sidebar-logo {
  height: auto;
  margin: 12px 12px 8px;
  padding: 14px 16px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
#sidebar:hover .sidebar-logo::after { display: none; }
#sidebar:hover .sidebar-logo h2 {
  font-size: 18px; font-weight: 900; color: #1e1a2e;
  letter-spacing: -.5px; white-space: nowrap;
  overflow: visible;
}
#sidebar:hover .sidebar-logo h2 span { color: var(--accent); }
#sidebar:hover .sidebar-logo p {
  display: block;
  font-size: 10px; color: #9d8ec4;
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-top: 3px; white-space: nowrap;
}

/* ── Nav section labels ── */
.nav-section { padding: 6px 8px 4px; }
.nav-label {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  color: #9d8ec4; font-weight: 700; padding: 0; margin: 0;
  transition: max-height .2s, opacity .15s, padding .2s, margin .2s;
  white-space: nowrap;
}
#sidebar:hover .nav-label {
  max-height: 32px; opacity: 1;
  padding: 10px 4px 4px; margin-bottom: 2px;
}

/* ── Nav items — ICON ONLY when collapsed ── */
.nav-item {
  color: #5a4888;
  border-radius: 10px;
  /* collapsed: centre the icon, font-size:0 kills text */
  font-size: 0;
  padding: 0;
  gap: 0;
  justify-content: center;
  align-items: center;
  margin: 2px 6px;
  height: 44px;
  transition: font-size .01s, padding .22s, gap .22s, margin .22s, height .22s;
}
.nav-item svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  opacity: .70;
  transition: opacity .15s;
}
.nav-item:hover { background: rgba(124,92,191,.13); color: #3d2a7a; }
.nav-item:hover svg { opacity: 1; }
.nav-item.active {
  background: #2d1f6e; color: #fff;
  box-shadow: 0 4px 14px rgba(45,31,110,.28);
  font-weight: 600;
}
.nav-item.active svg { opacity: 1; }

/* Expanded nav items */
#sidebar:hover .nav-item {
  font-size: 13.5px;
  padding: 0 12px;
  gap: 11px;
  margin: 2px 8px;
  justify-content: flex-start;
  height: 40px;
}

/* ── View-as bar ── */
#view-as-bar {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .2s, opacity .15s;
  border-top: 1px solid rgba(124,92,191,.15) !important;
}
#sidebar:hover #view-as-bar { max-height: 80px; opacity: 1; }

/* Override inline white colors — sidebar is now light */
#view-as-bar > div {
  color: #5a4080 !important;
  font-size: 10px;
}
#view-as-select {
  color: #3d2a7a !important;
  background: rgba(255,255,255,.75) !important;
  border: 1.5px solid rgba(124,92,191,.30) !important;
  font-weight: 600;
}
#view-as-select option { color: #1e1a2e; background: #fff; }

/* ── Footer ── */
.sidebar-footer {
  border-top: 1px solid rgba(124,92,191,.20);
  padding: 8px 6px;
  overflow: hidden;
}
#sidebar:hover .sidebar-footer { padding: 10px; }

.user-info {
  background: rgba(255,255,255,.55);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: padding .22s, gap .22s;
}
#sidebar:hover .user-info { padding: 8px 10px; gap: 10px; justify-content: flex-start; margin-bottom: 8px; }

.user-avatar { background: var(--accent); box-shadow: 0 2px 8px rgba(124,92,191,.30); flex-shrink: 0; }

/* Hide name/email when collapsed */
.user-name  { font-size: 0; white-space: nowrap; transition: font-size .01s; }
.user-email { font-size: 0; white-space: nowrap; transition: font-size .01s; }
#sidebar:hover .user-name  { font-size: 13px; font-weight: 600; color: #1e1a2e; }
#sidebar:hover .user-email { font-size: 11px; color: #7a6fa0; }

#logout-btn {
  font-size: 0; opacity: 0; overflow: hidden;
  background: rgba(124,92,191,.10); color: var(--accent);
  white-space: nowrap;
  transition: opacity .15s, font-size .01s;
}
#sidebar:hover #logout-btn { font-size: 13px; opacity: 1; }
#logout-btn:hover { background: rgba(124,92,191,.20); }

/* ── MAIN — pushes right when sidebar expands ───────────────────────────── */
#main {
  margin-left: 64px;
  transition: margin-left .24s cubic-bezier(.4,0,.2,1);
}
#sidebar:hover ~ #main {
  margin-left: 250px;
}
.page-title h2 { color: #1e1a2e; }
.page-title p  { color: var(--muted); }

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card { border-color: var(--border); box-shadow: 0 1px 8px rgba(100,70,200,.06); }
.card-header { border-bottom-color: var(--border); }
.stat-card { border-color: var(--border); box-shadow: 0 2px 12px rgba(100,70,200,.07); }
.stat-value { color: #1e1a2e; }
.stat-value.accent { color: var(--accent); }
.si-yellow { background: rgba(124,92,191,.10); color: var(--accent); }
.si-purple { background: rgba(124,92,191,.12); color: var(--accent); }
.deal-mini-stat { border-color: var(--border); }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn-primary  { background: var(--accent); box-shadow: 0 3px 12px rgba(124,92,191,.28); }
.btn-outline  { border-color: var(--accent); color: var(--accent); }
.btn-secondary { background: #ede9fb; color: #5a3fa8; }
.admin-chip   { background: rgba(124,92,191,.12); color: var(--accent); }

/* ── TABS ───────────────────────────────────────────────────────────────── */
.subtab:hover  { background: var(--accent-light); color: var(--accent); }
.subtab.active { background: var(--accent); color: #fff; }

.month-tab { border-radius: 20px; border-color: #d1c8ef; color: #7a6fa0; font-weight: 600; padding: 4px 14px; }
.month-tab:hover:not(.active) { background: var(--accent-light); border-color: var(--accent-muted); color: var(--accent); }
.month-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(124,92,191,.28); }

.dealer-tab { border-radius: 20px; border-color: #d1c8ef; color: #7a6fa0; font-weight: 600; padding: 6px 18px; background: #fff; }
.dealer-tab:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.dealer-tab.active { background: #2d1f6e; border-color: #2d1f6e; color: #fff; box-shadow: 0 2px 10px rgba(45,31,110,.22); }

/* ── TABLE ──────────────────────────────────────────────────────────────── */
th { background: #f7f4ff; color: #9d8ec4; border-bottom-color: var(--border); }
tr:hover td { background: #faf8ff; }

/* ── TOGGLE ─────────────────────────────────────────────────────────────── */
.toggle-sw input:checked + .toggle-sl { background: var(--accent); }

/* ── MODAL / TOAST ──────────────────────────────────────────────────────── */
.modal-overlay { background: rgba(30,15,60,.45); }
.modal h3 { color: #1e1a2e; }
#toast { background: #2d1f6e; }
#toast.show.success { border-left-color: var(--success); }
#toast.show.error   { border-left-color: var(--danger); }

/* ── AG GRID HEADER ─────────────────────────────────────────────────────── */
.ag-theme-balham .ag-header,
.ag-theme-balham .ag-header-row { background: #2d1f6e !important; border-bottom: 2px solid #1a1040 !important; }
.ag-theme-balham .ag-header-cell,
.ag-theme-balham .ag-header-group-cell { background: #2d1f6e !important; }

/* ── SPREADSHEET / IMPORT ───────────────────────────────────────────────── */
.sheet-table thead th { background: #2d1f6e; }
.sheet-footer { background: #2d1f6e; border-top-color: #3d2f8e; }
.import-preview-table th { background: #2d1f6e; }
.imp-drop-zone.drag-over { border-color: var(--accent); background: var(--accent-light); }

/* ── LOGIN PAGE ─────────────────────────────────────────────────────────── */
#login-page { background: linear-gradient(135deg, #2d1f6e 0%, #5b3fa8 50%, #7c5cbf 100%); }
input:focus, select:focus { border-color: var(--accent); }

/* ── PERM / ROLE CARDS ──────────────────────────────────────────────────── */
.perm-head { background: #f7f4ff; }
.perm-row-t:hover { background: #faf8ff; }

/* ── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8bfea; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-muted); }

/* ── ACTIVITY ───────────────────────────────────────────────────────────── */
.act-tl-row:first-child::before { background: var(--accent); }