/* School Management System - stylesheet
   Palette: ink navy, warm paper, muted brick accent. */

:root{
  --ink:#1b2430;
  --ink-soft:#55606e;
  --paper:#f6f4ef;
  --card:#ffffff;
  --line:#e2ddd3;
  --brick:#9c4a2f;
  --brick-dark:#7d3a24;
  --green:#2f6b46;
  --amber:#a5751b;
  --red:#a33232;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:15px/1.5 "Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;
}
a{color:var(--brick);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:600;margin:0}
ul{margin:6px 0 12px 18px;padding:0}

/* ---------- login / installer ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,#1b2430 0%,#2b3746 60%,#3a2a22 100%)}
.login-card{background:var(--card);width:100%;max-width:390px;border-radius:6px;padding:30px 28px;
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.login-card h1{font-size:22px;margin-bottom:4px}
.login-card p.sub{color:var(--ink-soft);font-size:13px;margin:0 0 20px}
.login-note{color:#c9c2b6;font-size:12px;text-align:center;margin-top:14px}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:232px;flex:0 0 232px;background:var(--ink);color:#cfd6de;display:flex;flex-direction:column}
.brand{display:flex;gap:10px;align-items:center;padding:18px 16px;border-bottom:1px solid #2a3542;
  color:#fff;font-weight:600;font-size:14px;line-height:1.2}
.brand-mark{width:30px;height:30px;flex:0 0 30px;border-radius:4px;background:var(--brick);
  display:grid;place-items:center;font-family:Georgia,serif;font-size:16px}
.sidebar nav{display:flex;flex-direction:column;padding:10px 0;flex:1}
.sidebar nav a{color:#b9c2cd;padding:9px 18px;font-size:14px;border-left:3px solid transparent}
.sidebar nav a:hover{background:#222d3a;color:#fff;text-decoration:none}
.sidebar nav a.on{background:#222d3a;color:#fff;border-left-color:var(--brick)}
.side-foot{padding:12px 18px;font-size:12px;color:#7c8798;border-top:1px solid #2a3542}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;background:var(--card);border-bottom:1px solid var(--line);padding:12px 20px}
.topbar h1{font-size:19px;flex:1}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:4px 9px;font-size:16px;cursor:pointer}
.content{padding:20px;flex:1}
.foot{padding:14px 20px;color:var(--ink-soft);font-size:12px;border-top:1px solid var(--line)}

/* ---------- pieces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:5px;margin-bottom:18px}
.card h2{font-size:16px;padding:13px 16px;border-bottom:1px solid var(--line)}
.card .body{padding:16px}
.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.stat{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:14px 16px}
.stat .n{font-family:Georgia,serif;font-size:26px}
.stat .l{color:var(--ink-soft);font-size:12px;text-transform:uppercase;letter-spacing:.06em}

table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:middle}
th{background:#efece5;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
tbody tr:hover{background:#faf8f4}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px;margin-bottom:18px;background:var(--card)}
.card .table-wrap{border:none;margin-bottom:0}
.empty{padding:26px;text-align:center;color:var(--ink-soft)}

label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:4px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:4px;
  background:#fff;font:inherit;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(156,74,47,.25);border-color:var(--brick)}
.field{margin-bottom:13px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row .field{flex:1;min-width:150px;margin-bottom:0}

.btn{display:inline-block;border:1px solid var(--brick);background:var(--brick);color:#fff;padding:8px 15px;
  border-radius:4px;font:inherit;cursor:pointer}
.btn:hover{background:var(--brick-dark);text-decoration:none;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:#efece5;color:var(--ink)}
.btn-sm{padding:4px 10px;font-size:13px}
.btn-danger{background:var(--red);border-color:var(--red)}
.btn-danger:hover{background:#8a2828}
.btn-block{display:block;width:100%;text-align:center}

.alert{padding:10px 14px;border-radius:4px;margin-bottom:16px;font-size:14px;border:1px solid}
.alert-success{background:#eaf3ed;border-color:#bcd8c6;color:var(--green)}
.alert-error{background:#f8eaea;border-color:#e0bcbc;color:var(--red)}

.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;border:1px solid}
.tag-paid,.tag-present{background:#eaf3ed;border-color:#bcd8c6;color:var(--green)}
.tag-unpaid,.tag-absent{background:#f8eaea;border-color:#e0bcbc;color:var(--red)}
.tag-partial,.tag-late,.tag-leave{background:#faf2e2;border-color:#e6d5ac;color:var(--amber)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.muted{color:var(--ink-soft);font-size:13px}
.inline{display:inline}
hr.sep{border:none;border-top:1px solid var(--line);margin:18px 0}

@media print{
  .sidebar,.topbar,.toolbar,.foot,.btn{display:none!important}
  body{background:#fff}
  .content{padding:0}
}

@media (max-width:860px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .burger{display:block}
  .sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);transition:transform .2s;z-index:20}
  .sidebar.open{transform:none}
}