@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
:root{--yellow:#ffd400;--black:#0d0f14;--white:#fff;--gray:#1e222b}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{background:#0d0f14;color:#e6e6e6}
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--black);color:var(--white);position:sticky;top:0;z-index:10}
.header-right{display:flex;align-items:center;gap:12px}
.header-right .user-name{font-weight:600;color:#eaeaea}
.header-right .bell{color:#eaeaea;font-size:18px;display:inline-flex;align-items:center}
.header-right .bell:hover{color:var(--yellow)}
.logout-icon{color:#c0392b;font-size:18px;display:inline-flex;align-items:center}
.logout-icon:hover{color:#e74c3c}
.logo{color:var(--yellow);text-decoration:none;font-weight:700}
.menu-toggle{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer}
.navbar ul{list-style:none;padding:0;margin:0}
.navbar li{margin:8px 0}
.navbar a{color:#ddd;text-decoration:none;padding:8px 10px;border-radius:6px;display:block}
.navbar a i{margin-right:8px}
.navbar a:hover{background:#1f232c}
.navbar a.active{background:#1b1f26;color:#fff;border-left:3px solid var(--yellow);padding-left:12px}
.navbar a:visited{color:#cfcfcf}
.navbar a:active{background:#232730}
.sidebar .has-sub.open>a{background:#1b1f26;color:#fff;border-left:3px solid var(--yellow);padding-left:12px}
.sidebar{width:240px;background:#121418;border-right:1px solid #1f1f1f;min-height:100vh;position:fixed;left:0;padding:12px;overflow:auto}
.content{margin-left:260px;padding:16px}
/* content link styles */
.content a:not(.btn){color:#ffd400;text-decoration:none;transition:color .15s ease, text-shadow .15s ease}
.content a:not(.btn):hover{color:#fff;text-shadow:0 0 6px rgba(255,212,0,.4)}
.content a:not(.btn):visited{color:#e2c200}
.content a:not(.btn):active{color:#ffd400;text-shadow:0 0 8px rgba(255,212,0,.6)}
.avatar-sm{width:40px;height:40px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:8px;border:1px solid #2a2a2a}
.avatar-portrait{width:250px;height:350px;object-fit:cover;border-radius:8px;border:1px solid #2a2a2a;background:#0f1216}
.profile-header{display:flex;align-items:center;gap:16px}
.profile-header .name{font-size:24px;font-weight:700;margin:0}
.footer{padding:16px;text-align:center;background:#121418;border-top:1px solid #1f1f1f;margin-top:24px}
.btn{display:inline-block;padding:10px 14px;border:none;border-radius:6px;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--yellow);color:#111}
.btn-secondary{background:#2b2f38;color:#fff}
.btn-danger{background:#c0392b;color:#fff}
.card{background:#15171c;border:1px solid #222;border-radius:8px;padding:16px;margin-bottom:16px}
.card-emerald{background:#1a2b1d;border-color:#1f8a4d}
.card-sapphire{background:#1a2430;border-color:#1f3c6d}
.card-amber{background:#2b241a;border-color:#b38f00}
.card-danger{background:#2b1a1a;border-color:#922b21}
[data-theme="light"] .card-emerald{background:#e9f5ee;border-color:#1f8a4d}
[data-theme="light"] .card-sapphire{background:#e9f0fa;border-color:#1f3c6d}
[data-theme="light"] .card-amber{background:#fff4dd;border-color:#b38f00}
[data-theme="light"] .card-danger{background:#fde7e7;border-color:#922b21}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.filters-inline{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
@media(min-width:1200px){.filters-inline{flex-wrap:nowrap}}
.filters-inline input,.filters-inline select{width:auto;min-width:120px}
.filters-inline select[name=team_id], .filters-inline select[name=status]{min-width:180px}
.filters-inline input[name=q]{min-width:240px}
.filters-inline input[name=start_month], .filters-inline input[name=end_month]{width:80px}
.filters-inline input[name=start_year], .filters-inline input[name=end_year]{width:100px}
.filters-inline .submit-btn{flex:0 0 auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #2a2a2a;padding:8px;text-align:left}
.alert{padding:10px;border-radius:6px;margin-bottom:10px}
.alert-error{background:#2b1a1a;color:#ff8a8a}
.badge{background:var(--yellow);color:#111;border-radius:999px;padding:2px 8px;margin-left:6px}
.badge-error{background:#c0392b;color:#fff}
.badge-read{background:#27ae60;color:#fff}
.badge-unread{background:#ff8a8a;color:#111}
.btn-success{background:#27ae60;color:#fff}
.header .notif{position:relative}
.notif-dropdown{position:absolute;right:0;top:36px;background:#15171c;border:1px solid #2a2a2a;border-radius:8px;min-width:280px;max-width:340px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:none}
.notif.open .notif-dropdown{display:block}
.notif-head{padding:10px 12px;border-bottom:1px solid #2a2a2a;font-weight:700}
.notif-item{padding:10px 12px;border-bottom:1px solid #2a2a2a}
.notif-item.unread{background:#1b1f26}
.notif-item.read{background:#15171c;opacity:.85}
.notif-title{color:#eaeaea}
.notif-msg{color:#bbb;font-size:13px;margin-top:2px}
.notif-time{color:#888;font-size:12px;margin-top:4px}
.notif-empty{padding:12px;color:#bbb}
.notif-footer{padding:10px 12px}
.btn-sm{padding:6px 10px;font-size:12px}
.auth-body{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;position:relative;overflow:auto;background:
  radial-gradient(900px 360px at 80% 0%, rgba(255,212,0,.28), rgba(255,212,0,0) 60%),
  linear-gradient(135deg,#0d0f14 0%,#121418 60%, rgba(255,212,0,.18) 100%);padding:24px 16px}
.auth-body:before{content:none}
.auth-container{max-width:560px;width:100%;padding:20px;position:relative;z-index:2;margin:0 auto}
.auth-container .card{backdrop-filter:blur(4px);background:#15171c;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.brand{font-size:28px;margin-bottom:8px;color:#eaeaea}
.auth-note{color:#bbb}
.auth-note a{color:#ffd400}
.btn-primary{background:var(--yellow);color:#111;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.brand{text-align:center;color:#eaeaea}
.auth-note{text-align:center;color:#bbb}
label{display:block;margin-top:10px}
input,select,textarea{width:100%;padding:10px;border:1px solid #2a2a2a;border-radius:6px;margin-top:6px;background:#0f1216;color:#eaeaea}
.file-input{position:relative}
input[type=file]{display:block;width:100%;padding:10px;border:1px dashed #2a2a2a;border-radius:8px;background:#0f1216;color:#eaeaea;cursor:pointer}
input[type=file]::file-selector-button{background:var(--yellow);color:#111;border:none;border-radius:6px;padding:8px 10px;margin-right:10px;cursor:pointer}
input[type=file]::-webkit-file-upload-button{background:var(--yellow);color:#111;border:none;border-radius:6px;padding:8px 10px;margin-right:10px;cursor:pointer}
input[type=file].dragover{outline:2px dashed var(--yellow);outline-offset:2px}
.upload-info{margin-top:6px;color:#bbb;font-size:13px}
.upload-preview{margin-top:8px}
.upload-preview img{max-width:240px;max-height:120px;border-radius:6px;border:1px solid #2a2a2a;background:#0f1216}
.input-group{position:relative}
.pass-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#bbb;cursor:pointer;padding:6px;border-radius:6px}
.pass-toggle:hover{color:#eaeaea;background:#1b1f26}
.date-field{position:relative}
.date-field i{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#bbb;pointer-events:none}
input[type=date]{appearance:auto}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(88%);cursor:pointer}
::placeholder{color:#888}
.consent-label{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid #2a2a2a;border-radius:8px;background:#0f1216;margin-top:12px}
.consent-label input{accent-color:var(--yellow)}
.consent-label span{color:#bbb}
.consent-block{padding:12px;border:1px solid #2a2a2a;border-radius:8px;background:#0f1216;margin-top:12px}
.consent-block .consent-text p{margin:0;color:#bbb}
.consent-block .options-inline{display:flex;gap:16px;margin-top:8px}
.consent-block .options-inline label{display:flex;align-items:center;gap:6px}
.consent-block .options-inline input{accent-color:var(--yellow)}
.caps-hint{font-size:12px;color:#ffd400;margin-top:6px}
.auth-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}
.auth-container input[type=password]{margin-bottom:12px}
.input-error{border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.2)}
.alert-warning{background:#2b2b1a;color:#ffd400}
.alert-success{background:#1a2b1d;color:#27ae60}
.inline-check{display:inline-flex;align-items:center;gap:0;white-space:nowrap;justify-content:flex-start;text-align:left}
.inline-check input[type=checkbox]{margin:0}
.inline-check span{margin-left:0}
@media(max-width:600px){
  .inline-check{white-space:normal;flex-wrap:wrap}
  .inline-check span{margin-left:6px}
}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}
.shake{animation:shake .2s linear 2}
.stat{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid #2a2a2a;border-radius:8px;background:#15171c}
.stat .num{font-size:24px;font-weight:700}
@media(max-width:900px){.header{height:56px}.sidebar{position:fixed;left:-260px;transition:left .2s;top:56px;height:calc(100dvh - 56px);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--yellow) #1a1d24;z-index:20}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:#1a1d24;border-radius:999px}.sidebar::-webkit-scrollbar-thumb{background:var(--yellow);border-radius:999px}.sidebar::-webkit-scrollbar-thumb:hover{background:#e6c300}.content{margin-left:0}.sidebar.open{left:0}}
@media(max-width:600px){
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--yellow) #1a1d24;border-bottom:2px solid rgba(255,212,0,.2);position:relative}
  .card::-webkit-scrollbar{height:8px}
  .card::-webkit-scrollbar-track{background:#1a1d24;border-radius:999px}
  .card::-webkit-scrollbar-thumb{background:var(--yellow);border-radius:999px}
  .card::-webkit-scrollbar-thumb:hover{background:#e6c300}
.table th,.table td{white-space:nowrap}
}
.sidebar .has-sub>.submenu{display:none;padding-left:16px}
.sidebar .has-sub.open>.submenu{display:block}
.sidebar .has-sub>a{display:flex;align-items:center;justify-content:flex-start}
.sidebar .has-sub>a::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:16px;margin-left:auto}
.status{display:inline-block;padding:4px 8px;border-radius:6px;font-weight:600}
.status-paid{background:#27ae60;color:#fff;border:1px solid #1f8a4d}
.status-unpaid{background:#c0392b;color:#fff;border:1px solid #922b21}
.status-overdue{background:var(--yellow);color:#111;border:1px solid #b38f00}
[data-theme="light"] .status-paid{background:#e7f5ec;color:#1f8a4d;border:1px solid #1f8a4d}
[data-theme="light"] .status-unpaid{background:#fde7e7;color:#c0392b;border:1px solid #c0392b}
[data-theme="light"] .status-overdue{background:#fff4dd;color:#7a5d00;border:1px solid #b38f00}

[data-theme="light"] body{background:#f6f7fa;color:#111}
[data-theme="light"] .auth-body{background:#f6f7fa}
[data-theme="light"] .header{background:#fff;color:#111;border-bottom:1px solid #e2e2e2}
[data-theme="light"] .menu-toggle{color:#111}
[data-theme="light"] .menu-toggle:hover{color:#0a58ca}
[data-theme="light"] .logout-icon{color:#c0392b}
[data-theme="light"] .navbar a{color:#222}
[data-theme="light"] .navbar a:hover{background:#f0f2f7}
[data-theme="light"] .navbar a.active{background:#e9eef6;color:#111;border-left:3px solid var(--yellow)}
[data-theme="light"] .navbar a i{color:#667085}
[data-theme="light"] .navbar a:hover i{color:#0a58ca}
[data-theme="light"] .sidebar{background:#fafafa;border-right:1px solid #e2e2e2}
[data-theme="light"] .sidebar .has-sub.open>a{background:#e9eef6;color:#111;border-left:3px solid var(--yellow)}
[data-theme="light"] .sidebar .has-sub>a::after{color:#667085}
[data-theme="light"] .card{background:#fff;border:1px solid #e2e2e2}
[data-theme="light"] .table th,[data-theme="light"] .table td{border-color:#e2e2e2}
[data-theme="light"] .table tr:not(:first-child):nth-child(2n){background:#f8fafc}
[data-theme="light"] .table tr:not(:first-child):nth-child(2n+1){background:#fff}
[data-theme="light"] .table tr:hover{background:#eef2f7}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#fff;color:#111;border-color:#cccccc}
[data-theme="light"] .alert-error{background:#fde7e7;color:#c0392b}
[data-theme="light"] .alert-success{background:#e7f5ec;color:#27ae60}
[data-theme="light"] .alert-warning{background:#fff7e0;color:#a67c00}
[data-theme="light"] .notif-dropdown{background:#fff;border-color:#e2e2e2;box-shadow:0 10px 30px rgba(0,0,0,.1)}
[data-theme="light"] .notif-item.unread{background:#f5f8fc}
[data-theme="light"] .notif-item.read{background:#fff;opacity:.95}
[data-theme="light"] .header-right .bell{color:#555}
[data-theme="light"] .header-right .bell:hover{color:#0a58ca}
[data-theme="light"] .logout-icon:hover{color:#e74c3c}
[data-theme="light"] .btn-primary:hover{background:#ffdb33}
[data-theme="light"] .btn-secondary{background:#eef1f6;color:#111}
[data-theme="light"] .btn-secondary:hover{background:#e5eaf2}
[data-theme="light"] .stat{background:#fff;border-color:#e2e2e2}
[data-theme="light"] .avatar-portrait{background:#f2f2f2 !important;border-color:#dddddd !important}
[data-theme="light"] .content a:not(.btn){color:#0d6efd}
[data-theme="light"] .content a:not(.btn):hover{color:#0a58ca;text-shadow:none}
[data-theme="light"] .content a:not(.btn):visited{color:#4a80e0}
[data-theme="light"] .footer{background:#fafafa;border-top:1px solid #e2e2e2;color:#333}
[data-theme=\"light\"] .chart-striped{background-image:repeating-linear-gradient(180deg,#fff 0 26px,#f8fafc 26px 52px)}
/* attendance statuses */
.status-present{background:#27ae60;color:#fff;border:1px solid #1f8a4d}
.status-absent{background:#c0392b;color:#fff;border:1px solid #922b21}
.status-late{background:var(--yellow);color:#111;border:1px solid #b38f00}
[data-theme="light"] .status-present{background:#e7f5ec;color:#1f8a4d;border:1px solid #1f8a4d}
[data-theme="light"] .status-absent{background:#fde7e7;color:#c0392b;border:1px solid #c0392b}
[data-theme="light"] .status-late{background:#fff4dd;color:#7a5d00;border:1px solid #b38f00}