/* =====================================================================
   NIS EPMS Passport Document Archive
   Visual language aligned with the NIS Innovation Challenge web app:
   deep-green gradient header + gold underline, Georgia serif headings,
   Segoe UI for UI chrome, soft cards, green-tinted section headers.
   ===================================================================== */
:root{
  --green:#00764a; --green-dark:#005a38; --green-light:#e6f4ee;
  --gold:#c9a227; --ink:#1b2a24; --muted:#5f7268; --line:#d7e2dc;
  --bg:#f4f7f5; --card:#ffffff; --red:#b3372f; --amber:#a86d00; --ok:#1d7a46;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',Arial,Helvetica,sans-serif;
  --shadow:0 1px 3px rgba(27,42,36,.06),0 8px 24px rgba(27,42,36,.05);
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--serif);background:var(--bg);color:var(--ink);line-height:1.55}
.sans{font-family:var(--sans)}
a{color:var(--green-dark);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- App layout: left vertical sidebar + content ---- */
.layout{display:flex;align-items:stretch;min-height:100vh}
.sidebar{width:242px;flex:0 0 242px;background:linear-gradient(160deg,var(--green-dark),var(--green));
  border-right:4px solid var(--gold);display:flex;flex-direction:column;padding:18px 0;
  position:sticky;top:0;height:100vh}
.sidebar .brand{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;color:#fff;
  padding:2px 12px 16px;border-bottom:1px solid rgba(255,255,255,.15)}
.sidebar .brand:hover{text-decoration:none}
.brand-logo{width:100%;max-width:200px;height:auto;background:#fff;border-radius:8px;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.brand-text{font-family:var(--sans);font-weight:700;font-size:12.5px;line-height:1.3;letter-spacing:.4px;
  text-transform:uppercase;color:#fff}
.sidenav{display:flex;flex-direction:column;gap:3px;padding:14px 12px;flex:1 1 auto;min-height:0;overflow-y:auto;font-family:var(--sans);font-size:14px}
.sidenav a{color:rgba(255,255,255,.9);font-weight:600;padding:10px 14px;border-radius:8px;text-decoration:none}
.sidenav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.sidenav a.active{background:#fff;color:var(--green-dark)}
.side-user{flex:0 0 auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.14);font-family:var(--sans)}
.side-user .who{display:block;color:#eaf3ee;font-size:12.5px;line-height:1.35;margin-bottom:10px}
.side-user .who em{font-style:normal;color:#fff;font-weight:700}
.side-user .logout{display:inline-block;color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.55);padding:7px 16px;border-radius:8px;font-size:13px;
  font-weight:700;text-decoration:none}
.side-user .logout:hover{background:var(--red);border-color:var(--red);color:#fff}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
/* gold accent line (top of content, and above footer / auth pages) */
.tricolour{height:3px;background:var(--gold)}

/* ---- Content container ---- */
.container{max-width:1120px;margin:26px auto;padding:0 24px;width:100%;flex:1}

@media(max-width:820px){
  .layout{flex-direction:column;min-height:0}
  .sidebar{width:auto;flex:none;height:auto;position:static;border-right:0;border-bottom:4px solid var(--gold);padding:12px 0}
  .sidebar .brand{border-bottom:0;padding-bottom:10px}
  .sidenav{flex-direction:row;flex-wrap:wrap;flex:none;gap:6px}
  .side-user{border-top:0;display:flex;align-items:center;gap:12px;padding:6px 16px 10px}
  .side-user .who{margin:0}
}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px;margin-bottom:22px}
.card h2{margin:0;font-family:var(--serif);color:var(--green-dark);font-size:20px;
  border-bottom:2px solid var(--green-light);padding-bottom:12px;margin-bottom:16px}
.card .sub{color:var(--muted);margin:-6px 0 16px;font-family:var(--sans);font-size:14px}
h1{font-family:var(--serif);color:var(--green-dark);font-size:27px;margin:0 0 18px;letter-spacing:.3px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---- Forms ---- */
label{display:block;font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink);margin-bottom:5px}
.req:after{content:" *";color:var(--red)}
input[type=text],input[type=password],input[type=date],input[type=email],
input[type=tel],input[type=search],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;
  font-size:15px;background:#fcfdfc;color:var(--ink);font-family:var(--serif);transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,118,74,.12)}
textarea{min-height:90px;resize:vertical;line-height:1.6}
.field{margin-bottom:14px}
.hint{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:4px}
input[type=file]{width:100%;font-family:var(--sans);font-size:13px;padding:7px 0;background:none}

/* ---- Buttons ---- */
.btn{
  display:inline-block;border:0;border-radius:8px;padding:12px 24px;font-family:var(--sans);
  font-size:14.5px;font-weight:700;letter-spacing:.3px;cursor:pointer;background:var(--green);color:#fff;
  box-shadow:0 3px 10px rgba(0,118,74,.25);transition:all .15s;
}
.btn:hover{background:var(--green-dark);text-decoration:none;transform:translateY(-1px)}
.btn:disabled{background:#9ab5a8;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:#fff;color:var(--green-dark);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--green-light);border-color:var(--green);transform:none}
.btn-danger{background:var(--red);box-shadow:0 3px 10px rgba(179,55,47,.25)}
.btn-danger:hover{background:#8f2a24}
.btn-sm{padding:8px 14px;font-size:13px;box-shadow:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;align-items:center}

/* ---- Alerts ---- */
.alert{padding:13px 16px;border-radius:0 8px 8px 0;margin-bottom:16px;font-size:14.5px;font-family:var(--sans);border-left:4px solid}
.alert-success{background:var(--green-light);border-color:var(--green);color:var(--green-dark)}
.alert-error{background:#fdf0ef;border-color:var(--red);color:var(--red)}
.alert-info{background:#fbf7ea;border-color:var(--gold);color:#7a5e12}

/* ---- Tables ---- */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--sans);background:var(--green-light);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--green-dark)}
tr:hover td{background:#fafcfb}

/* ---- Badges / stats ---- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-family:var(--sans);font-size:12px;font-weight:700}
.badge-official{background:var(--green-light);color:var(--green-dark)}
.badge-diplomatic{background:#f7e4d6;color:#8f4a12}
.stat-row{display:flex;gap:16px;flex-wrap:wrap}
.stat{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.stat .n{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--green-dark);line-height:1}
.stat .l{font-family:var(--sans);color:var(--muted);font-size:13px;margin-top:6px}

/* ---- Section number badge (IC style) ---- */
.sec-num{font-family:var(--sans);background:var(--green);color:#fff;font-size:13px;font-weight:700;
  min-width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}

/* ---- Auth pages (login / 2FA / install) ---- */
.auth-wrap{max-width:460px;margin:5vh auto;padding:0 16px}
.auth-hero{background:linear-gradient(135deg,var(--green-dark),var(--green));border-bottom:4px solid var(--gold);
  color:#fff;text-align:center;padding:30px 22px 26px;border-radius:12px 12px 0 0}
.auth-hero .plaque{display:inline-block;margin:0 auto 14px;background:#fff;border-radius:10px;padding:8px 12px;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.auth-hero .plaque img{display:block;max-width:230px;width:100%}
.auth-hero .kicker{font-family:var(--sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:.9}
.auth-hero h1{font-family:var(--serif);color:#fff;font-size:23px;margin:6px 0 4px}
.auth-hero .tag{font-style:italic;opacity:.92;font-size:14px}
.auth-hero .edition{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.5);padding:5px 16px;border-radius:20px}
.auth-card{background:var(--card);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;
  padding:26px 26px 28px;box-shadow:var(--shadow)}
.auth-card h2{font-family:var(--serif);color:var(--green-dark);font-size:19px;margin:0 0 4px}
.auth-foot{text-align:center;color:var(--muted);font-family:var(--sans);font-size:12px;margin-top:16px}
/* legacy login classes kept working */
.login-wrap{max-width:460px;margin:5vh auto;padding:0 16px}
.login-logo{display:block;margin:0 auto 18px;max-width:230px;background:#fff;border-radius:8px}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--line);margin-top:10px}
.footer p{text-align:center;font-family:var(--sans);font-size:12px;color:var(--muted);padding:22px 16px;margin:0}

/* ---- Doc list ---- */
.doc-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--green-light)}
.doc-item:last-child{border-bottom:0}
.doc-meta{color:var(--muted);font-family:var(--sans);font-size:12px}
.pill-required{color:var(--red);font-family:var(--sans);font-size:11px;font-weight:700}
.pill-optional{color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:700}
.phase2{border-left:4px solid var(--gold);background:#fbf7ea;padding:14px 16px;border-radius:0 8px 8px 0}
.phase2 h3{margin:0 0 6px;font-family:var(--serif);color:var(--green-dark);font-size:16px}

/* ---- Password strength meter ---- */
.pw-meter{margin:8px 0 2px}
.pw-meter-track{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.pw-meter-fill{height:100%;width:0;border-radius:999px;transition:width .18s ease,background .18s ease}
.pw-meter-fill.pw-0{background:#c2ccc7}
.pw-meter-fill.pw-1{background:var(--red)}
.pw-meter-fill.pw-2{background:var(--amber)}
.pw-meter-fill.pw-3{background:#6fae52}
.pw-meter-fill.pw-4{background:var(--green)}
.pw-meter-row{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-family:var(--sans);font-size:12px}
.pw-meter-label{font-weight:700}
.pw-meter-label.pw-1{color:var(--red)}.pw-meter-label.pw-2{color:var(--amber)}
.pw-meter-label.pw-3{color:#4e7d2b}.pw-meter-label.pw-4{color:var(--green-dark)}
.pw-meter-req{color:var(--muted)}

/* =====================================================================
   GLOSSY ENHANCEMENT LAYER (site-wide)
   Adds soft gradients, glass sheens and layered shadows on top of the
   existing design system. Purely cosmetic — colours & contrast preserved.
   ===================================================================== */

/* Subtle page sheen */
body{
  background:
    radial-gradient(1200px 520px at 75% -12%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#f7faf8 0%, var(--bg) 60%) fixed;
}

/* ---- Cards: glossy panel with top highlight ---- */
.card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%, #f6faf8 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 1px 3px rgba(27,42,36,.07),
    0 14px 32px rgba(27,42,36,.07);
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);pointer-events:none;
}

/* ---- Sidebar: deep-green glass with a diagonal sheen ---- */
.sidebar{
  background:linear-gradient(160deg,#006345 0%, #00824f 55%, #00764a 100%);
  box-shadow:2px 0 14px rgba(0,40,26,.16);position:sticky;
}
.sidebar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 44%);
}
.sidebar .brand, .sidenav, .side-user{position:relative;z-index:1}
.brand-logo{box-shadow:0 3px 10px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.9) inset}
.sidenav a{transition:background .16s ease,box-shadow .16s ease,color .16s ease}
.sidenav a:hover{background:rgba(255,255,255,.16);box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.sidenav a.active{
  background:linear-gradient(180deg,#ffffff 0%, #ecf5f0 100%);
  box-shadow:0 2px 7px rgba(0,30,20,.22),0 1px 0 rgba(255,255,255,.9) inset;
}
.side-user .logout{transition:all .16s ease;box-shadow:0 1px 0 rgba(255,255,255,.14) inset}

/* ---- Buttons: glossy gradient + inner highlight + shine on hover ---- */
.btn{
  background:linear-gradient(180deg,#0a8a5a 0%, #006a42 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 4px 12px rgba(0,118,74,.30);
  position:relative;overflow:hidden;
}
.btn::after{
  content:"";position:absolute;left:0;right:0;top:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));
  pointer-events:none;
}
.btn:hover{background:linear-gradient(180deg,#0b9863 0%, #00754a 100%);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 -1px 0 rgba(0,0,0,.14) inset,0 7px 18px rgba(0,118,74,.34)}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,118,74,.30) inset}
.btn:disabled{background:linear-gradient(180deg,#a9c2b6,#9ab5a8);box-shadow:none}
.btn:disabled::after{display:none}
.btn-ghost{background:linear-gradient(180deg,#ffffff,#eef4f1);box-shadow:0 1px 2px rgba(27,42,36,.06),0 1px 0 rgba(255,255,255,.9) inset}
.btn-ghost::after{display:none}
.btn-ghost:hover{background:linear-gradient(180deg,#f2f9f5,#e4efe9)}
.btn-danger{background:linear-gradient(180deg,#c8463d,#9c2a24)}
.btn-danger:hover{background:linear-gradient(180deg,#d4514a,#8f2a24)}

/* ---- Stat & chart tiles ---- */
.stat{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%, #f4f9f6 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 24px rgba(27,42,36,.08);
}
.stat::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}

/* ---- Inputs: gentle inner gloss ---- */
input[type=text],input[type=password],input[type=date],input[type=email],
input[type=tel],input[type=search],select,textarea{
  background:linear-gradient(180deg,#ffffff 0%, #f7faf9 100%);
  box-shadow:0 1px 2px rgba(27,42,36,.05) inset;
}
input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 3px rgba(0,118,74,.14),0 1px 2px rgba(27,42,36,.06) inset;
}

/* ---- Tables: glossy header ---- */
th{background:linear-gradient(180deg,#ecf6f0 0%, #dbeee3 100%);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}

/* ---- Badges & pills: subtle sheen ---- */
.badge{box-shadow:0 1px 0 rgba(255,255,255,.65) inset}
.badge-official{background:linear-gradient(180deg,#ecf7f1,#dcefe4)}
.badge-diplomatic{background:linear-gradient(180deg,#fbe9db,#f3d9c6)}

/* ---- Alerts: soft glossy fill ---- */
.alert{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 16px rgba(27,42,36,.05)}
.alert-success{background:linear-gradient(180deg,#eef8f2,#e2f2ea)}
.alert-error{background:linear-gradient(180deg,#fdf2f1,#fbe7e5)}
.alert-info{background:linear-gradient(180deg,#fdf9ee,#f9f2df)}

/* ---- Auth hero (login / 2FA / installer): glass sheen ---- */
.auth-hero{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#00563a 0%, #008a54 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 12px 30px rgba(0,40,26,.18)}
.auth-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%)}
.auth-hero>*{position:relative;z-index:1}
.auth-card{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 32px rgba(27,42,36,.08)}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .btn,.btn:hover{transform:none}
}

/* Maintenance-mode indicator dot in the sidebar nav */
.sidenav a .nav-dot{color:var(--gold);font-size:11px;vertical-align:middle}