*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}
:root{--primary:#1a73e8;--dark:#1e293b;--sidebar:#0f172a;--border:#e2e8f0;--bg:#f1f5f9}
body{background:var(--bg);color:#334155;min-height:100vh}

/* HEADER */
.header{background:var(--dark);color:white;padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,0.3)}
.h-left{display:flex;align-items:center;gap:8px}
.h-logo{width:34px;height:34px;background:linear-gradient(135deg,#1a73e8,#34a853);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.h-title{font-size:15px;font-weight:700}.h-title span{color:#60a5fa}
.h-date{font-size:10px;color:#64748b;display:none}
@media(min-width:640px){.h-date{display:block}}
.h-right{display:flex;align-items:center;gap:8px}
.btn-add{background:linear-gradient(135deg,#1a73e8,#1557b0);color:white;border:none;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px;transition:all 0.2s;text-decoration:none;white-space:nowrap}
.btn-add:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,115,232,0.4);color:white}
.user-menu{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.08);padding:4px 10px 4px 5px;border-radius:30px;cursor:pointer;position:relative;transition:background 0.2s}
.user-menu:hover{background:rgba(255,255,255,0.14)}
.u-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:white;flex-shrink:0}
.u-name{font-size:12px;color:white;font-weight:600;display:none}
.u-role{font-size:10px;color:#94a3b8;display:none}
@media(min-width:480px){.u-name{display:block}.u-role{display:block}}
.dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#1e293b;border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:6px;min-width:170px;box-shadow:0 10px 30px rgba(0,0,0,0.4);display:none;z-index:500}
.dropdown.open{display:block}
.dd-item{padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13px;color:#e2e8f0;display:flex;align-items:center;gap:8px;text-decoration:none;transition:background 0.15s}
.dd-item:hover{background:rgba(255,255,255,0.08);color:white}
.dd-item.danger{color:#f87171}
.dd-item.danger:hover{background:rgba(239,68,68,0.15)}
.dd-divider{height:1px;background:rgba(255,255,255,0.08);margin:5px 0}

/* LAYOUT */
.layout{display:flex;margin-top:56px;min-height:calc(100vh - 56px)}

/* SIDEBAR */
.sidebar{width:0;background:var(--sidebar);position:fixed;top:56px;left:0;bottom:0;overflow-y:auto;z-index:200;transition:width 0.3s;overflow-x:hidden}
.sidebar.open{width:220px}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199;margin-top:56px}
.sidebar-overlay.show{display:block}
@media(min-width:768px){
    .sidebar{width:210px}
    .sidebar-overlay{display:none!important}
    .main{margin-left:210px}
    .hamburger{display:none!important}
}
.hamburger{background:transparent;border:none;color:white;font-size:20px;cursor:pointer;padding:4px;display:flex;align-items:center}
.sb-title{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#475569;padding:0 16px 6px;text-transform:uppercase;white-space:nowrap}
.sb-item{display:flex;align-items:center;gap:8px;padding:9px 16px;text-decoration:none;color:#94a3b8;font-size:13px;font-weight:500;transition:all 0.2s;border-left:3px solid transparent;white-space:nowrap}
.sb-item:hover{background:rgba(255,255,255,0.05);color:white}
.sb-item.active{background:rgba(26,115,232,0.2);color:#60a5fa;border-left-color:#1a73e8}
.sb-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.sb-badge{margin-left:auto;background:#1a73e8;color:white;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}
.sb-badge.red{background:#ef4444}.sb-badge.green{background:#22c55e}
.sb-divider{height:1px;background:rgba(255,255,255,0.07);margin:8px 16px}

/* MAIN */
.main{flex:1;padding:16px;min-width:0}
@media(min-width:768px){.main{padding:20px}}

/* PAGE HEADER */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.page-title{font-size:18px;font-weight:700;color:#1e293b}
.page-title span{color:#64748b;font-size:13px;font-weight:400;margin-left:6px}

/* BUTTONS */
.btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all 0.2s;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.btn-primary{background:linear-gradient(135deg,#1a73e8,#1557b0);color:white}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,115,232,0.4);color:white}
.btn-secondary{background:#f1f5f9;color:#475569}
.btn-secondary:hover{background:#e2e8f0}
.btn-danger{background:#ef4444;color:white}
.btn-danger:hover{background:#dc2626;color:white}
.btn-success{background:#22c55e;color:white}
.btn-sm{padding:6px 12px;font-size:12px}

.btn-icon{width:28px;height:28px;border-radius:6px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:all 0.15s;text-decoration:none;flex-shrink:0}
.bi-view{background:#f3e8ff;color:#6b21a8}.bi-view:hover{background:#e9d5ff}
.bi-edit{background:#dbeafe;color:#1e40af}.bi-edit:hover{background:#bfdbfe}
.bi-del{background:#fee2e2;color:#991b1b}.bi-del:hover{background:#fecaca}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:480px){.stats-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.stats-grid{grid-template-columns:repeat(6,1fr)}}
.stat-card{background:white;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.08);transition:transform 0.2s}
.stat-card:hover{transform:translateY(-2px)}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.stat-info h3{font-size:20px;font-weight:800;color:#1e293b}
.stat-info p{font-size:10px;color:#64748b;font-weight:500}

/* DEPT CARDS */
.dept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
@media(min-width:600px){.dept-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.dept-grid{grid-template-columns:repeat(4,1fr)}}
.dept-card{background:white;border-radius:12px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,0.08);cursor:pointer;transition:all 0.2s;border-top:3px solid;text-decoration:none;display:block}
.dept-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.1)}
.dept-card-title{font-size:12px;font-weight:700;color:#1e293b;margin-bottom:7px}
.dept-stats{display:flex;gap:4px;flex-wrap:wrap}
.ds{font-size:10px;padding:2px 6px;border-radius:8px;font-weight:600}

/* TABLE */
.table-card{background:white;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,0.08);overflow:hidden}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:700px}
thead tr{background:#f8fafc;border-bottom:2px solid #e2e8f0}
thead th{padding:10px 12px;text-align:left;font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.8px;white-space:nowrap}
tbody tr{border-bottom:1px solid #f1f5f9;transition:background 0.15s}
tbody tr:hover{background:#f8fafc}
tbody tr:last-child{border-bottom:none}
tbody td{padding:10px 12px;font-size:13px;color:#334155;vertical-align:middle}
tr.my-row{background:#fffbeb}
tr.my-row:hover{background:#fef3c7}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-pending{background:#fef3c7;color:#92400e}
.badge-inprogress{background:#dbeafe;color:#1e40af}
.badge-done{background:#dcfce7;color:#166534}
.badge-hold{background:#fee2e2;color:#991b1b}
.badge-review{background:#f3e8ff;color:#6b21a8}
.priority-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px}
.p-urgent{background:#ef4444}.p-high{background:#f97316}.p-medium{background:#eab308}.p-low{background:#22c55e}
.dept-tag{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:600}
.dept-hr{background:#e0f2fe;color:#075985}.dept-finance{background:#fef9c3;color:#713f12}
.dept-marketing{background:#fce7f3;color:#9d174d}.dept-production{background:#f3e8ff;color:#6b21a8}
.dept-academic{background:#dcfce7;color:#166534}.dept-it{background:#e0e7ff;color:#3730a3}
.dept-customer{background:#fff7ed;color:#9a3412}.dept-operation{background:#f1f5f9;color:#475569}
.role-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;text-transform:uppercase}
.r-admin{background:#fef3c7;color:#92400e}.r-manager{background:#dbeafe;color:#1e40af}
.r-member{background:#dcfce7;color:#166534}.r-viewer{background:#f1f5f9;color:#475569}
.p-avatar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:white;flex-shrink:0}
.avatars-stack{display:flex}
.avatars-stack .avatar{margin-left:-6px;border:2px solid white}
.avatars-stack .avatar:first-child{margin-left:0}
.dl-over{color:#ef4444;font-size:11px;font-weight:600}
.dl-soon{color:#f97316;font-size:11px;font-weight:600}
.dl-ok{color:#22c55e;font-size:11px;font-weight:600}
.prog-wrap{width:70px}
.prog-bg{background:#e2e8f0;border-radius:4px;height:5px;overflow:hidden}
.prog-fill{height:100%;border-radius:4px}
.prog-txt{font-size:10px;color:#64748b;margin-top:2px;text-align:right}

/* FILTERS */
.filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filter-search{flex:1;min-width:150px;max-width:250px;position:relative}
.filter-search input{width:100%;padding:8px 12px 8px 32px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;outline:none;transition:border-color 0.2s}
.filter-search input:focus{border-color:var(--primary)}
.filter-search .si{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:13px}
.filter-select{padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;outline:none;cursor:pointer;background:white;color:#334155;max-width:140px}

/* TABS */
.tabs{display:flex;gap:3px;margin-bottom:12px;background:white;padding:4px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,0.08);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab-btn{padding:6px 12px;border-radius:7px;border:none;cursor:pointer;font-size:11px;font-weight:600;color:#64748b;background:transparent;transition:all 0.2s;text-decoration:none;white-space:nowrap;flex-shrink:0}
.tab-btn:hover{background:#f1f5f9}
.tab-btn.active{background:var(--primary);color:white}

/* FORMS */
.form-card{background:white;border-radius:14px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.form-grid{grid-template-columns:1fr 1fr}}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:11px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:0.5px}
.form-control{padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;outline:none;transition:border-color 0.2s;color:#334155;width:100%}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,0.1)}
textarea.form-control{resize:vertical;min-height:70px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid #e2e8f0;flex-wrap:wrap}

/* USERS GRID */
.users-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.users-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.users-grid{grid-template-columns:repeat(3,1fr)}}
.user-card{background:white;border-radius:14px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,0.08);transition:all 0.2s;border:2px solid transparent}
.user-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.1)}
.user-card.me{border-color:var(--primary)}
.uc-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.uc-avatar{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:white;flex-shrink:0}
.uc-name{font-size:14px;font-weight:700;color:#1e293b}
.uc-email{font-size:11px;color:#64748b;margin-top:2px;word-break:break-all}
.uc-detail{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b;margin-bottom:5px;flex-wrap:wrap}
.uc-detail strong{color:#334155}
.uc-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.uc-btn{flex:1;min-width:70px;padding:7px;border-radius:8px;border:none;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:3px}
.uc-edit{background:#dbeafe;color:#1e40af}.uc-edit:hover{background:#bfdbfe;color:#1e40af}
.uc-del{background:#fee2e2;color:#991b1b}.uc-del:hover{background:#fecaca;color:#991b1b}

/* ALERTS */
.alert{padding:10px 14px;border-radius:10px;font-size:13px;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.alert-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.alert-info{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}
.alert-warning{background:#fef3c7;color:#92400e;border:1px solid #fde68a}

/* EMPTY */
.empty{text-align:center;padding:40px 20px;color:#94a3b8}
.empty .ei{font-size:40px;margin-bottom:8px}
.empty p{font-size:13px}

/* ATTENDANCE */
.att-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.att-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.att-grid{grid-template-columns:repeat(4,1fr)}}
.att-card{background:white;border-radius:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,0.08);text-align:center}
.att-stat{font-size:28px;font-weight:800;color:#1e293b}
.att-label{font-size:11px;color:#64748b;font-weight:500;margin-top:4px}
.att-status{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.att-present{background:#dcfce7;color:#166534}
.att-absent{background:#fee2e2;color:#991b1b}
.att-late{background:#fef3c7;color:#92400e}
.att-halfday{background:#dbeafe;color:#1e40af}
.att-leave{background:#f3e8ff;color:#6b21a8}

/* CHECKIN BUTTON */
.checkin-box{background:white;border-radius:16px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.08);margin-bottom:16px}
.checkin-time{font-size:36px;font-weight:800;color:#1e293b;text-align:center;margin-bottom:6px}
.checkin-date{font-size:13px;color:#64748b;text-align:center;margin-bottom:16px}
.checkin-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-checkin{padding:12px 28px;border-radius:12px;border:none;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.2s}
.btn-ci-in{background:linear-gradient(135deg,#22c55e,#16a34a);color:white}
.btn-ci-in:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(34,197,94,0.4)}
.btn-ci-out{background:linear-gradient(135deg,#ef4444,#dc2626);color:white}
.btn-ci-out:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(239,68,68,0.4)}

/* PERMISSION CHECKBOXES */
.perm-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:500px){.perm-grid{grid-template-columns:repeat(2,1fr)}}
.perm-item{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f8fafc;border-radius:8px;cursor:pointer;border:1.5px solid transparent;transition:all 0.2s}
.perm-item:hover{border-color:#1a73e8;background:#eff6ff}
.perm-item input{cursor:pointer;width:15px;height:15px}
.perm-item-text{flex:1}
.perm-item-title{font-size:13px;font-weight:600;color:#1e293b}
.perm-item-desc{font-size:11px;color:#64748b}

/* MULTI SELECT */
.multi-select{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:4px}
@media(min-width:500px){.multi-select{grid-template-columns:repeat(3,1fr)}}
.ms-item{display:flex;align-items:center;gap:6px;padding:7px 10px;background:#f8fafc;border-radius:7px;cursor:pointer;border:1.5px solid transparent;transition:all 0.2s;font-size:12px;font-weight:500}
.ms-item:hover{border-color:#1a73e8;background:#eff6ff}
.ms-item input{cursor:pointer}
.ms-item.checked{border-color:#1a73e8;background:#eff6ff;color:#1e40af;font-weight:600}

/* LOGIN */
.login-page{min-height:100vh;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);display:flex;align-items:center;justify-content:center;padding:16px}
.login-container{width:100%;max-width:380px}
.login-logo{text-align:center;margin-bottom:22px}
.logo-icon{width:64px;height:64px;background:linear-gradient(135deg,#1a73e8,#34a853);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 12px;box-shadow:0 8px 24px rgba(26,115,232,0.4)}
.login-logo h1{color:white;font-size:20px;font-weight:800}
.login-logo p{color:#64748b;font-size:12px;margin-top:3px}
.login-card{background:#1e293b;border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.login-card h2{color:white;font-size:16px;margin-bottom:20px;font-weight:700}
.login-group{margin-bottom:14px}
.login-group label{display:block;color:#94a3b8;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:6px}
.input-wrap{position:relative}
.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px}
.login-input{width:100%;padding:11px 12px 11px 38px;background:#0f172a;border:1.5px solid rgba(255,255,255,0.1);border-radius:10px;color:white;font-size:14px;outline:none;transition:all 0.2s}
.login-input:focus{border-color:#1a73e8;box-shadow:0 0 0 3px rgba(26,115,232,0.2)}
.login-input::placeholder{color:#475569}
.btn-login{width:100%;padding:12px;background:linear-gradient(135deg,#1a73e8,#1557b0);color:white;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;margin-top:6px;transition:all 0.2s}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,115,232,0.5)}
.login-error{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);color:#f87171;padding:9px 12px;border-radius:8px;font-size:12px;margin-top:10px;text-align:center}

/* CALENDAR */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-head{text-align:center;font-size:10px;font-weight:700;color:#64748b;padding:6px 2px;text-transform:uppercase}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s;position:relative;flex-direction:column;gap:1px}
.cal-day:hover{background:#f1f5f9}
.cal-day.today{background:#1a73e8;color:white}
.cal-day.present{background:#dcfce7;color:#166534}
.cal-day.absent{background:#fee2e2;color:#991b1b}
.cal-day.late{background:#fef3c7;color:#92400e}
.cal-day.leave{background:#f3e8ff;color:#6b21a8}
.cal-day.other-month{color:#cbd5e1}
.cal-day-dot{width:4px;height:4px;border-radius:50%}

/* PERMISSION PAGE */
.perm-section{background:white;border-radius:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,0.08);margin-bottom:14px}
.perm-section h4{font-size:13px;font-weight:700;color:#1e293b;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #f1f5f9}

/* MOBILE BOTTOM NAV */
.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid #e2e8f0;z-index:300;box-shadow:0 -2px 10px rgba(0,0,0,0.08)}
@media(min-width:768px){.mobile-nav{display:none}}
.mn-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 4px;text-decoration:none;color:#94a3b8;font-size:9px;font-weight:600;gap:3px;transition:color 0.2s}
.mn-item.active{color:#1a73e8}
.mn-icon{font-size:18px}
body{padding-bottom:60px}
@media(min-width:768px){body{padding-bottom:0}}