/* ============================================================
   Darun Na'im Montessori — Management System
   Shared design system. One token set, one nav, one login,
   used by every page in the app.
============================================================ */
:root{
  --ink:#00623F;
  --ink-2:#004B31;
  --brand-soft:#3C9268;
  --brand-pale:#E7F3EC;
  --bg:#FAFBF8;
  --white:#FFFFFF;
  --gold:#C79A55;
  --gold-dark:#A97F3E;
  --high:#C06B52;
  --high-bg:#FBEAE4;
  --medium:#C89A4E;
  --medium-bg:#FBF1DE;
  --low:#4C8468;
  --low-bg:#E7F3EC;
  --text:#28332C;
  --text-soft:#748077;
  --line:#EAE6D9;
  --radius:18px;
  --radius-sm:12px;
  --shadow: 0 6px 24px rgba(16,60,45,0.07);
  --shadow-lift: 0 10px 30px rgba(16,60,45,0.12);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Nunito',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}

/* ---------- top app bar ---------- */
.appbar{
  background:linear-gradient(180deg, var(--brand-pale) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.appbar-inner{
  max-width:1120px;margin:0 auto;padding:0.9rem 1.5rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.appbar-brand{display:flex;align-items:center;gap:0.65rem;text-decoration:none;flex-shrink:0;}
.appbar-brand img{width:34px;height:34px;border-radius:8px;}
.appbar-brand .name{
  font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.15;
}
.appbar-brand .sub{font-size:0.68rem;color:var(--brand-soft);font-weight:700;letter-spacing:0.07em;text-transform:uppercase;}

.appbar-nav{display:flex;gap:0.3rem;flex-wrap:wrap;margin-left:0.5rem;flex:1;}
.appbar-nav a{
  padding:0.5rem 0.85rem;border-radius:999px;font-size:0.86rem;font-weight:700;
  color:var(--text-soft);text-decoration:none;white-space:nowrap;transition:all .15s ease;
}
.appbar-nav a:hover{color:var(--ink);background:var(--white);}
.appbar-nav a.current{color:var(--white);background:var(--ink);}

.appbar-user{display:flex;align-items:center;gap:0.7rem;margin-left:auto;flex-shrink:0;}
.appbar-user .who{font-size:0.85rem;font-weight:700;color:var(--text);}
.appbar-user .role{font-size:0.7rem;color:var(--text-soft);display:block;font-weight:600;}
.appbar-user button{
  background:var(--white);border:1.5px solid var(--line);color:var(--text-soft);
  border-radius:999px;padding:0.4rem 0.9rem;font-size:0.8rem;font-weight:700;
}
.appbar-user button:hover{border-color:var(--high);color:var(--high);}

@media (max-width:820px){
  .appbar-nav{order:3;width:100%;margin-left:0;}
  .appbar-user{margin-left:auto;}
}

/* ---------- shared header block ---------- */
header.page-head{padding:2rem 1.5rem 1.4rem 1.5rem;}
.page-head-inner{max-width:1120px;margin:0 auto;}
.eyebrow{
  font-weight:700;letter-spacing:0.1em;text-transform:uppercase;font-size:0.72rem;
  color:var(--brand-soft);margin:0 0 0.6rem 0;
}
h1.title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(1.9rem,4.5vw,2.7rem);margin:0 0 0.4rem 0;letter-spacing:-0.01em;color:var(--ink);
}
.subtitle{max-width:560px;color:var(--text-soft);font-size:1rem;margin:0;}

main{max-width:1120px;margin:0 auto;padding:1rem 1.5rem 4rem 1.5rem;}
main.narrow{max-width:640px;}

/* ---------- buttons ---------- */
.btn{
  border:none;border-radius:999px;padding:0.7rem 1.3rem;font-size:0.94rem;font-weight:700;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:active{transform:scale(0.97);}
.btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-primary{background:var(--ink);color:var(--white);}
.btn-primary:hover{background:var(--ink-2);box-shadow:var(--shadow-lift);}
.btn-gold{background:var(--gold);color:var(--white);}
.btn-gold:hover{background:var(--gold-dark);box-shadow:var(--shadow-lift);}
.btn-ghost{background:var(--white);border:1.5px solid var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-danger{background:var(--white);border:1.5px solid var(--high);color:var(--high);}
.btn-danger:hover{background:var(--high);color:var(--white);}
.btn-block{width:100%;text-align:center;display:flex;align-items:center;justify-content:center;gap:0.5rem;}

/* ---------- cards / fields ---------- */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem;}
.field{margin-bottom:0.9rem;}
.field label{display:block;font-size:0.78rem;font-weight:700;letter-spacing:0.01em;color:var(--text-soft);margin-bottom:0.35rem;}
.field input,.field textarea,.field select{
  width:100%;padding:0.65rem 0.85rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);font-size:0.98rem;transition:border-color .15s ease, background .15s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand-soft);background:var(--white);}
.field textarea{resize:vertical;min-height:90px;}

.pill{display:inline-block;padding:0.2rem 0.65rem;border-radius:999px;font-size:0.72rem;font-weight:700;}
.pill.high, .pill.status-overdue{background:var(--high-bg);color:var(--high);}
.pill.medium{background:var(--medium-bg);color:var(--medium);}
.pill.low, .pill.status-ontime{background:var(--low-bg);color:var(--low);}
.pill.status-pending{background:var(--medium-bg);color:var(--medium);}
.pill.status-approved{background:var(--low-bg);color:var(--low);}
.pill.status-declined{background:var(--high-bg);color:var(--high);}

.empty-note{color:var(--text-soft);font-size:0.9rem;font-style:italic;padding:0.5rem 0;}

/* ---------- login screen ---------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:radial-gradient(1200px 600px at 50% -10%, var(--brand-pale), var(--bg) 60%);
}
.login-card{
  background:var(--white);border-radius:24px;padding:2.4rem 2rem;max-width:380px;width:100%;
  box-shadow:0 20px 60px rgba(16,60,45,0.16);text-align:center;
}
.login-card img{width:64px;height:64px;margin:0 auto 0.9rem auto;display:block;}
.login-card .eyebrow{justify-content:center;}
.login-card h1{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--ink);margin:0 0 0.3rem 0;}
.login-card .lede{color:var(--text-soft);font-size:0.92rem;margin:0 0 1.5rem 0;}
.login-error{color:var(--high);font-size:0.85rem;min-height:1.2em;margin:0 0 0.4rem 0;font-weight:600;text-align:left;}
.login-card .field{text-align:left;}

/* ---------- dashboard tiles ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.4rem;}
.tile{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem;
  text-decoration:none;color:var(--text);display:block;transition:transform .15s ease, box-shadow .15s ease;
  border:1px solid transparent;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--brand-pale);}
.tile .t-icon{font-size:1.6rem;margin-bottom:0.7rem;display:block;}
.tile .t-name{font-family:'Playfair Display',serif;font-weight:700;font-size:1.2rem;color:var(--ink);margin:0 0 0.3rem 0;}
.tile .t-desc{font-size:0.86rem;color:var(--text-soft);margin:0;}

/* ---------- personal dashboard ---------- */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1rem;}
.dash-card{display:flex;flex-direction:column;}
.dash-card-title{font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin:0 0 0.8rem 0;}
.dash-task-row{display:flex;align-items:center;gap:0.6rem;padding:0.45rem 0;border-bottom:1px solid var(--line);}
.dash-task-row:last-child{border-bottom:none;}
.dash-task-title{font-size:0.9rem;font-weight:600;color:var(--text);}
.dash-more-link{display:block;margin-top:0.6rem;font-size:0.84rem;font-weight:700;color:var(--brand-soft);text-decoration:none;}
.dash-more-link:hover{color:var(--ink);}
.dash-stat{margin:0;}
.dash-stat-num{font-family:'Playfair Display',serif;font-weight:700;font-size:1.8rem;color:var(--ink);}
.dash-stat-sub{margin:0.2rem 0 0 0;font-size:0.84rem;color:var(--text-soft);}
.section-heading{
  font-family:'Playfair Display',serif;font-weight:700;font-size:1.2rem;color:var(--ink);
  margin:2rem 0 0 0;
}

/* ---------- misc ---------- */
.spinner{
  display:none;width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.4);border-top-color:#fff;animation:spin .7s linear infinite;
}
.spinner.show{display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

.hidden{display:none !important;}