/* ==========================================================================
   APACS Portal – Global Base Styles
   Scope: shared tokens, layout, typography, header/footer, grids, buttons,
          tabs, tables, helpers. Keep fast + lightweight.
   ========================================================================== */

/* Root tokens */
:root{
  --bg: #ffffff;
  --fg: #111111;
  --muted: #6b7280;
  --line: #e7ecf5;

  --brand: #1b6bda;
  --brand-600: #155bb3;
  --accent: #184e98;

  --tile-bg: #fff;
  --tile-border: #e7ecf5;
  --tile-shadow: 0 1px 2px rgba(0,0,0,.04);

  --pill-ok: #0a7a2a;
  --pill-warn: #9a6700;
  --pill-info: #184e98;

  --radius: 12px;
  --radius-sm: 8px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 16px;
  --space-5: 20px;
}

/* Document */
html, body { height:100%; background:var(--bg); color:var(--fg); }
body { margin:0; font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; display:flex; flex-direction:column; }
main { flex:1 0 auto; }

/* Links */
a { color: var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Wrappers & tiles */
.wrap { max-width: 1080px; margin: 0 auto; padding: var(--space-4); }
.tile { background: var(--tile-bg); border:1px solid var(--tile-border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--tile-shadow); }
.tile--hover:hover { box-shadow: 0 6px 20px rgba(24,78,152,.08); transform: translateY(-1px); transition: box-shadow .15s ease, transform .05s ease; }

/* Headings */
h1,h2,h3,h4 { margin: 0 0 var(--space-3) 0; line-height:1.2; }
h1 { font-size:28px; }
h2 { font-size:22px; }
h3 { font-size:18px; }
h4 { font-size:16px; }

/* Header */
header { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #eee; }
.header-inner { display:flex; align-items:center; gap: var(--space-3); padding: 12px var(--space-4); }
.header-logo { display:flex; align-items:center; gap:10px; }
.header-logo img { height:42px; width:auto; display:block; }
.header-title { font-weight:600; color:#111; font-size:18px; margin:0; }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.header-actions .btn-link { padding:6px 8px; border-radius:var(--radius-sm); }

/* Footer */
.footer-bar { background:#fff; border-top:1px solid #eee; padding:12px var(--space-4); display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; text-align:center; }
.footer-left,.footer-right { display:flex; align-items:center; gap:8px; }

/* Layout helpers */
.auth { background:#fff; }
.center { text-align:center; }
.grow { flex:1 1 auto; }
.m0 { margin:0; }
.mt0 { margin-top:0; }
.mt8 { margin-top:8px; } .mt12{margin-top:12px;} .mt20{margin-top:20px;}
.ml8 { margin-left:8px; }
.mx8 { margin-left:8px; margin-right:8px; }
.t-right { text-align:right; }

/* Grid */
.grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.grid3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.grid-tiles { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }

/* Forms */
.input,
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"],
select, textarea {
  background:#f7f7f9;
  border:1px solid #ddd;
  border-radius: var(--radius-sm);
  padding:10px;
  color:#111;
  width:100%;
  box-sizing:border-box;
}
.input.light { background:#f7f7f9; }
textarea { resize: vertical; }
label { display:block; }

.frow { display:grid; grid-template-columns: 220px 1fr; align-items:center; gap:10px; margin-bottom:10px; }
.flabel { color:#111; font-weight:600; }
.fctrl { display:flex; flex-direction:column; gap:6px; }
.fhelp { color: var(--muted); font-size:12px; }

.form-spacious { margin-top: 14px; }
.note { background:#f5f9ff; border:1px solid #cddfff; color:#184e98; border-radius: var(--radius-sm); padding:10px 12px; margin: 10px 0; }

/* Buttons */
.btn { background: var(--brand); color:#fff; border:0; padding:10px 14px; border-radius: var(--radius-sm); cursor:pointer; }
.btn:hover { opacity:.98; box-shadow:0 6px 18px rgba(27,107,218,.18); transform: translateY(-1px); transition: transform .05s ease, box-shadow .15s ease; }
.btn:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; transform:none; }
.btn.btn-secondary { background:#6b7280; }
.btn.btn-primary { background: var(--brand-600); }
.btn-link { background:transparent; border:0; color:var(--brand); cursor:pointer; }

/* Tabs */
.tabs { display:flex; gap:6px; flex-wrap:wrap; }
.tabs-scroll { overflow:auto hidden; padding-bottom:4px; }
.tab { padding:8px 12px; border:1px solid #d6e4ff; border-radius:8px; background:#f5f9ff; color:#184e98; cursor:pointer; }
.tab.active { background:#e6f0ff; border-color:#8db3ff; box-shadow:0 1px 2px rgba(24,78,152,.15); }

/* Wizard actions */
.wizard-actions { display:flex; align-items:center; gap:8px; margin-top:14px; }

/* Pills / tags */
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 8px; font-size:12px; border:1px solid #e5e7eb; background:#fff; }
.pill-ok   { color: var(--pill-ok); border-color: #b7e3c4; background:#f3fff6; }
.pill-warn { color: var(--pill-warn); border-color: #f1d28a; background:#fff9e8; }
.pill-info { color: var(--pill-info); border-color: #cddfff; background:#f5f9ff; }
.pill-muted{ color:#6b7280; border-color:#e5e7eb; background:#fafafa; }

.profile-status { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }

/* Alerts */
.alert { border-radius: var(--radius-sm); padding:10px 12px; }
.alert-info { background:#f5f9ff; border:1px solid #cddfff; color:#184e98; }
.alert-error{ background:#fff2f2; border:1px solid #f7cccc; color:#b00020; }

/* Toolbar / panels */
.toolbar { display:flex; align-items:center; gap:8px; padding:10px 0; }
.panel { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--tile-shadow); margin: 10px 0; }

/* Tables */
.table-wrap { overflow:auto; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { border:1px solid #eee; padding:8px; text-align:left; background:#fff; }
.table th.th-sort { cursor:pointer; user-select:none; }
.table tr:hover td { background:#f6f9ff; }

/* Drawer (admin approvals) */
.drawer { position:fixed; top:0; right:-480px; width:1000px; max-width:100%; height:100%; background:#fff; border-left:1px solid #e7ecf5; box-shadow:-6px 0 20px rgba(0,0,0,.05); transition:right .25s ease; display:flex; flex-direction:column; z-index:20; }
.drawer.open { right:0; }
.drawer-head { display:flex; align-items:center; gap:8px; padding:12px var(--space-4); border-bottom:1px solid #eee; }
.drawer-body { padding: var(--space-4); overflow:auto; }
.kv { display:grid; grid-template-columns: 180px 1fr; gap:10px; padding:6px 0; border-bottom:1px dashed #eee; }
.kv:last-child { border-bottom:0; }

/* Spinners */
.spinner { width:24px; height:24px; border:3px solid #e5e7eb; border-top-color: var(--brand); border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Auth tiles (login/register/forgot) – base spacing */
.auth .tile { padding: 20px; }

/* Hero (index) */
.hero { position:relative; width:100%; height:70vh; overflow:hidden; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); z-index:1; }
.hero-overlay { position:relative; z-index:2; height:100%; padding:24px; color:#fff; display:flex; flex-direction:column; gap:12px; }
.hero-overlay--center { align-items:center; justify-content:center; text-align:center; }
.hero-title { font-size: clamp(28px, 4vw, 44px); margin:0; font-weight:800; }
.hero-sub { margin:0 0 6px 0; font-size: clamp(14px, 2vw, 18px); opacity:.95; }
.hero-actions { display:flex; gap:10px; justify-content:center; }

/* Chips (column toggles) */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; border:1px solid #e5e7eb; border-radius:999px; padding:4px 8px; }
.chip.on { background:#eef5ff; border-color:#cddfff; color:#184e98; }

/* Pager */
.pager { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:8px; }

/* Responsive */
@media (max-width: 980px){
  .grid-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .frow { grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .wrap { padding: 12px; }
  .hero { height: 60vh; }
  .grid { grid-template-columns: 1fr; }
  .grid-tiles { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: 1fr; }
  .header-actions { width:100%; justify-content:flex-start; }
}