/* ---------------------------------------------------------------------------
   Monty design-system overlay for Bootstrap 5.
   Single source of visual truth for the admin portal. Tokens are *copied* from
   the React/Tailwind app (client/src/index.css), not shared.
   --------------------------------------------------------------------------- */

:root {
  /* Brand */
  --monty-brand: #6C47FF;
  --monty-brand-600: #5A2EF5;
  --monty-brand-050: #f4f0ff;

  /* Neutrals (warm) */
  --monty-ink: #1C1917;
  --monty-muted: #78716C;
  --monty-border: #E8E6E3;
  --monty-page-bg: #F2F1EE;
  --monty-surface: #FFFFFF;

  /* Status */
  --monty-success: #16A34A;
  --monty-warning: #D97706;
  --monty-danger: #DC2626;

  /* Sidebar */
  --monty-sidebar-bg: #14112A;
  --monty-sidebar-fg: #C9C5DA;
  --monty-sidebar-fg-active: #FFFFFF;

  /* Bootstrap variable overrides */
  --bs-primary: #6C47FF;
  --bs-primary-rgb: 108, 71, 255;
  --bs-body-bg: #F2F1EE;
  --bs-body-color: #1C1917;
  --bs-border-color: #E8E6E3;
  --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-link-color: #5A2EF5;
  --bs-link-hover-color: #4a23d0;
}

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--monty-page-bg);
  color: var(--monty-ink);
}

/* ----------------------------- Layout shell ----------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 248px;
  flex: 0 0 248px;
  background: var(--monty-sidebar-bg);
  color: var(--monty-sidebar-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.app-sidebar .brand {
  padding: 22px 22px 16px;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: -0.02em;
}
.app-sidebar .brand small { display: block; font-weight: 500; font-size: .72rem; color: var(--monty-sidebar-fg); letter-spacing: .04em; text-transform: uppercase; }
.app-sidebar nav { padding: 8px 12px; flex: 1 1 auto; overflow-y: auto; }
.app-sidebar .nav-link {
  color: var(--monty-sidebar-fg);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 2px;
  font-weight: 600;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-sidebar .nav-link.active { background: var(--monty-brand); color: var(--monty-sidebar-fg-active); }
.app-sidebar .sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: .8rem; }
.app-sidebar .sidebar-footer a { color: var(--monty-sidebar-fg); text-decoration: none; }

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  background: var(--monty-surface);
  border-bottom: 1px solid var(--monty-border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-content { padding: 28px; flex: 1 1 auto; }

/* ----------------------------- Components ----------------------------- */
.card {
  border: 1px solid var(--monty-border);
  border-radius: 18px;
  background: var(--monty-surface);
  box-shadow: 0 1px 2px rgba(28,25,23,.04);
}
.card-header { background: transparent; border-bottom: 1px solid var(--monty-border); font-weight: 700; }

.btn-primary {
  --bs-btn-bg: var(--monty-brand);
  --bs-btn-border-color: var(--monty-brand);
  --bs-btn-hover-bg: var(--monty-brand-600);
  --bs-btn-hover-border-color: var(--monty-brand-600);
  --bs-btn-active-bg: var(--monty-brand-600);
  --bs-btn-active-border-color: var(--monty-brand-600);
  --bs-btn-disabled-bg: var(--monty-brand);
  --bs-btn-disabled-border-color: var(--monty-brand);
  font-weight: 600;
  border-radius: 12px;
}
.btn { border-radius: 12px; font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--monty-brand-600); --bs-btn-border-color: var(--monty-brand); --bs-btn-hover-bg: var(--monty-brand); --bs-btn-hover-border-color: var(--monty-brand); }

.form-control, .form-select {
  border-radius: 12px;
  border-color: var(--monty-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--monty-brand);
  box-shadow: 0 0 0 .2rem rgba(108,71,255,.15);
}

.badge { border-radius: 8px; font-weight: 600; padding: .4em .7em; }
.badge.bg-brand { background: var(--monty-brand-050); color: var(--monty-brand-600); }
.badge.bg-success-soft { background: #e7f6ed; color: var(--monty-success); }
.badge.bg-warning-soft { background: #fdf1e1; color: var(--monty-warning); }
.badge.bg-danger-soft  { background: #fbe8e8; color: var(--monty-danger); }
.badge.bg-muted-soft   { background: #f1efec; color: var(--monty-muted); }

.table { --bs-table-hover-bg: #faf9f7; }
.table thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--monty-muted); border-bottom: 1px solid var(--monty-border); }
.table td, .table th { vertical-align: middle; }

/* KPI tiles */
.kpi-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--monty-border);
  border-radius: 18px;
  background: var(--monty-surface);
  padding: 18px 20px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  height: 100%;
}
.kpi-tile:hover { box-shadow: 0 10px 24px rgba(28,25,23,.08); transform: translateY(-1px); border-color: #d9d6d1; }
.kpi-tile .kpi-label { font-size: .8rem; color: var(--monty-muted); font-weight: 600; }
.kpi-tile .kpi-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.kpi-tile .kpi-sub { font-size: .78rem; color: var(--monty-muted); }

.page-title { font-weight: 800; letter-spacing: -.02em; margin: 0; }
.text-muted-2 { color: var(--monty-muted) !important; }

/* Auth screens */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--monty-page-bg); padding: 24px; }
.auth-card { width: 100%; max-width: 420px; }

/* Notes */
.note-item { border: 1px solid var(--monty-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fbfaf9; }
.note-item .note-meta { font-size: .76rem; color: var(--monty-muted); }