/* ============================================================================
   MODUS DESIGN SYSTEM
   Engineered, fintech-meets-developer-tool foundation for the PMS.
   This file is a token + component overlay loaded AFTER soft-ui-dashboard.css.
   It re-themes the existing Bootstrap/Soft UI markup without changing behaviour.

   Structure:
     1. Design tokens (light + dark)
     2. Base / typography
     3. App shell (sidebar, topbar, content)
     4. Components (buttons, cards, inputs, tables, badges, tabs, modals…)
     5. Utilities
   ============================================================================ */

/* ===========================================================================
   1. DESIGN TOKENS
   =========================================================================== */
:root {
  /* surfaces */
  --m-bg:#F5F6F8; --m-surface:#FFFFFF; --m-surface-2:#F5F6F8; --m-surface-sunk:#F0F2F5;
  /* ink / text */
  --m-ink:#111729; --m-text:#2A3852; --m-text-soft:#3E4D63; --m-muted:#94A3B7;
  /* borders */
  --m-border:#E8EBF0; --m-border-2:#D4DAE3;
  /* brand / action */
  --m-primary:#2664EC; --m-primary-hover:#1D4FD0; --m-primary-active:#1A45B5;
  --m-primary-tint:#EAF0FE; --m-primary-border:#C9D6F7;
  /* status */
  --m-success:#16A34A; --m-success-tint:#E7F6EC;
  --m-warning:#D97706; --m-warning-tint:#FBF0E2;
  --m-danger:#DC2626;  --m-danger-tint:#FBE9E9;
  --m-info:#2664EC;    --m-info-tint:#EAF0FE;
  --m-neutral:#5A6B82; --m-neutral-tint:#EDEFF2;
  /* neutral ramp */
  --m-n50:#F5F6F8; --m-n100:#E8EBF0; --m-n200:#D4DAE3; --m-n300:#B6C0CD;
  --m-n400:#94A3B7; --m-n500:#5A6B82; --m-n600:#3E4D63; --m-n700:#2A3852;
  --m-n800:#1B2438; --m-n900:#111729;
  /* elevation */
  --m-sh-1:0 1px 2px rgba(17,23,41,.05);
  --m-sh-2:0 1px 2px rgba(17,23,41,.04),0 10px 28px -16px rgba(17,23,41,.18);
  --m-sh-3:0 1px 2px rgba(17,23,41,.05),0 24px 60px -20px rgba(17,23,41,.30);
  --m-sh-ai:0 1px 2px rgba(17,23,41,.04),0 20px 54px -16px rgba(38,100,236,.28);
  --m-ai-grad:linear-gradient(180deg,#EEF3FF 0%,#FFFFFF 58%);
  /* radius */
  --m-r-sm:6px; --m-r:10px; --m-r-lg:14px; --m-r-xl:16px; --m-r-pill:999px;
  /* fonts */
  --m-font:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --m-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  /* layout */
  --m-sidebar-w:240px;
}

.theme-dark {
  --m-bg:#0C1120; --m-surface:#1B2438; --m-surface-2:#161E30; --m-surface-sunk:#131A2A;
  --m-ink:#FFFFFF; --m-text:#D4DAE3; --m-text-soft:#B6C0CD; --m-muted:#8595AB;
  --m-border:#2A3852; --m-border-2:#3E4D63;
  --m-primary:#2664EC; --m-primary-hover:#3B78F5; --m-primary-active:#1D4FD0;
  --m-primary-tint:rgba(38,100,236,.18); --m-primary-border:rgba(38,100,236,.42);
  --m-success:#4ADE80; --m-success-tint:rgba(22,163,74,.18);
  --m-warning:#FBBF24; --m-warning-tint:rgba(217,119,6,.20);
  --m-danger:#FB7185;  --m-danger-tint:rgba(220,38,38,.20);
  --m-info:#7AA2F7;    --m-info-tint:rgba(38,100,236,.18);
  --m-neutral:#94A3B7; --m-neutral-tint:rgba(90,107,130,.22);
  --m-n50:#131A2A; --m-n100:#161E30; --m-n200:#1B2438; --m-n300:#2A3852;
  --m-n400:#3E4D63; --m-n500:#5A6B82; --m-n600:#8595AB; --m-n700:#B6C0CD;
  --m-n800:#D4DAE3; --m-n900:#FFFFFF;
  --m-sh-1:0 1px 2px rgba(0,0,0,.35);
  --m-sh-2:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.6);
  --m-sh-3:0 1px 2px rgba(0,0,0,.5),0 24px 60px -20px rgba(0,0,0,.7);
  --m-sh-ai:0 1px 2px rgba(0,0,0,.4),0 20px 54px -16px rgba(38,100,236,.45);
  --m-ai-grad:linear-gradient(180deg,#1C2A4A 0%,#1B2438 60%);
}

/* Map Bootstrap's own variables onto Modus so stock components inherit the theme */
:root {
  --bs-primary:#2664EC; --bs-primary-rgb:38,100,236;
  --bs-body-bg:var(--m-bg); --bs-body-color:var(--m-text);
  --bs-border-color:var(--m-border); --bs-border-radius:var(--m-r);
  --bs-font-sans-serif:var(--m-font);
}

/* ===========================================================================
   2. BASE / TYPOGRAPHY
   =========================================================================== */
body, body.g-sidenav-show {
  background:var(--m-bg) !important;
  color:var(--m-text);
  font-family:var(--m-font) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.modus *, .modus *::before, .modus *::after { box-sizing:border-box; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color:var(--m-ink); letter-spacing:-.02em; }
h1,.h1 { font-weight:900; letter-spacing:-.035em; }
h2,.h2 { font-weight:800; letter-spacing:-.03em; }
h3,.h3 { font-weight:700; }

.mono,.font-monospace,.text-monospace,code,kbd,pre,samp {
  font-family:var(--m-mono) !important;
}
.tnum,.mono { font-variant-numeric:tabular-nums; }

a { color:var(--m-primary); }
a:hover { color:var(--m-primary-hover); }
hr, .horizontal { background-color:var(--m-border) !important; opacity:1; border:0; }

/* page heading helpers (used by redesigned pages) */
.m-page-eyebrow { font-size:12.5px; font-weight:600; color:var(--m-muted); margin-bottom:8px; }
.m-page-title { font-size:34px; font-weight:900; letter-spacing:-.04em; color:var(--m-ink); line-height:1.02; margin:0; }
.m-page-sub { font-size:15px; color:var(--m-text-soft); margin:8px 0 0; }
.m-section-label { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--m-primary); }

/* ===========================================================================
   3. APP SHELL — SIDEBAR / TOPBAR / CONTENT
   =========================================================================== */

/* Sidebar shell — self-contained; overrides Soft UI .sidenav/.navbar bases */
.sidenav.modus-sidebar {
  position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important;
  margin:0 !important; border-radius:0 !important; padding:0 !important;
  width:var(--m-sidebar-w) !important; min-width:var(--m-sidebar-w); max-width:var(--m-sidebar-w);
  height:100vh !important; max-height:100vh !important;
  background:var(--m-surface) !important;
  border-right:1px solid var(--m-border) !important;
  box-shadow:none !important; overflow:hidden !important;
  display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch !important;
  z-index:60; transform:none !important;
}
#sidenav-main.modus-sidebar .sidenav-header { flex:0 0 auto; width:100% !important; align-self:stretch !important; height:auto; display:flex !important; flex-direction:row !important; align-items:center; justify-content:flex-start !important; gap:11px; padding:16px 14px 10px !important; border-bottom:0 !important; text-align:left !important; }
#sidenav-main.modus-sidebar .m-brand { justify-content:flex-start !important; margin:0 !important; margin-right:auto !important; width:auto !important; }
.modus-sidebar .m-brand { display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0; }
.modus-sidebar .m-brand-name { font-size:18px; font-weight:900; letter-spacing:-.02em; color:var(--m-ink); white-space:nowrap; }
/* scroll region between header and footer */
.sidenav.modus-sidebar .navbar-collapse {
  flex:1 1 auto; min-height:0; width:100% !important; max-width:100%;
  display:block !important; padding:0; margin:0;
  overflow-y:auto !important; overflow-x:hidden !important;
}
.sidenav.modus-sidebar .navbar-collapse::-webkit-scrollbar:horizontal { height:0 !important; display:none; }
.sidenav.modus-sidebar .navbar-nav {
  display:flex; flex-direction:column; flex-wrap:nowrap;
  width:100%; padding:6px 12px 12px !important; margin:0 !important; gap:3px; list-style:none;
}
.sidenav.modus-sidebar .nav-item { width:100%; margin:0 !important; padding:0 !important; }
.modus-sidebar .nav-link-text { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sidenav.modus-sidebar .menu-heading {
  color:var(--m-muted); font-size:10.5px; letter-spacing:.08em; font-weight:700;
  text-transform:uppercase; padding:16px 11px 8px !important; margin:0 !important;
}
.sidenav.modus-sidebar .menu-link {
  display:flex !important; align-items:center; gap:11px !important;
  width:100%; box-sizing:border-box;
  color:var(--m-text-soft); font-size:13.5px; font-weight:600;
  border-radius:9px; padding:9px 11px !important; margin:0 !important; line-height:1.25;
  transition:background .15s,color .15s;
}
.modus-sidebar .menu-link .menu-icon { flex:0 0 18px; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:inherit; }
.modus-sidebar .menu-link .menu-icon svg { width:18px; height:18px; display:block; }
.sidenav.modus-sidebar .menu-link:hover { background:var(--m-surface-2) !important; color:var(--m-ink) !important; box-shadow:none !important; }
.sidenav.modus-sidebar .menu-link.active,
.sidenav.modus-sidebar .nav-link.menu-link.active {
  background:var(--m-primary) !important; color:#fff !important; box-shadow:none !important;
}
.sidenav.modus-sidebar .menu-link.active .nav-link-text,
.sidenav.modus-sidebar .menu-link.active .menu-icon { color:#fff !important; }
.modus-sidebar .menu-link .m-badge {
  margin-left:auto; background:var(--m-danger); color:#fff; font-size:11px; font-weight:700;
  border-radius:var(--m-r-pill); min-width:18px; height:18px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
}
.modus-sidebar .menu-link.active .m-badge { background:rgba(255,255,255,.25); }

/* Sidebar footer user card */
.modus-sidebar .m-side-foot {
  margin-top:auto; border-top:1px solid var(--m-border); padding:12px;
  display:flex; align-items:center; gap:10px;
}
.modus-sidebar .m-side-foot .m-avatar { width:34px; height:34px; border-radius:var(--m-r-pill); background:var(--m-primary); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.modus-sidebar .m-side-foot .m-uname { font-size:13.5px; font-weight:700; color:var(--m-ink); line-height:1.2; }
.modus-sidebar .m-side-foot .m-urole { font-size:11.5px; color:var(--m-muted); }

/* Content offset to the fixed sidebar */
.g-sidenav-show .main-content { margin-left:var(--m-sidebar-w) !important; background:var(--m-bg); }
@media (max-width:1199.98px){ .g-sidenav-show .main-content { margin-left:0 !important; } }

/* Full-width content — remove the centered max-width column, align gutters to topbar */
.g-sidenav-show .main-content > .container-fluid,
.g-sidenav-show .main-content .container-fluid { max-width:none !important; padding-left:28px; padding-right:28px; width:100%; }
.modus-dash, .pd-page, .proj-page { max-width:none !important; margin-left:0 !important; margin-right:0 !important; width:100%; }

/* Topbar */
.modus-topbar {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--m-surface) 86%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--m-border);
  height:62px; display:flex; align-items:center; gap:14px;
  padding:0 28px;
}
.modus-topbar .m-search {
  flex:1; max-width:520px; display:flex; align-items:center; gap:9px;
  height:40px; padding:0 14px; border:1px solid var(--m-border-2); border-radius:var(--m-r);
  background:var(--m-surface); color:var(--m-muted);
}
.modus-topbar .m-search input { flex:1; border:0; background:transparent; outline:0; font-family:inherit; font-size:14px; color:var(--m-ink); }
.modus-topbar .m-kbd { font-family:var(--m-mono); font-size:11px; color:var(--m-muted); border:1px solid var(--m-border-2); border-radius:4px; padding:1px 5px; }
.modus-topbar .m-iconbtn {
  width:38px; height:38px; border:1px solid var(--m-border); border-radius:var(--m-r);
  background:var(--m-surface); color:var(--m-text-soft); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s,border-color .15s; position:relative;
}
.modus-topbar .m-iconbtn:hover { background:var(--m-surface-2); border-color:var(--m-border-2); }
.modus-topbar .m-iconbtn .m-dot { position:absolute; top:-4px; right:-4px; background:var(--m-danger); color:#fff; font-size:10px; font-weight:700; border-radius:var(--m-r-pill); min-width:16px; height:16px; padding:0 4px; display:flex; align-items:center; justify-content:center; }
.modus-topbar .m-role-pill { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border:1px solid var(--m-border); border-radius:var(--m-r); background:var(--m-surface); font-size:13px; font-weight:600; color:var(--m-text); }
.modus-topbar .m-role-pill .m-led { width:7px; height:7px; border-radius:50%; background:var(--m-success); }
.modus-topbar .m-avatar { width:38px; height:38px; border-radius:var(--m-r-pill); background:var(--m-ink); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }

/* Page container */
.m-container { max-width:1180px; margin:0 auto; padding:32px 28px 64px; }

/* ===========================================================================
   4. COMPONENTS
   =========================================================================== */

/* ---- Buttons ---------------------------------------------------------- */
.btn:not(.btn-link):not(.action-pill) {
  border:0; border-radius:var(--m-r) !important;
  font-family:var(--m-font) !important; font-weight:700 !important;
  font-size:14px !important; line-height:1.1; padding:0 18px !important;
  height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:none; transition:background .15s,transform .15s,box-shadow .15s,filter .15s;
}
.btn-sm:not(.btn-link):not(.action-pill) { height:34px; font-size:13px !important; padding:0 13px !important; border-radius:var(--m-r-sm) !important; }
.btn-lg:not(.btn-link):not(.action-pill) { height:46px; font-size:15px !important; padding:0 22px !important; }

.btn-primary, .bg-gradient-primary, .btn-gradient-indigo {
  background:var(--m-primary) !important; color:#fff !important;
  box-shadow:0 8px 18px -8px rgba(38,100,236,.5) !important;
}
.btn-primary:hover, .bg-gradient-primary:hover, .btn-gradient-indigo:hover {
  background:var(--m-primary-hover) !important; transform:translateY(-1px);
}
.btn-primary:active { background:var(--m-primary-active) !important; }

.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-white {
  background:var(--m-surface) !important; color:var(--m-text) !important;
  border:1px solid var(--m-border-2) !important; box-shadow:none !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover {
  background:var(--m-surface-2) !important; border-color:var(--m-muted) !important; color:var(--m-ink) !important;
}
.btn-success { background:var(--m-success) !important; color:#fff !important; }
.btn-warning { background:var(--m-warning) !important; color:#fff !important; }
.btn-danger  { background:var(--m-danger) !important; color:#fff !important; }
.btn-dark    { background:var(--m-ink) !important; color:#fff !important; }
.btn-success:hover,.btn-warning:hover,.btn-danger:hover,.btn-dark:hover { filter:brightness(1.06); transform:translateY(-1px); }
.btn:disabled, .btn.disabled { background:var(--m-border-2) !important; color:var(--m-muted) !important; box-shadow:none !important; transform:none !important; }

.btn-outline-primary { color:var(--m-primary) !important; border-color:var(--m-primary-border) !important; }
.btn-outline-danger { background:var(--m-surface) !important; color:var(--m-danger) !important; border:1px solid var(--m-danger) !important; }
.btn-outline-danger:hover { background:var(--m-danger) !important; color:#fff !important; }

/* ---- Cards ------------------------------------------------------------ */
.card {
  background:var(--m-surface) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--m-r-lg) !important;
  box-shadow:var(--m-sh-1) !important;
}
.card .card-header { background:transparent !important; border-bottom:1px solid var(--m-border) !important; padding:18px 22px; }
.card .card-body { padding:22px; color:var(--m-text); }
.card .card-footer { background:transparent !important; border-top:1px solid var(--m-border) !important; }
.m-card-hover { transition:box-shadow .18s,transform .18s,border-color .18s; }
.m-card-hover:hover { box-shadow:var(--m-sh-2) !important; border-color:var(--m-border-2) !important; }

/* Stat card */
.m-stat { background:var(--m-surface); border:1px solid var(--m-border); border-radius:var(--m-r-lg); box-shadow:var(--m-sh-1); padding:20px; }
.m-stat-label { font-size:13px; font-weight:700; color:var(--m-text-soft); }
.m-stat-value { font-family:var(--m-mono); font-size:34px; font-weight:700; color:var(--m-ink); letter-spacing:-.02em; line-height:1.1; margin-top:6px; }

/* ---- Forms ------------------------------------------------------------ */
.form-control, .form-select, .input-group-text, textarea.form-control {
  background:var(--m-surface) !important; color:var(--m-ink) !important;
  border:1px solid var(--m-border-2) !important; border-radius:var(--m-r) !important;
  font-family:var(--m-font) !important; font-size:14px !important;
  min-height:44px; padding:0 14px;
}
textarea.form-control { padding:11px 14px; min-height:auto; }
.form-control:focus, .form-select:focus {
  border-color:var(--m-primary) !important;
  box-shadow:0 0 0 3px var(--m-primary-tint) !important;
}
.form-control::placeholder { color:var(--m-muted) !important; }
.form-label, label { font-size:13px !important; font-weight:600 !important; color:var(--m-text) !important; margin-bottom:7px; }
.form-control.is-invalid, .is-invalid .form-control { border-color:var(--m-danger) !important; box-shadow:0 0 0 3px var(--m-danger-tint) !important; }
.invalid-feedback, .text-danger { color:var(--m-danger) !important; }

/* Choices.js (searchable selects) */
.choices[data-type*="select-one"] .choices__inner {
  border:1px solid var(--m-border-2) !important; border-radius:var(--m-r) !important;
  background:var(--m-surface) !important; min-height:44px !important; height:44px !important;
}
.choices__list--dropdown { border:1px solid var(--m-border-2) !important; border-radius:0 0 var(--m-r) var(--m-r) !important; background:var(--m-surface) !important; box-shadow:var(--m-sh-2) !important; }
.choices__item--selectable.is-highlighted, .choices__item--selectable.is-selected { background:var(--m-primary-tint) !important; color:var(--m-primary) !important; }

/* ---- Tables ----------------------------------------------------------- */
.table { color:var(--m-text); --bs-table-bg:transparent; margin-bottom:0; }
.table > thead th, .table thead th {
  background:var(--m-surface-2) !important; color:var(--m-muted) !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--m-border) !important; padding:11px 16px !important;
}
.table > tbody td, .table tbody td {
  border-bottom:1px solid var(--m-border) !important; color:var(--m-text);
  font-size:14px; padding:13px 16px !important; vertical-align:middle;
}
.table tbody tr { transition:background .12s; }
.table tbody tr:hover { background:var(--m-surface-2) !important; }
.table-responsive { border-radius:var(--m-r-lg); }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border:1px solid var(--m-border-2) !important; border-radius:var(--m-r-sm); background:var(--m-surface); color:var(--m-ink); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background:var(--m-primary) !important; border-color:var(--m-primary) !important; color:#fff !important; border-radius:var(--m-r-sm); }

/* ---- Badges / chips --------------------------------------------------- */
.badge, .m-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--m-font); font-size:11.5px; font-weight:600;
  padding:3px 10px; border-radius:var(--m-r-pill); line-height:1.4;
}
.m-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
/* status badges become soft pills with a leading dot — covers Soft UI solid + gradient variants */
.badge.bg-gradient-info, .badge.bg-gradient-primary, .badge.bg-gradient-success,
.badge.bg-gradient-warning, .badge.bg-gradient-danger, .badge.bg-gradient-secondary,
.badge.bg-gradient-dark {
  box-shadow:none !important; border:0 !important;
}
.badge[class*="bg-"]::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.m-chip-info,.badge.bg-info,.badge.bg-primary,.badge.bg-gradient-info,.badge.bg-gradient-primary    { color:var(--m-info)    !important; background:var(--m-info-tint)    !important; }
.m-chip-success,.badge.bg-success,.badge.bg-gradient-success                { color:var(--m-success) !important; background:var(--m-success-tint) !important; }
.m-chip-warning,.badge.bg-warning,.badge.bg-gradient-warning                { color:var(--m-warning) !important; background:var(--m-warning-tint) !important; }
.m-chip-danger,.badge.bg-danger,.badge.bg-gradient-danger                  { color:var(--m-danger)  !important; background:var(--m-danger-tint)  !important; }
.m-chip-neutral,.badge.bg-secondary,.badge.bg-light,.badge.bg-gradient-secondary,.badge.bg-gradient-dark { color:var(--m-neutral) !important; background:var(--m-neutral-tint) !important; }

/* ---- Tabs ------------------------------------------------------------- */
.nav-tabs { border-bottom:1px solid var(--m-border); gap:4px; }
.nav-tabs .nav-link {
  border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  color:var(--m-text-soft); font-weight:600; font-size:14px; padding:10px 14px; background:transparent;
}
.nav-tabs .nav-link:hover { color:var(--m-ink); border-color:transparent; }
.nav-tabs .nav-link.active { color:var(--m-primary); border-bottom-color:var(--m-primary); background:transparent; font-weight:700; }

/* ---- Modals / dropdowns ----------------------------------------------- */
.modal-content { background:var(--m-surface) !important; border:1px solid var(--m-border) !important; border-radius:var(--m-r-xl) !important; box-shadow:var(--m-sh-3) !important; }
.modal-header, .modal-footer { border-color:var(--m-border) !important; }
.dropdown-menu { background:var(--m-surface) !important; border:1px solid var(--m-border) !important; border-radius:var(--m-r-lg) !important; box-shadow:var(--m-sh-2) !important; padding:6px; }
.dropdown-item { border-radius:var(--m-r-sm); font-size:14px; color:var(--m-text); padding:8px 12px; }
.dropdown-item:hover { background:var(--m-surface-2); color:var(--m-ink); }

/* ---- Segmented control (tabs / view toggle) --------------------------- */
.dvt-toggle { display:inline-flex; background:var(--m-surface-2); border:1px solid var(--m-border); border-radius:var(--m-r); padding:3px; box-shadow:none; flex-wrap:wrap; gap:2px; }
.dvt-toggle a { display:inline-flex; align-items:center; font-size:13px; font-weight:600; color:var(--m-text-soft); text-decoration:none; padding:7px 14px; border-radius:7px; transition:background .15s,color .15s; white-space:nowrap; }
.dvt-toggle a:hover { color:var(--m-ink); background:var(--m-surface); }
.dvt-toggle a.active { background:var(--m-primary); color:#fff; box-shadow:none; }
.dvt-toggle a.active:hover { background:var(--m-primary-hover); color:#fff; }

/* ---- AI surface ------------------------------------------------------- */
.m-ai-card { background:var(--m-ai-grad); border:1px solid var(--m-primary-border); border-radius:var(--m-r-lg); box-shadow:var(--m-sh-ai); padding:20px 22px; }
.m-ai-pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--m-primary); background:var(--m-primary-tint); border:1px solid var(--m-primary-border); border-radius:var(--m-r-pill); padding:4px 10px; }

/* ---- Project detail (shared by Overview / Payments / AMC tabs) -------- */
.pd-page { max-width:1320px; margin:0 auto; }
.pd-crumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--m-muted); margin-bottom:14px; }
.pd-crumb a { color:var(--m-muted); text-decoration:none; } .pd-crumb a:hover { color:var(--m-primary); }
.pd-crumb-cur { color:var(--m-text); font-weight:600; }
.pd-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.pd-head-left { display:flex; align-items:flex-start; gap:16px; min-width:0; }
.pd-avatar { width:52px; height:52px; border-radius:13px; background:var(--m-ink); color:#fff; font-size:17px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.pd-title-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pd-title { font-size:28px; font-weight:900; letter-spacing:-.03em; color:var(--m-ink); margin:0; line-height:1.1; }
.pd-sub { font-size:14px; color:var(--m-text-soft); margin:7px 0 0; }
.pd-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pd-btn, .pd-btn-primary, .pd-btn-ok { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:11px; font-weight:700; font-size:13.5px; cursor:pointer; text-decoration:none; border:1px solid var(--m-border-2); background:var(--m-surface); color:var(--m-text); transition:background .15s,transform .15s; }
.pd-btn:hover { background:var(--m-surface-2); color:var(--m-ink); }
.pd-btn-primary { border:0; background:var(--m-primary); color:#fff; box-shadow:0 10px 24px -10px rgba(38,100,236,.55); }
.pd-btn-primary:hover { background:var(--m-primary-hover); color:#fff; transform:translateY(-1px); }
.pd-btn-ok { border:0; background:var(--m-success); color:#fff; }
.pd-btn-ok:hover { filter:brightness(1.05); color:#fff; }
.pd-tabs { display:flex; gap:6px; border-bottom:1px solid var(--m-border); margin-bottom:20px; }
.pd-tab { padding:11px 14px; font-size:14px; font-weight:600; color:var(--m-text-soft); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.pd-tab:hover { color:var(--m-ink); }
.pd-tab.active { color:var(--m-primary); border-bottom-color:var(--m-primary); font-weight:700; }
.pd-alert { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; background:var(--m-danger-tint); border:1px solid #F4C9C9; border-radius:14px; padding:14px 18px; margin-bottom:20px; color:var(--m-danger); }
.pd-alert strong { color:var(--m-danger); font-size:14px; }
.pd-alert-list { font-size:12.5px; color:#9a3b3b; margin-top:5px; }
.pd-alert-btn { flex:none; height:34px; padding:0 14px; border-radius:9px; background:var(--m-danger); color:#fff; font-weight:700; font-size:13px; text-decoration:none; display:inline-flex; align-items:center; }
.pd-cols { display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
.pd-main, .pd-rail { display:flex; flex-direction:column; gap:20px; }
.pd-card { background:var(--m-surface); border:1px solid var(--m-border); border-radius:16px; box-shadow:var(--m-sh-2); padding:20px 22px; }
.pd-card.pd-flush { padding:0; overflow:hidden; }
.pd-mt { margin-top:20px; }
.pd-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.pd-card.pd-flush .pd-card-head { padding:18px 20px; margin-bottom:0; border-bottom:1px solid var(--m-border); }
.pd-card-title { font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--m-ink); margin:0; }
.pd-card-sub { font-size:13px; color:var(--m-text-soft); margin:3px 0 0; }
.pd-steps { display:flex; flex-direction:column; gap:4px; }
.pd-step { display:flex; gap:12px; padding:6px 0; }
.pd-step-ic { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.pd-step-ic.is-done { background:var(--m-success-tint); color:var(--m-success); }
.pd-step-ic.is-wait { background:var(--m-warning-tint); color:var(--m-warning); }
.pd-step-title { font-size:14px; font-weight:700; color:var(--m-ink); }
.pd-step-meta { font-size:12.5px; color:var(--m-text-soft); margin-top:2px; }
.pd-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.pd-meta-label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--m-muted); font-weight:700; margin-bottom:4px; }
.pd-meta-val { font-size:14.5px; color:var(--m-ink); font-weight:600; }
.pd-note { font-size:14px; line-height:1.6; color:var(--m-text-soft); margin:6px 0 0; }
.pd-detail-list { display:flex; flex-direction:column; }
.pd-detail { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--m-border); }
.pd-detail:last-child { border-bottom:0; }
.pd-detail-k { font-size:13px; color:var(--m-text-soft); }
.pd-detail-v { font-size:13.5px; font-weight:600; color:var(--m-ink); display:inline-flex; align-items:center; gap:8px; text-align:right; }
.pd-pm-av { width:24px; height:24px; border-radius:50%; background:var(--m-primary); color:#fff; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.pd-action-box { background:var(--m-primary-tint); border:1px solid var(--m-primary-border); border-radius:12px; padding:16px; }
.pd-action-title { font-size:15px; font-weight:800; color:var(--m-ink); }
.pd-action-desc { font-size:13px; color:var(--m-text-soft); margin:6px 0 12px; line-height:1.5; }
.pd-action-link { font-size:13.5px; font-weight:700; color:var(--m-primary); text-decoration:none; }
.pd-table { width:100%; border-collapse:collapse; }
.pd-table thead th { background:var(--m-surface-2); color:var(--m-muted); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:11px 16px; border-bottom:1px solid var(--m-border); white-space:nowrap; }
.pd-table tbody td { padding:12px 16px; border-bottom:1px solid var(--m-border); font-size:13px; color:var(--m-text); vertical-align:middle; }
.pd-table tbody tr:last-child td { border-bottom:0; }
.pd-table tbody tr:hover { background:var(--m-surface-2); }
.pd-table .ta-r { text-align:right; }
.pd-muted { color:var(--m-text-soft); }
.pd-tempty { text-align:center; color:var(--m-muted); padding:28px 16px; }
.pd-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.pd-stat { background:var(--m-surface); border:1px solid var(--m-border); border-radius:14px; padding:16px 18px; box-shadow:var(--m-sh-1); }
.pd-stat-label { font-size:12.5px; font-weight:600; color:var(--m-text-soft); text-transform:uppercase; letter-spacing:.04em; }
.pd-stat-val { font-family:var(--m-mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:700; color:var(--m-ink); letter-spacing:-.02em; margin-top:6px; line-height:1.1; }
/* action pills (payment/amc row actions) */
.pd-act { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; text-decoration:none; border:1px solid var(--m-border-2); border-radius:8px; padding:5px 10px; background:var(--m-surface); color:var(--m-text); cursor:pointer; transition:background .12s; line-height:1; }
.pd-act:hover { background:var(--m-surface-2); }
.pd-act-primary { color:var(--m-primary); border-color:var(--m-primary-border); background:var(--m-primary-tint); }
.pd-act-success { color:var(--m-success); border-color:#A7E3BE; background:var(--m-success-tint); }
.pd-act-warning { color:var(--m-warning); border-color:#F3D9A8; background:var(--m-warning-tint); }
.pd-act-info { color:var(--m-info); border-color:var(--m-primary-border); background:var(--m-info-tint); }
.pd-act-dark { color:var(--m-ink); border-color:var(--m-border-2); background:var(--m-surface-2); }
.pd-act-danger { color:var(--m-danger); border-color:#F4C9C9; background:var(--m-danger-tint); }
.tone-danger { color:var(--m-danger) !important; }
.tone-success { color:var(--m-success) !important; }
@media (max-width:992px){ .pd-cols { grid-template-columns:1fr; } .pd-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pd-stats { grid-template-columns:1fr; } }

/* ===========================================================================
   5. UTILITIES
   =========================================================================== */
.m-surface { background:var(--m-surface); }
.text-ink { color:var(--m-ink) !important; }
.text-soft { color:var(--m-text-soft) !important; }
.text-muted, .text-secondary { color:var(--m-muted) !important; }
.bg-app { background:var(--m-bg) !important; }
.m-divider { height:1px; background:var(--m-border); border:0; }

/* success toast (global flash) */
.m-toast { position:fixed; right:18px; bottom:18px; z-index:9999; background:var(--m-success); color:#fff; font-weight:600; font-size:14px; padding:11px 16px; border-radius:var(--m-r); box-shadow:var(--m-sh-2); }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }