:root{
  --purple:#6c5ce7;
  --purple-dark:#5b4bd6;
  --text:#1f2430;
  --muted:#8a8fa3;
  --border:#eceef2;
  --green:#2ecc71;
  --red:#ff5b5b;
  --orange:#ffb020;
  --bg:#f5f6fa;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Segoe UI", Arial, sans-serif;background:var(--bg);color:var(--text);}
a{color:inherit;}

.topbar{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:14px 28px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px;}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px;color:var(--purple);text-decoration:none;}
.brand .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#7d6cf0,#a06cf0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;}
nav{display:flex;gap:22px;flex-wrap:wrap;}
nav a{text-decoration:none;color:var(--text);font-size:14.5px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;}
nav a.active{color:var(--purple);border-bottom-color:var(--purple);}
.top-actions{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted);}
.top-actions a{background:#f5f6fa;padding:8px 14px;border-radius:8px;text-decoration:none;color:var(--text);font-weight:500;}

.page{max-width:1300px;margin:0 auto;padding:24px 28px;}

.banner{background:linear-gradient(120deg,#6c5ce7,#8f6cf0);border-radius:16px;color:#fff;padding:20px 28px;margin-bottom:22px;}
.banner h1{font-size:20px;margin-bottom:4px;}
.banner p{font-size:13.5px;opacity:.9;}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
@media(max-width:1000px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:#fff;border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;border:1px solid var(--border);}
.stat-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;background:#eef1ff;color:var(--purple);}
.stat-label{font-size:12.5px;color:var(--muted);margin-bottom:4px;}
.stat-value{font-size:19px;font-weight:700;}

.card{background:#fff;border-radius:14px;padding:20px;border:1px solid var(--border);margin-bottom:20px;}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.card-header h2{font-size:17px;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;color:var(--muted);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--border);font-size:12.5px;}
td{padding:11px 6px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.badge-green{background:#e7faf0;color:#1c9a58;}
.badge-red{background:#ffeceC;color:#e0392c;}
.badge-orange{background:#fff4e5;color:#c47f00;}
.badge-purple{background:#eef1ff;color:var(--purple-dark);}
.badge-gray{background:#eef0f4;color:var(--muted);}

.btn{display:inline-block;padding:9px 16px;border-radius:8px;border:none;background:var(--purple);color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;}
.btn:hover{background:var(--purple-dark);}
.btn-sm{padding:6px 12px;font-size:12.5px;}
.btn-outline{background:#fff;border:1px solid var(--border);color:var(--text);}
.btn-red{background:var(--red);}
.btn-green{background:var(--green);}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group label{font-size:13px;color:var(--muted);font-weight:600;}
.form-group input, .form-group select, .form-group textarea{
  padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:#fbfbfd;
}
.form-actions{margin-top:18px;display:flex;gap:10px;}

.alert{padding:12px 16px;border-radius:8px;font-size:13.5px;margin-bottom:16px;}
.alert-error{background:#ffeceC;color:#c0392b;}
.alert-success{background:#e7faf0;color:#1c9a58;}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,#6c5ce7,#8f6cf0);}
.login-box{background:#fff;border-radius:16px;padding:40px;width:100%;max-width:380px;}
.login-box h1{font-size:22px;margin-bottom:6px;color:var(--purple);}
.login-box p{font-size:13.5px;color:var(--muted);margin-bottom:22px;}

.action-links a{margin-right:10px;font-size:13px;text-decoration:none;color:var(--purple-dark);font-weight:600;}
.action-links a.danger{color:var(--red);}

.filter-bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px;}
.filter-bar .form-group{min-width:150px;}

.empty-note{padding:30px 0;text-align:center;color:var(--muted);font-size:13.5px;}

/* Self-service: My Dashboard */
.muted{color:var(--muted);}
.row{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;}

.profile-card{text-align:center;}
.profile-avatar{
  width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#7d6cf0,#a06cf0);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
  margin:0 auto 12px;
}
.profile-card h3{font-size:17px;margin-bottom:2px;}
.profile-rows{margin-top:16px;text-align:left;}
.profile-rows .row{padding:8px 0;border-bottom:1px solid var(--border);}
.profile-rows .row:last-child{border-bottom:none;}

.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.dot-present{background:var(--green);}
.dot-absent{background:var(--red);}
.dot-weekend{background:var(--purple);}
.dot-future{background:#e3e5eb;}

.cal-legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);margin-bottom:14px;}

.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-head{text-align:center;font-size:11.5px;color:var(--muted);font-weight:700;padding-bottom:4px;}
.cal-cell{display:flex;align-items:center;justify-content:center;height:36px;}
.cal-cell.blank{visibility:hidden;}
.cal-dot{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;color:#fff;background:#e3e5eb;color:#8a8fa3;
}
.cal-dot.dot-present{background:var(--green);color:#fff;}
.cal-dot.dot-absent{background:var(--red);color:#fff;}
.cal-dot.dot-weekend{background:var(--purple);color:#fff;}
.cal-dot.dot-future{background:#f0f1f5;color:#c3c6d0;}
.cal-dot.today{box-shadow:0 0 0 2px var(--purple-dark);}

.cal-bars{display:flex;gap:24px;align-items:flex-end;margin-top:22px;padding-top:16px;border-top:1px solid var(--border);}
.cal-bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;width:70px;}
.cal-bar{width:26px;border-radius:5px 5px 0 0;}
.cal-bar-label{font-size:12px;}

.donut{
  width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.donut-hole{
  width:104px;height:104px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}