/* VSG Enterprise - admin panel */
:root{--navy:#0a2f6b;--navy2:#071f4a;--blue:#1688e0;--leaf:#3f9e1a;--sun:#f7931e;--gold:#ffc21a;--ink:#102033;--mute:#5b6b82;--line:#e3eaf4;--bg:#f2f6fb;--card:#fff;--r:14px}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 "Nunito Sans",system-ui,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:Sora,"Nunito Sans",system-ui,sans-serif;margin:0;line-height:1.2}
[hidden]{display:none!important}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mut{color:var(--mute)}
.err{color:#c62828;font-weight:700;margin:12px 0 0;background:#fdeaea;border-radius:10px;padding:9px 12px;font-size:14px}

/* buttons */
.btn{border:0;font:700 14.5px "Nunito Sans",sans-serif;padding:11px 20px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,box-shadow .15s,background .15s;min-height:42px}
.btn.pri{background:linear-gradient(135deg,var(--sun),var(--gold));color:#2b1a00;box-shadow:0 6px 16px rgba(247,147,30,.32)}
.btn.pri:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(247,147,30,.4)}
.btn.s{padding:8px 15px;font-size:13.5px;min-height:38px}
.btn.ghost{background:#e8eff9;color:var(--navy)}.btn.ghost:hover{background:#d9e5f6}
.btn.out{background:#fff;color:var(--navy)}.btn.out:hover{background:#ffe9c9}
.btn:disabled{opacity:.6;cursor:wait;transform:none}

/* form fields */
label{display:block;font-weight:700;font-size:13.5px;margin:14px 0 6px;color:#233750}
input,select,textarea{font:inherit;width:100%;padding:11px 12px;border:1.5px solid #cfd9e8;border-radius:11px;background:#fff;color:inherit;min-height:44px}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(22,136,224,.22);border-color:var(--blue)}
textarea{resize:vertical}

/* loading */
.boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--mute);font-weight:700;background:var(--bg);z-index:30}
.spin{width:30px;height:30px;border-radius:50%;border:3px solid #cfdcf0;border-top-color:var(--sun);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ============ LOGIN ============ */
.lg-page{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.05fr 1fr}
.lg-side{position:relative;overflow:hidden;color:#fff;padding:40px clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:28px;
 background:
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/54px 54px,
  linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/54px 54px,
  linear-gradient(160deg,#0a2f6b 0%,#071f4a 70%)}
.lg-art{position:absolute;right:-60px;top:-60px;width:min(520px,70%);pointer-events:none}
.lg-brand{position:relative;display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:800 19px Sora,sans-serif;line-height:1.1}
.lg-brand img{height:52px;background:#fff;border-radius:12px;padding:4px}
.lg-brand small{display:block;font:700 12px "Nunito Sans",sans-serif;color:var(--gold);margin-top:4px}
.lg-copy{position:relative;margin:auto 0;max-width:520px}
.lg-copy h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.01em}
.lg-copy p{color:#c9daf0;font-size:16.5px;margin:16px 0 22px;max-width:46ch}
.lg-copy ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.lg-copy li{display:flex;align-items:center;gap:12px;font-weight:600;color:#eaf2fb}
.lg-copy li i{font-style:normal;flex:none;width:24px;height:24px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;font-size:13px}
.lg-foot{position:relative;margin:0;color:#9db5d3;font-size:13.5px}
.lg-main{display:grid;place-items:center;padding:28px 20px;background:var(--bg)}
.lg-card{width:100%;max-width:420px;background:#fff;border-radius:22px;padding:34px 30px 26px;box-shadow:0 18px 50px rgba(10,47,107,.14);border:1px solid var(--line)}
.lg-card h1{font-size:27px;color:var(--navy);font-weight:800}
.lg-sub{margin:6px 0 8px;color:var(--mute)}
.fld{position:relative}
.fld .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.75;pointer-events:none}
.fld input{padding-left:40px}
.fld .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--navy);font:700 13px "Nunito Sans",sans-serif;cursor:pointer;padding:8px 10px;border-radius:8px}
.fld .eye:hover{background:#e8eff9}
.fld input#lp{padding-right:68px}
.lg-card .btn.pri{width:100%;margin-top:20px;min-height:48px;font-size:15.5px}
.lg-back{display:block;text-align:center;margin-top:16px;font-weight:700;font-size:14px;text-decoration:none;color:var(--mute)}.lg-back:hover{color:var(--navy)}

/* ============ DASHBOARD ============ */
.top{display:flex;align-items:center;gap:10px;padding:10px clamp(14px,3vw,28px);background:linear-gradient(100deg,var(--navy2),var(--navy));color:#fff;flex-wrap:wrap;position:sticky;top:0;z-index:20;box-shadow:0 4px 18px rgba(7,31,74,.25)}
.top .sp{flex:1}
.tb{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 17px Sora,sans-serif;line-height:1.1}
.tb img{height:40px;background:#fff;border-radius:10px;padding:3px}
.tb small{display:block;font:600 11.5px "Nunito Sans",sans-serif;color:var(--gold);margin-top:3px}
.who{display:flex;align-items:center;gap:8px;font-weight:700;margin-right:6px}
.who i{font-style:normal;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#2b1a00;display:grid;place-items:center;font-weight:800}
.top .btn.ghost{background:rgba(255,255,255,.12);color:#fff}.top .btn.ghost:hover{background:rgba(255,255,255,.22)}

.wrap{max-width:1240px;margin:0 auto;padding:22px clamp(14px,3vw,28px) 48px}
.hello{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.hello h1{font-size:clamp(22px,3vw,28px);color:var(--navy)}
.hello p{margin:4px 0 0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.card{background:var(--card);border-radius:var(--r);padding:16px 18px;border:1px solid var(--line);display:flex;align-items:center;gap:14px;border-left:5px solid var(--c,var(--navy))}
.card .ci{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--c,var(--navy)) 14%,#fff);flex:none}
.card b{display:block;font:800 28px/1.05 Sora,sans-serif;color:var(--ink)}
.card small{color:var(--mute);font-weight:600}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1.5px solid #cfd9e8;background:#fff;color:#233750;border-radius:999px;padding:7px 14px;font:700 13.5px "Nunito Sans",sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:38px}
.chip:hover{border-color:var(--blue)}
.chip em{font-style:normal;background:#eaf0f9;border-radius:99px;padding:1px 9px;font-size:12.5px}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}.chip.on em{background:rgba(255,255,255,.2);color:#fff}

.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 16px 16px;margin-bottom:16px}
.fl1{flex:1 1 150px;min-width:140px}.fl1.grow{flex:2 1 240px}
.fl1 label{margin-top:10px}
.fact{display:flex;gap:8px;flex-wrap:wrap}

.tw{overflow-x:auto;background:#fff;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 6px 22px rgba(10,47,107,.06)}
table{width:100%;border-collapse:collapse;min-width:860px}
th,td{padding:13px 14px;text-align:left;border-bottom:1px solid #edf1f7;vertical-align:top}
tbody tr:hover{background:#f8fbff}tbody tr:last-child td{border-bottom:0}
th{background:#f4f7fc;font-size:12.5px;font-weight:800;color:var(--mute);position:sticky;top:0}
td small{color:var(--mute);display:block;margin-top:2px}.det{max-width:340px;overflow-wrap:anywhere}
td a{font-weight:700}
.tag{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12.5px;font-weight:800;background:#e6edf8;color:var(--navy)}
.tag.complaint{background:#fdeaea;color:#c62828}.tag.service{background:#fff1de;color:#b25e00}.tag.quote{background:#e5f6e0;color:#2c7a12}
.pill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12.5px;font-weight:800;background:#e6edf8;color:var(--navy);white-space:nowrap}
.pill.s1{background:#fff1de;color:#b25e00}.pill.s2{background:#e3f1fd;color:#0b62a8}.pill.s3{background:#ece6fb;color:#5b34b5}.pill.s4{background:#e0f4f4;color:#0b7a7a}
.pill.s5{background:#e5f6e0;color:#2c7a12}.pill.s6{background:#eceff3;color:#4a5a70}.pill.s7{background:#fdeaea;color:#c62828}
.cnt{margin:12px 2px 0;font-size:13.5px}
.empty{text-align:center;padding:38px 14px!important;color:var(--mute)}.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* modal */
.mod{position:fixed;inset:0;background:rgba(5,15,35,.58);display:grid;place-items:center;padding:14px;z-index:50}
.mbox{background:#fff;border-radius:20px;padding:24px;width:100%;max-width:520px;max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.mbox h2{font-size:19px;color:var(--navy)}.mbox h3{margin:22px 0 6px;font-size:15px}.mbox>p{margin:4px 0 0}
.row{display:flex;gap:10px;margin-top:16px}
.hist div{padding:9px 0;border-bottom:1px solid #edf1f7;font-size:14px}.hist small{color:var(--mute)}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--navy2);color:#fff;font-weight:700;padding:12px 20px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:60}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
 .lg-page{grid-template-columns:1fr}
 .lg-side{padding:26px 22px 30px;gap:16px}
 .lg-copy{margin:6px 0 0}.lg-copy ul,.lg-foot,.lg-art{display:none}
 .lg-copy h2{font-size:26px}.lg-copy p{margin:10px 0 0;font-size:15px}
 .lg-main{align-items:start;margin-top:-18px;padding-top:0}
 .lg-card{position:relative;padding:28px 22px 22px}
}
@media(max-width:720px){
 .top .btn.ghost[href]{display:none}
 .who span{display:none}
 .filters{padding:4px 14px 14px}
 .fact{width:100%}.fact .btn{flex:1}
 /* table -> cards */
 .tw{background:none;border:0;box-shadow:none;overflow:visible}
 table,thead,tbody,tr,td{display:block;min-width:0;width:100%}
 thead{display:none}
 tbody tr{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;box-shadow:0 4px 14px rgba(10,47,107,.06)}
 tbody tr:hover{background:#fff}
 td{border:0;padding:6px 0;display:grid;grid-template-columns:78px 1fr;gap:8px}
 td:before{content:attr(data-l);font-size:12px;font-weight:800;color:var(--mute);padding-top:2px}
 td.act:before,td.empty:before{display:none}td.act,td.empty{display:block}
 td.act .btn{width:100%;margin-top:6px}
 .det{max-width:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- new design (matches theme.css) ---- */
:root{--navy:#1a2260;--navy2:#0b0f2a;--blue:#1aa3ee;--leaf:#2538b8;--sun:#1a2260;--gold:#0b0f2a;--bg:#f3f6fc;--line:#e6e9f2}
body{font-family:'DM Sans',system-ui,"Segoe UI",Arial,sans-serif}
h1,h2,h3{font-family:Poppins,'DM Sans',system-ui,sans-serif}
.btn{font-family:Poppins,'DM Sans',sans-serif;font-weight:600}
.btn.pri{background:linear-gradient(135deg,#0f1f9e,#0b0f2a);color:#fff;box-shadow:0 8px 20px rgba(15,31,158,.28)}
.btn.pri:hover{box-shadow:0 12px 26px rgba(15,31,158,.38)}
.btn.out:hover{background:#eef1ff}
.spin{border-top-color:#0f1f9e}
:focus-visible{outline-color:#1aa3ee}