/* ══════════════════════════════════════════════════════════════
   MILSYS  –  Military Personnel Management System
   Theme : Command-room dark  ×  tactical olive
   Fonts : Rajdhani (display)  +  IBM Plex Sans (body)
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --olive:        #4a5c2a;
  --olive-dark:   #2e3a18;
  --olive-light:  #6b7c3d;
  --khaki:        #c8b87a;
  --khaki-light:  #e2d4a0;
  --bg-base:      #0e1008;
  --bg-card:      #161a0d;
  --bg-card2:     #1d2311;
  --bg-sidebar:   #111408;
  --accent:       #8db53a;
  --accent-glow:  rgba(141,181,58,.18);
  --red:          #d9534f;
  --green:        #5cb85c;
  --yellow:       #f0ad4e;
  --text-primary: #dde6c8;
  --text-sec:     #8a9870;
  --text-muted:   #4e5a38;
  --border:       rgba(141,181,58,.15);
  --border-strong:rgba(141,181,58,.35);
  --shadow:       0 4px 24px rgba(0,0,0,.6);
  --radius:       6px;
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
  --sidebar-w:    260px;
  --transition:   .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--olive); border-radius:10px; }

/* ══════════════════════════════════════════════════════════
   AUTH PAGES
   ══════════════════════════════════════════════════════════ */
.auth-wrap {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-base);
  position:relative; overflow:hidden;
}
.auth-wrap::before {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,
      transparent,transparent 39px,
      rgba(141,181,58,.04) 39px, rgba(141,181,58,.04) 40px),
    repeating-linear-gradient(90deg,
      transparent,transparent 39px,
      rgba(141,181,58,.04) 39px, rgba(141,181,58,.04) 40px);
  pointer-events:none;
}
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 44px 40px;
  width: 100%; max-width: 420px;
  position:relative; z-index:1;
  box-shadow: var(--shadow), 0 0 60px rgba(141,181,58,.08);
}
.auth-emblem {
  text-align:center; margin-bottom:28px;
}
.auth-emblem .shield {
  width:60px; height:60px; margin:0 auto 12px;
  background: linear-gradient(135deg,var(--olive),var(--olive-dark));
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
}
.auth-emblem h1 {
  font-family: var(--font-display);
  font-size: 26px; font-weight:700;
  letter-spacing:.08em;
  color: var(--text-primary);
}
.auth-emblem p { font-size:12px; color:var(--text-sec); letter-spacing:.12em; text-transform:uppercase; }

/* ══════════════════════════════════════════════════════════
   FORM CONTROLS
   ══════════════════════════════════════════════════════════ */
.form-label {
  font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-sec); margin-bottom:5px;
}
.form-control, .form-select {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size:14px;
  padding: 10px 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  background: rgba(141,181,58,.05);
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline:none;
}
.form-control::placeholder { color:var(--text-muted); }
.form-select option { background:var(--bg-card2); color:var(--text-primary); }
textarea.form-control { resize:vertical; min-height:90px; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn { font-family:var(--font-body); font-weight:600; border-radius:var(--radius); transition:all var(--transition); cursor:pointer; }
.btn-mil {
  background: linear-gradient(135deg,var(--olive),var(--olive-dark));
  color: var(--khaki-light); border:1px solid var(--border-strong);
  letter-spacing:.05em;
}
.btn-mil:hover {
  background: linear-gradient(135deg,var(--olive-light),var(--olive));
  color: #fff; transform:translateY(-1px);
  box-shadow: 0 4px 16px rgba(141,181,58,.3);
}
.btn-success  { background: linear-gradient(135deg,#3a6e2a,#2a4e1c); color:#a8e6a0; border:1px solid rgba(92,184,92,.3); }
.btn-danger   { background: linear-gradient(135deg,#6e2a2a,#4e1c1c); color:#ffa0a0; border:1px solid rgba(217,83,79,.3); }
.btn-warning  { background: linear-gradient(135deg,#6e5a1a,#4e3e10); color:#ffe0a0; border:1px solid rgba(240,173,78,.3); }
.btn-outline-mil {
  background: transparent; border:1px solid var(--border-strong);
  color:var(--text-sec);
}
.btn-outline-mil:hover { background:rgba(141,181,58,.08); color:var(--accent); border-color:var(--accent); }
.btn-sm { font-size:12px; padding:5px 12px; }

/* ══════════════════════════════════════════════════════════
   LAYOUT – SIDEBAR + MAIN
   ══════════════════════════════════════════════════════════ */
.app-shell { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w);
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  position:fixed; top:0; left:0; height:100vh;
  display:flex; flex-direction:column;
  z-index:200; overflow-y:auto; overflow-x:hidden;
  transition:transform var(--transition);
}
.sidebar-brand {
  padding:20px 18px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.sidebar-brand .brand-icon {
  width:34px; height:34px; flex-shrink:0;
  background:linear-gradient(135deg,var(--olive),var(--olive-dark));
  border:1px solid var(--border-strong);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.sidebar-brand .brand-text {
  font-family:var(--font-display);
  font-size:20px; font-weight:700; letter-spacing:.1em;
  color:var(--text-primary);
}
.sidebar-brand .brand-sub { font-size:9px; color:var(--text-muted); letter-spacing:.14em; text-transform:uppercase; }

.sidebar-nav { flex:1; padding:12px 10px; list-style:none; }
.nav-section { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); padding:14px 10px 6px; }
.sidebar-nav .nav-item a {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--radius);
  color:var(--text-sec); text-decoration:none;
  font-size:13.5px; font-weight:500;
  transition:all var(--transition);
}
.sidebar-nav .nav-item a:hover { background:rgba(141,181,58,.07); color:var(--text-primary); }
.sidebar-nav .nav-item a.active {
  background:rgba(141,181,58,.12);
  color:var(--accent);
  border-left:2px solid var(--accent);
}
.sidebar-nav .nav-item a .ni { width:18px; text-align:center; flex-shrink:0; }

.sidebar-foot {
  padding:14px 12px;
  border-top:1px solid var(--border);
}
.admin-pill {
  display:flex; align-items:center; gap:10px; padding:10px;
  background:rgba(255,255,255,.03); border-radius:var(--radius);
}
.admin-pill .av {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--olive),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:14px; font-weight:700;
  color:var(--bg-base); flex-shrink:0;
}
.admin-pill .av-name { font-size:13px; font-weight:600; color:var(--text-primary); }
.admin-pill .av-role { font-size:11px; color:var(--text-muted); }

/* topbar */
.topbar {
  background:rgba(14,16,8,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  padding:12px 26px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
}
.topbar-title { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:.06em; color:var(--text-primary); }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.topbar-btn {
  width:36px; height:36px; border-radius:var(--radius);
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  color:var(--text-sec); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--transition); text-decoration:none;
}
.topbar-btn:hover { background:rgba(141,181,58,.1); border-color:var(--border-strong); color:var(--accent); }

.main-wrap { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.page-body { padding:26px; flex:1; }

/* toggle */
.sidebar-toggle { display:none !important; }
@media(max-width:991px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-wrap { margin-left:0; }
  .sidebar-toggle { display:flex !important; }
  .overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:199; }
  .overlay.show { display:block; }
}

/* ══════════════════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════════════════ */
.stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px;
  transition:all var(--transition); position:relative; overflow:hidden;
}
.stat-card::after {
  content:''; position:absolute; top:-20px; right:-20px;
  width:80px; height:80px;
  background:radial-gradient(circle,var(--accent-glow),transparent 70%);
  pointer-events:none;
}
.stat-card:hover { border-color:var(--border-strong); box-shadow:0 0 30px var(--accent-glow); transform:translateY(-2px); }
.stat-icon { width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; }
.stat-icon.olive  { background:rgba(74,92,42,.3); color:var(--accent); }
.stat-icon.yellow { background:rgba(240,173,78,.12); color:var(--yellow); }
.stat-icon.green  { background:rgba(92,184,92,.12);  color:var(--green); }
.stat-icon.red    { background:rgba(217,83,79,.12);   color:var(--red); }
.stat-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.stat-value { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--text-primary); }

/* ══════════════════════════════════════════════════════════
   SECTION CARD
   ══════════════════════════════════════════════════════════ */
.sec-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sec-head {
  padding:15px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.sec-title { font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--text-primary); }

/* ══════════════════════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════════════════════ */
.table { color:var(--text-primary); margin-bottom:0; font-size:13.5px; }
.table thead th {
  background:rgba(255,255,255,.03); border-color:var(--border);
  color:var(--text-muted); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:11px 14px; white-space:nowrap;
}
.table tbody td { border-color:var(--border); padding:12px 14px; vertical-align:middle; color:var(--text-sec); }
.table tbody tr:hover td { background:rgba(255,255,255,.02); color:var(--text-primary); }

/* ══════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════ */
.badge-status { padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.04em; }
.bs-active    { background:rgba(92,184,92,.12);  color:var(--green);  border:1px solid rgba(92,184,92,.3); }
.bs-deployed  { background:rgba(240,173,78,.12); color:var(--yellow); border:1px solid rgba(240,173,78,.3); }
.bs-leave     { background:rgba(141,181,58,.1);  color:var(--accent); border:1px solid rgba(141,181,58,.3); }
.bs-retired   { background:rgba(255,255,255,.05);color:var(--text-sec);border:1px solid var(--border); }
.bs-pending   { background:rgba(240,173,78,.12); color:var(--yellow); border:1px solid rgba(240,173,78,.3); }
.bs-approved  { background:rgba(92,184,92,.12);  color:var(--green);  border:1px solid rgba(92,184,92,.3); }
.bs-rejected  { background:rgba(217,83,79,.12);  color:var(--red);    border:1px solid rgba(217,83,79,.3); }

/* ══════════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════════ */
.page-hdr { margin-bottom:24px; }
.page-hdr h1 { font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:.06em; color:var(--text-primary); }
.page-hdr p  { color:var(--text-sec); font-size:13.5px; }

/* ══════════════════════════════════════════════════════════
   PERSONNEL PHOTO
   ══════════════════════════════════════════════════════════ */
.personnel-photo {
  width:90px; height:90px; border-radius:4px;
  object-fit:cover; border:2px solid var(--border-strong);
}
.personnel-photo-lg {
  width:160px; height:180px; border-radius:6px;
  object-fit:cover; border:3px solid var(--border-strong);
}
.photo-placeholder {
  background:var(--bg-card2); display:flex; align-items:center; justify-content:center;
  font-size:36px; color:var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   UPLOAD ZONE
   ══════════════════════════════════════════════════════════ */
.upload-zone {
  border:2px dashed var(--border-strong); border-radius:var(--radius);
  padding:30px 20px; text-align:center; cursor:pointer;
  transition:all var(--transition); background:rgba(141,181,58,.03);
}
.upload-zone:hover,.upload-zone.dragover { border-color:var(--accent); background:var(--accent-glow); }
.upload-zone .uicon { font-size:32px; margin-bottom:10px; }
.upload-zone p { color:var(--text-sec); font-size:13px; }
.upload-zone span { color:var(--accent); font-weight:600; }

/* ══════════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════════ */
.alert-success { background:rgba(92,184,92,.1); border:1px solid rgba(92,184,92,.25); color:#a0e6a0; border-radius:var(--radius); }
.alert-danger  { background:rgba(217,83,79,.1); border:1px solid rgba(217,83,79,.25); color:#ffa0a0; border-radius:var(--radius); }
.alert-warning { background:rgba(240,173,78,.1);border:1px solid rgba(240,173,78,.25);color:#ffe0a0; border-radius:var(--radius); }
.alert-info    { background:rgba(141,181,58,.08);border:1px solid rgba(141,181,58,.2); color:var(--accent); border-radius:var(--radius); }
.btn-close     { filter:invert(1) brightness(.7); }

/* ══════════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════════ */
.modal-content { background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--text-primary); }
.modal-header  { border-bottom:1px solid var(--border); padding:16px 20px; }
.modal-title   { font-family:var(--font-display); font-weight:700; letter-spacing:.06em; }
.modal-footer  { border-top:1px solid var(--border); }

/* ══════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════ */
.pagination .page-link { background:var(--bg-card); border-color:var(--border); color:var(--text-sec); font-size:13px; }
.pagination .page-item.active .page-link { background:var(--olive); border-color:var(--olive); color:var(--khaki-light); font-weight:700; }
.pagination .page-link:hover { background:rgba(141,181,58,.1); color:var(--accent); border-color:var(--border-strong); }

/* ══════════════════════════════════════════════════════════
   DROPDOWN
   ══════════════════════════════════════════════════════════ */
.dropdown-menu { background:var(--bg-card2); border:1px solid var(--border); border-radius:var(--radius); padding:6px; box-shadow:var(--shadow); }
.dropdown-item { color:var(--text-sec); font-size:13px; border-radius:4px; padding:7px 12px; transition:all var(--transition); }
.dropdown-item:hover { background:rgba(141,181,58,.08); color:var(--accent); }
.dropdown-divider { border-color:var(--border); }

/* ══════════════════════════════════════════════════════════
   PUBLIC FRONTEND
   ══════════════════════════════════════════════════════════ */
.pub-hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--bg-base);
  position:relative; overflow:hidden;
}
.pub-hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 49px,rgba(141,181,58,.03) 49px,rgba(141,181,58,.03) 50px),
    repeating-linear-gradient(90deg,transparent,transparent 49px,rgba(141,181,58,.03) 49px,rgba(141,181,58,.03) 50px);
  pointer-events:none;
}
.pub-hero::after {
  content:'';
  position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:700px; height:700px;
  background:radial-gradient(circle,rgba(141,181,58,.08),transparent 60%);
  pointer-events:none;
}
.verify-card {
  background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:var(--radius); padding:44px 40px;
  width:100%; max-width:520px; position:relative; z-index:1;
  box-shadow:var(--shadow), 0 0 60px rgba(141,181,58,.07);
}
.pub-logo { text-align:center; margin-bottom:32px; }
.pub-logo .shield-big {
  width:70px; height:70px; margin:0 auto 14px;
  background:linear-gradient(135deg,var(--olive-dark),var(--olive));
  border:2px solid var(--accent); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; font-size:32px;
}
.pub-logo h1 { font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:.1em; }
.pub-logo p  { font-size:12px; color:var(--text-sec); letter-spacing:.12em; text-transform:uppercase; }

/* profile result */
.profile-result { display:none; }
.profile-card {
  background:var(--bg-card2); border:1px solid var(--border-strong);
  border-radius:var(--radius); padding:24px; margin-top:28px;
}
.profile-card .pc-header { display:flex; gap:20px; margin-bottom:20px; }
.profile-card .pc-photo { width:110px; height:120px; border-radius:var(--radius); object-fit:cover; border:2px solid var(--border-strong); flex-shrink:0; }
.profile-card .pc-photo-ph { background:var(--bg-base); display:flex; align-items:center; justify-content:center; font-size:40px; color:var(--text-muted); }
.profile-card .svc-num { font-family:var(--font-mono); font-size:13px; background:rgba(141,181,58,.1); color:var(--accent); padding:3px 10px; border-radius:4px; display:inline-block; margin-bottom:8px; }
.profile-card h2 { font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:.06em; margin-bottom:4px; }
.profile-card .rank-line { font-size:14px; color:var(--text-sec); }

.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.detail-item .di-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:3px; }
.detail-item .di-val   { font-size:13.5px; color:var(--text-primary); font-weight:500; }

/* leave form */
.leave-form-wrap { display:none; margin-top:24px; }
.leave-form-wrap .lf-title { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:.06em; margin-bottom:20px; color:var(--accent); }

/* ══════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.anim { animation:fadeUp .4s ease-out both; }
.d1{animation-delay:.05s} .d2{animation-delay:.1s} .d3{animation-delay:.15s} .d4{animation-delay:.2s}

/* misc */
.text-accent { color:var(--accent) !important; }
.text-khaki  { color:var(--khaki) !important; }
.font-mono   { font-family:var(--font-mono) !important; }
.border-mil  { border-color:var(--border) !important; }
hr.mil { border:none; border-top:1px solid var(--border); margin:20px 0; }