*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#172033}button,input,select,textarea{font:inherit}button{border:0;border-radius:8px;padding:10px 14px;margin:5px;cursor:pointer;background:#1f5eff;color:#fff}button:hover{opacity:.9}.success{background:#138a52}.danger{background:#c73535}.warn{background:#d88b00}.card{background:#fff;border-radius:14px;padding:20px;margin:14px 0;box-shadow:0 4px 18px rgba(0,0,0,.07)}.login{max-width:720px;margin:5vh auto;padding:28px}.login input,.login select{display:block;width:100%;margin:9px 0}.wide{max-width:900px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.span2{grid-column:span 2}label{display:block;font-weight:700;font-size:13px;margin:7px 0 4px}input,select,textarea{width:100%;padding:10px;border:1px solid #cbd3df;border-radius:8px;background:#fff;color:inherit}textarea{min-height:90px;resize:vertical}.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#14213d;color:#fff;padding:18px;overflow:auto}.sidebar button{width:100%;text-align:left;background:#21345d}.main{margin-left:240px;padding:18px}.top{display:flex;justify-content:space-between;align-items:center;gap:10px}.row{display:flex;gap:12px;flex-wrap:wrap}.row>div{flex:1;min-width:150px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#fff;border-radius:12px;padding:18px;text-align:center;box-shadow:0 3px 12px rgba(0,0,0,.06)}.stat b{font-size:24px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:800px}th,td{border-bottom:1px solid #e5e8ef;padding:10px;text-align:left;vertical-align:top}th{background:#eef3fa}.small{font-size:12px;color:#64748b}.badge{display:inline-block;background:#e7eefc;padding:5px 8px;border-radius:999px;margin:4px}.check{display:inline-flex;align-items:center;gap:5px;margin:8px 12px 8px 0}.check input{width:auto}.avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #d6deea;display:block}.avatar.tiny{width:34px;height:34px;display:inline-block;vertical-align:middle}.avatar.big{width:92px;height:92px}.preview{display:none;margin-top:8px}.placeholder{display:grid;place-items:center;background:#eef3fa}.profileHead{display:flex;align-items:center;gap:15px;margin-bottom:15px}.notice{padding:12px;border-radius:10px;background:#eef6ff;margin:8px 0}.participantBox{max-height:250px;overflow:auto;border:1px solid #cbd3df;border-radius:10px;padding:8px;background:#fafcff}.participantItem{display:flex;align-items:center;gap:8px;padding:8px;margin:2px 0;border-radius:7px;font-weight:400;cursor:pointer}.participantItem:hover{background:#eef3fa}.participantItem input{width:auto}.et-date-wrap{display:flex;align-items:center;gap:7px}.et-date-display{background:#fffbe8;font-weight:700}.dark{background:#101827;color:#eef2f7}.dark .card,.dark .stat{background:#172235;color:#eef2f7}.dark input,.dark select,.dark textarea{background:#101827;color:#eef2f7;border-color:#3a465c}.dark th{background:#26334a}.dark td{border-color:#344158}.dark .sidebar{background:#0a1020}@media(max-width:850px){.sidebar{position:static;width:100%;display:flex;flex-wrap:wrap}.sidebar h2{width:100%}.sidebar button{width:auto}.main{margin-left:0}.stats{grid-template-columns:1fr 1fr}.formgrid{grid-template-columns:1fr}.span2{grid-column:span 1}}@media(max-width:500px){.stats{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}}
.sidebarLogo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sidebarLogo h2{margin:0}
.institutionLogo{width:58px;height:58px;object-fit:contain;border-radius:8px;background:#fff;padding:4px}
.logoPreview{width:140px;height:140px}
.brandArea{display:flex;align-items:center;gap:12px}
/* Dashboard / Leave Analytics layout */
.dashHead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:4px 0 12px}.dashHead h2{margin:0 0 4px}.dashHead button{min-width:210px}.dashFilter{display:grid;grid-template-columns:minmax(260px,1fr) 260px;align-items:end;gap:16px}.dashFilter label{margin:0}.dashStats{grid-template-columns:repeat(4,1fr);margin:14px 0}.dashMetricLabel{display:block;font-size:14px;color:#64748b;margin-bottom:8px}.dashboardTable{min-width:980px}.dashboardTable th{font-size:13px;text-align:center}.dashboardTable th:first-child,.dashboardTable td:first-child{text-align:left}.dashboardTable td{text-align:center;padding:12px 10px}.dashboardTable tbody tr:hover{background:#f8fafc}.dashStatus{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.dashSep{color:#cbd5e1;margin:0 2px}.dashDot{width:13px;height:13px;border-radius:50%;display:inline-block;vertical-align:middle;border:1px solid rgba(0,0,0,.18);margin-right:2px}.dashDot.requested{background:#e6c94c}.dashDot.approved{background:#36a269}.dashDot.rejected{background:#c55372}.dashLegend{display:flex;gap:20px;flex-wrap:wrap;margin:-4px 0 14px;color:#475569;font-size:13px}.dashLegend span{display:inline-flex;align-items:center;gap:6px}.dashLegend .dashDot{margin:0}.dark .dashMetricLabel,.dark .dashLegend{color:#b8c2d1}.dark .dashboardTable tbody tr:hover{background:#1b293e}.dark .dashFilter{background:#172235}@media(max-width:850px){.dashHead{align-items:stretch;flex-direction:column}.dashHead button{width:100%}.dashFilter{grid-template-columns:1fr}.dashStats{grid-template-columns:1fr 1fr}}@media(max-width:500px){.dashStats{grid-template-columns:1fr}}


/* Attendance Management */
.att-page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 0 14px}.att-page-head h2{margin:0 0 4px}.att-today{background:#fff;border:1px solid #d6dce5;border-radius:8px;padding:10px 14px;font-weight:700}.att-section-head{background:#20242b;color:#fff;margin:-20px -20px 0;padding:14px 18px;border-radius:14px 14px 0 0;display:flex;align-items:center;justify-content:space-between}.att-section-head h2{margin:0;font-size:22px}.att-collapse{background:#fff;color:#111;border:5px solid #777;border-radius:12px;font-size:22px;width:58px;height:48px;line-height:1;margin:0}.att-mark-card{padding:20px;overflow:hidden}.att-tabs{display:flex;gap:0;border-bottom:1px solid #dce2ea;margin:20px 0 16px;flex-wrap:wrap}.att-tab{background:#fff;color:#1d68df;border:1px solid transparent;border-radius:10px 10px 0 0;font-weight:700;font-size:17px;margin:0;padding:14px 22px}.att-tab.active{color:#3e4652;border-color:#dce2ea;border-bottom-color:#fff;margin-bottom:-1px}.att-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.att-form-grid .att-full{grid-column:span 2}.att-form-grid label{font-size:16px}.att-form-grid input,.att-form-grid select,.att-filters input,.att-filters select{min-height:48px;font-size:16px}.att-select-title{display:flex;justify-content:space-between;align-items:center;margin:20px 0 6px;font-size:17px}.att-select-title span{background:#1769e8;color:#fff;padding:7px 12px;border-radius:8px;font-weight:700}.att-select-actions{display:flex;gap:6px;margin-bottom:6px}.att-select-actions button{background:#2c3f68}.att-select-actions .secondary{background:#64748b}.att-employee-list{max-height:230px;overflow:auto;border:1px solid #d5dce6;border-radius:12px;background:#f8fafc;padding:8px}.att-employee{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:11px 8px;border-bottom:1px solid #e6eaf0;font-size:16px;font-weight:600}.att-employee:last-child{border-bottom:0}.att-employee input{width:20px;height:20px}.att-employee small{color:#64748b}.att-save-btn{min-width:190px;margin-top:15px}.att-record-card{padding:20px;overflow:hidden}.att-count{background:#fff;color:#1f2430;border-radius:9px;padding:8px 14px;font-weight:800}.att-filters{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:12px;margin:22px 0 14px}.att-filters button{min-height:48px;margin:0}.att-table{min-width:900px}.att-table th{font-size:14px}.att-status{display:inline-block;padding:5px 9px;border-radius:999px;background:#e7eefc;font-weight:700}.att-status.present{background:#dff5e7;color:#177447}.att-status.absent{background:#fde3e3;color:#a52222}.att-status.late{background:#fff0c7;color:#986700}.att-status.leave{background:#e5e7ff;color:#5145b5}.att-status.holiday{background:#e7e7e7;color:#454545}.att-holiday-list{margin-top:20px}.att-holiday-list h3{margin-bottom:8px}.dark .att-today,.dark .att-count,.dark .att-tab{background:#172235;color:#eef2f7}.dark .att-employee-list{background:#101827;border-color:#3a465c}.dark .att-today{border-color:#3a465c}.dark .att-table td{border-color:#344158}
@media(max-width:700px){.att-page-head{align-items:stretch;flex-direction:column}.att-form-grid{grid-template-columns:1fr}.att-form-grid .att-full{grid-column:span 1}.att-filters{grid-template-columns:1fr}.att-tabs{overflow-x:auto;flex-wrap:nowrap}.att-tab{white-space:nowrap}.att-section-head h2{font-size:19px}}
/* Attendance reports */
.att-report-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.att-report-tabs{display:flex;gap:8px;flex-wrap:wrap}.att-report-tabs button{background:#eef3fa;color:#1f2937}.att-report-tabs button.active{background:#1f5eff;color:#fff}.att-report-chart{display:flex;flex-direction:column;gap:12px}.att-report-chart>div{display:grid;grid-template-columns:90px 1fr 45px;align-items:center;gap:10px}.att-report-chart b{height:22px;border-radius:7px;background:#1f5eff;display:block;min-width:4px}.att-report-chart em{font-style:normal;font-weight:800;text-align:right}.dark .att-report-tabs button{background:#26334a;color:#eef2f7}.dark .att-report-tabs button.active{background:#1f5eff;color:#fff}
@media(max-width:700px){.att-report-head{align-items:stretch;flex-direction:column}}

/* About Developer */
.developer-footer{margin:28px 0 0;padding:0;border-radius:16px;background:linear-gradient(135deg,#14213d,#1f5eff);color:#fff;box-shadow:0 8px 24px rgba(20,33,61,.18);overflow:hidden}.developer-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 22px}.dev-brand{font-weight:900;letter-spacing:2px;font-size:20px}.dev-copy{font-size:12px;opacity:.85;margin-top:4px}.dev-mini-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.dev-mini-links a{color:#fff;text-decoration:none;background:rgba(255,255,255,.12);padding:8px 11px;border-radius:999px;font-size:12px}.dev-mini-links a:hover{background:rgba(255,255,255,.22)}
.about-dev{max-width:1100px;margin:0 auto}.about-hero{display:flex;align-items:center;gap:18px;padding:26px;border-radius:20px;background:linear-gradient(135deg,#14213d 0%,#1769e8 55%,#14b8a6 100%);color:#fff;box-shadow:0 10px 30px rgba(20,33,61,.2)}.about-icon{width:78px;height:78px;border-radius:22px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);display:grid;place-items:center;font-size:26px;font-weight:900;letter-spacing:1px}.about-kicker{font-size:12px;font-weight:800;letter-spacing:2px;opacity:.8}.about-hero h2{margin:4px 0 5px;font-size:30px}.about-hero p{margin:0;opacity:.9}.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:16px}.about-card{background:#fff;border:1px solid #e3e8f0;border-radius:18px;padding:20px;box-shadow:0 5px 18px rgba(15,23,42,.06)}.about-card h3{margin:5px 0 10px}.about-card p{margin:7px 0}.about-card-icon{font-size:26px}.dev-link{color:#1769e8;font-weight:800;text-decoration:none}.dev-link:hover{text-decoration:underline}.hours-pill{display:inline-block!important;background:#dff7ed;color:#147a4f;padding:9px 14px;border-radius:999px;font-weight:900}.follow-card{margin-top:15px}.social-links{display:flex;gap:12px;flex-wrap:wrap}.social{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:12px;text-decoration:none;font-weight:800;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.08)}.social.facebook{background:#1877f2}.social.twitter{background:#111827}.social.telegram{background:#229ed9}.social.instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.social:hover{transform:translateY(-1px);filter:brightness(1.05)}.about-bottom{margin-top:15px;padding:18px 20px;border-radius:16px;background:#eef3fa;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#334155}.dark .about-card{background:#172235;color:#eef2f7;border-color:#344158}.dark .about-bottom{background:#26334a;color:#eef2f7}.dark .dev-link{color:#76a9ff}.dark .hours-pill{background:#163f31;color:#7ee2b3}
@media(max-width:700px){.developer-footer-inner{align-items:flex-start;flex-direction:column}.dev-mini-links{justify-content:flex-start}.about-grid{grid-template-columns:1fr}.about-hero{align-items:flex-start;flex-direction:column}.about-hero h2{font-size:24px}}