/* ==========================================================================
   DTI Quirino — Shared Design System
   Palette: Deep DTI navy + a warm signal orange (from the DTI wordmark family)
   ========================================================================== */

:root{
  --navy-950:#0b1b33;
  --navy-900:#0f244a;
  --navy-800:#15305f;
  --navy-700:#1c3d76;
  --navy-600:#27509a;
  --blue-500:#3568c4;
  --blue-100:#e8effb;
  --orange-600:#c9611c;
  --orange-500:#e07b2e;
  --orange-100:#fdf0e3;
  --green-600:#1f8a4c;
  --green-100:#e6f6ec;
  --red-600:#c62b2b;
  --red-100:#fbe9e9;
  --amber-600:#b8790f;
  --amber-100:#fdf2df;

  --ink-900:#171d2b;
  --ink-700:#3c4457;
  --ink-500:#6b7385;
  --ink-300:#a6adba;
  --ink-100:#e4e7ed;
  --paper:#f5f6f9;
  --card:#ffffff;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --shadow-sm:0 1px 2px rgba(15,36,74,.06), 0 1px 1px rgba(15,36,74,.04);
  --shadow-md:0 8px 24px rgba(15,36,74,.10);
  --shadow-lg:0 16px 40px rgba(15,36,74,.16);

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --sidebar-w:264px;
  --sidebar-w-collapsed:76px;
  --topbar-h:64px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.5;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;color:var(--navy-950);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
ul{margin:0;padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--orange-500);outline-offset:2px;}

.brand-lockup{display:flex;align-items:center;gap:10px;}
.brand-logos{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:0;background:none;border:none;box-shadow:none;}
.brand-logo-item{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(180deg,#fff 0%, #f7f9fc 100%);box-shadow:0 0 0 2px rgba(255,255,255,.2),0 6px 16px rgba(11,27,51,.18);}
.brand-logo-item.lgu{width:38px;height:38px;padding:4px;box-shadow:0 0 0 2px rgba(11,27,51,.08),0 4px 12px rgba(11,27,51,.14);}
.brand-logo-item.dti{width:42px;height:42px;padding:3px;}
.brand-logo{width:100%;height:100%;object-fit:contain;display:block;}

.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 22;
  font-size:20px;
  line-height:1;
  user-select:none;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  padding:9px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s ease;white-space:nowrap;
}
.btn .material-symbols-outlined{font-size:18px;}
.btn-primary{background:var(--navy-800);color:#fff;}
.btn-primary:hover{background:var(--navy-900);}
.btn-accent{background:var(--orange-600);color:#fff;}
.btn-accent:hover{background:#a94f14;}
.btn-ghost{background:transparent;color:var(--navy-800);border-color:var(--ink-100);}
.btn-ghost:hover{background:var(--blue-100);}
.btn-danger{background:transparent;color:var(--red-600);border-color:var(--red-100);}
.btn-danger:hover{background:var(--red-100);}
.btn-sm{padding:6px 11px;font-size:12.5px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-icon{padding:8px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--ink-100);color:var(--ink-700);cursor:pointer;}

/* ---------- Badges / status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-active{background:var(--green-100);color:var(--green-600);}
.pill-pending{background:var(--amber-100);color:var(--amber-600);}
.pill-expired{background:var(--red-100);color:var(--red-600);}
.pill-draft{background:var(--ink-100);color:var(--ink-500);}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--ink-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}

/* ---------- Form elements ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-700);margin-bottom:6px;}
.req::after{content:' *';color:var(--orange-600);}
input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--ink-100);border-radius:var(--radius-sm);
  font-family:inherit;font-size:13.5px;color:var(--ink-900);background:#fff;transition:.15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--navy-600);outline:none;box-shadow:0 0 0 3px var(--blue-100);}
input.err,select.err,textarea.err{border-color:var(--red-600);}
.field-err{color:var(--red-600);font-size:11.5px;margin-top:4px;display:none;}
.field-err.show{display:block;}
.hint{color:var(--ink-500);font-size:11.5px;margin-top:4px;}
textarea{resize:vertical;min-height:70px;}
fieldset{border:none;margin:0;padding:0;}

.checkline{display:flex;align-items:center;gap:8px;padding:9px 0;}
.checkline input{width:16px;height:16px;accent-color:var(--navy-800);}
.checkline label{margin:0;font-weight:500;color:var(--ink-900);}

/* scrollbar */
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:99px;}
::-webkit-scrollbar-track{background:transparent;}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}