/* ============================================================
   Leave Management System — shared styles
   Theme: Schools Division of Occidental Mindoro (yellow-green motif ng Division)
   - Public Sans (UI text) + Oswald (brand name, same face as the BRAVO footer)
   - Lime-to-green gradient sa header, deep green para sa mga button at link,
     dilaw (gaya ng singsing ng seal) para sa linya sa ilalim ng header at sa "Apply" na button,
     pula para lang sa "delete / disapprove".
   - Paalala: ang --navy ay deep green na ngayon (iniwan ang pangalan para hindi masira ang ibang rule).
   ============================================================ */
@font-face{font-family:"Public Sans LMS";src:url("fonts/public-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans LMS";src:url("fonts/public-sans-latin-600-normal.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans LMS";src:url("fonts/public-sans-latin-700-normal.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
:root{
  --navy:#2e7d0e; --navy-dark:#24620a; --ink:#1d4a0a;
  --accent:#f4e62e;
  --green:#2e7d0e; --green-dark:#24620a;
  --dv-lime:#c4dc1c; --dv-yg:#9cc513; --dv-green:#5f9f12; --dv-deep:#34820a; --dv-ink:#24600a; --dv-yellow:#f4e62e;
  --dv-stripes:repeating-linear-gradient(118deg,rgba(255,255,255,.07) 0 2px,transparent 2px 10px);
  --bg:#f2f6e8; --card:#ffffff; --tint:#f6f9ef;
  --text:#1b2414; --muted:#5a6650; --label:#3b4632;
  --border:#dfe6d2; --border-strong:#c9d4b8;
  --danger:#b42318; --danger-dark:#8f1c13;
  --radius:10px;
  --font:"Public Sans LMS","Segoe UI",Roboto,Arial,sans-serif;
  --font-brand:"Oswald LMS","Oswald","Arial Narrow",Arial,sans-serif;
  --shadow:0 1px 2px rgba(30,70,10,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); font-size:15px;
  background:var(--bg); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea{font-family:inherit}
a{color:var(--navy)}
:focus-visible{outline:3px solid rgba(46,125,14,.35);outline-offset:2px}
h2{margin-top:0;color:var(--ink);font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.005em}
h3{color:var(--ink)}

/* ---- Login / sign-in pages ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-card{
  width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 1px 2px rgba(30,70,10,.06),0 14px 36px rgba(30,70,10,.10);overflow:hidden
}
.login-head{color:#fff;padding:22px 26px;text-align:center;border-bottom:3px solid var(--accent);
  background:var(--dv-stripes),linear-gradient(160deg,var(--dv-lime) 0%,var(--dv-yg) 30%,var(--dv-green) 62%,var(--dv-deep) 100%)}
.login-head h1{margin:0;font-family:var(--font-brand);font-weight:700;font-size:25px;letter-spacing:.2px;line-height:1.2;
  text-shadow:0 2px 0 var(--dv-ink),0 -1px 0 var(--dv-ink),1px 0 0 var(--dv-ink),-1px 0 0 var(--dv-ink)}
.login-head p{margin:4px 0 0;font-size:13.5px;color:#fff;text-shadow:0 1px 2px rgba(20,60,5,.6)}
.login-head::before{content:"";display:block;width:56px;height:56px;margin:0 auto 10px;border-radius:50%;
  background:#fff url("icons/seal.jpg") center/cover no-repeat;box-shadow:0 0 0 3px var(--dv-yellow)}
.login-body{padding:26px}
/* Sign-in: Division panel on the left, form on the right (stacks on phones) */
.login-card.login-split{max-width:880px;display:grid;grid-template-columns:1.05fr 1fr}
.login-brand{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:44px 40px;
  display:flex;flex-direction:column;justify-content:center;border-right:3px solid var(--accent)}
.login-brand::after{content:"";position:absolute;right:-110px;bottom:-110px;width:320px;height:320px;border-radius:50%;
  background:url("icons/seal.jpg") center/cover no-repeat;opacity:.06;pointer-events:none}
.login-seal{width:88px;height:88px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16);flex:none}
.login-brand-text{position:relative;z-index:1}
.login-division{margin:24px 0 0;font-size:14px;font-weight:600;color:rgba(255,255,255,.80)}
.login-title{margin:6px 0 0;font-family:var(--font-brand);font-weight:700;font-size:42px;line-height:1.04;letter-spacing:.3px}
.login-rule{width:56px;height:3px;background:var(--accent);margin:22px 0 18px;border-radius:2px}
.login-lede{position:relative;z-index:1;margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.86);max-width:32ch}
.login-split .login-body{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.login-form-title{margin:0 0 20px;font-size:24px}
@media (max-width:760px){
  .login-card.login-split{grid-template-columns:1fr;max-width:440px}
  .login-brand{flex-direction:row;align-items:center;gap:14px;padding:20px 22px;border-right:0;border-bottom:3px solid var(--accent)}
  .login-brand::after,.login-rule,.login-lede{display:none}
  .login-seal{width:58px;height:58px;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
  .login-division{margin:0;font-size:12.5px}
  .login-title{font-size:27px;margin-top:2px}
  .login-split .login-body{padding:24px 22px}
  .login-form-title{font-size:21px;margin-bottom:16px}
}
@media (max-width:420px){.login-title{font-size:23px}.login-seal{width:52px;height:52px}}

/* ---- Login: kulay ng Division (yellow-green, gaya ng motif ng SDO Occidental Mindoro) ---- */
.login-page{
  --dv-cream:#fdf3e1;
  background:linear-gradient(180deg,#f3f8e2 0%,#fbf7ea 55%,var(--dv-cream) 100%);
}
.login-page :focus-visible{outline-color:rgba(52,130,10,.45)}
.login-page .login-brand{
  background:
    repeating-linear-gradient(118deg,rgba(255,255,255,.07) 0 2px,transparent 2px 10px),
    linear-gradient(160deg,var(--dv-lime) 0%,var(--dv-yg) 24%,var(--dv-green) 52%,var(--dv-deep) 100%);
  border-right-color:var(--dv-yellow)}
.login-page .login-brand::after{opacity:.08;mix-blend-mode:screen}
.login-page .login-seal{box-shadow:0 0 0 4px var(--dv-yellow),0 6px 18px rgba(36,96,10,.35)}
.login-page .login-division{color:#fff;text-shadow:0 1px 2px rgba(36,96,10,.55)}
.login-page .login-title{color:#fff;
  text-shadow:0 2px 0 var(--dv-ink),0 -1px 0 var(--dv-ink),1px 0 0 var(--dv-ink),-1px 0 0 var(--dv-ink),0 5px 12px rgba(20,60,5,.35)}
.login-page .login-rule{background:var(--dv-yellow)}
.login-page .login-lede{color:#fff;text-shadow:0 1px 2px rgba(20,60,5,.5)}
.login-page .login-card{border-color:#dfe8c8;box-shadow:0 1px 2px rgba(36,96,10,.06),0 16px 40px rgba(52,110,10,.14)}
.login-page .login-form-title{color:var(--dv-ink)}
.login-page input:focus{border-color:var(--dv-deep);box-shadow:0 0 0 3px rgba(52,130,10,.18)}
.login-page .btn{background:var(--dv-deep)}
.login-page .btn:hover{background:var(--dv-ink)}
.login-page .forgot-link a{color:var(--dv-ink)}
.login-page .pwa-btn{border-color:var(--dv-deep);color:var(--dv-ink)}
.login-page .pwa-btn:hover{background:#f1f8e6}
.login-page .pwa-ready .pwa-btn{background:var(--dv-deep);color:#fff}
.login-page .pwa-ready .pwa-btn:hover{background:var(--dv-ink)}
.login-page .pwa-help{background:#f3f9e8;border-color:#cfe3ad;color:var(--dv-ink)}
@media (max-width:760px){
  .login-page .login-brand{border-bottom-color:var(--dv-yellow);
    background:
      repeating-linear-gradient(118deg,rgba(255,255,255,.07) 0 2px,transparent 2px 10px),
      linear-gradient(100deg,var(--dv-lime) 0%,var(--dv-yg) 30%,var(--dv-green) 65%,var(--dv-deep) 100%)}
  .login-page .login-seal{box-shadow:0 0 0 3px var(--dv-yellow)}
}

/* ---- Form fields ---- */
label{display:block;font-size:13.5px;font-weight:600;color:var(--label);margin:0 0 6px}
input,select{
  width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:8px;
  font-size:15px;margin-bottom:16px;background:#fff;color:var(--text)
}
input:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(46,125,14,.15)}
input[type=checkbox],input[type=radio]{accent-color:var(--navy)}
::placeholder{color:#8a96a4}
input[type=file]::file-selector-button{font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);background:#eef3f9;
  border:1px solid var(--border-strong);border-radius:6px;padding:5px 12px;margin-right:10px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:#e2eaf4}
.btn{
  width:100%;border:0;border-radius:8px;padding:12px 16px;background:var(--navy);
  color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .15s
}
.btn:hover{background:var(--navy-dark)}
.msg{background:#fdf1f0;color:var(--danger-dark);border:1px solid #f3cdc8;border-left:4px solid var(--danger);
  padding:10px 14px;border-radius:8px;font-size:14px;margin-bottom:16px}

/* ---- Header bar ---- */
.topbar{
  background:var(--dv-stripes),linear-gradient(100deg,var(--dv-lime) 0%,var(--dv-yg) 20%,var(--dv-green) 46%,var(--dv-deep) 72%,#2b740a 100%);
  color:#fff;padding:10px 24px;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;
  border-bottom:3px solid var(--accent)
}
.topbar .title{font-family:var(--font-brand);font-weight:700;font-size:20px;letter-spacing:.3px}
.topbar .right{text-shadow:0 1px 1px rgba(20,60,5,.35)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-seal{width:42px;height:42px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 0 2px var(--dv-yellow),0 2px 6px rgba(20,60,5,.3)}
.brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.brand-name{font-family:var(--font-brand);font-weight:700;font-size:20px;letter-spacing:.3px;
  text-shadow:0 2px 0 var(--dv-ink),0 -1px 0 var(--dv-ink),1px 0 0 var(--dv-ink),-1px 0 0 var(--dv-ink)}
.brand-sub{font-size:12px;font-weight:600;color:#fff;margin-top:2px;text-shadow:0 1px 2px rgba(20,60,5,.75)}
.topbar .right{display:flex;align-items:center;gap:4px;font-size:14px;flex-wrap:wrap}
.topbar .right > span{display:inline-flex;align-items:center;gap:8px;margin-right:10px;font-weight:600}
.topbar .right > span::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center/16px no-repeat}
.topbar a{color:rgba(255,255,255,.92);text-decoration:none;padding:7px 12px;border-radius:7px;font-weight:600;font-size:13.5px}
.topbar a:hover{background:rgba(255,255,255,.12);color:#fff}
.topbar a[href="logout.php"]{border:1px solid rgba(255,255,255,.6);margin-left:4px}
.topbar a[href="logout.php"]:hover{background:#fff;color:var(--navy);border-color:#fff}
@media (max-width:640px){
  .topbar{padding:10px 14px;gap:8px;
    background:var(--dv-stripes),linear-gradient(180deg,var(--dv-yg) 0%,var(--dv-green) 42%,var(--dv-deep) 75%,#2b740a 100%)}
  .brand-seal{width:36px;height:36px}
  .brand-name{font-size:18px}
  .brand-sub{font-size:11px}
  .topbar .right{width:100%;gap:2px;padding-top:8px;border-top:1px solid rgba(255,255,255,.22)}
  .topbar .right > span{width:100%;margin:0 0 4px;font-size:13.5px}
  .topbar .right > span::before{width:24px;height:24px;background-size:14px}
  .topbar a{padding:6px 10px;font-size:13px}
}

/* ---- Page body ---- */
.container{max-width:900px;margin:28px auto;padding:0 20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);margin-bottom:20px}
.rolebadge{display:inline-block;background:#fbf7cc;color:#4c4500;border:1px solid #e3d55a;
  font-weight:700;font-size:12px;padding:3px 10px;border-radius:6px;letter-spacing:.01em}
.hint{color:var(--muted);font-size:14px}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px}
td.num,th.num,.sum-val{font-variant-numeric:tabular-nums}
th{color:var(--muted);font-size:12.5px;font-weight:600;background:var(--tint)}
thead th{border-bottom-color:var(--border-strong)}
.ok{background:#edf7f0;color:#1a5b30;border:1px solid #c6e4d0;border-left:4px solid var(--green);
  padding:10px 14px;border-radius:8px;font-size:14px;margin-bottom:16px}

/* ---- Action buttons (dashboard) ---- */
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn-row + .btn-row{margin-top:10px}
.action-btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;text-decoration:none;
  font-weight:600;font-size:14px;padding:10px 16px;border-radius:8px;border:1px solid transparent;
  transition:background-color .15s,border-color .15s
}
.action-btn:hover{background:var(--navy-dark)}
.action-btn.outline{background:#fff;color:var(--navy);border-color:var(--border-strong)}
.action-btn.outline:hover{background:#f1f5fa;border-color:var(--navy)}
.action-btn .count{display:inline-block;background:var(--accent);color:var(--ink);font-size:12px;font-weight:700;
  padding:1px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.back-link{display:inline-block;margin-top:14px;color:var(--navy);font-weight:600;text-decoration:none}
.back-link:hover{text-decoration:underline}

/* ---- Import preview ---- */
.container.wide{max-width:1200px}
.tbl-wrap{overflow-x:auto;margin-top:10px}
table.preview td{vertical-align:top}
.tbl-input{margin:0;padding:7px 8px;font-size:14px;min-width:110px}
.tbl-input.wide-in{min-width:200px}
.tbl-input.num{min-width:80px;max-width:110px;text-align:right}
.row-warn td{background:#fff8e6}
td.note{font-size:12px;color:var(--muted);min-width:240px}
.btn-inline{width:auto;padding:11px 22px}
.btn-row .back-link{margin-top:0;align-self:center}
.plain-list{margin:8px 0 0;padding-left:20px}
.plain-list li{margin:3px 0}
input[type=checkbox]{width:18px;height:18px;margin:8px 0 0}

/* ---- Leave history ---- */
.mini-btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;border:0;
  border-radius:6px;padding:6px 11px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;line-height:1.35}
.mini-btn:hover{background:var(--navy-dark)}
table.history{font-size:13px;border:1px solid var(--border)}
table.history th,table.history td{padding:6px 8px;border:1px solid var(--border)}
table.history th{background:#f5f8ef;text-align:center;vertical-align:middle;text-transform:uppercase;letter-spacing:.3px;font-size:12px}
table.history th.grp{background:#e7efdb;color:var(--navy)}
table.history th.sub{font-size:11px}
table.history td.num{text-align:right;white-space:nowrap}
tr.hist-leave td{background:#fff4e0}
tr.hist-row td{border-bottom:2px solid var(--border);padding-top:0}
details summary{cursor:pointer;color:var(--navy);font-size:13px;padding:6px 0}
.legend{font-size:12px}
.swatch{display:inline-block;width:12px;height:12px;background:#fff4e0;border:1px solid #f0c27a;vertical-align:middle}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.stat-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.stat{flex:1 1 130px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.stat-label{font-size:12.5px;color:var(--muted);font-weight:600}
.stat-value{font-size:24px;font-weight:700;color:var(--ink);margin-top:2px;line-height:1.25;font-variant-numeric:tabular-nums}
@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border:0;padding:0}
  .container{margin:0;max-width:none}
  tr.hist-leave td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- Wellness edit ---- */
.well-cell{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.well-val{font-weight:700;min-width:18px;padding-top:5px}
.well-edit summary{list-style:none;padding:5px 10px;font-size:12px}
.well-edit summary::-webkit-details-marker{display:none}
.well-edit[open] summary{background:#e7efdb;color:var(--navy)}
.mini-btn.ghost{background:#e7efdb;color:var(--navy)}
.mini-btn.ghost:hover{background:#d6e5c3}
.well-form{display:flex;gap:6px;align-items:center;margin-top:6px}
.well-form .tbl-input{min-width:70px;max-width:90px;font-size:14px}
.stat-value .well-cell{font-size:22px}
.stat-value .well-val{padding-top:0}
.stat-value .well-edit summary{font-size:12px}
.small-note{font-size:13px;margin:12px 0 0}

/* ---- COC credits ---- */
.coc-warn{font-size:11px;color:#a15c00;margin-top:4px;font-weight:600}
.stat-link{color:inherit;text-decoration:none}
.stat-link:hover{text-decoration:underline}
.coc-add{margin:14px 0 16px}
.coc-add summary{list-style:none;display:inline-block}
.coc-add summary::-webkit-details-marker{display:none}
.coc-form{background:#f5f8ef;border:1px solid var(--border);border-radius:10px;padding:16px;margin-top:10px;max-width:760px}
.coc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end}
.coc-exp-box{padding-bottom:20px}
.coc-exp-box strong{display:block;font-size:18px;color:var(--navy)}
textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:9px;font-size:15px;
  margin-bottom:16px;font-family:inherit;resize:vertical;background:#fff}
textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(46,125,14,.12)}
table.coc-table td{vertical-align:top}
table.coc-table td.num{text-align:right;font-weight:700}
td.coc-desc{min-width:220px;max-width:420px}
tr.coc-expired td{color:var(--muted);background:#fafbf7}
.badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent;line-height:1.5}
.badge-active{background:#edf7f0;color:#1a6a35;border-color:#c6e4d0}
.badge-soon{background:#fff6e5;color:#8a4f00;border-color:#f3d9a4}
.badge-expired{background:#f2f4f6;color:#5f6b78;border-color:#dfe3e8}
.badge-used{background:#eaf0f7;color:var(--navy);border-color:#cfdbe9}
.coc-del summary{list-style:none}
.coc-del summary::-webkit-details-marker{display:none}
.coc-del form{margin-top:6px}
.mini-btn.danger{background:var(--danger)}
.mini-btn.danger:hover{background:#a5281b}

/* ---- Malakihang import ---- */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.pick-box{background:#f5f8ef;border:1px solid var(--border);border-radius:10px;padding:14px 14px 4px}
.pick-box input[type=file]{background:#fff}
.pick-box .hint{font-size:12px;margin:-8px 0 10px}
.sel-info{font-weight:700;color:var(--navy);margin:14px 0}
.prog{margin:8px 0 6px}
.prog-title{font-weight:700;color:var(--navy);margin:0 0 10px}
.progress{height:14px;background:#e7efdb;border-radius:8px;overflow:hidden}
.progress .bar{height:100%;width:0;background:var(--navy);transition:width .25s}
.prog-text{font-size:14px;margin:8px 0 0}
.err-box{background:#fdecea;border:1px solid #f5c6c0;border-radius:8px;padding:8px 12px;margin:12px 0;font-size:13px}
.err-box summary{color:var(--danger);font-weight:700}
.err-box ul{max-height:260px;overflow:auto}
.sum-row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.sum{flex:1 1 130px;background:#f5f8ef;border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.sum-val{font-size:22px;font-weight:800;color:var(--navy)}
.sum.ok-s{background:#eaf7ee;border-color:#bfe3c9}.sum.ok-s .sum-val{color:#1e7e34}
.sum.warn-s{background:#fff8e6;border-color:#f3dca6}.sum.warn-s .sum-val{color:#a15c00}
.sum.err-s{background:#fdecea;border-color:#f5c6c0}.sum.err-s .sum-val{color:var(--danger)}
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:8px 0}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{padding:6px 12px;border-radius:7px;background:#fff;border:1px solid var(--border-strong);color:var(--navy);text-decoration:none;font-size:13px;font-weight:600}
.tab:hover{border-color:var(--navy)}
.tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.search{display:flex;gap:6px;align-items:center}
.search input{margin:0;padding:7px 10px;font-size:14px;min-width:220px}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:14px 0;font-size:14px}
.save-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.save-bar .prog{flex:1 1 100%}
.row-flag{font-size:11px;color:var(--muted)}
.row-flag.ok-t{color:#1e7e34}
.row-flag.err-t{color:var(--danger)}

/* ---- Service Credit ADD ---- */
tr.hist-manual td{background:#eaf7ee}
.badge-manual{background:#1e7e34;color:#fff;font-size:10px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.swatch-manual{background:#eaf7ee;border-color:#9fd3ae}

/* ---- Delete employee ---- */
.mini-btn.danger-ghost{background:#fdecea;color:var(--danger)}
.mini-btn.danger-ghost:hover{background:#f9d6d1}
.btn-danger{background:var(--danger)}
.btn-danger:hover{background:#a5281b}
.btn:disabled{opacity:.5;cursor:not-allowed}
.del-badge{background:#fdf1f0;color:var(--danger);border-color:#f3cdc8}
.del-summary{margin:14px 0 16px;max-width:460px}
.del-summary th{width:55%}
.del-warn{margin-bottom:18px}

/* ---- Buwanang VL/SL credit at forced leave ---- */
tr.hist-auto td{background:#eef4fc}
tr.hist-forced td{background:#fdeee6}
.badge-auto{background:#2f6db3;color:#fff;font-size:10px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.badge-forced{background:#b5541c;color:#fff;font-size:10px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.swatch-auto{background:#eef4fc;border-color:#9dbfe6}
.swatch-forced{background:#fdeee6;border-color:#e8b394}
.credit-box{margin-top:14px;padding:12px 14px;background:#f7faf1;border:1px solid var(--border);border-radius:10px}
.credit-box .small-note{margin:6px 0 0}
.base-edit{margin-top:6px}
.base-form{max-width:560px}
.base-grid{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.base-grid select.tbl-input{width:auto;min-width:120px}
@media print{tr.hist-auto td,tr.hist-forced td{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ---- Search sa Teaching / Non-Teaching table ---- */
.tbl-search{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.search-field{display:flex;gap:6px;align-items:center}
.search-field input[type=search]{margin:0;padding:8px 12px;font-size:14px;width:300px;min-width:0;flex:1 1 auto}
@media (max-width:600px){.tbl-search,.search-field{width:100%}}
.search-field .mini-btn{padding:9px 14px}
.search-count{font-size:12px;color:var(--muted);font-weight:600}
tr.no-match td{text-align:center;color:var(--muted);font-style:italic;padding:18px}
tr[hidden]{display:none}
.dash-head{margin-bottom:14px}

/* ---- Pantay na ADD / Edit sa mga table ----
   Iisang lapad ang numero (naka-align sa kanan), kaya iisang tuwid na hanay ang mga button. */
td .well-cell{flex-wrap:nowrap;align-items:center}
td .well-val{display:inline-block;min-width:6.5ch;text-align:right;padding-top:0;
  font-variant-numeric:tabular-nums;white-space:nowrap}
td .well-edit{position:relative}
td .well-edit[open] .well-form{position:absolute;z-index:5;left:0;top:100%;background:#fff;
  border:1px solid var(--border);border-radius:9px;padding:8px;box-shadow:0 6px 18px rgba(0,0,0,.12)}

/* ---- Table na may sariling scroll (Teaching / Non-Teaching) ---- */
.scroll-box{max-height:min(52vh,520px);overflow:auto;border:1px solid var(--border);border-radius:10px;
  overscroll-behavior:contain}
.scroll-box table{margin:0}
.scroll-box th{position:sticky;top:0;z-index:3;background:#f5f8ef;box-shadow:inset 0 -1px 0 var(--border)}
.scroll-box tr.srow{scroll-margin-top:48px}
.scroll-box tr:last-child td{border-bottom:0}
.jump-links{margin:14px 0 0;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
html{scroll-behavior:smooth}
@keyframes rowflash{0%{background:#fff3c4}100%{background:transparent}}
tr.row-flash td{animation:rowflash 2.2s ease-out}

/* ---- Add User: pagpili ng empleyado ---- */
.emp-block{margin-bottom:16px}
.emp-search-field input[type=search]{width:auto;flex:1 1 auto;padding:11px 12px;font-size:15px}
.emp-search-field .mini-btn{padding:11px 18px;font-size:14px}
.emp-results{margin-top:8px;border:1px solid var(--border);border-radius:9px;max-height:280px;overflow:auto;background:#fff}
.emp-item{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;width:100%;text-align:left;background:#fff;border:0;
  border-bottom:1px solid var(--border);padding:10px 12px;font:inherit;cursor:pointer;color:var(--text)}
.emp-item:last-child{border-bottom:0}
.emp-item:hover,.emp-item:focus{background:#eef5e3;outline:none}
.emp-item strong{color:var(--navy)}
.emp-item span{font-size:13px;color:var(--muted)}
.emp-item em{font-size:12px;color:#a15c00;font-style:normal;font-weight:600;margin-left:auto}
.emp-item.taken{cursor:not-allowed;opacity:.65}
.emp-note{padding:10px 12px;font-size:13px;color:var(--muted)}
.emp-picked{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  background:#eaf7ee;border:1px solid #bfe3c9;border-radius:9px;padding:10px 12px}
.emp-picked strong{color:#1e7e34;margin-right:8px}
[hidden]{display:none !important}

/* ---- Setup Form 6 ---- */
.form6-needed{border:1px solid #efd9a6;border-left:4px solid #d99a1e;background:#fffdf7}
.form6-current{max-width:640px;margin-top:10px}
.form6-current th{width:200px}
.form6-current td{font-weight:700;color:var(--navy)}
.form6-edit{margin-top:12px}
.form6-edit summary{list-style:none;display:inline-block}
.form6-edit summary::-webkit-details-marker{display:none}
.form6-form{max-width:640px}
.form6-form select:disabled{background:#f5f8ef;color:var(--muted)}
.form6-h{font-size:15px;color:var(--navy);margin:20px 0 6px;padding-top:14px;border-top:1px solid var(--border)}
.form6-card .card-head + .form6-h{border-top:0;padding-top:0;margin-top:14px}
.form6-sigs{max-width:1100px}
.form6-sigs td{vertical-align:top}
.form6-sigs .sig-part{font-weight:700;color:var(--muted);font-size:13px;white-space:nowrap}
.form6-sigs .sig-name{font-weight:700;color:var(--navy)}
.form6-sigs .badge{font-size:10px;padding:2px 7px;margin-left:4px;vertical-align:middle}
.sig-set{border:1px solid var(--border);border-radius:10px;padding:12px 14px 2px;margin:0 0 14px;background:#fff}
.sig-set legend{font-weight:700;color:var(--navy);font-size:13px;padding:0 6px}
.form6-sig-form .btn-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Edit sa tapat ng bawat pangalan / position */
.sig-line{display:flex;align-items:flex-start;gap:8px}
.sig-line .sig-val{flex:0 1 auto;min-width:0}
.sig-line .badge,.sig-line .sig-edit-btn{flex:none}
.sig-line .badge{margin-top:2px}
.sig-edit-btn{padding:3px 10px;font-size:12px}
.sig-edit-btn[aria-expanded="true"]{background:#d6e5c3}
.sig-edit-form{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:10px;background:#f5f8ef;
  border:1px solid var(--border);border-radius:9px;max-width:420px}
.sig-edit-form .tbl-input{width:100%;min-width:0}
.sig-edit-btns{display:flex;gap:6px;flex-wrap:wrap}
.sig-reset-all{margin-top:12px}
@keyframes cellflash{0%{background:#fff3c4}100%{background:transparent}}
td.cell-flash{animation:cellflash 2.4s ease-out}

/* ---- Mga Account (Add User) ---- */
.acct-table td{vertical-align:middle}
td.nowrap{white-space:nowrap}
label .hint{font-weight:400;font-size:12px}

/* ---- Forgot password ---- */
.forgot-link{text-align:center;margin:16px 0 0;font-size:14px}
.forgot-link a{color:var(--navy);font-weight:600;text-decoration:none}
.forgot-link a:hover{text-decoration:underline}
.login-body .back-link{display:block;text-align:center}
.howto{margin:12px 0;background:#f7faf1;border:1px solid var(--border);border-radius:10px;padding:8px 14px}
.howto summary{font-weight:700}
.howto ol{margin:8px 0;padding-left:20px;font-size:14px;line-height:1.7}

/* ---- Registration links ---- */
.reg-card{max-width:520px}
.copy-row{display:flex;gap:6px;align-items:center}
.copy-row .link-url{min-width:260px;width:100%;font-size:12px;font-family:Consolas,monospace;background:#f7faf1}
.link-table td{vertical-align:middle}
.inline-form{display:inline-flex;gap:6px;margin:0}
.mini-btn.approve-btn{background:#1e7e34}
.mini-btn.approve-btn:hover{background:#17652a}
.pending-note{background:#fff8e6;color:#7a4b00;border-color:#f3dca6}
.pending-note a{color:#7a4b00;font-weight:700}
a.badge{text-decoration:none}
#regForm .emp-picked,#regForm #empSearch{margin-bottom:14px}
/* Setup Form 6 sa register page */
.reg-f6{border:1px solid var(--border);border-radius:10px;padding:12px 14px 4px;margin:4px 0 16px;background:#f7faf1}
.reg-f6 > legend{font-weight:800;color:var(--navy);padding:0 6px}
.reg-sigs{background:#fff;margin:0 0 12px}
.reg-sigs summary .hint{font-weight:400;font-size:12px}
.reg-sigs .sig-set{margin-top:10px}
td.f6-cell{min-width:180px;font-size:13px}
/* 7.B: paghahanap sa Non-Teaching */
.sig-search{margin-bottom:8px}
.sig-search .sig-q{width:100%}
.sig-edit-form .sig-search{margin-bottom:0}
.sig-results{margin-top:4px;max-height:220px}
.sig-pos-note{margin:0 0 8px;font-size:12px;color:#1e7e34}
input.just-picked{box-shadow:0 0 0 3px rgba(30,126,52,.25);border-color:#1e7e34}

/* ---- Apply for Leave ---- */
.apply-btn{background:var(--dv-yellow);color:var(--ink);border-color:#d8c91c}
.apply-btn:hover{background:#e8d81f}
.leave-info{margin-top:14px;border:1px solid var(--border)}
.leave-info th,.leave-info td{border:1px solid var(--border);padding:8px 10px}
.leave-info th{background:#f5f8ef;width:16%;white-space:nowrap}
.leave-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:26px}
@media (max-width:820px){.leave-grid{grid-template-columns:1fr}}
.leave-h{font-size:15px;color:var(--navy);margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid #e7efdb}
.leave-form input[type=radio]{width:auto;margin:0;flex:0 0 auto}
.leave-types{display:flex;flex-direction:column;gap:4px}
.lt-item{position:relative;display:flex;align-items:flex-start;gap:10px;margin:0;padding:7px 10px;border:1px solid transparent;
  border-radius:8px;cursor:pointer;font-weight:400;color:var(--text);font-size:14px}
.lt-item:hover{background:#f5f8ef}
.lt-item input{position:absolute;opacity:0;pointer-events:none}
.lt-box{flex:0 0 18px;height:18px;margin-top:2px;border:2px solid #8a99a8;border-radius:4px;background:#fff;position:relative}
.lt-item input:checked + .lt-box{background:var(--navy);border-color:var(--navy)}
.lt-item input:checked + .lt-box::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lt-item input:focus-visible + .lt-box{box-shadow:0 0 0 3px rgba(46,125,14,.25)}
.lt-item:has(input:checked){background:#eef6e2;border-color:#c8dcae}
.lt-text small{color:var(--muted);font-size:12px}
.lt-other{margin:4px 0 0 38px;width:calc(100% - 38px)}
.lb-block{margin-bottom:6px}
.lb-title{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--muted);font-style:italic}
.lb-opt{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--text);font-size:14px;margin:0 0 8px;cursor:pointer}
.lb-text{margin-top:6px}
.leave-warn{background:#fff4e0;color:#8a4b00;border:1px solid #f1d29c;padding:9px 12px;border-radius:8px;font-size:13px}
.leave-apps td.num,.leave-apps th.num{text-align:right}
.leave-apps .row-actions{white-space:nowrap;text-align:right}
.leave-apps .row-actions .inline-form{margin-left:4px}
@media (max-width:700px){.tbl-wrap > table.leave-apps:not(.appr-table){min-width:640px}}
.badge.lv-pending{background:#fff6e5;color:#8a4f00;border-color:#f3d9a4}
.badge.lv-approved{background:#edf7f0;color:#1a6a35;border-color:#c6e4d0}
.badge.lv-disapproved{background:#fdf1f0;color:var(--danger);border-color:#f3cdc8}
.badge.lv-cancelled{background:#f2f4f6;color:#5f6b78;border-color:#dfe3e8}

/* ---- CS Form No. 6 (printable) ---- */
.f6-toolbar{max-width:8.5in;margin:20px auto 10px;padding:0 12px}
.f6-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-weight:600}
.f6-actions .back-link{margin-top:0}
.f6-toolbar .hint{margin:8px 0 0;font-size:12px}
.f6-sheet{position:relative;max-width:8.5in;margin:0 auto 30px;background:#fff;color:#000;padding:.4in .45in;
  box-shadow:0 2px 12px rgba(30,70,10,.15);font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.3}
.f6-top{display:flex;justify-content:space-between;font-size:10px}
.f6-annex{font-weight:700;font-size:11px}
.f6-head{text-align:center;font-size:11px;margin-top:2px}
.f6-agency{font-weight:700;font-size:12px}
.f6-title{text-align:center;font-weight:700;font-size:16px;letter-spacing:.5px;margin:10px 0 8px}
table.f6{width:100%;border-collapse:collapse;margin:0;border:1.5px solid #000;table-layout:fixed}
table.f6>tbody>tr>td{border:1px solid #000;padding:5px 7px;vertical-align:top;font-size:11px;color:#000;text-align:left}
table.f6 td.f6-c-left{width:52%}
.f6-sec{text-align:center !important;font-weight:700;background:#fff;border-top:2px solid #000 !important;border-bottom:2px solid #000 !important;padding:3px !important;letter-spacing:.3px}
.f6-lbl{font-weight:700;font-size:10.5px}
.f6-val{padding:4px 0 0 10px;font-weight:700;font-size:12px}
.f6-name-row{display:flex;align-items:flex-start;gap:8px}
.f6-name{flex:1;display:flex;flex-direction:column}
.f6-name small{font-size:9.5px}
.f6-name b{font-size:12px;padding-top:3px}
.f6-r2{white-space:nowrap}
.f6-r2 .f6-lbl{margin-right:4px}
.f6-line{display:inline-block;border-bottom:1px solid #000;min-height:14px;vertical-align:bottom;padding:0 4px;font-weight:700;line-height:1.2;white-space:normal}
.f6-line.w-date{min-width:1.6in;margin-right:14px}
.f6-line.w-pos{min-width:2in;margin-right:14px}
.f6-line.w-sal{min-width:1.1in}
.f6-line.w-fill{flex:1;min-width:1in}
.f6-line.w-full{display:block;width:100%}
.f6-line.w-num{min-width:.7in;margin-right:4px}
.f6-opt{display:flex;align-items:flex-start;gap:6px;margin:3px 0 0 8px}
.f6-opt .f6-line.w-full{flex:1;display:inline-block;width:auto}
.f6-opt small{font-size:9px}
.f6-6a .f6-opt{margin-top:2.5px}
.f6-sub{margin:6px 0 0 4px}
.f6-indent{margin-left:22px}
.f6-others{margin:6px 0 0 8px}
.f6-cb{flex:0 0 12px;width:12px;height:12px;border:1px solid #000;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;line-height:1;margin-top:1px}
.f6-asof{text-align:center;margin:4px 0}
table.f6-cred{width:92%;margin:4px auto 0;border-collapse:collapse}
table.f6-cred th,table.f6-cred td{border:1px solid #000;padding:3px 5px;font-size:10.5px;text-align:center;text-transform:none;letter-spacing:0;color:#000;height:18px}
table.f6-cred th{font-weight:700;background:#fff}
table.f6-cred td:first-child{text-align:left}
.f6-sig{text-align:center;margin:20px auto 2px;width:85%}
.f6-sig-name{font-weight:700;border-bottom:1px solid #000;padding-bottom:1px}
.f6-sig-pos{font-size:10.5px}
.f6-sig-cap{font-size:10px;font-style:italic}
.f6-sig-app{margin-top:26px;width:75%}
tr.f6-final>td{border-top:0 !important;padding-bottom:10px !important}
tr.f6-final .f6-sig{width:50%;margin-top:22px}
tr.f6-last>td{border-bottom:0 !important}
.f6-foot{margin-top:4px;font-size:8.5px;color:#555;text-align:right}
.f6-watermark{position:absolute;top:42%;left:0;right:0;text-align:center;font-size:84px;font-weight:800;color:rgba(192,57,43,.18);
  transform:rotate(-24deg);pointer-events:none;letter-spacing:6px}
@media (max-width:760px){
  .f6-sheet{padding:14px;overflow-x:auto}
  .f6-r2{white-space:normal}
}
@media print{
  @page{margin:.35in}
  body.f6-page{background:#fff}
  .f6-sheet{box-shadow:none;margin:0;padding:0;max-width:none;font-size:10px;line-height:1.22}
  .f6-cb,.f6-watermark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table.f6>tbody>tr>td{font-size:10px;padding:3px 6px}
  .f6-head{font-size:10.5px}
  .f6-title{font-size:14px;margin:6px 0 5px}
  .f6-opt{margin-top:1.5px}
  .f6-6a .f6-opt{margin-top:1px}
  .f6-opt small{font-size:8px}
  .f6-sub,.f6-others{margin-top:3px}
  .f6-cb{width:11px;height:11px;flex-basis:11px;font-size:10px}
  .f6-sig{margin-top:28px}
  .f6-sig-app{margin-top:30px}
  tr.f6-final .f6-sig{margin-top:30px}
  table.f6-cred th,table.f6-cred td{height:15px;padding:2px 5px;font-size:10px}
}
@media (max-width:600px){
  .leave-info,.leave-info tbody,.leave-info tr,.leave-info th,.leave-info td{display:block;width:100%}
  .leave-info tr{border-bottom:0}
  .leave-info th{border-bottom:0;padding-bottom:2px}
  .leave-info td{border-top:0}
}
/* 7.B Recommendation */
.rec-why{margin:2px 0 0 26px}
.rec-why textarea{display:block;margin:0;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:15px;
  resize:vertical;min-height:76px;background:#fff}
.rec-why textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(46,125,14,.12)}
.char-count{font-size:12px;color:var(--muted);text-align:right;margin-top:2px}
/* Form 6: dahilan na nakasulat sa ibabaw ng mga linya (1 kalahating linya + 3 buong linya) */
.f6-reason{position:relative;margin:3px 0 0 8px;padding-left:18px;line-height:17px;min-height:68px;font-weight:700;overflow-wrap:anywhere}
.f6-rl{position:absolute;left:18px;right:0;height:17px;border-bottom:1px solid #000;z-index:0}
.f6-reason-lbl{position:relative;z-index:1;float:left;margin-left:-18px;padding-right:6px;height:17px;background:#fff;font-weight:400;
  display:flex;align-items:center;gap:6px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.f6-reason-txt{position:relative;z-index:1}
.f6-reason-lbl .f6-cb{margin-top:0}

/* ---- Form 6: Excel download at header na kagaya ng template ng Division ---- */
.mini-btn.xl-btn{background:#1d6f42}
.mini-btn.xl-btn:hover{background:#155632}
.f6-annex{text-align:center}
.f6-annex small{display:block;font-weight:400;font-size:7px;color:#666;margin-top:6px}
.f6-head{display:flex;align-items:center;justify-content:center;gap:18px;position:relative;font-size:12.5px;line-height:1.25}
.f6-logo{width:74px;height:auto;position:absolute;left:12%;top:50%;transform:translateY(-50%)}
.f6-head-txt{text-align:center}
.f6-head .f6-agency{font-size:12.5px}
@media (max-width:760px){.f6-logo{position:static;transform:none;width:54px}}
@media print{.f6-head{font-size:11.5px}.f6-logo{width:66px}}

/* 6.C: naka-gitna ang bilang ng araw at Inclusive Dates */
.f6-line.t-center{text-align:center}

/* ---- Pagbawas ng leave (patakaran ng CSC/DepEd) ---- */
.charge-box{border:1px solid #bfe3c9;background:#f2faf4;border-radius:10px;padding:12px 14px;margin:4px 0 6px}
.charge-box.cb-warn{border-color:#f1d29c;background:#fff8ec}
.charge-box.cb-error{border-color:#f5c6c0;background:#fdecea}
.cb-title{font-size:13px;font-weight:700;color:var(--ink)}
.cb-lines{margin:6px 0 0;padding-left:18px;font-size:14px;font-weight:600}
.cb-lines li{margin:2px 0}
.cb-lines .cb-wop{color:#8a4b00}
.cb-lines .cb-muted{color:var(--muted);font-weight:400}
.charge-box.cb-error .cb-lines{color:var(--danger)}
.cb-note{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.lt-item.lt-blocked{opacity:.55;cursor:not-allowed}
.lt-item.lt-blocked:hover{background:transparent}
.lt-why{display:block;font-size:11px;color:var(--danger);font-style:normal;font-weight:700}
.badge-app{background:#0b3d6b;color:#fff;font-size:10px;padding:2px 7px;margin-left:6px;vertical-align:middle}
tr.hist-app td{background:#eef4fb}
.charge-cell{font-size:13px;white-space:nowrap}
.lb-opt input:disabled + span,.lb-opt.is-disabled{opacity:.5}
.f6-charge{max-width:8.5in;margin:0 auto 12px;padding:0 12px}
.f6-charge .charge-box{margin:0}
.staff-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.staff-actions input[type=text]{margin:0;width:260px;padding:7px 10px;font-size:13px}
.leave-filter{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 0}

/* ---- Pag-apruba ng School Head (7.B) ---- */
.cc-await{font-weight:600;color:#7a4b00}
.cc-when,.st-who{display:block;font-size:11px;color:var(--muted);font-weight:400;white-space:normal;margin-top:2px}
.status-cell{min-width:130px}
.appr-card{border:1px solid #efd9a6;border-left:4px solid #d99a1e}
.appr-card h2 .appr-count{font-size:12px;vertical-align:middle;margin-left:6px}
.appr-empty{margin:4px 0 0}
.appr-table td{vertical-align:top}
.appr-charge{white-space:normal;min-width:150px}
.appr-err{display:block;color:var(--danger);font-weight:700;font-size:12.5px;white-space:normal}
.appr-warn{display:block;font-size:11px;color:#8a4b00;margin-top:3px;white-space:normal}
.leave-apps .row-actions.appr-actions{white-space:normal;min-width:240px}
.dec-btns{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:4px;vertical-align:top}
.dec-btns .inline-form{margin:0}
.mini-btn.ok-btn{background:#1e7e34;color:#fff}
.mini-btn.ok-btn:hover{background:#176429}
.mini-btn.ok-btn:disabled{background:#9bb8a3;cursor:not-allowed}
.mini-btn.danger-btn{background:var(--danger);color:#fff}
.mini-btn.danger-btn:hover{background:#a5301f}
.rej-form{margin:8px 0 2px;padding:10px;border:1px solid #f5c6c0;background:#fff7f6;border-radius:9px;text-align:left;white-space:normal}
.rej-form label{font-size:12px;margin-bottom:4px}
.rej-form textarea{display:block;width:100%;margin:0;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:14px;resize:vertical;min-height:58px;background:#fff}
.rej-form textarea:focus{outline:none;border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.rej-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.rej-foot .char-count{margin:0}
.appr-done{margin-top:14px}
.appr-done summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:14px;padding:4px 0}
.decide-box{border:2px solid #f1d29c;background:#fffaf0;border-radius:10px;padding:12px 14px}
.decide-box.decide-wait{border-width:1px;background:#fff8ec}
.decide-box .rej-form{max-width:520px}
.cb-sub{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.charge-box.cb-muted-box{border-color:var(--border);background:#f5f7fa}
.head-box{border:1px solid #c8dcae;background:#f4f8ec;border-radius:10px;padding:12px 14px}
.head-box p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.head-box.head-default,.head-box.head-not_found,.head-box.head-self,.head-box.head-no_account{border-color:#f1d29c;background:#fff8ec}
.head-name{font-weight:800;color:var(--navy);font-size:15px}
.head-pos{font-size:13px;color:var(--text)}
.reserve-note{margin:10px 0 0;font-size:13px;background:#fff8ec;border:1px solid #f1d29c;border-radius:8px;padding:8px 10px}
@media (max-width:600px){
  .leave-apps .row-actions.appr-actions{min-width:200px}
}
.head-link{margin:10px 0 0;font-size:13px;line-height:1.45;padding:9px 12px;border-radius:8px;border:1px solid #bfe3c9;background:#f2faf4;color:#1e5e2e}
.head-link.head-link-no_account,.head-link.head-link-not_found,.head-link.head-link-default,.head-link.head-link-self{border-color:#f1d29c;background:#fff8ec;color:#7a4b00}
@media (max-width:700px){
  .appr-table,.appr-table tbody,.appr-table tr,.appr-table td{display:block;width:100%}
  .appr-table thead{display:none}
  .appr-table tr{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .appr-table td{border:0;padding:3px 0;text-align:left !important;min-width:0 !important}
  .appr-table td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
  .appr-table td.row-actions{padding-top:8px}
  .appr-table .dec-btns{display:flex}
  .card-head.dash-head h2 .appr-count{display:inline-block;margin:6px 0 0}
}

/* ---- Watermark ng Form 6: Naghihintay / Hindi inaprubahan / Kinansela (wala kapag Aprubado) ---- */
.f6-watermark{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;pointer-events:none;transform:none;z-index:3;text-align:center;font-size:84px;font-weight:800;
  letter-spacing:6px;line-height:1.05;color:rgba(192,57,43,.18)}
.f6-watermark span{display:block;transform:rotate(-24deg);white-space:nowrap}
.f6-watermark.wm-pending{color:rgba(176,96,0,.20);font-size:76px;letter-spacing:4px}
.f6-watermark.wm-disapproved{font-size:76px;letter-spacing:4px}
.wm-hint{margin:6px 0 0 !important;color:#8a4b00 !important}
@media (max-width:760px){.f6-watermark,.f6-watermark.wm-pending,.f6-watermark.wm-disapproved{font-size:44px;letter-spacing:2px}}
@media print{.f6-watermark span{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ---- Print ng Leave History: ang history lang + detalye ng empleyado ---- */
.print-only{display:none}
@media print{
  .ph-hide{display:none !important}
  body.printing-part{background:#fff}
  body.printing-part .container{padding:0;margin:0;max-width:none}
  body.printing-part #history{margin:0;padding:0;border:0;box-shadow:none}
  body.printing-part #history>.card-head{display:none}
  body.printing-part .print-only{display:block}
  body.printing-part .legend{font-size:9px;margin:4px 0}
  body.printing-part table.history{font-size:9.5px}
  body.printing-part table.history th,body.printing-part table.history td{padding:3px 5px;font-size:9.5px}
  body.printing-part .tbl-wrap{overflow:visible}
  body.printing-part table.history thead{display:table-header-group}
  body.printing-part table.history tr{page-break-inside:avoid;break-inside:avoid}
  .badge-app,.badge-auto,.badge-forced,.badge-manual{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.hp-head{color:#000;font-family:Arial,Helvetica,sans-serif;margin-bottom:8px}
.hp-top{position:relative;text-align:center;font-size:11.5px;line-height:1.3}
.hp-logo{position:absolute;left:8%;top:50%;transform:translateY(-50%);width:62px;height:auto}
.hp-strong{font-weight:700}
.hp-title{text-align:center;font-weight:800;font-size:15px;letter-spacing:1px;margin:8px 0 6px}
table.hp-info{width:100%;border-collapse:collapse;margin:0;font-size:10.5px}
table.hp-info th,table.hp-info td{border:1px solid #000;padding:3px 6px;text-align:left;color:#000;font-size:10.5px;text-transform:none;letter-spacing:0}
table.hp-info th{width:16%;font-weight:700;background:#fff;white-space:nowrap}
table.hp-info td{font-weight:600}
.hp-bal{display:inline-block;margin-right:16px}
.hp-date{text-align:right;font-size:9px;margin-top:3px}

/* ---- AO II: Monitoring ng Leave ---- */
.ao-card{border-left:4px solid var(--navy)}
.ao-head{align-items:flex-start}
.ao-scope{font-size:14px;font-weight:700;color:var(--muted);margin-top:4px}
.ao-month{display:flex;align-items:center;gap:6px;margin:0}
.ao-month input[type=month]{margin:0;width:auto;padding:7px 10px;font-size:14px}
.ao-month .mini-btn{padding:7px 12px;font-size:15px}
.ao-tiles{margin-top:14px}
.ao-tiles .stat-value small.ao-sub{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.ao-tiles .stat.ao-hot{background:#fff8ec;border-color:#f1d29c}
.ao-tiles .stat.ao-wait{background:#fff8ec;border-color:#f1d29c}
.ao-today{margin:12px 0 0;font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ao-chip{display:inline-flex;flex-direction:column;padding:5px 10px;border:1px solid #f1d29c;background:#fffaf0;border-radius:8px;
  text-decoration:none;color:var(--text);font-weight:700;font-size:13px;line-height:1.25}
.ao-chip span{font-weight:400;font-size:11px;color:var(--muted)}
.ao-report{margin-top:18px;padding-top:12px;border-top:1px solid var(--border)}
.ao-report-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ao-actions{display:flex;gap:8px;flex-wrap:wrap}
.ao-actions .is-off{opacity:.55}
.ao-types{font-size:13px;margin:8px 0 0;color:var(--muted)}
.ao-type{display:inline-block;margin:2px 10px 2px 0;color:var(--text)}
.ao-staff{margin-top:16px}
.ao-staff summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:15px;padding:4px 0}
@media (max-width:600px){
  .ao-month{width:100%}
  .ao-month input[type=month]{flex:1}
}
@media print{
  body.printing-part #ao-report{margin:0;padding:0;border:0}
  body.printing-part .ao-report-head h3{font-size:12px}
  body.printing-part .ao-types{font-size:9.5px;color:#000}
  body.printing-part table.ao-table th,body.printing-part table.ao-table td{padding:3px 5px;font-size:9.5px;border:1px solid #000;color:#000}
  body.printing-part .ao-table .badge{background:none !important;color:#000 !important;padding:0;font-size:9.5px}
  body.printing-part .ao-card{border:0}
  body.printing-part .scroll-box{max-height:none !important;overflow:visible !important}
}
.ao-h3{font-size:15px;color:var(--navy);margin:0}
@media print{body.printing-part .ao-report-head{display:none}}
.reg-notfound{margin:8px 0 4px;padding:9px 12px;font-size:13px;line-height:1.45;color:#7a4b00;background:#fff8ec;border:1px solid #f1d29c;border-radius:8px}

/* ---- COC (CTO) muna sa Sick/Vacation Leave ng Non-Teaching ---- */
.cb-coc{margin:8px 0 2px;padding:8px 10px;border-radius:8px;background:#e9f5ff;border:1px solid #b9dcf7;color:#0b3d6b;font-size:13.5px;line-height:1.45}
.cb-lines li.cb-sub{list-style:none;margin-left:-4px;font-weight:400;font-size:12.5px;color:var(--muted)}
.stat.stat-coc{background:#e9f5ff;border-color:#b9dcf7}
.stat .stat-sub{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---- Forced Leave: "For disapproval" (Sec. 25) ---- */
.charge-box.cb-excuse{border-color:#b9dcf7;background:#eef7ff}
.cc-waive{color:#0b5a2a;font-weight:600}
.appr-excuse{display:block;font-size:12px;line-height:1.45;color:#0b3d6b;background:#eef7ff;border:1px solid #b9dcf7;border-radius:8px;padding:6px 8px;margin-top:4px;white-space:normal}

/* ---- HR dashboard: pahina-pahina (50 bawat pahina) ---- */
.dash-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:12px 0 4px}
.dash-pager .pager-info{font-size:13px;padding:0 6px}
.tbl-search .search-field .mini-btn.ghost{white-space:nowrap}

/* ---- APPLY FOR SERVICE CREDIT / COC (PDF ng requirements, aaprubahan ng HR) ---- */
.credit-btn{background:var(--dv-yellow);color:var(--ink)}
.credit-btn:hover{background:#e8d81f}
.credit-form .lb-opt input[type=checkbox],.cr-decide .lb-opt input[type=checkbox]{margin:0;flex:0 0 auto}
.cr-checks{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#f8faf3}
.cr-checks .lb-opt{margin:4px 0}
.credit-form textarea{margin-bottom:6px}
.credit-form input[type=file]{padding:9px 10px;background:#fff;margin-bottom:6px}
.credit-form .small-note{margin:4px 0 10px}
.cr-bad{color:var(--danger);font-weight:700}
.cr-late{margin:4px 0 10px;padding:7px 10px;border-radius:8px;background:#fff8ec;border:1px solid #f1d29c;color:#7a4b00;font-size:13px}
.cr-status{font-size:12px;vertical-align:middle;margin-left:8px}
.cr-desc{white-space:normal;overflow-wrap:break-word;min-width:140px;max-width:420px}
.cr-info td.cr-desc{max-width:none}
.cr-reason{color:var(--danger);font-weight:600}
.cr-done{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:#eaf7ee;border:1px solid #b9e2c4;color:#1e5f2f;font-size:13.5px}
.cr-reqs{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px}
.cr-reqs li{padding:7px 10px 7px 32px;border-radius:8px;border:1px solid var(--border);position:relative;font-size:14px;background:#fff}
.cr-reqs li::before{position:absolute;left:10px;top:7px;font-weight:700}
.cr-reqs li.is-ok{border-color:#b9e2c4;background:#f3fbf5}
.cr-reqs li.is-ok::before{content:"\2713";color:#1e7e34}
.cr-reqs li.is-miss{border-color:#f5c6c0;background:#fff6f5}
.cr-reqs li.is-miss::before{content:"\2715";color:var(--danger)}
.cr-pdf{display:block;width:100%;height:78vh;min-height:420px;border:1px solid var(--border);border-radius:10px;background:#525659}
.cr-decide .cr-warn{margin:4px 0;font-size:12.5px;padding:6px 10px;border-radius:8px;background:#fff1dc;border:1px solid #f1d29c}
.cr-decide .coc-grid input{margin-bottom:0}
.cr-decide .cr-note-wrap{grid-column:span 2}
.cr-rej{margin-top:16px;padding-top:12px;border-top:1px dashed #e3c48c;max-width:none}
.cr-kind{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
.cr-kind.cr-sc{background:#efe9ff;color:#4b2a9a}
.cr-kind.cr-coc{background:#e9f5ff;color:#0b3d6b}
/* HR: PDF sa kaliwa, desisyon sa kanan (hindi na kailangang mag-scroll pabalik-balik) */
.cr-review{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:18px;align-items:start}
.cr-review > .card{margin:0}
.cr-review .cr-decide{position:sticky;top:12px}
.cr-review .cr-decide .coc-grid{grid-template-columns:1fr}
.cr-review .cr-decide .cr-note-wrap{grid-column:auto}
.cr-review .cr-pdf{height:calc(100vh - 150px)}
@media (max-width:1000px){
  .cr-review{grid-template-columns:1fr}
  .cr-review .cr-decide{position:static}
  .cr-review .cr-pdf{height:70vh}
}
@media (max-width:700px){
  .cr-pdf,.cr-review .cr-pdf{height:60vh;min-height:320px}
  .cr-decide .cr-note-wrap{grid-column:auto}
  .cr-table,.cr-table tbody,.cr-table tr,.cr-table td{display:block;width:100%}
  .cr-table thead{display:none}
  .cr-table tr{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .cr-table td{border:0;padding:3px 0;text-align:left !important}
  .cr-table td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;color:var(--muted)}
  .cr-desc{max-width:none}
}

/* ---- Special Order (S.O.) ng naaprubahang Service Credit / COC ---- */
.so-card{border:1px solid #c6e4d0;border-left:4px solid var(--green)}
.so-btn{background:#2b579a}
.so-btn:hover{background:#1f437a}
.so-line{margin:6px 0 0;font-size:15px}
.so-edit{margin-top:12px;border-top:1px dashed var(--border);padding-top:10px}
.so-edit summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:14px}
.so-form{margin-top:10px}
.cr-so-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
.cr-so-fields input{margin-bottom:10px}
.cr-so-fields .cr-wide,.cr-so-fields .cr-so-unknown{grid-column:1 / -1}
.cr-so-unknown{margin:-4px 0 10px;padding:7px 10px;border-radius:8px;background:#f1f8e6;border:1px solid #cfe3ad;color:#24600a;font-size:12.5px}
.cr-decide .so-h{margin:16px 0 8px;font-size:15px}
.so-tag{display:block;font-size:11.5px;color:#2b579a;font-weight:600;margin-top:2px}
.so-mini{background:#2b579a}
.so-mini:hover{background:#1f437a}
.so-settings .so-status{margin:6px 0 12px;padding:8px 12px;border-radius:8px;background:#eaf7ee;border:1px solid #b9e2c4;font-size:13.5px}
.so-settings .so-status.so-unset{background:#fff8ec;border-color:#f1d29c;color:#7a4b00}
.so-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.so-grid .cr-wide{grid-column:auto}
.so-grid input{margin-bottom:12px}
@media (max-width:700px){
  .cr-so-fields,.so-grid{grid-template-columns:1fr}
}

/* ---- I-INSTALL ANG APP (Progressive Web App) ---- */
.pwa-install{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);text-align:center}
.pwa-install[hidden]{display:none}
.pwa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;border:2px solid var(--navy);
  border-radius:8px;background:#fff;color:var(--navy);font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit}
.pwa-btn:hover{background:#f1f8e6}
.pwa-btn:disabled{cursor:default;border-color:#1e7e34;color:#1e7e34;background:#eaf7ee}
.pwa-ready .pwa-btn{background:var(--navy);color:#fff}
.pwa-ready .pwa-btn:hover{background:var(--navy-dark)}
.pwa-sub{margin:7px 0 0;font-size:12px;color:var(--muted)}
.pwa-help{margin-top:10px;padding:10px 12px;border-radius:9px;background:#f1f8e6;border:1px solid #cfe3ad;color:#24600a;
  font-size:13px;line-height:1.5;text-align:left}
.pwa-help ol{margin:6px 0 4px;padding-left:20px}
.pwa-help li{margin:2px 0}
.pwa-inline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 0;padding-top:12px;text-align:left}
.pwa-inline .pwa-btn{width:auto;padding:8px 14px;font-size:13px}
.pwa-inline .pwa-sub{margin:0}
.pwa-inline .pwa-help{flex-basis:100%}
@media (display-mode: standalone){.pwa-install{display:none !important}}

/* ---- Tagline sa ibaba (nakapirmi kahit i-scroll) ---- */
@font-face{font-family:"Oswald LMS";src:url("fonts/oswald-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald LMS";src:url("fonts/oswald-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--footer-h:66px}
body{padding-bottom:calc(var(--footer-h) + env(safe-area-inset-bottom, 0px))}
.login-wrap{min-height:calc(100vh - var(--footer-h))}
.lms-footer{position:fixed;left:0;right:0;bottom:0;z-index:900;box-sizing:border-box;min-height:var(--footer-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 14px calc(6px + env(safe-area-inset-bottom, 0px));background:rgba(255,255,255,.97);
  border-top:1px solid var(--border);box-shadow:0 -4px 18px rgba(30,70,10,.08);text-align:center;line-height:1.2}
.lms-footer-brand{font-family:"Oswald LMS","Oswald","Arial Narrow",Arial,sans-serif;font-weight:400;font-size:20px;color:#111;letter-spacing:.2px}
.lms-footer-brand strong{font-weight:700}
.lms-footer-tag{display:inline-flex;align-items:stretch;gap:12px;max-width:100%;margin-top:3px}
.lms-footer-tag::before,.lms-footer-tag::after{content:"";flex:0 0 4px;border-radius:1px;
  background:linear-gradient(180deg,#eef4fb 0%,#9dbbe2 45%,#3a71b8 100%)}
.lms-footer-tag span{font-family:Cambria,Georgia,"Times New Roman",serif;font-style:italic;font-size:15.5px;color:#111;padding:1px 0;text-wrap:balance}
@media (max-width:700px){
  :root{--footer-h:62px}
  .lms-footer{padding:5px 8px calc(5px + env(safe-area-inset-bottom, 0px))}
  .lms-footer-brand{font-size:15px}
  .lms-footer-tag{gap:7px;margin-top:2px}
  .lms-footer-tag::before,.lms-footer-tag::after{flex-basis:3px}
  .lms-footer-tag span{font-size:11.5px;line-height:1.25}
}
@media print{
  .lms-footer{display:none !important}
  body{padding-bottom:0 !important}
}

/* ---- Developer credit sa login page ---- */
.login-page .login-wrap{flex-direction:column;gap:14px}
.login-credit{text-align:center;font-size:13px;color:var(--label);line-height:1.5}
.login-credit p{margin:0}
.login-credit strong{color:var(--dv-ink);letter-spacing:.02em}
.login-credit .login-rating{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:12.5px;color:var(--muted)}

/* ---- Rate this system (1–5 star) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rate-card{border-left:4px solid var(--dv-yellow)}
.rate-field{border:0;margin:12px 0 0;padding:0;min-width:0}
.star-input{display:inline-flex;flex-direction:row-reverse;gap:2px}
.star-input input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.star-input label{margin:0;padding:0 3px;font-size:38px;line-height:1;color:#d3dbc6;cursor:pointer;transition:color .12s,transform .12s}
.star-input label:hover,.star-input label:hover ~ label,.star-input input:checked ~ label{color:#f0b400}
.star-input label:hover{transform:scale(1.12)}
.star-input input:focus-visible + label{outline:3px solid rgba(46,125,14,.4);outline-offset:1px;border-radius:6px}
.star-meaning{margin:6px 0 0;font-size:13.5px;font-weight:600;color:var(--ink)}
.rate-more{margin-top:12px;max-width:640px}
.rate-more textarea{margin-bottom:2px}
.rate-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}
.rate-actions .back-link{margin:0}
.rate-note{font-size:12.5px;margin:12px 0 0}
.rate-line{margin:10px 0 0;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rate-current{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.stars-static{position:relative;display:inline-block;font-size:17px;line-height:1;letter-spacing:1px;white-space:nowrap;vertical-align:-2px}
.stars-static .stars-bg{color:#d3dbc6}
.stars-static .stars-fg{position:absolute;left:0;top:0;overflow:hidden;color:#f0b400;white-space:nowrap}
.stars-static.stars-lg{font-size:26px}

/* ---- Report ng mga rating (documentation) ---- */
.rr-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;align-items:center;margin:18px 0 6px;
  padding:18px 22px;border:1px solid var(--border);border-radius:10px;background:var(--tint)}
.rr-avg{text-align:center}
.rr-avg-num{font-size:46px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.rr-avg-num span{font-size:18px;color:var(--muted);font-weight:600;margin-left:4px}
.rr-avg .stars-static{margin-top:8px}
.rr-avg-sub{font-size:13px;color:var(--muted);margin-top:6px}
.rr-dist{display:flex;flex-direction:column;gap:7px;min-width:0}
.rr-bar-row{display:grid;grid-template-columns:130px minmax(0,1fr) 84px;gap:10px;align-items:center;font-size:13.5px}
.rr-bar-lbl small,.rr-bar-n small{color:var(--muted);font-weight:400}
.rr-bar{height:10px;background:#e3ecd4;border-radius:6px;overflow:hidden}
.rr-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--dv-yg),var(--dv-deep));border-radius:6px}
.rr-bar-n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.rr-sat{text-align:center;padding-left:24px;border-left:1px solid var(--border)}
.rr-sat-num{font-size:36px;font-weight:700;color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
.rr-sat-lbl{font-size:13px;font-weight:600;color:var(--label);margin-top:6px}
.rr-sat-lbl small{font-weight:400;color:var(--muted)}
.rr-roles{font-size:13.5px;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px}
.rr-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.rr-table td{vertical-align:top}
.rr-comment{min-width:220px;max-width:420px;white-space:normal;overflow-wrap:break-word}
.rr-empty{margin:16px 0 0}
.rr-print-head{font-family:Arial,Helvetica,sans-serif;color:#000;margin-bottom:10px}
.rr-print-meta{text-align:center;font-size:11px;margin:0 0 6px}
.rr-sign{margin-top:44px;width:280px;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#000}
.rr-sign-name{margin-top:34px;font-weight:700;border-bottom:1px solid #000;text-align:center}
.rr-sign-name + div{text-align:center}
@media (max-width:760px){
  .rr-summary{grid-template-columns:1fr;gap:16px;padding:16px}
  .rr-sat{border-left:0;padding:12px 0 0;border-top:1px solid var(--border)}
  .rr-bar-row{grid-template-columns:100px minmax(0,1fr) 66px}
  .star-input label{font-size:34px}
}
@media print{
  .rr-page{background:#fff}
  .rr-page .print-only{display:block}
  .rr-page .container{margin:0;max-width:none;padding:0}
  .rr-page .rr-card{border:0;box-shadow:none;padding:0}
  .rr-page .rr-summary{background:none;border:1px solid #000;break-inside:avoid;padding:10px 14px}
  .rr-page .rr-bar span,.rr-page .stars-fg,.rr-page .stars-bg{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rr-page .tbl-wrap{overflow:visible}
  .rr-page table.rr-table th,.rr-page table.rr-table td{border:1px solid #000;font-size:10.5px;padding:4px 6px;color:#000;background:#fff}
  .rr-page table.rr-table thead{display:table-header-group}
  .rr-page table.rr-table tr{break-inside:avoid}
}

/* ============================================================
   Madaling gamitin: malalaking button, progress steps, Help
   ============================================================ */
/* "What would you like to do?" */
.quick{margin-top:18px}
.quick-title{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--ink)}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.quick-tile{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:#fff;
  text-decoration:none;color:var(--text);box-shadow:0 1px 2px rgba(30,70,10,.05);transition:border-color .15s,box-shadow .15s,transform .15s}
.quick-tile:hover{border-color:var(--dv-green);box-shadow:0 6px 16px rgba(30,70,10,.12);transform:translateY(-1px)}
.quick-tile:focus-visible{outline:3px solid rgba(46,125,14,.45);outline-offset:2px}
.qt-icon{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--dv-yg),var(--dv-deep))}
.qt-text{display:flex;flex-direction:column;min-width:0}
.qt-text strong{font-size:16px;color:var(--ink);line-height:1.3}
.qt-text small{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.35}
.quick-tile.qt-main{background:#fcf8d4;border-color:#e3d55a}
.quick-tile.qt-main .qt-icon{background:var(--dv-yellow);color:var(--ink)}
.quick-tile.qt-urgent{background:#fff6e5;border-color:#efcf8f}
.quick-tile.qt-urgent .qt-icon{background:#c97a12}
@media (max-width:600px){
  .quick-grid{grid-template-columns:1fr;gap:8px}
  .quick-tile{padding:11px 13px;align-items:center}
  .qt-icon{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){.quick-tile{transition:none}.quick-tile:hover{transform:none}}

/* Progress steps ng application */
.steps{list-style:none;margin:16px 0 6px;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.step{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.step:not(:last-child)::after{content:"";position:absolute;top:15px;left:42px;right:-2px;height:3px;border-radius:2px;background:#dde5cf}
.step.is-done:not(:last-child)::after{background:var(--dv-green)}
.step-dot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;
  background:#fff;border:2px solid #cdd7bd;color:var(--muted)}
.step.is-done .step-dot{background:var(--green);border-color:var(--green);color:#fff}
.step.is-current .step-dot{background:var(--dv-yellow);border-color:#cdbd16;color:var(--ink);box-shadow:0 0 0 4px rgba(244,230,46,.35)}
.step.is-bad .step-dot{background:var(--danger);border-color:var(--danger);color:#fff}
.step-text strong{display:block;font-size:14.5px;color:var(--ink)}
.step.is-todo .step-text strong{color:var(--muted)}
.step.is-bad .step-text strong{color:var(--danger)}
.step-text small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:1px;overflow-wrap:break-word}
@media (max-width:600px){
  .steps{grid-auto-flow:row;grid-auto-columns:auto;gap:0}
  .step{flex-direction:row;gap:10px;padding-bottom:14px}
  .step:not(:last-child)::after{top:34px;bottom:0;left:15px;right:auto;width:3px;height:auto}
}
@media print{.steps{display:none !important}}

/* Help link sa header */
.topbar a.help-link::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;
  background:var(--dv-yellow);color:var(--ink);font-size:12px;font-weight:700;text-shadow:none;vertical-align:-1px}

/* Help page */
.help-page{max-width:820px}
.help-group{margin:26px 0 8px;font-size:16px;color:var(--ink);padding-bottom:6px;border-bottom:2px solid #e7efdb}
.help-item{border:1px solid var(--border);border-radius:10px;margin:8px 0;background:#fff}
.help-item > summary{list-style:none;cursor:pointer;padding:13px 48px 13px 16px;font-size:15.5px;font-weight:600;color:var(--ink);position:relative;border-radius:10px}
.help-item > summary::-webkit-details-marker{display:none}
.help-item > summary::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  background:#e7efdb;color:var(--green);display:grid;place-items:center;font-size:19px;font-weight:700;line-height:1}
.help-item[open] > summary::after{content:"\2212"}
.help-item > summary:hover{background:#f7faf1}
.help-item[open]{border-color:#c8dcae;box-shadow:0 2px 10px rgba(30,70,10,.06)}
.help-body{padding:0 16px 14px}
.help-steps{margin:0;padding:0;list-style:none;counter-reset:hs}
.help-steps li{counter-increment:hs;position:relative;padding:6px 0 6px 40px;font-size:15px;line-height:1.6}
.help-steps li::before{content:counter(hs);position:absolute;left:0;top:6px;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px}
.help-note{margin:6px 0 0;padding:9px 12px;border-radius:8px;background:#f7faf1;border:1px solid #dfe8c8;font-size:14px;line-height:1.55;color:var(--label)}
.ui-btn{display:inline-block;padding:0 8px;border-radius:6px;background:var(--green);color:#fff;font-weight:600;font-size:.92em;line-height:1.7;white-space:nowrap}
.help-contact{margin:22px 0 0;font-size:14px;color:var(--muted)}

/* Password: Show / Hide at babala sa Caps Lock */
.pw-wrap{position:relative;margin-bottom:16px}
.pw-wrap input{margin-bottom:0;padding-right:78px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:1px solid var(--border-strong);background:#f6f9ef;
  color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:4px 12px;border-radius:6px;cursor:pointer;width:auto}
.pw-toggle:hover{background:#e7efdb}
.caps-warn{margin:-10px 0 14px;padding:5px 10px;border-radius:6px;font-size:13px;font-weight:600;color:#8a4f00;background:#fff6e5;border:1px solid #f3d9a4}
.login-help{margin:10px 0 0;text-align:center;font-size:13px;color:var(--muted);line-height:1.5}
.login-help a{color:var(--dv-ink);font-weight:600}
/* Sa phone: mas maluwag ang laman (mas maliit na gilid) */
@media (max-width:600px){
  .container{padding:0 12px;margin:16px auto}
  .card{padding:16px}
}

/* ---- HR: Leave by Office / Department (graph) ---- */
.ob-card .ao-month input[type=month]{margin:0;width:auto;padding:7px 10px;font-size:14px}
.ob-stats{margin-top:14px}
.ob-stats .ob-today{background:#fcf8d4;border-color:#e3d55a}
.ob-chart{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ob-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) 128px;gap:12px;align-items:center;font-size:14px}
.ob-name{min-width:0;overflow-wrap:break-word;line-height:1.3}
.ob-name small{display:block;font-size:12px;color:var(--muted)}
.ob-bar{height:14px;background:#e3ecd4;border-radius:7px;overflow:hidden}
.ob-bar span{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--dv-yg),var(--dv-deep))}
.ob-num{font-variant-numeric:tabular-nums;line-height:1.25}
.ob-num strong{font-size:16px;color:var(--ink)}
.ob-num small{display:block;font-size:12px;color:var(--muted)}
.ob-more{margin-top:10px}
.ob-more > summary{font-weight:600}
@media (max-width:700px){
  .ob-row{grid-template-columns:minmax(0,1fr) 96px;gap:4px 10px}
  .ob-bar{grid-column:1 / -1;grid-row:2}
}

/* ---- SDS: School Heads on Leave ---- */
.hl-card{border-left:4px solid var(--dv-yellow)}
.hl-card .ao-month input[type=date]{margin:0;width:auto;padding:7px 10px;font-size:14px}
.hl-total{display:flex;align-items:center;gap:14px;margin:16px 0 4px;padding:14px 18px;border-radius:10px;background:var(--tint);border:1px solid var(--border)}
.hl-num{font-size:44px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.hl-lbl{font-size:16px;font-weight:600;color:var(--label);line-height:1.35}
.hl-lbl small{display:block;font-size:13px;font-weight:400;color:#8a4f00}
.hl-table td{vertical-align:top}
@media (max-width:600px){.hl-num{font-size:36px}}
@media print{.ob-bar span{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ---- Form 6: long leave (settings ng HR + paalala sa Apply) ---- */
.long-types{border:1px solid var(--border);border-radius:10px;padding:8px 14px 6px;margin:12px 0 16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 18px}
.long-types legend{font-weight:700;color:var(--ink);font-size:13.5px;padding:0 6px}
.long-types .lb-opt{margin:5px 0}
.long-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}
.long-note{margin:10px 0 0;padding:9px 12px;border-radius:8px;background:#fcf8d4;border:1px solid #e3d55a;font-size:13.5px;line-height:1.45;color:var(--ink)}
.long-sig-note{margin-top:10px}
.long-days{margin:12px 0 4px}
.long-days-row{display:flex;align-items:center;gap:10px}
.long-days-row input{width:110px;margin:0}
.long-days-row span{font-weight:600;color:var(--label)}
.long-days + .long-grid{margin-top:14px}

/* ---- Leave Benefits Guide ---- */
.lg-page{max-width:1000px}
.lg-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px;font-size:14px;font-weight:600;color:var(--label)}
.lg-earn{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.lg-box{border:1px solid var(--border);border-radius:10px;padding:14px 18px;background:var(--tint)}
.lg-box h4{margin:0 0 6px;font-size:15.5px;color:var(--ink)}
.lg-box ul{margin:0;padding-left:20px}
.lg-box li{margin:6px 0;font-size:14.5px;line-height:1.55}
.lg-table td{vertical-align:top}
.lg-table td:first-child a{font-weight:600;text-decoration:none}
.lg-table td:first-child a:hover{text-decoration:underline}
.lg-who{display:inline-block;margin:0 4px 4px 0;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.lg-who-t{background:#efe9ff;color:#4b2a9a}
.lg-who-n{background:#e7efdb;color:var(--ink)}
.lg-item > summary .lg-days{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.lg-what{margin:0 0 10px;font-size:15px;line-height:1.55}
.lg-dl{margin:0}
.lg-dl dt{font-size:13px;font-weight:700;color:var(--ink);margin-top:10px}
.lg-dl dd{margin:4px 0 0}
.lg-dl ul{margin:0;padding-left:20px}
.lg-dl li{margin:4px 0;font-size:14.5px;line-height:1.55}
.lg-src{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.lg-note{margin:22px 0 0;padding:12px 14px;border-radius:8px;background:#fcf8d4;border:1px solid #e3d55a;font-size:14px;line-height:1.55;color:var(--ink)}
.lg-sources{margin-top:12px;font-size:13.5px}
.lg-sources summary{font-weight:600}
.lg-sources li{margin:4px 0}
.lg-cta{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:14px 16px;border:1px solid #e3d55a;border-radius:12px;
  background:#fcf8d4;text-decoration:none;color:var(--text)}
.lg-cta:hover{border-color:var(--dv-green)}
.lg-cta .qt-icon{background:var(--dv-yellow);color:var(--ink)}
.lg-inline{margin-left:8px;font-size:12.5px;font-weight:600}

/* ---- Dashboard: listahan ng sariling application — nag-i-scroll sa loob (hindi na humahaba ang page) ---- */
.scroll-box.apps-scroll{max-height:min(58vh,372px)}
.scroll-box.apps-scroll:focus-visible{outline:3px solid var(--dv-yg);outline-offset:2px}
.scroll-hint{margin:6px 2px 0;font-size:12.5px;color:var(--muted)}
@media print{.scroll-box.apps-scroll{max-height:none;overflow:visible}.scroll-hint{display:none}}

/* ---- Requirements PDF: kusang binubura 2 linggo matapos ang desisyon ---- */
.purge-note{margin:0 0 10px;padding:9px 12px;border-radius:8px;background:#fff8e1;border:1px solid #f0d78a;color:#5c4400;
  font-size:13.5px;line-height:1.5}
.purge-keep{margin:-2px 0 8px}
.cr-pdf-gone{background:#fafcf6}

/* ---- SDS: sariling leave (kusang approved, blangkong signatory) ---- */
.head-box.head-auto{background:#eef7e3;border-color:#bcdb94}
.head-box.head-auto .head-name{color:var(--dv-ink)}
.head-box.head-auto p{margin:6px 0 0}
.sds-sig-note{margin:2px 0 10px;padding:8px 12px;border-radius:8px;background:#f4f9ec;border:1px solid #d3e6b4;color:#2c4a12}
.sig-blank{font-style:italic}
.sds-sig-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 0;padding:9px 12px;border-radius:8px;
  background:#f4f9ec;border:1px solid #d3e6b4;font-size:13.5px;color:#2c4a12}
.sds-sig-box p{margin:0}