/* ============================================
   Athena HR Portal - Combined Stylesheet
   Extracted from monolithic index.html
   ============================================ */


/* --- Block 1 (originally lines 610-610) --- */
:root{color-scheme:light only;--navy:#1A2756;--orange:#E87722;--light:#F5F7FA;--grey:#6B7280;--green:#1A7A4A;--red:#C0392B;--white:#ffffff;--border:#E5E7EB;--sidebar-w:230px;--topbar-h:56px;}*{box-sizing:border-box;margin:0;padding:0;}body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--light);color:#1f2937;}#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy) 0%,#2d4a8a 100%);}.login-card{background:white;border-radius:16px;padding:40px 36px;width:380px;box-shadow:0 20px 60px rgba(0,0,0,0.3);}.login-logo{text-align:center;margin-bottom:24px;}.login-logo .circle{width:64px;height:64px;background:var(--orange);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:white;margin-bottom:12px;}.login-logo h2{color:var(--navy);font-size:20px;}.login-logo p{color:var(--grey);font-size:13px;margin-top:4px;}.login-field{margin-bottom:16px;}.login-field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px;}.login-field input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;transition:border-color .2s;}.login-field input:focus{outline:none;border-color:var(--orange);}.login-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px;}.login-row label{display:flex;align-items:center;gap:6px;color:var(--grey);cursor:pointer;}.login-row a{color:var(--orange);text-decoration:none;font-weight:600;}.btn-login{width:100%;padding:12px;background:var(--orange);color:white;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s;}.btn-login:hover{opacity:.9;}.login-error{color:var(--red);font-size:13px;text-align:center;margin-top:10px;display:none;background:#FEE2E2;padding:10px 14px;border-radius:8px;}.login-field .field-error{color:var(--red);font-size:11px;margin-top:4px;display:none;}.login-field input.input-error{border-color:var(--red);}.pwd-toggle{position:relative;}.pwd-toggle input{padding-right:40px;}.pwd-toggle .toggle-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--grey);font-size:16px;background:none;border:none;}#appShell{display:none;min-height:100vh;}.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:var(--navy);display:flex;align-items:center;padding:0 20px;z-index:100;gap:12px;}.topbar .logo-circle{width:36px;height:36px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:white;font-size:16px;flex-shrink:0;}.topbar h1{color:white;font-size:16px;font-weight:700;flex:1;}.topbar .user-info{display:flex;align-items:center;gap:8px;}.topbar .user-name{color:rgba(255,255,255,0.9);font-size:13px;}.topbar .user-role{background:var(--orange);color:white;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;}.topbar .branch-badge{background:rgba(255,255,255,0.15);color:white;padding:4px 10px;border-radius:20px;font-size:12px;}.topbar .btn-logout{background:rgba(255,255,255,0.1);color:white;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;transition:background .2s;}.topbar .btn-logout:hover{background:rgba(255,255,255,0.2);}.topbar .hamburger{display:none;background:none;border:none;color:white;font-size:22px;cursor:pointer;padding:4px;}.sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--sidebar-w);background:white;border-right:1px solid var(--border);overflow-y:auto;z-index:90;transition:transform .3s;}.nav-item{display:flex;align-items:center;gap:10px;padding:11px 20px;cursor:pointer;color:var(--grey);font-size:14px;transition:all .15s;border-left:3px solid transparent;text-decoration:none;}.nav-item:hover{background:var(--light);color:var(--navy);}.nav-item.active{background:#FFF4EC;color:var(--orange);border-left-color:var(--orange);font-weight:600;}.nav-item .icon{font-size:16px;width:22px;text-align:center;}.nav-divider{height:1px;background:var(--border);margin:8px 16px;}.nav-section{font-size:10px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:1px;padding:12px 20px 4px;}.main{margin-left:var(--sidebar-w);margin-top:var(--topbar-h);padding:24px;min-height:calc(100vh - var(--topbar-h));}.page{display:none;}.page.active{display:block;}.page-title{font-size:22px;font-weight:700;color:var(--navy);margin-bottom:4px;}.page-sub{color:var(--grey);font-size:14px;}.page-date{color:var(--grey);font-size:13px;margin-top:2px;}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;}.card{background:white;border-radius:12px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.06);border:1px solid var(--border);transition:box-shadow .2s;}.card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1);}.card .card-label{font-size:11px;color:var(--grey);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}.card .card-value{font-size:32px;font-weight:800;color:var(--navy);margin:8px 0 4px;}.card .card-sub{font-size:12px;color:var(--grey);}.card.orange{border-left:4px solid var(--orange);}.card.green{border-left:4px solid var(--green);}.card.red{border-left:4px solid var(--red);}.card.navy{border-left:4px solid var(--navy);}.card-clickable{cursor:pointer;}.card-clickable:hover{transform:translateY(-1px);}.table-wrap{background:white;border-radius:12px;border:1px solid var(--border);overflow:hidden;margin-bottom:20px;}.table-header{padding:16px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border);}.table-title{font-weight:700;color:var(--navy);font-size:15px;flex:1;}.table-scroll{overflow-x:auto;}table{width:100%;border-collapse:collapse;}th{background:var(--light);padding:11px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;}td{padding:11px 14px;font-size:13px;border-bottom:1px solid var(--border);}tr:last-child td{border-bottom:none;}tr:hover td{background:#fafbfc;}.table-footer{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);font-size:13px;color:var(--grey);}.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}.badge-green{background:#D1FAE5;color:#065F46;}.badge-orange{background:#FEF3C7;color:#92400E;}.badge-red{background:#FEE2E2;color:#991B1B;}.badge-blue{background:#DBEAFE;color:#1E40AF;}.badge-grey{background:#F3F4F6;color:#374151;}.badge-purple{background:#EDE9FE;color:#5B21B6;}.badge-teal{background:#CCFBF1;color:#0F766E;}.badge-navy{background:#1A2756;color:white;}.btn{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}.btn:hover{opacity:.88;}.btn:disabled{opacity:.5;cursor:not-allowed;}.btn-primary{background:var(--orange);color:white;}.btn-navy{background:var(--navy);color:white;}.btn-outline{background:white;color:var(--navy);border:1.5px solid var(--border);}.btn-outline:hover{background:var(--light);}.btn-sm{padding:5px 10px;font-size:12px;}.btn-danger{background:#c0392b;color:#fff;border:none;}.btn-danger:hover{background:#a93226;}.btn-green{background:var(--green);color:white;}.btn-teal{background:#0F766E;color:white;}.btn-archive{background:#e67e22;color:#fff;border:none;}.btn-archive:hover{background:#ca6f1e;}.btn-icon{padding:6px 8px;background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:14px;}.btn-icon:hover{background:var(--light);}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}.form-group{display:flex;flex-direction:column;gap:6px;}.form-group.full{grid-column:1/-1;}.form-group label{font-size:13px;font-weight:600;color:var(--navy);}.form-group input,.form-group select,.form-group textarea{padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--orange);}.required::after{content:' *';color:var(--red);}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;display:none;align-items:center;justify-content:center;}.modal-overlay.open{display:flex;}.modal{background:white;border-radius:16px;padding:28px;width:640px;max-width:95vw;max-height:90vh;overflow-y:auto;}.modal-title{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;}.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--grey);padding:4px;}.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;}.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}.filters select,.filters input{padding:7px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;}.alerts-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:24px;}.alert-item{background:white;border-radius:10px;padding:14px 16px;border:1px solid var(--border);display:flex;align-items:center;gap:12px;cursor:pointer;transition:box-shadow .2s;}.alert-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08);}.alert-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}.alert-icon.warning{background:#FEF3C7;}.alert-icon.danger{background:#FEE2E2;}.alert-icon.success{background:#D1FAE5;}.alert-text{font-size:13px;color:var(--navy);}.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}.branch-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}.branch-card{background:white;border-radius:12px;padding:16px;border:1px solid var(--border);}.branch-card h3{font-size:14px;color:var(--navy);font-weight:700;margin-bottom:10px;}.branch-card .stat{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid var(--border);}.branch-card .stat:last-child{border-bottom:none;}.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}.chart-card{background:white;border-radius:12px;padding:20px;border:1px solid var(--border);}.chart-card h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:12px;}.chart-card canvas{max-height:260px;}.policy-box{background:#FFF4EC;border:1px solid #FDBA74;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:13px;color:#7C2D12;line-height:1.7;}.policy-box strong{color:var(--navy);}.lb-bar{height:8px;background:var(--border);border-radius:4px;margin-top:4px;overflow:hidden;}.lb-fill{height:8px;border-radius:4px;transition:width .3s;}.lb-fill.green{background:var(--green);}.lb-fill.orange{background:var(--orange);}.lb-fill.red{background:var(--red);}.att-edit-btn{background:none;border:none;cursor:pointer;font-size:14px;color:var(--navy);padding:2px 6px;border-radius:4px;}.att-edit-btn:hover{background:var(--light);}.col-grant-row{background:#F0FDF4;}.emp-tab-bar{display:flex;gap:8px;margin-bottom:12px;}.emp-tab-btn{padding:6px 18px;border-radius:20px;border:2px solid var(--border);background:#fff;color:var(--grey);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;}.emp-tab-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}.emp-tab-btn.archive-tab.active{background:#c0392b;color:#fff;border-color:#c0392b;}.badge-archive{background:#c0392b;color:#fff;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:700;}.import-zone{border:2px dashed var(--border);border-radius:10px;padding:24px;text-align:center;cursor:pointer;color:var(--grey);font-size:14px;transition:border-color .2s;}.import-zone:hover{border-color:var(--orange);color:var(--navy);}.import-preview{max-height:260px;overflow-y:auto;margin-top:12px;}.loading{text-align:center;padding:40px;color:var(--grey);font-size:14px;}.spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--border);border-top-color:var(--orange);border-radius:50%;animation:spin .7s linear infinite;margin-right:8px;vertical-align:middle;}@keyframes spin{to{transform:rotate(360deg);}}#toast{position:fixed;bottom:24px;right:24px;padding:14px 22px;border-radius:10px;color:white;font-size:14px;font-weight:600;z-index:999;transform:translateY(80px);transition:transform .3s;pointer-events:none;max-width:400px;}#toast.show{transform:translateY(0);}#toast.success{background:var(--green);}#toast.error{background:var(--red);}#toast.warning{background:var(--orange);}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}.cal-header{text-align:center;font-size:11px;font-weight:700;color:var(--grey);padding:8px 0;text-transform:uppercase;letter-spacing:.5px;}.cal-day{position:relative;display:flex;flex-direction:column;align-items:center;padding:5px 3px 4px;border-radius:8px;cursor:default;min-height:62px;border:1px solid transparent;transition:all .15s;background:#fff;}.cal-day.empty{visibility:hidden;background:none;border:none;}.cal-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;line-height:1;}.cal-day.today{border:1.5px solid var(--orange);background:#FFF4EC;}.cal-day.today .cal-num{background:var(--orange);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(232,119,34,.4);}.cal-day.sunday{background:#fff5f5;}.cal-day.sunday .cal-num{color:#dc2626;}.cal-day.hol-national{background:linear-gradient(150deg,#7f1d1d,#991b1b);border-color:#7f1d1d;cursor:pointer;}.cal-day.hol-national .cal-num{color:#fca5a5;font-weight:800;background:rgba(255,255,255,.13);}.cal-day.hol-national:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 4px 14px rgba(127,29,29,.4);}.cal-day.hol-regional{background:linear-gradient(150deg,#78350f,#92400e);border-color:#78350f;cursor:pointer;}.cal-day.hol-regional .cal-num{color:#fcd34d;font-weight:800;background:rgba(255,255,255,.13);}.cal-day.hol-regional:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 4px 14px rgba(120,53,15,.4);}.cal-day.hol-school{background:linear-gradient(150deg,#134e4a,#0f766e);border-color:#134e4a;cursor:pointer;}.cal-day.hol-school .cal-num{color:#5eead4;font-weight:800;background:rgba(255,255,255,.13);}.cal-day.hol-school:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 4px 14px rgba(19,78,74,.4);}.cal-hol-badge{margin-top:3px;width:100%;text-align:center;font-size:9px;font-weight:700;line-height:1.25;color:rgba(255,255,255,.92);letter-spacing:.1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px;}.cal-type-dot{position:absolute;top:4px;right:5px;width:6px;height:6px;border-radius:50%;}.hol-national .cal-type-dot{background:#fca5a5;}.hol-regional .cal-type-dot{background:#fde68a;}.hol-school .cal-type-dot{background:#5eead4;}.cal-day[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1f2937;color:#fff;font-size:11px;font-weight:600;padding:5px 9px;border-radius:6px;white-space:normal;z-index:50;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.3);max-width:160px;text-align:center;line-height:1.4;}.cal-day[data-tip]:hover::before{content:'';position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1f2937;z-index:51;pointer-events:none;}.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}.cal-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--grey);}.cal-legend-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0;}.cal-legend-swatch.nat{background:#991b1b;}.cal-legend-swatch.reg{background:#92400e;}.cal-legend-swatch.sch{background:#0f766e;}.cal-legend-swatch.sun{background:#fecaca;border:1px solid #dc2626;}.cal-legend-swatch.tod{background:var(--orange);}.cal-month-pill{display:inline-flex;align-items:center;margin-left:10px;background:#991b1b;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;vertical-align:middle;}.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}.cal-nav h3{font-size:17px;color:var(--navy);font-weight:700;}.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid var(--border);}.tab{padding:10px 20px;font-size:14px;font-weight:600;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;}.tab:hover{color:var(--navy);}.tab.active{color:var(--orange);border-bottom-color:var(--orange);}.tab-content{display:none;}.tab-content.active{display:block;}.profile-header{display:flex;gap:24px;align-items:flex-start;margin-bottom:24px;}.profile-avatar{width:100px;height:100px;border-radius:50%;background:var(--light);border:3px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:var(--navy);overflow:hidden;flex-shrink:0;}.profile-avatar img{width:100%;height:100%;object-fit:cover;}.profile-info h2{font-size:20px;color:var(--navy);margin-bottom:4px;}.profile-info .meta{font-size:13px;color:var(--grey);margin-bottom:2px;}.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}.profile-section{background:white;border-radius:12px;padding:20px;border:1px solid var(--border);}.profile-section h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}.profile-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px solid #f3f4f6;}.profile-row:last-child{border-bottom:none;}.profile-row .label{color:var(--grey);}.profile-row .value{color:var(--navy);font-weight:600;text-align:right;max-width:60%;word-break:break-word;}@media(max-width:768px){.sidebar{transform:translateX(-100%);}.sidebar.open{transform:translateX(0);}.main{margin-left:0;padding:16px;}.form-grid{grid-template-columns:1fr;}.branch-stats{grid-template-columns:1fr;}.chart-row{grid-template-columns:1fr;}.topbar .hamburger{display:block;}.topbar .user-name{display:none;}.profile-header{flex-direction:column;align-items:center;text-align:center;}}@media print{.topbar,.sidebar,.btn,.filters,.modal-overlay,#toast{display:none !important;}.main{margin:0;padding:10px;}#gracePrintArea{display:none;}body.print-grace #appShell{display:none !important;}body.print-grace #loginScreen{display:none !important;}body.print-grace #gracePrintArea{display:block !important;padding:0;}body.print-grace #gracePrintArea table{width:100%;border-collapse:collapse;}body.print-grace #gracePrintArea th,body.print-grace #gracePrintArea td{border:1px solid #ccc;padding:6px 8px;font-size:12px;text-align:left;}}.branch-opt:hover{background:#FFF4EC;color:#E87722 !important;}.branch-opt.active{background:#FFF4EC;color:#E87722 !important;font-weight:700;}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-top:20px;}.photo-item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .2s;position:relative;}.photo-item:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1);transform:translateY(-2px);}.photo-img{width:100%;height:160px;object-fit:cover;background:var(--light);}.photo-info{padding:12px;}.photo-name{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.photo-id{font-size:11px;color:var(--grey);}.photo-status{position:absolute;top:8px;right:8px;padding:4px 10px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;}.photo-status.uploaded{background:#D1FAE5;color:#065F46;}.photo-status.no-photo{background:#FEE2E2;color:#991B1B;}.photo-card-actions{position:absolute;bottom:0;left:0;right:0;display:flex;gap:0;opacity:0;transition:opacity .2s;}.photo-item:hover .photo-card-actions{opacity:1;}.photo-btn{flex:1;padding:7px 6px;border:none;border-radius:0;font-size:11px;cursor:pointer;font-weight:700;color:#fff;background:rgba(0,0,0,0.72);transition:background .15s;}.photo-btn:hover{background:rgba(0,0,0,0.9);}.photo-btn-change{border-radius:0 0 0 10px;}.photo-btn-delete{border-radius:0 0 10px 0;background:rgba(192,57,43,0.82);}.photo-btn-delete:hover{background:rgba(169,50,38,1)!important;}.upload-zone{border:3px dashed var(--border);border-radius:12px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s;background:var(--light);}.upload-zone:hover{border-color:var(--orange);background:#FFF4EC;}.upload-zone.dragover{border-color:var(--green);background:#F0FDF4;}.upload-icon{font-size:48px;margin-bottom:12px;}.upload-text{font-size:16px;font-weight:600;color:var(--navy);margin-bottom:6px;}.upload-subtext{font-size:13px;color:var(--grey);}.bulk-list{max-height:500px;overflow-y:auto;margin-top:20px;}.bulk-item{display:flex;align-items:center;gap:16px;padding:16px;background:var(--light);border-radius:10px;margin-bottom:12px;border:1px solid var(--border);}.bulk-img{width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid var(--border);}.bulk-info{flex:1;}.bulk-filename{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px;}.bulk-match{font-size:12px;margin-bottom:8px;}.bulk-match.matched{color:var(--green);}.bulk-match.unmatched{color:var(--red);}.bulk-select{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;}.progress-bar{width:100%;height:24px;background:var(--border);border-radius:12px;overflow:hidden;margin:20px 0;}.progress-fill{height:100%;background:var(--orange);transition:width .3s;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;}

/* --- Block 2 (originally lines 2787-2978) --- */
/* 🆕 ATTENDANCE ABSTRACT STYLING */
.attendance-abstract {
  margin-bottom: 2rem;
}

.abstract-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 1rem;
}
@media (max-width: 1200px) {
  .abstract-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .abstract-grid { grid-template-columns: 1fr; }
}

.abstract-card {
  background: linear-gradient(135deg, var(--white) 0%, var(--light) 100%);
  border-radius: 12px;
  padding: 0.9rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  border-left: 4px solid var(--navy);
  transition: all 0.3s;
}

.abstract-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.abstract-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.abstract-campus-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.abstract-campus-icon {
  font-size: 1.5rem;
}

.abstract-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.abstract-stat {
  display: flex;
  flex-direction: column;
}

.abstract-stat-label {
  font-size: 0.75rem;
  color: var(--grey);
  font-weight: 600;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.abstract-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.stat-total { color: var(--navy); }
.stat-present { color: var(--green); }
.stat-absent { color: var(--red); }
.stat-not-punched { color: var(--orange); }
.stat-not-enrolled { color: var(--grey); }

.abstract-overall {
  background: linear-gradient(135deg, var(--navy) 0%, #0F1A3F 100%);
  color: var(--white);
  border-left-color: var(--orange);
}

.abstract-overall .abstract-campus-name,
.abstract-overall .abstract-stat-label {
  color: rgba(255, 255, 255, 0.8);
}

.abstract-overall .abstract-stat-value {
  color: var(--white);
}
/* ── New attendance abstract layout ── */
.abstract-stats-new { width: 100%; }
.abs-row-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.abs-main-block { display: flex; flex-direction: column; }
.abs-main-label {
  font-size: 0.68rem; font-weight: 700; color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem;
}
.abstract-overall .abs-main-label { color: rgba(255,255,255,0.7); }
.abs-main-value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.abs-breakdown-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem;
  background: rgba(0,0,0,0.04); border-radius: 8px; padding: 0.4rem;
}
.abstract-overall .abs-breakdown-row { background: rgba(255,255,255,0.1); }
.abs-breakdown-item {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 5px; border-radius: 6px;
}
.abs-breakdown-item.leave-approved { background: rgba(26,122,74,0.08); }
.abs-breakdown-item.leave-rejected { background: rgba(192,57,43,0.08); }
.abs-breakdown-item.leave-pending  { background: rgba(232,119,34,0.08); }
.abs-breakdown-item.leave-without  { background: rgba(107,114,128,0.08); }
.abs-bd-icon { font-size: 0.85rem; flex-shrink: 0; }
.abs-bd-label { font-size: 0.62rem; font-weight: 600; color: var(--grey); line-height: 1.2; }
.abstract-overall .abs-bd-label { color: rgba(255,255,255,0.65); }
.abs-bd-value { font-size: 0.95rem; font-weight: 800; color: var(--navy); line-height: 1; }
.abstract-overall .abs-bd-value { color: #fff; }
.abs-breakdown-item.leave-approved .abs-bd-value { color: var(--green); }
.abs-breakdown-item.leave-rejected .abs-bd-value { color: var(--red); }
.abs-breakdown-item.leave-pending  .abs-bd-value { color: var(--orange); }
.abs-breakdown-item.leave-without  .abs-bd-value { color: #7c3aed; }
@media(max-width:600px){
  .abs-row-main { grid-template-columns: repeat(3,1fr); }
  .abs-breakdown-row { grid-template-columns: repeat(2,1fr); }
}
/* ═══════════════════ RESTRICTED HOLIDAY MODULE CSS ═══════════════════ */
.rh-pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.rh-pill-pending{background:#fff3cd;color:#856404;}
.rh-pill-approved{background:#d4edda;color:#155724;}
.rh-pill-rejected{background:#f8d7da;color:#721c24;}
.rh-balance-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-top:4px;}
.rh-balance-fill{height:8px;border-radius:4px;background:var(--orange);}
.rh-balance-fill.full{background:var(--red);}
.rh-balance-fill.empty{background:var(--green);}
.rh-religion-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;}
.rh-religion-Islam{background:#fff8e1;color:#d97706;}
.rh-religion-Christianity{background:#fff0f0;color:#b91c1c;}
.rh-religion-Hinduism{background:#f0fdf4;color:#15803d;}
.rh-religion-Sikhism{background:#fdf4ff;color:#7c3aed;}
.rh-religion-Other{background:#f3f4f6;color:#374151;}
.rh-ineligible{background:#fee2e2;border:1px solid #fca5a5;border-radius:8px;padding:10px 14px;color:#991b1b;}
.rh-eligible{background:#d1fae5;border:1px solid #6ee7b7;border-radius:8px;padding:10px 14px;color:#065f46;}
.rh-warning{background:#fff8e1;border:1px solid #fde68a;border-radius:8px;padding:10px 14px;color:#92400e;}

/* ═══════════════════ SALARY INCREMENT MODULE CSS ═══════════════════ */
.inc-step-active{background:var(--navy)!important;color:#fff!important;}
.inc-step-done{background:#d4edda!important;color:#155724!important;}
.inc-step-idle{background:var(--light);color:var(--grey);}
.inc-pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.inc-pill-draft{background:#fff3cd;color:#856404;}
.inc-pill-previewed{background:#cce5ff;color:#004085;}
.inc-pill-applied{background:#d4edda;color:#155724;}
.inc-pill-reverted{background:#f8d7da;color:#721c24;}
.inc-pill-excluded{background:#e2e3e5;color:#383d41;}
.inc-override-input{width:90px;padding:4px 8px;border:1.5px solid var(--border);border-radius:6px;font-size:12px;text-align:right;}
.inc-override-input:focus{border-color:var(--navy);outline:none;}
.inc-row-excluded td{opacity:.45;text-decoration:line-through;}
.inc-diff-badge{background:#e8f5e9;color:#27ae60;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:700;}
.inc-letter-box{background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;padding:26px;font-family:"Times New Roman",serif;font-size:13px;line-height:1.8;color:#222;}
.inc-letter-box table{width:100%;border-collapse:collapse;margin:14px 0;}
.inc-letter-box table td{padding:7px 11px;border:1px solid #ccc;font-size:12px;}
.inc-letter-box table td:first-child{font-weight:700;background:#f0f5ff;width:42%;}
.notif-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:10px;margin-bottom:16px;border:2px solid var(--border);}
.notif-toggle-row.on{background:#f0fdf4;border-color:#86efac;}
.notif-toggle-row.off{background:#fff1f2;border-color:#fca5a5;}
.notif-toggle-label{font-size:14px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;}
.notif-status{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;}
.notif-status.on{background:#22c55e;color:#fff;}
.notif-status.off{background:#ef4444;color:#fff;}
.toggle-switch{position:relative;display:inline-block;width:52px;height:28px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#d1d5db;border-radius:28px;transition:.3s;}
.toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
input:checked+.toggle-slider{background:#22c55e;}
input:checked+.toggle-slider:before{transform:translateX(24px);}
.notif-fields{transition:opacity .3s;}
.notif-fields.disabled{opacity:0.4;pointer-events:none;}

/* --- Block 3 (originally lines 3839-3839) --- */
.rst-step{background:var(--light);color:var(--grey);}.rst-step.current{background:#FFF4EC;color:var(--orange);border:1.5px solid var(--orange);}.rst-step.done{background:var(--navy);color:#fff;}

/* --- Block 4 (originally lines 12695-12702) --- */
/* AI Search Chip Buttons */
.ai-chip{background:var(--light);color:var(--navy);border:1px solid var(--border);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;}
.ai-chip:hover{background:#FFF4EC;border-color:var(--orange);color:var(--orange);}
/* AI Search pulse animation */
@keyframes aiPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
#aiSearchLoading p:first-of-type{animation:aiPulse 1.5s ease-in-out infinite;}

/* --- Block 5 (originally lines 13063-13079) --- */
.abs-clickable {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.abs-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.abs-clickable::after {
  content: ' ↗';
  font-size: 0.65rem;
  opacity: 0.6;
}
#absModalBody table th { background: var(--navy); color: #fff; }
#absModalBody .badge { white-space: nowrap; }

/* --- Block 6 (originally lines 15730-16054) --- */
  /* ── Tokens ────────────────────────────────────────────────────── */
  :root{
    --navy:#1e293b;
    --navy-deep:#0f172a;
    --orange:#3b82f6;          /* primary accent now electric blue */
    --orange-soft:#eff6ff;
    --light:#fafbfc;
    --surface:#ffffff;
    --grey:#64748b;
    --grey-soft:#94a3b8;
    --green:#059669;
    --red:#dc2626;
    --border:#e8ecf1;
    --border-strong:#cbd5e1;
    --sidebar-w:248px;
    --topbar-h:64px;
    --radius:14px;
    --radius-sm:10px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.04);
    --shadow:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-lg:0 10px 30px -12px rgba(15,23,42,.18);
    --font-heading:'Urbanist','Segoe UI',system-ui,sans-serif;
    --font-body:'Epilogue','Segoe UI',system-ui,sans-serif;
  }

  /* ── Typography ────────────────────────────────────────────────── */
  body{
    font-family:var(--font-body)!important;
    background:var(--light)!important;
    color:#1e293b!important;
    -webkit-font-smoothing:antialiased;
    letter-spacing:-0.005em;
  }
  h1,h2,h3,h4,h5,h6,
  .page-title,.table-title,.modal-title,.card .card-value,
  .branch-card h3,.chart-card h4,.profile-info h2,
  .login-logo h2,.cal-nav h3,.profile-section h4{
    font-family:var(--font-heading)!important;
    letter-spacing:-0.02em;
    color:var(--navy)!important;
  }

  /* ── Topbar: light, refined, with subtle shadow ───────────────── */
  body .topbar{
    background:var(--surface)!important;
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    height:var(--topbar-h);
    padding:0 24px;
  }
  body .topbar h1{color:var(--navy)!important;font-weight:700;font-size:15px;letter-spacing:-0.01em;}
  body .topbar .logo-circle{
    background:linear-gradient(135deg,#3b82f6,#2563eb)!important;
    box-shadow:0 4px 12px -2px rgba(59,130,246,.4);
    width:38px;height:38px;font-size:15px;
  }
  body .topbar .user-name{color:var(--navy)!important;font-weight:600;}
  body .topbar .user-role{
    background:var(--orange-soft)!important;
    color:#1d4ed8!important;
    border:1px solid #bfdbfe;
    font-weight:700;padding:3px 10px;
  }
  body .topbar .branch-badge{
    background:#f1f5f9!important;
    color:var(--navy)!important;
    border:1px solid var(--border);
    font-weight:600;
  }
  body .topbar .btn-logout{
    background:transparent!important;
    color:var(--grey)!important;
    border:1px solid var(--border);
    font-weight:600;
  }
  body .topbar .btn-logout:hover{
    background:#fef2f2!important;
    color:var(--red)!important;
    border-color:#fecaca;
  }
  body .topbar .hamburger{color:var(--navy)!important;}

  /* ── Sidebar: white, generous spacing, blue active state ──────── */
  body .sidebar{
    width:var(--sidebar-w);
    background:var(--surface);
    border-right:1px solid var(--border);
    padding:8px 0;
  }
  body .main{
    margin-left:var(--sidebar-w);
    margin-top:var(--topbar-h);
    padding:28px 32px;
    background:var(--light);
  }
  body .nav-item{
    margin:2px 10px;
    padding:10px 14px;
    border-radius:var(--radius-sm);
    border-left:none!important;
    color:#475569!important;
    font-weight:500;
    font-size:13.5px;
    gap:12px;
  }
  body .nav-item:hover{
    background:#f1f5f9!important;
    color:var(--navy)!important;
  }
  body .nav-item.active{
    background:linear-gradient(90deg,#eff6ff,#dbeafe)!important;
    color:#1d4ed8!important;
    font-weight:700;
    box-shadow:inset 3px 0 0 #3b82f6;
  }
  body .nav-item .icon{font-size:15px;}
  body .nav-section{
    color:var(--grey-soft)!important;
    font-size:10px;
    letter-spacing:1.2px;
    padding:18px 24px 6px;
  }
  body .nav-divider{margin:10px 20px;background:var(--border);}

  /* ── Page header ───────────────────────────────────────────────── */
  body .page-title{font-size:26px;font-weight:700;letter-spacing:-0.025em;margin-bottom:6px;}
  body .page-sub,body .page-date{color:var(--grey)!important;}

  /* ── Stat cards: refined, no thick left border ────────────────── */
  body .cards{gap:18px;margin-bottom:28px;}
  body .card{
    background:var(--surface)!important;
    border:1px solid var(--border)!important;
    border-radius:var(--radius);
    padding:22px 22px 20px;
    box-shadow:var(--shadow-sm)!important;
    border-left:1px solid var(--border)!important;
    transition:all .2s ease;
    position:relative;
    overflow:hidden;
  }
  body .card:hover{
    box-shadow:var(--shadow-lg)!important;
    transform:translateY(-2px);
    border-color:var(--border-strong)!important;
  }
  body .card .card-label{
    font-size:11px;color:var(--grey)!important;
    font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  }
  body .card .card-value{
    font-size:34px;font-weight:700;
    color:var(--navy)!important;
    margin:10px 0 6px;letter-spacing:-0.03em;
    font-family:var(--font-heading)!important;
  }
  body .card .card-sub{color:var(--grey)!important;font-size:12.5px;}
  /* Accent strip for colored cards */
  body .card.orange::before,body .card.green::before,
  body .card.red::before,body .card.navy::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
  }
  body .card.orange{border-left:1px solid var(--border)!important;}
  body .card.orange::before{background:linear-gradient(90deg,#3b82f6,#60a5fa);}
  body .card.green{border-left:1px solid var(--border)!important;}
  body .card.green::before{background:linear-gradient(90deg,#059669,#10b981);}
  body .card.red{border-left:1px solid var(--border)!important;}
  body .card.red::before{background:linear-gradient(90deg,#dc2626,#f87171);}
  body .card.navy{border-left:1px solid var(--border)!important;}
  body .card.navy::before{background:linear-gradient(90deg,#1e293b,#475569);}

  /* ── Branch cards ──────────────────────────────────────────────── */
  body .branch-card{
    background:var(--surface)!important;
    border:1px solid var(--border)!important;
    border-radius:var(--radius);
    padding:20px;
    box-shadow:var(--shadow-sm);
  }
  body .branch-card h3{font-size:15px;font-weight:700;margin-bottom:14px;}
  body .branch-card .stat{font-size:13px;padding:7px 0;}

  /* ── Tables ────────────────────────────────────────────────────── */
  body .table-wrap{
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    background:var(--surface);
  }
  body .table-header{padding:18px 22px;border-bottom:1px solid var(--border);}
  body .table-title{font-size:15px;font-weight:700;}
  body th{
    background:#f8fafc!important;
    color:var(--grey)!important;
    font-size:11px;letter-spacing:.6px;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
  }
  body td{padding:13px 16px;font-size:13px;color:#334155;}
  body tr:hover td{background:#f8fafc!important;}

  /* ── Buttons ───────────────────────────────────────────────────── */
  body .btn{
    border-radius:var(--radius-sm);
    font-weight:600;font-size:13px;
    padding:9px 18px;
    transition:all .15s ease;
    font-family:var(--font-body);
    letter-spacing:-0.005em;
  }
  body .btn-primary{
    background:linear-gradient(135deg,#3b82f6,#2563eb)!important;
    color:#fff!important;
    box-shadow:0 1px 2px rgba(37,99,235,.3);
  }
  body .btn-primary:hover{
    box-shadow:0 4px 12px -2px rgba(37,99,235,.5);
    transform:translateY(-1px);
    opacity:1!important;
  }
  body .btn-navy{background:var(--navy)!important;color:#fff!important;}
  body .btn-navy:hover{background:var(--navy-deep)!important;opacity:1!important;}
  body .btn-outline{
    background:var(--surface)!important;
    border:1px solid var(--border-strong)!important;
    color:var(--navy)!important;
  }
  body .btn-outline:hover{background:#f1f5f9!important;border-color:var(--navy)!important;}
  body .btn-green{background:linear-gradient(135deg,#059669,#10b981)!important;color:#fff!important;}
  body .btn-danger{background:linear-gradient(135deg,#dc2626,#ef4444)!important;color:#fff!important;}

  /* ── Login screen ──────────────────────────────────────────────── */
  body #loginScreen{
    background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%)!important;
  }
  body .login-card{
    border-radius:20px;
    padding:44px 40px;
    box-shadow:0 25px 60px -10px rgba(0,0,0,.5);
    width:400px;
  }
  body .login-logo .circle{
    background:linear-gradient(135deg,#3b82f6,#2563eb)!important;
    box-shadow:0 8px 24px -4px rgba(59,130,246,.5);
  }
  body .login-field input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px rgba(59,130,246,.15);}
  body .btn-login{
    background:linear-gradient(135deg,#3b82f6,#2563eb)!important;
    border-radius:var(--radius-sm);
    box-shadow:0 4px 14px -2px rgba(59,130,246,.4);
  }

  /* ── Forms ─────────────────────────────────────────────────────── */
  body .form-group input,body .form-group select,body .form-group textarea,
  body .filters input,body .filters select{
    border:1px solid var(--border)!important;
    border-radius:var(--radius-sm);
    padding:10px 14px;font-size:13px;
    background:var(--surface);
    transition:all .15s;
  }
  body .form-group input:focus,body .form-group select:focus,body .form-group textarea:focus,
  body .filters input:focus,body .filters select:focus{
    border-color:#3b82f6!important;
    box-shadow:0 0 0 3px rgba(59,130,246,.12);
    outline:none!important;
  }

  /* ── Modals ────────────────────────────────────────────────────── */
  body .modal{
    border-radius:18px;
    padding:32px;
    box-shadow:0 25px 60px -10px rgba(0,0,0,.3);
  }
  body .modal-overlay{background:rgba(15,23,42,.55);backdrop-filter:blur(4px);}

  /* ── Badges (softer, rounder) ─────────────────────────────────── */
  body .badge{
    padding:4px 11px;font-size:11px;font-weight:700;
    border-radius:6px;letter-spacing:.2px;
  }
  body .badge-green{background:#dcfce7!important;color:#15803d!important;}
  body .badge-orange{background:#fef3c7!important;color:#a16207!important;}
  body .badge-red{background:#fee2e2!important;color:#b91c1c!important;}
  body .badge-blue{background:#dbeafe!important;color:#1d4ed8!important;}
  body .badge-purple{background:#ede9fe!important;color:#6d28d9!important;}
  body .badge-teal{background:#ccfbf1!important;color:#0f766e!important;}

  /* ── Alerts panel ──────────────────────────────────────────────── */
  body .alert-item{
    border-radius:var(--radius);
    padding:16px 18px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
  }
  body .alert-item:hover{box-shadow:var(--shadow);transform:translateY(-1px);}

  /* ── Tabs ──────────────────────────────────────────────────────── */
  body .tab.active{color:#3b82f6!important;border-bottom-color:#3b82f6!important;}
  body .emp-tab-btn.active{background:#3b82f6!important;border-color:#3b82f6!important;}

  /* ── Chart card ────────────────────────────────────────────────── */
  body .chart-card{
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    padding:22px;
  }
  body .chart-card h4{font-size:15px;font-weight:700;margin-bottom:16px;}

  /* ── Policy box (softer blue) ─────────────────────────────────── */
  body .policy-box{
    background:#eff6ff!important;
    border:1px solid #bfdbfe!important;
    color:#1e40af!important;
    border-radius:var(--radius-sm);
  }

  /* ── Scrollbar polish (webkit) ────────────────────────────────── */
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px;border:2px solid var(--light);}
  ::-webkit-scrollbar-thumb:hover{background:#94a3b8;}

/* --- Block 7 (originally lines 16056-16192) --- */
  /* ═══════════════════════════════════════════════════════════════
     PHASE 2 — Dashboard layout refinement (Cloud White / Architectural)
     Scoped to #page-dashboard so other pages remain untouched.
     ═══════════════════════════════════════════════════════════════ */

  /* ── Hero greeting band ───────────────────────────────────────── */
  #page-dashboard > .page-header{
    position:relative;
    background:linear-gradient(135deg,#ffffff 0%,#f4f7fb 60%,#eaf1fb 100%);
    border:1px solid #e6ecf3;
    border-radius:20px;
    padding:28px 32px;
    margin-bottom:24px;
    box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -16px rgba(59,130,246,.18);
    overflow:hidden;
  }
  #page-dashboard > .page-header::before{
    content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;
    background:radial-gradient(circle,rgba(59,130,246,.18),transparent 70%);
    pointer-events:none;
  }
  #page-dashboard > .page-header::after{
    content:"";position:absolute;bottom:-40px;left:-40px;width:180px;height:180px;
    background:radial-gradient(circle,rgba(99,102,241,.12),transparent 70%);
    pointer-events:none;
  }
  #page-dashboard > .page-header > div:first-child{position:relative;z-index:1;}
  #page-dashboard .page-title{
    font-family:'Urbanist',sans-serif;font-weight:700;font-size:28px;
    letter-spacing:-.02em;color:#0f172a;margin-bottom:6px;
  }
  #page-dashboard .page-sub{font-size:14px;color:#475569;}
  #page-dashboard .page-date{
    display:inline-block;margin-top:10px;font-size:12px;font-weight:600;
    color:#3b82f6;background:rgba(59,130,246,.08);
    padding:4px 10px;border-radius:999px;
  }
  #page-dashboard .quick-actions{
    position:relative;z-index:1;margin-top:20px;margin-bottom:0;
    display:flex;gap:10px;flex-wrap:wrap;
  }

  /* ── KPI stat tiles ───────────────────────────────────────────── */
  #page-dashboard .cards{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;margin-bottom:24px;
  }
  #page-dashboard .cards .card{
    position:relative;border-radius:16px;padding:20px 22px;
    background:#ffffff;border:1px solid #eef2f7;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
    overflow:hidden;border-left:none !important;
  }
  #page-dashboard .cards .card::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(180deg,#3b82f6,#6366f1);border-radius:3px 0 0 3px;
  }
  #page-dashboard .cards .card.green::before{background:linear-gradient(180deg,#10b981,#059669);}
  #page-dashboard .cards .card.red::before{background:linear-gradient(180deg,#ef4444,#dc2626);}
  #page-dashboard .cards .card.orange::before{background:linear-gradient(180deg,#f59e0b,#d97706);}
  #page-dashboard .cards .card.navy::before{background:linear-gradient(180deg,#1e293b,#334155);}
  #page-dashboard .cards .card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px -16px rgba(59,130,246,.35),0 4px 8px rgba(15,23,42,.04);
    border-color:#dbe5f1;
  }
  #page-dashboard .cards .card .card-label{
    font-family:'Urbanist',sans-serif;font-size:11px;font-weight:700;
    color:#64748b;letter-spacing:.06em;text-transform:uppercase;
  }
  #page-dashboard .cards .card .card-value{
    font-family:'Urbanist',sans-serif;font-size:34px;font-weight:800;
    color:#0f172a;letter-spacing:-.02em;margin:10px 0 4px;line-height:1;
  }
  #page-dashboard .cards .card .card-sub{font-size:12px;color:#94a3b8;}

  /* ── Branch comparison strip ──────────────────────────────────── */
  #page-dashboard .branch-stats{
    grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;
  }
  #page-dashboard .branch-card{
    position:relative;background:#ffffff;border:1px solid #eef2f7;
    border-radius:16px;padding:20px 22px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:transform .18s ease,box-shadow .18s ease;
  }
  #page-dashboard .branch-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px -16px rgba(59,130,246,.3);
  }
  #page-dashboard .branch-card::before{
    content:"";position:absolute;top:0;left:20px;right:20px;height:3px;
    background:linear-gradient(90deg,#3b82f6,#6366f1,transparent);
    border-radius:0 0 3px 3px;
  }
  #page-dashboard .branch-card h3{
    font-family:'Urbanist',sans-serif;font-size:15px;font-weight:700;
    color:#0f172a;letter-spacing:-.01em;margin-bottom:14px;
    padding-bottom:12px;border-bottom:1px dashed #e2e8f0;
  }

  /* ── Chart row ────────────────────────────────────────────────── */
  #page-dashboard .chart-row{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;
  }
  #page-dashboard .chart-card{
    background:#ffffff;border:1px solid #eef2f7;border-radius:16px;
    padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04);
  }
  #page-dashboard .chart-card h4{
    font-family:'Urbanist',sans-serif;font-size:14px;font-weight:700;
    color:#0f172a;margin-bottom:14px;letter-spacing:-.01em;
  }

  /* ── Alerts panel polish ──────────────────────────────────────── */
  #page-dashboard .alerts-panel{gap:12px;margin-bottom:24px;}
  #page-dashboard .alert-item{
    border-radius:14px;border:1px solid #eef2f7;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:transform .18s ease,box-shadow .18s ease;
  }
  #page-dashboard .alert-item:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px -12px rgba(59,130,246,.3);
  }
  #page-dashboard .alert-icon{border-radius:12px;}

  /* ── Responsive ───────────────────────────────────────────────── */
  @media (max-width: 960px){
    #page-dashboard > .page-header{padding:22px;}
    #page-dashboard .page-title{font-size:22px;}
    #page-dashboard .branch-stats{grid-template-columns:1fr;}
    #page-dashboard .chart-row{grid-template-columns:1fr;}
  }

/* --- Block 8 (originally lines 16194-16255) --- */
  /* ─── Branch comparison strip ────────────────────────────────── */
  #phase2BranchStrip{
    background:#fff;border:1px solid #eef2f7;border-radius:16px;
    padding:20px 22px;margin-bottom:20px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
  }
  #phase2BranchStrip h3{
    font-family:'Urbanist',sans-serif;font-size:14px;font-weight:700;
    color:#0f172a;letter-spacing:-.01em;margin:0 0 14px;
    display:flex;align-items:center;justify-content:space-between;
  }
  #phase2BranchStrip h3 .hint{font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;}
  #phase2BranchStrip .pb-row{
    display:grid;grid-template-columns:140px 1fr 70px;
    align-items:center;gap:14px;padding:10px 0;
    border-bottom:1px dashed #eef2f7;
  }
  #phase2BranchStrip .pb-row:last-child{border-bottom:none;}
  #phase2BranchStrip .pb-name{font-size:13px;font-weight:600;color:#1e293b;display:flex;align-items:center;gap:8px;}
  #phase2BranchStrip .pb-name .dot{width:8px;height:8px;border-radius:50%;}
  #phase2BranchStrip .pb-bar{height:10px;background:#f1f5f9;border-radius:999px;overflow:hidden;position:relative;}
  #phase2BranchStrip .pb-fill{height:100%;border-radius:999px;transition:width .6s ease;}
  #phase2BranchStrip .pb-pct{font-family:'Urbanist',sans-serif;font-weight:700;font-size:15px;color:#0f172a;text-align:right;}

  /* ─── KPI sparkline mini-bar ─────────────────────────────────── */
  #page-dashboard .cards .card .kpi-spark{
    margin-top:10px;height:6px;background:#f1f5f9;border-radius:999px;overflow:hidden;
  }
  #page-dashboard .cards .card .kpi-spark > span{
    display:block;height:100%;border-radius:999px;transition:width .6s ease;
  }

  /* ─── Extra chart row (doughnut + pending bars) ──────────────── */
  #phase2ChartRow{
    display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-bottom:24px;
  }
  #phase2ChartRow .chart-card{
    background:#fff;border:1px solid #eef2f7;border-radius:16px;
    padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04);
  }
  #phase2ChartRow h4{
    font-family:'Urbanist',sans-serif;font-size:14px;font-weight:700;
    color:#0f172a;margin-bottom:14px;letter-spacing:-.01em;
  }
  #phase2ChartRow .doughnut-wrap{position:relative;height:200px;display:flex;align-items:center;justify-content:center;}
  #phase2ChartRow .doughnut-center{
    position:absolute;text-align:center;pointer-events:none;
  }
  #phase2ChartRow .doughnut-center .big{
    font-family:'Urbanist',sans-serif;font-size:28px;font-weight:800;color:#0f172a;line-height:1;
  }
  #phase2ChartRow .doughnut-center .lbl{font-size:11px;color:#64748b;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-top:4px;}
  #phase2ChartRow .legend{display:flex;justify-content:center;gap:14px;margin-top:10px;flex-wrap:wrap;}
  #phase2ChartRow .legend span{font-size:12px;color:#475569;display:flex;align-items:center;gap:6px;}
  #phase2ChartRow .legend span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,#3b82f6);}

  @media (max-width: 960px){
    #phase2ChartRow{grid-template-columns:1fr;}
    #phase2BranchStrip .pb-row{grid-template-columns:100px 1fr 50px;gap:8px;}
  }

/* --- Block 9 (originally lines 16473-16477) --- */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:auto;background:var(--red,#C0392B);color:#fff;font-size:11px;font-weight:700;border-radius:10px;line-height:1;box-shadow:0 0 0 2px rgba(192,57,43,0.15);animation:nbPulse 2s ease-in-out infinite;}
.nav-item{position:relative;}
@keyframes nbPulse{0%,100%{box-shadow:0 0 0 2px rgba(192,57,43,0.15);}50%{box-shadow:0 0 0 4px rgba(192,57,43,0.05);}}