:root{
  --brand:#2f7ce0;
  --brand-dark:#1b3a63;
  --brand-light:#eaf1fb;
  --ink:#22303f;
  --muted:#6b7a8d;
  --sidebar:#1b2a41;
  --sidebar-2:#22344f;
  --ok:#1f9d55;
  --warn:#c98a00;
  --danger:#d43f3f;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:'Segoe UI',system-ui,Arial,sans-serif;color:var(--ink);
  background:#f4f6fb;
}
a{text-decoration:none}

/* ---------- Login ---------- */
#login-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1b3a63,#2f7ce0);z-index:2000;
}
.login-card{
  width:360px;max-width:92vw;background:#fff;border-radius:14px;padding:34px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.login-logo .wm{font-size:26px;font-weight:800;color:var(--brand-dark);letter-spacing:1px}
.login-sub{color:var(--muted);font-size:13px;margin-bottom:22px}

/* ---------- Layout ---------- */
#app{display:none}
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:238px;background:var(--sidebar);
  color:#c7d3e3;overflow-y:auto;z-index:1030;transition:transform .2s;
}
.sidebar .brand{
  display:flex;align-items:center;gap:9px;padding:16px 18px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .brand .wm{font-weight:800;letter-spacing:1px;font-size:19px}
.sidebar .nav-section{padding:12px 18px 4px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#6f83a0}
.sidebar a.nav-link{
  display:flex;align-items:center;gap:11px;color:#c7d3e3;padding:9px 18px;font-size:14px;border-left:3px solid transparent;
}
.sidebar a.nav-link i{width:18px;text-align:center;font-size:15px}
.sidebar a.nav-link:hover{background:var(--sidebar-2);color:#fff}
.sidebar a.nav-link.active{background:var(--sidebar-2);color:#fff;border-left-color:var(--brand)}

.topbar{
  position:fixed;top:0;left:238px;right:0;height:58px;background:#fff;z-index:1020;
  display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid #e6ebf2;
}
.topbar .search{flex:1;max-width:460px;position:relative}
.topbar .search input{padding-left:34px}
.topbar .search i{position:absolute;left:11px;top:9px;color:var(--muted)}
.search-results{
  position:absolute;top:42px;left:0;right:0;background:#fff;border:1px solid #e6ebf2;border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);max-height:340px;overflow:auto;display:none;z-index:60;
}
.search-results a{display:block;padding:8px 12px;color:var(--ink);font-size:13px;border-bottom:1px solid #f1f4f8}
.search-results a:hover{background:var(--brand-light)}
.search-results .grp{padding:6px 12px;font-size:11px;text-transform:uppercase;color:var(--muted);background:#f7f9fc}

.content{margin-left:238px;padding:78px 22px 40px}
.page-title{font-size:20px;font-weight:700;color:var(--brand-dark);margin:0}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}

/* ---------- Cards & KPIs ---------- */
.card{border:1px solid #e9edf3;border-radius:12px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.card-header{background:#fff;border-bottom:1px solid #eef1f6;font-weight:600;border-radius:12px 12px 0 0}
.kpi{border-radius:12px;padding:16px 18px;color:#fff;position:relative;overflow:hidden}
.kpi .v{font-size:24px;font-weight:800;line-height:1}
.kpi .l{font-size:12.5px;opacity:.92;margin-top:6px}
.kpi i{position:absolute;right:12px;top:12px;font-size:34px;opacity:.22}
.kpi.b1{background:linear-gradient(135deg,#2f7ce0,#1b3a63)}
.kpi.b2{background:linear-gradient(135deg,#1f9d55,#0f7a3d)}
.kpi.b3{background:linear-gradient(135deg,#c98a00,#a06d00)}
.kpi.b4{background:linear-gradient(135deg,#7b53d6,#5a37ad)}
.kpi.b5{background:linear-gradient(135deg,#e0685b,#c23b2c)}
.kpi.b6{background:linear-gradient(135deg,#0ea5a5,#0b7d7d)}

/* ---------- Tables ---------- */
.table{font-size:14px}
.table thead th{background:#f6f8fc;color:#43566b;font-weight:600;border-bottom:1px solid #e6ebf2;white-space:nowrap}
.table td{vertical-align:middle}
.badge-soft{padding:.32em .6em;border-radius:20px;font-size:11.5px;font-weight:600}
.st-Paid,.st-Active,.st-Won,.st-Approved,.st-Finalized,.st-Closed{background:#e4f6ec;color:#1f7a44}
.st-Pending,.st-Draft,.st-New,.st-Open{background:#eef1f6;color:#5b6b7d}
.st-Partial,.st-InProgress,.st-Sent{background:#fff2d9;color:#96690a}
.st-Cancelled,.st-Rejected,.st-Lost,.st-Expired{background:#fbe4e4;color:#a52c2c}
.st-Converted,.st-Renewed{background:#e7eefc;color:#2f5fb0}

.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{background:#276bc7;border-color:#276bc7;color:#fff}
.text-brand{color:var(--brand)}
.icon-btn{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:6px}
.icon-btn:hover{background:#f0f3f8;color:var(--brand)}

.item-row td{padding:.35rem}
.empty{padding:36px;text-align:center;color:var(--muted)}
.hamburger{display:none;border:none;background:transparent;font-size:20px}

@media (max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:translateX(0)}
  .topbar{left:0}
  .content{margin-left:0}
  .hamburger{display:inline-block}
}