:root{
  --navy:#0E294A; --cyan:#5BAAAE; --gray:#8E8E8E;
  --white:#FFFFFF; --border:#E5E7EB; --bg:#F3F4F6;
  --text:#111827; --sm:#4B5563; --r:8px; --t:0.18s ease;
  --sb:240px; --topbar:54px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Aptos','Segoe UI',-apple-system,Helvetica,Arial,sans-serif;font-size:14px;color:var(--text);background:var(--bg);}

/* ══ LOGIN ═══════════════════════════════════════ */
#loginScreen{min-height:100vh;display:flex;}
.ll{width:44%;min-width:360px;background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:64px 72px;}
.lr{flex:1;background:linear-gradient(145deg,#0E294A 0%,#125060 45%,#5BAAAE 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.lr::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 25% 40%,rgba(91,170,174,0.25) 0%,transparent 60%);pointer-events:none;}
.ll-brand{display:flex;align-items:center;gap:12px;margin-bottom:40px;}
.ll-brand img{height:36px;}
.ll-sep{width:1px;height:28px;background:var(--border);}
.ll-prod{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-0.4px;}
.ll-prod em{color:var(--cyan);font-style:normal;}
.ll-prod sup{font-size:9px;color:var(--gray);}
.ll-by{font-size:10px;color:var(--gray);margin-top:2px;}
.ll h1{font-size:26px;font-weight:800;color:var(--navy);margin-bottom:6px;}
.ll-sub{font-size:13px;color:var(--gray);margin-bottom:28px;}
.lf-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--navy);display:block;margin-bottom:6px;}
.lf-wrap{position:relative;margin-bottom:15px;}
.lf-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#BDBDBD;font-size:13px;pointer-events:none;font-style:normal;}
.lf-in{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--border);border-radius:var(--r);font-size:14px;font-family:inherit;color:var(--text);outline:none;background:#F9FAFB;transition:border-color var(--t),background var(--t);}
.lf-in:focus{border-color:var(--cyan);background:var(--white);}
.lf-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.lf-rem{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sm);cursor:pointer;}
.lf-rem input{accent-color:var(--cyan);}
.lf-forgot{font-size:12px;font-weight:600;color:var(--cyan);background:none;border:none;cursor:pointer;font-family:inherit;padding:0;}
.btn-lg{width:100%;padding:12px;background:var(--cyan);color:var(--white);border:none;border-radius:var(--r);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:background var(--t);}
.btn-lg:hover{background:#4a9598;}
.l-err{font-size:12px;color:#c0392b;margin-top:10px;padding:8px 12px;background:#FFF5F5;border:1px solid #FFCDD2;border-radius:var(--r);display:none;}
.l-hints{margin-top:22px;border:1px solid var(--border);border-radius:var(--r);padding:13px 16px;background:#F9FAFB;}
.l-hints-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;color:var(--gray);margin-bottom:8px;}
.l-hint-row{display:flex;gap:8px;align-items:center;padding:3px 0;}
.l-role{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;border:1px solid var(--cyan);color:var(--cyan);text-transform:uppercase;letter-spacing:0.4px;width:56px;text-align:center;flex-shrink:0;}
.l-cred{font-size:12px;color:var(--sm);}
.l-cred strong{color:var(--navy);}
/* RIGHT PANEL */
.rp{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
.rp-logo{margin-bottom:36px;}
.rp-logo img{height:80px;filter:drop-shadow(0 4px 20px rgba(0,0,0,0.3));}
.rp-card-wrap{margin-bottom:36px;position:relative;}
.rp-bubble{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.28);display:flex;align-items:center;justify-content:center;font-size:16px;backdrop-filter:blur(4px);}
.rp-card{background:rgba(255,255,255,0.96);border-radius:12px;width:248px;padding:16px 18px;box-shadow:0 12px 48px rgba(0,0,0,0.22);}
.rp-dots{display:flex;gap:5px;margin-bottom:14px;}
.rp-dot{width:8px;height:8px;border-radius:50%;}
.rp-row{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.rp-row:last-child{margin-bottom:0;}
.rp-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;}
.rp-lines{flex:1;}
.rp-line{height:5px;border-radius:3px;background:#E8E8E8;margin-bottom:5px;}
.rp-line:last-child{margin-bottom:0;}
.rp-tl{text-align:center;color:var(--white);}
.rp-tl h2{font-size:24px;font-weight:800;letter-spacing:-0.3px;margin-bottom:8px;}
.rp-tl p{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.6;}
.rp-ind{display:flex;gap:6px;justify-content:center;margin-top:16px;}
.rp-ind span{height:7px;border-radius:4px;background:rgba(255,255,255,0.3);}
.rp-ind span.a{width:20px;background:rgba(255,255,255,0.9);}
.rp-ind span:not(.a){width:7px;}

/* ══ APP SHELL ═══════════════════════════════════ */
#app{display:flex;min-height:100vh;}

/* ══ SIDEBAR ═════════════════════════════════════ */
.sb{width:var(--sb);flex-shrink:0;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;overflow-y:auto;}
.sb-top{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.sb-top img{height:28px;}
.sb-top-text .pname{font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-0.3px;}
.sb-top-text .pname em{color:var(--cyan);font-style:normal;}
.sb-top-text .pname sup{font-size:8px;color:var(--gray);}
.sb-top-text .pby{font-size:9px;color:var(--gray);}
.sb-nav{flex:1;padding:10px 10px 0;}
.sb-sec{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#9CA3AF;padding:10px 8px 3px;}
.sb-item{display:flex;align-items:center;gap:9px;padding:8px 10px;font-size:13px;color:var(--sm);cursor:pointer;border-radius:6px;transition:all var(--t);border-left:2px solid transparent;user-select:none;}
.sb-item:hover{background:#F3F4F6;color:var(--text);}
.sb-item.active{background:#EEF9F9;color:var(--cyan);font-weight:600;}
.sb-item .si{font-size:14px;width:18px;text-align:center;flex-shrink:0;}
.sb-item .sa{margin-left:auto;font-size:10px;color:#9CA3AF;transition:transform var(--t);}
.sb-item.open .sa{transform:rotate(180deg);}
.sb-sub{padding-left:14px;overflow:hidden;max-height:0;transition:max-height 0.22s ease;}
.sb-sub.open{max-height:300px;}
.sb-sub-item{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 18px;font-size:12px;color:#6B7280;cursor:pointer;border-radius:6px;transition:all var(--t);}
.sb-sub-item:hover{background:#F3F4F6;color:var(--text);}
.sb-sub-item.active{background:#EEF9F9;color:var(--cyan);font-weight:600;}
.sb-sub-item .si{font-size:12px;width:14px;flex-shrink:0;}
.sb-foot{padding:12px 16px;border-top:1px solid var(--border);}
.sb-user{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.sb-av{width:32px;height:32px;border-radius:50%;background:var(--cyan);color:var(--white);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-uname{font-size:13px;font-weight:600;color:var(--navy);}
.sb-urole{font-size:10px;color:var(--gray);}
.sb-logout{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#EF4444;cursor:pointer;padding:5px 0;background:none;border:none;font-family:inherit;}
.sb-logout:hover{color:#c0392b;}

/* ══ MAIN ════════════════════════════════════════ */
.main{margin-left:var(--sb);flex:1;min-height:100vh;}
.topbar{height:var(--topbar);background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:100;gap:10px;}
.topbar-title{font-size:15px;font-weight:700;color:var(--navy);flex:1;}
.topbar-date{font-size:12px;color:var(--gray);}
.page{padding:24px;}

/* ══ PAGE HEADER ═════════════════════════════════ */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;}
.ph h2{font-size:24px;font-weight:800;color:var(--navy);line-height:1.1;}
.ph p{font-size:13px;color:var(--gray);margin-top:3px;}

/* ══ CARDS ═══════════════════════════════════════ */
.card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:20px;}
.card-hd{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--gray);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}

/* ══ KPI ═════════════════════════════════════════ */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:18px 20px;}
.kpi-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray);margin-bottom:10px;}
.kpi-val{font-size:32px;font-weight:800;color:var(--navy);line-height:1;margin-bottom:6px;}
.kpi-sub{font-size:11px;color:var(--gray);display:flex;align-items:center;gap:5px;}

/* ══ BADGE / PILL ════════════════════════════════ */
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:4px;font-weight:500;}
.bg{color:#2E7D32;background:#F0FBF0;border:1px solid #C8E6C9;}
.br{color:#c0392b;background:#FFF5F5;border:1px solid #FFCDD2;}
.by{color:#B45309;background:#FFFBEB;border:1px solid #FDE68A;}
.bb{color:var(--navy);background:#EEF4FD;border:1px solid #BBDEFB;}
.bc{color:#00796B;background:#F0FAF9;border:1px solid #B2DFDB;}

/* ══ TABLE ═══════════════════════════════════════ */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-size:12px;font-weight:600;color:var(--sm);padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);}
.tbl td{padding:11px 12px;border-bottom:1px solid #F3F4F6;font-size:13px;color:var(--text);}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover td{background:#FAFAFA;}

/* ══ SEARCH / FILTER ROW ═════════════════════════ */
.sr{display:flex;gap:10px;margin-bottom:16px;align-items:center;}
.si-in{padding:9px 12px 9px 36px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;outline:none;background:#F9FAFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;transition:border-color var(--t);}
.si-in:focus{border-color:var(--cyan);background-color:var(--white);}
.si-in.flex1{flex:1;}
.sel{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;outline:none;background:#F9FAFB;transition:border-color var(--t);color:var(--text);}
.sel:focus{border-color:var(--cyan);}

/* ══ BUTTONS ═════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:1px solid var(--border);border-radius:var(--r);font-size:12px;font-weight:500;font-family:inherit;background:var(--white);color:var(--sm);cursor:pointer;transition:all var(--t);}
.btn:hover{border-color:var(--cyan);color:var(--cyan);}
.btn-primary{background:var(--navy);color:var(--white);border-color:var(--navy);}
.btn-primary:hover{background:#16375f;color:var(--white);border-color:#16375f;}
.btn-cyan{background:var(--cyan);color:var(--white);border-color:var(--cyan);}
.btn-cyan:hover{background:#4a9598;color:var(--white);}
.btn-ok{background:#16A34A;color:var(--white);border-color:#16A34A;padding:6px 14px;font-size:12px;}
.btn-ok:hover{background:#15803d;color:var(--white);}
.btn-no{background:#DC2626;color:var(--white);border-color:#DC2626;padding:6px 14px;font-size:12px;}
.btn-no:hover{background:#b91c1c;color:var(--white);}
.btn-sm{padding:4px 10px;font-size:11px;}
.btn-icon{padding:5px 8px;font-size:13px;color:var(--gray);}
.btn-icon:hover{color:var(--cyan);border-color:var(--cyan);}
.btn-del{padding:5px 8px;font-size:13px;color:#DC2626;border-color:var(--border);}
.btn-del:hover{border-color:#DC2626;}

/* ══ AVATAR ══════════════════════════════════════ */
.av{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--white);flex-shrink:0;}
.av-lg{width:44px;height:44px;font-size:15px;}

/* ══ LEAVE BALANCE CARDS ═════════════════════════ */
.lb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.lb-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 18px;}
.lb-icon{font-size:16px;margin-bottom:8px;color:var(--cyan);}
.lb-type{font-size:12px;font-weight:600;color:var(--sm);margin-bottom:6px;}
.lb-val{font-size:28px;font-weight:800;color:var(--navy);line-height:1;margin-bottom:4px;}
.lb-avail{font-size:11px;color:var(--gray);margin-bottom:8px;}
.lb-bar{height:3px;background:#E5E7EB;border-radius:2px;}
.lb-fill{height:100%;border-radius:2px;background:var(--cyan);}

/* ══ LEAVE HISTORY / TEAM CARDS ══════════════════ */
.tl-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:12px;display:flex;align-items:flex-start;gap:14px;}
.tl-body{flex:1;}
.tl-name{font-size:14px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.tl-meta{font-size:12px;color:var(--gray);margin-bottom:2px;}
.tl-reason{font-size:12px;color:var(--sm);}
.tl-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.tabs{display:flex;gap:2px;margin-bottom:16px;}
.tab-btn{padding:7px 16px;border-radius:20px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--sm);transition:all var(--t);}
.tab-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy);}

/* ══ TIMESHEET GRID ══════════════════════════════ */
.ts-week-sel{padding:9px 14px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;outline:none;background:#F9FAFB;color:var(--text);min-width:200px;}
.ts-table{width:100%;border-collapse:collapse;}
.ts-table th{font-size:11px;font-weight:700;color:var(--gray);padding:8px 6px;text-align:center;border-bottom:1px solid var(--border);}
.ts-table th:first-child{text-align:left;width:30%;}
.ts-table td{padding:6px;border-bottom:1px solid #F3F4F6;vertical-align:top;}
.ts-input{width:52px;padding:6px 4px;border:1px solid var(--border);border-radius:6px;font-size:13px;text-align:center;font-family:inherit;background:#F9FAFB;outline:none;transition:border-color var(--t);}
.ts-input:focus{border-color:var(--cyan);background:var(--white);}
.ts-sel{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-family:inherit;background:#F9FAFB;outline:none;}
.ts-total{font-size:13px;font-weight:700;color:var(--cyan);padding:6px 8px;}
.ts-notes{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-family:inherit;background:#F9FAFB;resize:none;outline:none;height:52px;}
.ts-notes:focus{border-color:var(--cyan);}
.ts-daily-row td{font-size:12px;font-weight:700;color:var(--sm);padding:8px 6px;border-top:1px solid var(--border);}

/* ══ APPLY LEAVE FORM ════════════════════════════ */
.lf-page{display:grid;grid-template-columns:1fr 300px;gap:18px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--navy);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.4px;}
.form-ctrl{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);font-size:14px;font-family:inherit;color:var(--text);background:#F9FAFB;outline:none;transition:border-color var(--t);}
.form-ctrl:focus{border-color:var(--cyan);background:var(--white);}
textarea.form-ctrl{height:100px;resize:vertical;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.lb-side{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:18px;}
.lb-side-hd{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:14px;}
.lb-side-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #F3F4F6;font-size:13px;}
.lb-side-row:last-child{border-bottom:none;}
.lb-side-row span:first-child{color:var(--sm);}
.lb-side-row span:last-child{font-weight:700;color:var(--navy);}

/* ══ LEAVE TYPES TABLE ═══════════════════════════ */
.cf-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.cf-yes{background:var(--navy);color:var(--white);}
.cf-no{background:#F3F4F6;color:var(--gray);border:1px solid var(--border);}
.status-active{background:var(--navy);color:var(--white);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}

/* ══ EMPLOYEE MODAL ══════════════════════════════ */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:500;align-items:center;justify-content:center;}
.overlay.open{display:flex;}
.modal{background:var(--white);border-radius:12px;width:720px;max-height:90vh;display:flex;flex-direction:column;border:1px solid var(--border);}
.modal-hd{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-hd h3{font-size:17px;font-weight:800;color:var(--navy);}
.modal-hd p{font-size:12px;color:var(--gray);margin-top:2px;}
.modal-x{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer;font-size:14px;color:var(--gray);display:flex;align-items:center;justify-content:center;transition:all var(--t);font-family:inherit;}
.modal-x:hover{border-color:var(--navy);color:var(--navy);}
.modal-body{overflow-y:auto;flex:1;}
.emp-hero{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-bottom:1px solid var(--border);}
.emp-info .ename{font-size:18px;font-weight:800;color:var(--navy);}
.emp-info .eid{font-size:12px;color:var(--gray);margin-bottom:8px;}
.emp-tags{display:flex;gap:6px;flex-wrap:wrap;}

/* ══ MODAL TABS ══════════════════════════════════ */
.m-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 22px;}
.m-tab{padding:10px 14px;font-size:12px;font-weight:600;color:var(--gray);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--t);background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;}
.m-tab:hover{color:var(--navy);}
.m-tab.active{color:var(--navy);border-bottom-color:var(--cyan);}
.m-pane{display:none;padding:20px 22px;}
.m-pane.active{display:block;}
.ig{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ig-item label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray);display:block;margin-bottom:3px;}
.ig-item span{font-size:13px;color:var(--text);}
.sec-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--gray);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}

/* ══ GRIDS ═══════════════════════════════════════ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.g6535{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;}
.mb16{margin-bottom:16px;} .mb20{margin-bottom:20px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;}

/* ══ MISC ════════════════════════════════════════ */
.hidden{display:none!important;}
.divider{height:1px;background:var(--border);margin:14px 0;}
.back-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gray);cursor:pointer;margin-bottom:16px;background:none;border:none;font-family:inherit;padding:0;}
.back-btn:hover{color:var(--navy);}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:2px;}

/* ══ DASH CHARTS (pure CSS) ══════════════════════ */
.mini-bar{height:4px;background:#E5E7EB;border-radius:2px;margin-top:4px;}
.mini-fill{height:100%;border-radius:2px;background:var(--cyan);}
.att-warn{background:#F59E0B;}
.att-low{background:#EF4444;}

/* ══ NOTICE / ALERT ══════════════════════════════ */
.notice-warn{padding:12px 14px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;}
.notice-warn .nw-hd{font-size:11px;font-weight:700;color:#B45309;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:3px;}
.notice-ok{padding:12px 14px;background:#F0FBF0;border:1px solid #C8E6C9;border-radius:8px;}
.notice-ok p{font-size:13px;color:#2E7D32;}

/* ══ COMING SOON ═════════════════════════════════ */
.cs{display:flex;flex-direction:column;align-items:center;justify-content:center;height:360px;color:var(--gray);}
.cs .ci{font-size:48px;margin-bottom:16px;}
.cs h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:6px;}
/* LoftSense overrides */
:root { --sb: 280px; }

.sb {
  background: #0f3158;
  border-right: none;
}

.sb-top {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 18px 20px;
}

.sb-top-text .pname {
  color: #ffffff;
  font-size: 18px;
}

.sb-top-text .pname em { color: #74c6cc; }
.sb-top-text .pname sup { color: rgba(255,255,255,0.6); }
.sb-top-text .pby { color: rgba(255,255,255,0.55); }

.sb-sec {
  color: rgba(150,186,215,0.65);
  font-size: 11px;
  letter-spacing: 2px;
  padding-top: 18px;
}

.sb-item {
  color: #aec7dd;
  font-size: 13px;
  border-radius: 0;
  border-left: none;
  padding: 12px 12px;
  margin: 2px 0;
}

.sb-item .si {
  width: 22px;
  font-size: 16px;
}

.sb-item:hover {
  background: #1a456f;
  color: #ffffff;
}

.sb-item.active {
  background: #1f4f78;
  color: #ffffff;
  font-weight: 700;
}

.sb-badge {
  margin-left: auto;
  min-width: 28px;
  height: 24px;
  border-radius: 999px;
  background: #67c8c9;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  padding: 0 8px;
}

.sb-foot {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 18px 16px;
}

.sb-uname {
  color: #ffffff;
  font-size: 13px;
}

.sb-urole {
  color: #9cc0de;
  font-size: 12px;
}

.sb-logout { color: #b5d2ea; }
.sb-logout:hover { color: #ffffff; }

.ls-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.ls-head h2 {
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 4px;
}

.ls-head p {
  font-size: 13px;
  color: #6b7280;
}

.ls-actions { display: flex; gap: 10px; }

.btn-month {
  color: var(--navy);
  border-color: #cbd5e1;
  font-weight: 700;
}

.btn-link {
  background: none;
  border: none;
  color: #4d9eb0;
  padding: 0;
  font-weight: 600;
}

.ls-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.ls-kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top-width: 4px;
  border-radius: 12px;
  padding: 18px 20px;
}

.ls-kpi-cyan { border-top-color: #5baaae; }
.ls-kpi-navy { border-top-color: #143a6f; }
.ls-kpi-green { border-top-color: #22c55e; }
.ls-kpi-amber { border-top-color: #f59e0b; }

.ls-kpi-top { display: flex; justify-content: space-between; margin-bottom: 12px; }
.ls-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; font-weight: 700; }
.ls-kpi-icon { opacity: 0.35; font-size: 28px; }
.ls-kpi-value { font-size: 42px; color: var(--navy); font-weight: 800; line-height: 1.1; }
.ls-kpi-sub { color: #6b7280; font-size: 12px; margin-bottom: 10px; }

.ls-pill { display: inline-block; font-size: 12px; border-radius: 999px; padding: 4px 12px; font-weight: 700; }
.ls-pill-up { color: #16a34a; background: #eaf8ef; }
.ls-pill-down { color: #dc2626; background: #feefef; }

.ls-grid-main {
  display: grid;
  grid-template-columns: 1.75fr 0.9fr;
  gap: 16px;
}

.ls-card-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.ls-card-hd h3 { font-size: 16px; color: var(--navy); }
.ls-card-hd h4 { font-size: 15px; color: var(--navy); }
.ls-sub-hd { margin-bottom: 10px; }

.ls-funnel-row {
  display: grid;
  grid-template-columns: 110px 1fr 52px;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.ls-f-stage { font-weight: 600; color: var(--navy); font-size: 14px; }
.ls-f-bar-bg { height: 34px; border-radius: 8px; background: #e5e7eb; overflow: hidden; }
.ls-f-bar { height: 100%; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 700; line-height: 34px; padding-left: 10px; }
.ls-f-pct { color: #6b7280; text-align: right; font-size: 13px; }

.ls-source-row {
  display: grid;
  grid-template-columns: 88px 1fr 40px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.ls-source-name { color: var(--navy); font-size: 14px; }
.ls-source-bar-bg { height: 10px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.ls-source-bar { height: 100%; border-radius: 999px; }
.ls-source-val { text-align: right; font-weight: 700; color: var(--navy); font-size: 13px; }

.ls-right-col { display: grid; gap: 14px; }

.ls-revenue-card {
  background: linear-gradient(180deg, #143a6f 0%, #0e2f59 100%);
  color: #fff;
  border-radius: 14px;
  padding: 18px;
}

.ls-rev-label { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 700; }
.ls-rev-val { font-size: 48px; font-weight: 800; line-height: 1.1; margin-top: 8px; }
.ls-rev-sub { color: rgba(255,255,255,0.75); font-size: 13px; margin-bottom: 14px; }
.ls-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; }
.ls-bar { flex: 1; border-radius: 4px 4px 0 0; background: rgba(122, 208, 212, 0.55); }
.ls-bar:last-child { background: #68bec5; }

.ls-alert-list { display: grid; gap: 2px; }
.ls-alert-item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.ls-alert-item:last-child { border-bottom: none; }
.ls-alert-icon { font-size: 20px; line-height: 1.3; }
.ls-alert-title { color: var(--navy); font-weight: 700; margin-bottom: 3px; font-size: 14px; }
.ls-alert-sub { color: #6b7280; font-size: 12px; }

.ls-search {
  min-width: 260px;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  background: #fff;
}

.ls-search:focus {
  border-color: var(--cyan);
}

.ls-customer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.ls-customer-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  cursor: pointer;
}

.ls-customer-card:hover { border-color: #b9cedf; }
.ls-customer-card.active { border-color: #5baaae; box-shadow: 0 0 0 2px #e8f5f5 inset; }

.ls-cust-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #143a6f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.ls-cust-name { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.ls-cust-meta { color: #6b7280; font-size: 13px; margin-bottom: 2px; }
.ls-cust-tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.ls-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
}

.ls-chip-hot { color: #b45309; background: #fff7ed; }
.ls-chip-warm { color: #c2410c; background: #ffedd5; }
.ls-chip-visited { color: #2563eb; background: #eff6ff; }
.ls-chip-cold { color: #7c3aed; background: #f3e8ff; }
.ls-chip-new { color: #7c3aed; background: #f3e8ff; }
.ls-chip-booked { color: #15803d; background: #e9f9ef; }
.ls-chip-lost { color: #b91c1c; background: #fee2e2; }
.ls-chip-unit { color: #1f2937; background: #f3f4f6; }
.ls-chip-source-digital { color: #0f766e; background: #e6fffb; }
.ls-chip-source-referral { color: #1d4ed8; background: #e8f0ff; }
.ls-chip-source-direct { color: #7c2d12; background: #ffedd5; }
.ls-chip-source-outdoor { color: #92400e; background: #fef3c7; }
.ls-chip-source-walkin { color: #5b21b6; background: #ede9fe; }
.ls-chip-source-other { color: #334155; background: #e2e8f0; }
.ls-chip-project-a { color: #0f172a; background: #dbeafe; }
.ls-chip-project-b { color: #0f172a; background: #d1fae5; }
.ls-chip-project-c { color: #0f172a; background: #fee2e2; }
.ls-chip-project-d { color: #0f172a; background: #fef9c3; }
.ls-chip-project-e { color: #0f172a; background: #e2e8f0; }

.ls-customer-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ls-cust-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 12px 0 14px;
  border-bottom: 1px solid #e5e7eb;
}

.ls-cust-summary label {
  display: block;
  color: #6b7280;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.ls-cust-summary div { color: var(--navy); font-size: 14px; font-weight: 600; }

.ls-timeline { padding-top: 10px; }
.ls-time-row { display: grid; grid-template-columns: 30px 1fr; gap: 12px; margin-bottom: 14px; }
.ls-time-dot { width: 30px; height: 30px; border-radius: 50%; background: #eef6ff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ls-time-title { color: var(--navy); font-weight: 700; margin-bottom: 2px; font-size: 15px; }
.ls-time-date { color: #6b7280; font-size: 12px; margin-bottom: 2px; }
.ls-time-text { color: #374151; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }

.ls-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 8px;
}

.ls-full { grid-column: 1 / -1; }
.ls-form-actions { margin-top: 8px; display: flex; gap: 10px; }

.ls-enq-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ls-enq-tab {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
}

.ls-enq-tab.active {
  background: #143a6f;
  color: #fff;
  border-color: #143a6f;
}

.ls-enq-tab span { opacity: 0.8; }

.ls-enq-filters { display: flex; gap: 8px; align-items: center; }

.ls-enq-wrap .ls-search {
  min-width: 260px;
}

.ls-enq-table td,
.ls-enq-table th {
  vertical-align: middle;
}

.ls-visits-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ls-visits-table th,
.ls-visits-table td {
  white-space: nowrap;
}

.ls-visits-table td:nth-child(8) {
  white-space: normal;
}

.ls-project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.ls-project-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.ls-project-head {
  color: #fff;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ls-proj-head-navy { background: linear-gradient(180deg, #143a6f, #16345e); }
.ls-proj-head-blue { background: linear-gradient(180deg, #2e7db8, #24679a); }
.ls-proj-head-green { background: linear-gradient(180deg, #3d916c, #357a5b); }

.ls-project-name { font-size: 20px; font-weight: 800; line-height: 1.1; margin-bottom: 2px; }
.ls-project-loc { font-size: 12px; color: rgba(255,255,255,0.78); }
.ls-project-icon { font-size: 36px; opacity: 0.5; }
.ls-project-body { padding: 14px 16px 16px; }

.ls-proj-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.ls-proj-stats strong { display: block; color: var(--navy); font-size: 26px; line-height: 1; }
.ls-proj-stats strong.ok { color: #16a34a; }
.ls-proj-stats strong.bad { color: #ef4444; }
.ls-proj-stats strong.warn { color: #d97706; }
.ls-proj-stats span { font-size: 11px; color: #6b7280; text-transform: uppercase; }

.ls-proj-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 6px;
}

.ls-proj-bar > div {
  height: 100%;
  border-radius: 999px;
  background: #ef4444;
}

.ls-proj-meta { font-size: 12px; color: #6b7280; margin-bottom: 10px; }

.ls-floor-stack { display: grid; gap: 10px; }
.ls-floor-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.ls-floor-name { color: #6b7280; font-size: 13px; font-weight: 700; }

.ls-unit-row { display: flex; gap: 8px; flex-wrap: wrap; }

.ls-unit-tile {
  width: 92px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 8px 8px 7px;
  background: #f8fafc;
}

.ls-unit-no { color: var(--navy); font-size: 24px; font-weight: 800; margin-bottom: 2px; }
.ls-unit-type { color: #6b7280; font-size: 12px; margin-bottom: 2px; }
.ls-unit-status { font-size: 12px; font-weight: 700; }

.ls-unit-available { background: #f0fbf5; border-color: #86efac; }
.ls-unit-available .ls-unit-status { color: #15803d; }

.ls-unit-reserved { background: #fffbeb; border-color: #fcd34d; }
.ls-unit-reserved .ls-unit-status { color: #b45309; }

.ls-unit-sold { background: #fff1f2; border-color: #fca5a5; }
.ls-unit-sold .ls-unit-status { color: #b91c1c; }

.ls-trend-bars {
  height: 150px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  align-items: end;
}

.ls-trend-col { text-align: center; }
.ls-trend-bar-wrap { height: 118px; display: flex; align-items: flex-end; }
.ls-trend-bar { width: 100%; border-radius: 6px 6px 0 0; background: #7eb4ba; }
.ls-trend-bar.current { background: #143a6f; }
.ls-trend-lbl { font-size: 11px; color: #6b7280; margin-top: 5px; }

.ls-mini-progress {
  width: 86px;
  height: 9px;
  border-radius: 999px;
  background: #e2e8f0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  overflow: hidden;
}

.ls-mini-progress span {
  display: block;
  height: 100%;
  background: #56a7a9;
  border-radius: 999px;
}

.perf-good { color: #16a34a; font-weight: 700; }
.perf-warn { color: #d97706; font-weight: 700; }
.perf-bad { color: #ef4444; font-weight: 700; }

.ls-team-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ls-team-card { text-align: center; }
.ls-team-av {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 6px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 24px;
}

.ls-team-name { color: var(--navy); font-size: 28px; font-weight: 800; }
.ls-team-role { color: #6b7280; font-size: 13px; margin-bottom: 10px; }

.ls-team-mets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.ls-team-mets strong { display: block; color: var(--navy); font-size: 26px; line-height: 1; }
.ls-team-mets span { color: #6b7280; font-size: 11px; text-transform: uppercase; }
.ls-team-foot { margin-top: 6px; color: #6b7280; font-size: 13px; }

.ls-pipe-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.ls-pipe-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.ls-pipe-col {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.ls-pipe-col-hd {
  padding: 10px 12px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ls-col-new .ls-pipe-col-hd { background: #ede9fe; color: #6d28d9; }
.ls-col-visit .ls-pipe-col-hd { background: #dbeafe; color: #1d4ed8; }
.ls-col-follow .ls-pipe-col-hd { background: #fef3c7; color: #b45309; }
.ls-col-nego .ls-pipe-col-hd { background: #e0f2fe; color: #0f766e; }
.ls-col-booked .ls-pipe-col-hd { background: #dcfce7; color: #15803d; }

.ls-pipe-count {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 999px;
  min-width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
}

.ls-pipe-col-body {
  padding: 10px;
  display: grid;
  gap: 10px;
  min-height: 180px;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.ls-pipe-col-body.drag-over {
  background: #eef6ff;
  box-shadow: inset 0 0 0 1px #93c5fd;
}

.ls-pipe-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  cursor: grab;
}

.ls-pipe-card:active { cursor: grabbing; }

.ls-pipe-name { color: var(--navy); font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.ls-pipe-meta { color: #6b7280; font-size: 13px; margin-bottom: 4px; }
.ls-pipe-budget { color: #0f766e; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.ls-pipe-asm { color: #6b7280; font-size: 13px; display: flex; align-items: center; gap: 6px; }

.ls-pipe-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #143a6f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1280px) {
  .ls-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ls-grid-main { grid-template-columns: 1fr; }
  .ls-customer-grid { grid-template-columns: repeat(2, 1fr); }
  .ls-customer-lower { grid-template-columns: 1fr; }
  .ls-visits-top { grid-template-columns: 1fr; }
  .ls-project-grid { grid-template-columns: 1fr; }
  .ls-team-cards { grid-template-columns: 1fr; }
  .ls-pipe-kpis { grid-template-columns: repeat(2, 1fr); }
  .ls-pipe-board { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .sb { width: 100%; position: static; height: auto; }
  .main { margin-left: 0; }
  #app { flex-direction: column; }
  .ls-head { flex-direction: column; gap: 10px; }
  .ls-kpi-grid { grid-template-columns: 1fr; }
  .ls-customer-grid { grid-template-columns: 1fr; }
  .ls-form-grid { grid-template-columns: 1fr; }
  .ls-cust-summary { grid-template-columns: 1fr; }
  .ls-floor-row { grid-template-columns: 1fr; }
  .ls-pipe-kpis { grid-template-columns: 1fr; }
  .ls-pipe-board { grid-template-columns: 1fr; }
}