/* ALPAS — DepEd-aligned blue / white / light gray theme */
:root{
  /* ---------------------------------------------------------------------
     BRAND (chrome only) — drawn from the SDO San Jose City seal: deep green
     with a gold accent. These colours dress the shell: sidebar, buttons,
     headings, links, letterheads.

     STATUS colours below are deliberately NOT part of the brand ramp. They
     carry meaning (mastery level, review status, follow-through) and must stay
     visually distinct from the chrome, so they are left on their own scale.
     Do not "greenify" them.
     --------------------------------------------------------------------- */
  --brand-900:#0b3a24;
  --brand-800:#0f4e30;
  --brand-700:#15683f;
  --brand-600:#1a8250;
  --brand-500:#22a05e;
  --brand-100:#e6f3ec;
  --gold-600:#c8901a;
  --gold-100:#fbf1dc;

  --gray-50:#f5f8f6;
  --gray-100:#eaf0ec;
  --gray-200:#dbe4de;
  --gray-400:#94a49b;
  --gray-600:#556a5f;
  --gray-800:#22322a;

  /* status scale — meaning-bearing, kept off the brand ramp */
  --ok:#1a7f4b;   --ok-bg:#e5f6ed;
  --info:#1552a0; --info-bg:#e6effb;
  --warn:#a26a00; --warn-bg:#fdf3e0;
  --bad:#b3261e;  --bad-bg:#fcebea;

  --radius:10px;
  --shadow:0 1px 2px rgba(11,58,36,.06), 0 4px 14px rgba(11,58,36,.07);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--gray-50); color:var(--gray-800);
  font:14px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
a{color:var(--brand-700); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4rem; color:var(--brand-900); font-weight:650}
h1{font-size:1.35rem}
h2{font-size:1.05rem}
h3{font-size:.95rem}

/* ---------- layout ---------- */
.layout{display:flex; min-height:100vh}
.sidebar{
  width:250px; flex:0 0 250px; background:var(--brand-900); color:#cfe6d8;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{display:flex; gap:.6rem; align-items:center; padding:.8rem .9rem; border-bottom:1px solid rgba(255,255,255,.12); flex:0 0 auto}
.brand-mark{
  background:#fff; color:var(--brand-900); font-weight:800; font-size:.72rem;
  padding:.5rem .45rem; border-radius:8px; letter-spacing:.5px;
}
.brand-text strong{display:block; color:#fff; font-size:.95rem}
.brand-text span{font-size:.72rem; color:#9ec9ae}
.sidebar nav{
  display:flex; flex-direction:column; padding:.6rem .5rem; gap:2px;
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
}
.sidebar nav::-webkit-scrollbar{width:8px}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:8px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar nav a{
  color:#cfe6d8; padding:.34rem .7rem; border-radius:8px; font-size:.845rem;
}
.sidebar nav a:hover{background:rgba(255,255,255,.09); text-decoration:none; color:#fff}
.sidebar nav a.active{background:var(--brand-600); color:#fff; font-weight:600}
.sidebar nav a.sub{padding-left:1.3rem; font-size:.80rem; padding-top:.29rem; padding-bottom:.29rem}
.nav-group{
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:#7fb394; padding:.5rem .7rem .16rem;
}
.sidebar-foot{
  flex:0 0 auto; padding:.6rem .9rem .7rem; font-size:.68rem; line-height:1.35;
  color:#8fbfa2; border-top:1px solid rgba(255,255,255,.12); background:var(--brand-900);
}
.demo-tag{
  display:inline-block; background:#fdf3e0; color:#8a5a00; font-weight:700;
  padding:.15rem .45rem; border-radius:5px; margin:0 0 .4rem;
}
.content{flex:1; min-width:0; padding:1.1rem 1.4rem 2rem; max-width:1500px}

.topbar{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.8rem}
.topbar .sub{margin:0; color:var(--gray-600); font-size:.85rem}
.userbox{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:.5rem .8rem; text-align:right; min-width:220px; box-shadow:var(--shadow);
}
.uname{font-weight:650; color:var(--brand-900)}
.urole{font-size:.76rem; color:#fff; background:var(--brand-600); display:inline-block; padding:.05rem .45rem; border-radius:20px; margin:.15rem 0}
.uscope{font-size:.72rem; color:var(--gray-600)}

.privacy-note{
  background:var(--brand-100); border:1px solid #bfdfcd; color:var(--brand-800);
  padding:.45rem .7rem; border-radius:8px; font-size:.78rem; margin-bottom:1rem;
}
.flashes{margin-bottom:.8rem; display:flex; flex-direction:column; gap:.4rem}
.flash{padding:.5rem .8rem; border-radius:8px; font-size:.85rem}
.flash.ok{background:var(--ok-bg); color:var(--ok); border:1px solid #b7e2ca}
.flash.error{background:var(--bad-bg); color:var(--bad); border:1px solid #f3c4c1}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:.75rem; margin-bottom:1rem}
.card{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:.8rem .9rem; box-shadow:var(--shadow);
}
.card .label{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-600)}
.card .value{font-size:1.6rem; font-weight:700; color:var(--brand-800); line-height:1.25}
.card .hint{font-size:.74rem; color:var(--gray-600)}
.card.accent{background:linear-gradient(135deg,var(--brand-700),var(--brand-600)); border-color:var(--brand-700)}
.card.accent .label,.card.accent .hint{color:#dbefe2}
.card.accent .value{color:#fff}

.panel{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:.9rem 1rem; box-shadow:var(--shadow); margin-bottom:1rem;
}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.6rem; flex-wrap:wrap}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); gap:1rem}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem}
.chart-box{position:relative; height:260px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.84rem}
th,td{padding:.45rem .55rem; text-align:left; border-bottom:1px solid var(--gray-100); vertical-align:top}
thead th{
  background:var(--gray-100); color:var(--brand-900); font-weight:650;
  position:sticky; top:0; white-space:nowrap; font-size:.78rem;
}
tbody tr:hover{background:#f7fbf8}
td.num, th.num{text-align:right; white-space:nowrap}
.empty{padding:1.2rem; text-align:center; color:var(--gray-600); font-size:.86rem}

/* The dashboard action queue reads as a list, not a data table: no header row,
   roomier rows, and the count sized to be scanned down the left edge. */
.action-queue td{padding:.6rem .5rem; vertical-align:top}
.action-queue tbody tr:hover{background:var(--brand-100)}
.action-queue a{color:var(--brand-800); text-decoration:none}
.action-queue a:hover{text-decoration:underline}
.action-queue .badge{font-size:.82rem; padding:.18rem .55rem}

/* ---------- badges / pills ---------- */
.badge{display:inline-block; padding:.1rem .45rem; border-radius:20px; font-size:.72rem; font-weight:600; white-space:nowrap}
.badge.ok{background:var(--ok-bg); color:var(--ok)}
.badge.info{background:var(--info-bg); color:var(--info)}
.badge.warn{background:var(--warn-bg); color:var(--warn)}
.badge.bad{background:var(--bad-bg); color:var(--bad)}
.badge.muted{background:var(--gray-100); color:var(--gray-600)}

/* ---------- forms ---------- */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; margin-bottom:.8rem}
.field{display:flex; flex-direction:column; gap:.2rem}
.field label{font-size:.72rem; color:var(--gray-600); font-weight:600}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=date],select,textarea{
  border:1px solid var(--gray-200); border-radius:7px; padding:.4rem .5rem;
  font:inherit; background:#fff; min-width:150px; color:var(--gray-800);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-100); border-color:var(--brand-600)}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.7rem}
.btn{
  display:inline-block; border:1px solid var(--brand-600); background:var(--brand-600); color:#fff;
  padding:.42rem .85rem; border-radius:7px; font:inherit; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--brand-700); text-decoration:none; color:#fff}
.btn.ghost{background:#fff; color:var(--brand-700)}
.btn.ghost:hover{background:var(--brand-100); color:var(--brand-800)}
.btn.small{padding:.25rem .55rem; font-size:.78rem}
.btn.gray{background:var(--gray-600); border-color:var(--gray-600)}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand-900),var(--brand-700)); padding:1rem}
.login-card{background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.25); width:min(940px,100%); display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden}
.login-side{padding:2rem; background:var(--brand-900); color:#dcefe3}
.login-side h1{color:#fff; font-size:2rem; margin-bottom:.15rem}
.portal-subtitle{margin:.1rem 0 .85rem; color:#9ec9ae; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.login-side ul{padding-left:1.1rem; font-size:.85rem; line-height:1.7}
.login-form{padding:2rem}
.login-form .field{margin-bottom:.8rem}
.login-form input{width:100%}
.accounts{margin-top:1rem; font-size:.76rem; border-top:1px solid var(--gray-200); padding-top:.7rem; color:var(--gray-600)}
.accounts table{font-size:.75rem}
.accounts td{padding:.2rem .35rem; border:0}
@media (max-width:820px){.login-card{grid-template-columns:1fr}.login-side{display:none}}

/* ---------- reports / print ---------- */
.report-head{border-bottom:3px double var(--brand-800); padding-bottom:.6rem; margin-bottom:.9rem}
.report-head .org{font-size:.78rem; color:var(--gray-600); text-transform:uppercase; letter-spacing:.06em}
.rec-list{margin:.3rem 0 0; padding-left:1.1rem}
.rec-list li{margin-bottom:.2rem}
.meta-line{font-size:.8rem; color:var(--gray-600)}
.report-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:.8rem}

@media print{
  .sidebar,.topbar .userbox,.no-print,.foot,.privacy-note{display:none !important}
  body{background:#fff}
  .content{padding:0; max-width:none}
  .panel{box-shadow:none; border:0; padding:0; margin-bottom:.8rem}
  thead th{background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  a{color:#000}
}

.foot{
  margin-top:1.5rem; padding-top:.7rem; border-top:1px solid var(--gray-200);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.74rem; color:var(--gray-400);
}
.hint-small{font-size:.76rem; color:var(--gray-600)}
.error-list{background:var(--bad-bg); border:1px solid #f3c4c1; color:var(--bad); border-radius:8px; padding:.6rem .9rem; font-size:.82rem}
.error-list ul{margin:.3rem 0 0; padding-left:1.1rem}
code{background:var(--gray-100); padding:.1rem .3rem; border-radius:4px; font-size:.82em}
.codeblock{background:var(--gray-100); border-radius:8px; padding:.6rem .8rem; font-size:.78rem; overflow-x:auto; white-space:pre-wrap; word-break:break-word}

/* ---------- branding slots ---------- */
.brand-logo{width:44px; height:44px; object-fit:contain; flex:0 0 auto}
.login-logos{display:flex; gap:.8rem; align-items:center; margin-bottom:1rem}
.login-logos img{height:92px; width:auto; object-fit:contain}
.report-letterhead{display:flex; align-items:center; gap:1rem; justify-content:center; text-align:center}
.report-letterhead img{height:64px; width:auto; object-fit:contain}
.report-letterhead .org{flex:1}

/* ---------- policy verification notice ---------- */
.verify-note{
  background:var(--warn-bg); border:1px solid #eeddb4; color:#7a5200;
  padding:.6rem .85rem; border-radius:8px; font-size:.82rem; margin-bottom:1rem;
}
.verify-note a{color:#7a5200; text-decoration:underline}

/* ---------- settings branding panel ---------- */
.brand-slot{display:flex; gap:.8rem; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--gray-100)}
.brand-slot img{height:48px; width:48px; object-fit:contain; border:1px solid var(--gray-200); border-radius:8px; background:#fff; padding:3px}
.brand-slot .placeholder{
  height:48px; width:48px; border:1px dashed var(--gray-200); border-radius:8px;
  display:grid; place-items:center; color:var(--gray-400); font-size:.65rem; text-align:center;
}

/* ---------- pagination ---------- */
.pager{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-top:.8rem; padding-top:.7rem;
  border-top:1px solid var(--gray-100); font-size:.82rem; color:var(--gray-600);
}
.pager-links{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.pager-page{padding:0 .4rem; white-space:nowrap}
.pager-size{display:flex; gap:.4rem; align-items:center}
.pager-size a{padding:0 .15rem}