/* =====================================================================
   HRM & Payroll Sys — Premier Harvest (Pvt) Ltd
   Palette: field green, harvest gold (dark yellow), soil black
   ===================================================================*/
:root{
  --ph-green:#1B7A3E;        /* primary  */
  --ph-green-dark:#0F4F27;
  --ph-green-soft:#E8F3EC;
  --ph-gold:#C8A415;         /* dark yellow accent */
  --ph-gold-soft:#FBF3D2;
  --ph-black:#111311;
  --ph-ink:#1D211E;
  --ph-muted:#6B7A70;
  --ph-line:#E1E7E3;
  --ph-danger:#B3261E;
  --ph-radius:14px;
  --ph-shadow:0 1px 2px rgba(17,19,17,.06), 0 8px 24px rgba(17,19,17,.06);
  --ph-shadow-lift:0 6px 12px rgba(17,19,17,.08), 0 18px 40px rgba(17,19,17,.12);
}

body{
  background:#F6F8F6;
  color:var(--ph-ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Noto Sans Sinhala",sans-serif;
  font-size:15px;
}
:lang(si), .si{ font-family:"Noto Sans Sinhala","Iskoola Pota",sans-serif; }
a{ color:var(--ph-green); text-decoration:none; }
a:hover{ color:var(--ph-green-dark); }

/* ---------- Layout ---------- */
.ph-shell{ display:flex; min-height:100vh; }
.ph-sidebar{
  width:250px; flex:0 0 250px; background:var(--ph-black); color:#D8E0DA;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  border-right:3px solid var(--ph-gold);
}
.ph-sidebar .brand{
  display:flex; align-items:center; gap:10px; padding:18px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ph-sidebar .brand img{ height:38px; width:auto; }
.ph-sidebar .brand span{ font-weight:700; font-size:15px; color:#fff; line-height:1.2; }
.ph-sidebar .nav-label{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ph-gold); padding:18px 18px 6px;
}
.ph-sidebar a.navitem{
  display:flex; align-items:center; gap:11px; padding:11px 18px;
  color:#C9D3CC; border-left:3px solid transparent; transition:.15s;
}
.ph-sidebar a.navitem:hover{ background:rgba(27,122,62,.22); color:#fff; }
.ph-sidebar a.navitem.active{
  background:linear-gradient(90deg,rgba(27,122,62,.45),transparent);
  border-left-color:var(--ph-gold); color:#fff; font-weight:600;
}
.ph-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.ph-topbar{
  background:#fff; border-bottom:1px solid var(--ph-line);
  padding:12px 22px; display:flex; align-items:center; gap:14px;
  position:sticky; top:0; z-index:20;
}
.ph-topbar h1{ font-size:18px; font-weight:700; margin:0; }
.ph-content{ padding:22px; flex:1 1 auto; }

/* ---------- Cards ---------- */
.ph-card{
  background:#fff; border:1px solid var(--ph-line); border-radius:var(--ph-radius);
  box-shadow:var(--ph-shadow); transition:transform .18s, box-shadow .18s;
}
.ph-card:hover{ transform:translateY(-3px); box-shadow:var(--ph-shadow-lift); }
.ph-card .card-body{ padding:18px 20px; }
.ph-card-head{
  padding:14px 20px; border-bottom:1px solid var(--ph-line);
  font-weight:700; display:flex; align-items:center; justify-content:space-between;
}

.metric{ border-left:4px solid var(--ph-green); }
.metric.gold{ border-left-color:var(--ph-gold); }
.metric.black{ border-left-color:var(--ph-black); }
.metric .label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ph-muted); }
.metric .value{ font-size:26px; font-weight:800; color:var(--ph-black); line-height:1.15; margin-top:4px; }
.metric .sub{ font-size:12px; color:var(--ph-muted); }

/* ---------- Value boxes on payroll pages ---------- */
.vbox{ border-radius:12px; padding:12px 14px; background:var(--ph-green-soft);
       border:1px solid #CFE3D6; }
.vbox .k{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ph-muted); }
.vbox .v{ font-size:19px; font-weight:700; color:var(--ph-green-dark); }
.vbox.gold{ background:var(--ph-gold-soft); border-color:#EEDF9C; }
.vbox.gold .v{ color:#7A6408; }
.vbox.red{ background:#FDECEA; border-color:#F5C9C4; }
.vbox.red .v{ color:var(--ph-danger); }
.vbox.dark{ background:#1B1D1B; border-color:#000; }
.vbox.dark .k{ color:#9FB0A5; }
.vbox.dark .v{ color:var(--ph-gold); }

/* ---------- Buttons ---------- */
.btn-ph{ background:var(--ph-green); border-color:var(--ph-green); color:#fff; font-weight:600; }
.btn-ph:hover{ background:var(--ph-green-dark); border-color:var(--ph-green-dark); color:#fff; }
.btn-gold{ background:var(--ph-gold); border-color:var(--ph-gold); color:#241F00; font-weight:600; }
.btn-gold:hover{ background:#AC8D0C; border-color:#AC8D0C; color:#241F00; }
.btn-outline-ph{ border-color:var(--ph-green); color:var(--ph-green); font-weight:600; }
.btn-outline-ph:hover{ background:var(--ph-green); color:#fff; }

/* ---------- Tables & forms ---------- */
.table thead th{
  background:var(--ph-green-soft); color:var(--ph-green-dark);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  border-bottom:2px solid var(--ph-green);
}
.table tbody tr:hover{ background:#FAFCFA; }
.form-label{ font-size:13px; font-weight:600; color:#39433C; margin-bottom:4px; }
.form-control:focus,.form-select:focus{
  border-color:var(--ph-green); box-shadow:0 0 0 .18rem rgba(27,122,62,.15);
}
.section-title{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ph-gold);
  font-weight:700; margin:22px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--ph-line);
}
.badge-ph{ background:var(--ph-green-soft); color:var(--ph-green-dark); font-weight:600; }
.badge-gold{ background:var(--ph-gold-soft); color:#7A6408; font-weight:600; }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(27,122,62,.30), transparent 60%),
    radial-gradient(800px 420px at 110% 110%, rgba(200,164,21,.22), transparent 60%),
    var(--ph-black);
}
.login-card{ width:100%; max-width:410px; background:#fff; border-radius:18px; padding:32px;
             box-shadow:0 30px 70px rgba(0,0,0,.45); border-top:5px solid var(--ph-gold); }
.login-card img{ height:64px; display:block; margin:0 auto 14px; }

/* ---------- Footer ---------- */
.ph-footer{
  padding:14px 22px; font-size:12.5px; color:var(--ph-muted);
  border-top:1px solid var(--ph-line); background:#fff; text-align:center;
}
.ph-footer strong{ color:var(--ph-green-dark); }

/* ---------- Print ---------- */
@media print{
  .ph-sidebar,.ph-topbar,.no-print,.ph-footer{ display:none !important; }
  .ph-content{ padding:0; }
  .ph-card{ box-shadow:none; border:1px solid #999; }
  body{ background:#fff; }
}
@media (max-width:991px){
  .ph-sidebar{ position:fixed; left:-260px; z-index:1050; transition:left .2s; }
  .ph-sidebar.open{ left:0; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ---------- Birthday card (admin dashboard, shows only on the day) ---------- */
.bday-card{
  position:relative; overflow:hidden; border-radius:var(--ph-radius);
  background:linear-gradient(135deg,#0F4F27 0%,#123A22 60%,#111311 100%);
  border:2px solid var(--ph-gold); box-shadow:var(--ph-shadow-lift);
  padding:18px 20px 14px; color:#EAF3EC; height:100%;
}
.bday-ribbon{
  display:inline-block; background:var(--ph-gold); color:#241F00;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.bday-body{ display:flex; gap:18px; align-items:flex-start; }
.bday-face{
  flex:0 0 96px; width:96px; height:96px; border-radius:50%;
  border:3px solid var(--ph-gold); overflow:hidden; background:var(--ph-green);
  display:flex; align-items:center; justify-content:center;
}
.bday-face img{ width:100%; height:100%; object-fit:cover; }
.bday-face span{ font-size:38px; font-weight:700; color:var(--ph-gold); }
.bday-name{ font-size:20px; font-weight:700; color:#fff; }
.bday-role{ font-size:12px; color:#9FB0A5; margin-bottom:8px; }
.bday-msg{ font-size:14px; line-height:1.5; margin:0 0 6px; color:#EAF3EC; }
.bday-foot{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ph-gold); }
.bday-actions{ margin-top:12px; text-align:right; }
@media (max-width:576px){ .bday-body{ flex-direction:column; align-items:center; text-align:center; } }