/* ==========================================================================
   Neolina CRM — "Plum" brand theme (Sep 2026)
   Loaded AFTER app.css and after the Admin-Settings brand-colour override,
   so it restyles every page without touching any page logic.
   To go back to the old look: remove the one <link> to this file in
   includes/layout_top.php.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ---------- Tokens: dark mode (default when the user has not picked light) ---------- */
html:root{
  --navy-deep:#12070F;
  --navy-elev:#1B0A18;
  --navy-elev-2:#241020;
  --teal:#FF6FA5;
  --teal-glow:#FF6FA5;
  --white:#F6EEF2;
  --muted:#B7A3AF;
  --amber:#FFB86B;
  --rose:#FF7A7A;
  --emerald:#7EE2A8;
  --border:rgba(255,255,255,0.08);
  --border-hi:rgba(255,111,165,0.45);
  --nav-active-bg:rgba(255,111,165,0.16);
  --on-accent:#1B0A18;
  --shadow:0 1px 2px rgba(0,0,0,0.45);
  --shadow-lifted:0 24px 60px rgba(0,0,0,0.5);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:16px;
  --brand:#B0154F;
  --brand-d:#8A0F3D;
  --brand-l:#FF6FA5;
  --plum:#1B0A18;
  --font-body:'DM Sans','Inter',-apple-system,sans-serif;
  --font-display:'Bricolage Grotesque','DM Sans','Inter',sans-serif;
}

/* ---------- Tokens: light mode ---------- */
html.light:root{
  --navy-deep:#F7F3F5;
  --navy-elev:#FFFFFF;
  --navy-elev-2:#FBF6F8;
  --teal:#B0154F;
  --teal-glow:#B0154F;
  --white:#1D1320;
  --muted:#6B5F6E;
  --amber:#A15C00;
  --rose:#B3261E;
  --emerald:#1F7A4D;
  --border:rgba(29,19,32,0.09);
  --border-hi:rgba(176,21,79,0.35);
  --nav-active-bg:rgba(255,111,165,0.16);
  --on-accent:#FFFFFF;
  --shadow:0 1px 3px rgba(29,19,32,0.06);
  --shadow-lifted:0 24px 50px rgba(29,19,32,0.16);
}

/* ---------- Typography ---------- */
body{font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
h1,h2,h3,.display,.breadcrumb,.panel-head h3,.side-logo span{font-family:var(--font-display); letter-spacing:-0.02em;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:27px; letter-spacing:-0.02em;}
.search-box input,.filter-select,input,select,textarea,button{font-family:inherit;}

/* ---------- Sidebar: always plum, in both themes ---------- */
.sidebar{background:#1B0A18; border-right:1px solid #2E1A28; color:#CDBAC6;}
.side-logo{border-bottom:1px solid #2E1A28;}
.side-logo span{color:#FFFFFF; font-weight:800;}
.side-logo .brand-mark{background:var(--brand); color:#fff; border-radius:12px;}
.nav-group-title{color:#8A7282; letter-spacing:.12em;}
.nav-item{color:#CDBAC6; border-radius:10px;}
.nav-item i:first-child{color:#9C8594;}
.nav-item:hover{background:rgba(255,255,255,0.06); color:#FFFFFF;}
.nav-item:hover i:first-child{color:#FFFFFF;}
.nav-item.active{background:rgba(255,111,165,0.16); color:#FFFFFF; font-weight:600;}
.nav-item.active i:first-child{color:#FF6FA5;}
.nav-item.active::before{background:#FF6FA5;}
.nav-badge{background:var(--brand); color:#fff;}
.side-collapse-btn{border-color:#2E1A28; color:#CDBAC6;}
.side-collapse-btn:hover{color:#FFFFFF; border-color:rgba(255,111,165,0.45);}
.sidebar ::-webkit-scrollbar-thumb{background:#33182C;}

/* ---------- Top bar ---------- */
.topbar{background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px);}
.breadcrumb{font-weight:800; font-size:18px;}
.search-box{border-radius:12px;}
.search-box:focus-within{border-color:var(--border-hi); box-shadow:0 0 0 4px rgba(176,21,79,0.10);}
.icon-btn{border-radius:12px;}
.avatar-circ{background:var(--brand-l); color:var(--plum); font-weight:700;}
html.light .avatar-circ{background:var(--brand); color:#fff;}

/* ---------- Cards / panels ---------- */
.stat-card,.panel{border-radius:16px; box-shadow:var(--shadow);}
.stat-card:hover{transform:translateY(-2px); border-color:var(--border-hi);}
.stat-icon{border-radius:11px;}
.panel-head h3{font-weight:700; font-size:15.5px;}

/* ---------- Tables ---------- */
thead th{letter-spacing:.07em; font-weight:700;}
html.light thead th{background:#FCFAFB;}
html.light tbody tr:hover{background:#FDF8FA;}
tbody tr:hover{background:rgba(255,111,165,0.05);}

/* ---------- Buttons ---------- */
.btn-primary,.login-btn{background:var(--brand); color:#FFFFFF; border-radius:12px; font-weight:700;}
.btn-primary:hover,.login-btn:hover{background:var(--brand-d); color:#FFFFFF;}
html:not(.light) .btn-primary,html:not(.light) .login-btn{background:var(--brand-l); color:var(--plum);}
html:not(.light) .btn-primary:hover,html:not(.light) .login-btn:hover{background:#FF8FB8;}
.btn-sm{border-radius:10px;}
.btn-sm:hover{border-color:var(--border-hi); color:var(--teal-glow);}
.vt-btn.active{background:var(--teal); color:var(--on-accent);}
.filter-select{border-radius:10px;}
.filter-select:focus{box-shadow:0 0 0 4px rgba(176,21,79,0.10);}

/* ---------- Badges & toasts keep their meaning, softer shapes ---------- */
.badge{border-radius:999px;}
.toast{border-radius:14px;}

/* ---------- Login screen ---------- */
.login-wrap{background:#12070F; background-image:radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);}
.blob1{background:radial-gradient(circle, rgba(176,21,79,0.35) 0%, transparent 65%);}
.login-card{border-radius:20px;}
.brand-mark{background:var(--brand); color:#fff;}