/* styles.css - clean modern look inspired by your screenshots */
:root{
  --bg:#f6f8fa;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#2b6cb0;
  --radius:14px;
  --shadow: 0 6px 18px rgba(11,15,30,0.04);
  --green:#1f9d55;
  --red:#ef4444;
  --yellow:#f59e0b;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
body{background:var(--bg);color:#0f172a;}

/* layout */
.app{display:flex;min-height:100vh}
.sidebar{
  width:280px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border-right:1px solid rgba(15,23,42,0.04);
  padding:20px;
  box-shadow: none;
  transition: transform .25s ease, box-shadow .2s;
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative}
.logo{width:42px;height:42px;border-radius:8px;background:none;color:white;display:flex;align-items:center;justify-content:center;font-size:20px}
.brand-title{font-weight:700}
.brand-sub{font-size:12px;color:var(--muted)}
.sidebar-close{display:none;border:none;background:transparent;font-size:18px;position:absolute;right:0;top:0;cursor:pointer}

.nav{display:flex;flex-direction:column;gap:8px}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#1f2937;text-decoration:none;cursor:pointer;
}
.nav-item .icon{width:28px;text-align:center;font-size:16px}
.nav-item.active{background:rgba(59,130,246,0.08);color:var(--accent)}

/* main content */
.main{flex:1;display:flex;flex-direction:column;min-height:100vh;max-width:100vw;}
.topbar{display:flex;align-items:center;gap:20px;padding:18px 28px;border-bottom:1px solid rgba(15,23,42,0.04);background:transparent}
.hamburger{display:none;border:none;background:transparent;font-size:22px;cursor:pointer}
.header-left h1{margin:0;font-size:20px}
.date{color:var(--muted);font-size:13px;margin-top:6px}

.content{padding:28px}
.section-title{margin:0 0 18px 0;font-size:22px}

/* cards grid */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-bottom:20px;
}
.card{
  background:var(--card);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--shadow);
  min-height:96px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card .title{font-weight:700}
.card .subtitle{color:var(--muted);font-size:13px;margin-top:8px}

/* badge */
.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;
}
.badge.green{background:#ecfdf3;color:var(--green)}
.badge.red{background:#fff1f2;color:var(--red)}
.badge.yellow{background:#fffbeb;color:var(--yellow)}
.badge.none{display:none}

/* stats row */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.stat-card{background:var(--card);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
.stat-value{font-size:28px;font-weight:700;margin-top:6px}

/* responsive */
@media (max-width: 1100px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .sidebar { position:fixed; left:0; top:0; bottom:0; z-index:40; transform: translateX(-120%); box-shadow: 0 30px 60px rgba(2,6,23,0.3); }
  .sidebar.open { transform: translateX(0); }
  .hamburger{display:inline-block}
  .sidebar-close{display:inline-block}
  .app { overflow-x:hidden; }
  .cards-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .topbar { padding-left:18px; padding-right:18px; }
}

/* small */
@media (max-width: 480px) {
  .nav-item .icon{display:inline-block}
  .sidebar{width:260px;padding:12px}
  .brand-title{font-size:15px}
}
.logout-btn{
    
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
.logout-btn:hover { background: #0056b3; }


/* ===== Added for DADA HRMS pages (forms, tables, calendar) =====
   Uses the same variables/palette as above so it matches the rest. */

a{color:var(--accent)}
h1,h2,h3{margin-top:0}

.who{font-size:12px;color:var(--muted);border-top:1px solid rgba(15,23,42,0.06);margin-top:14px;padding-top:14px}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid rgba(15,23,42,0.06)}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase}
.table-wrap{overflow-x:auto}

input,select{
  padding:9px 10px;border-radius:8px;border:1px solid rgba(15,23,42,0.12);
  background:#fff;color:#0f172a;font-family:inherit;font-size:14px;
}
label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}

button, .btn{
  padding:9px 16px;border-radius:8px;border:none;background:var(--accent);color:#fff;
  font-weight:600;cursor:pointer;font-size:13px;text-decoration:none;display:inline-block;
}
button:hover, .btn:hover{filter:brightness(1.08)}
button.secondary{background:#eef2f7;color:#1f2937}
button.danger{background:#fff1f2;color:var(--red)}

.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
form.inline{display:inline}

.flash{border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:14px}
.flash.ok{background:#ecfdf3;color:var(--green)}
.flash.error{background:#fff1f2;color:var(--red)}

/* attendance calendar */
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;margin-bottom:16px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.dow{text-align:center;font-size:12px;color:var(--muted);font-weight:700}
.daycell{
  background:var(--card);border-radius:10px;padding:10px;min-height:96px;
  font-size:12px;box-shadow:var(--shadow);border-left:4px solid transparent;
}
.daynum{font-weight:700;margin-bottom:4px}
.stlabel{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:4px}
.st-present{border-left-color:var(--green)}
.st-absent{border-left-color:var(--red)}
.st-leave{border-left-color:var(--accent)}
.st-pending{border-left-color:var(--yellow)}

@media (max-width: 900px) {
  .calendar{grid-template-columns:repeat(7,minmax(70px,1fr))}
  .table-wrap table{min-width:600px}
}

/* auth pages (login/register) */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.auth-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;width:360px}
.auth-card h1{font-size:20px;margin-bottom:18px}
.auth-card input{width:100%;margin:6px 0 14px}
.auth-card button{width:100%}

/* status badge color mapping used across the HRMS pages */
.badge.active,.badge.approved,.badge.done{background:#ecfdf3;color:var(--green)}
.badge.pending,.badge.queued,.badge.in_progress{background:#fffbeb;color:var(--yellow)}
.badge.inactive,.badge.rejected,.badge.failed,.badge.cancelled{background:#fff1f2;color:var(--red)}

/* generic content panel (forms/tables) - separate from the dashboard
   tile .card above, which is a flex layout not meant for this */
.panel{
  background:var(--card);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);margin-bottom:20px;
}
.panel h3{margin-top:0;font-size:15px}

.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#eef2f7;display:inline-block}
.avatar-sm{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#eef2f7;display:inline-block;vertical-align:middle}
.birthday-banner{
  background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;border-radius:12px;
  padding:16px 20px;margin-bottom:20px;font-weight:600;box-shadow:var(--shadow);
}