:root{
  --navy:#1a2744; --navy-light:#243456; --gold:#c9a84c; --gold-dark:#b3922f;
  --bg:#f4f6f9; --ink:#23272f; --muted:#6b7280; --line:#e3e6ec;
}
*{box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--ink);}
a{text-decoration:none}
.brand-mark{display:inline-block;background:var(--gold);color:var(--navy);font-weight:800;
  border-radius:6px;padding:2px 8px;letter-spacing:1px;}

/* Buttons */
.btn-fang{background:var(--navy);color:#fff;border:none}
.btn-fang:hover{background:var(--navy-light);color:#fff}
.btn-gold{background:var(--gold);color:var(--navy);border:none;font-weight:600}
.btn-gold:hover{background:var(--gold-dark);color:#fff}

/* ---------- Public navbar ---------- */
.navbar-fang{background:var(--navy);padding:.7rem 0;}
.navbar-fang .navbar-brand{color:#fff;font-weight:700;font-size:1.25rem}
.navbar-fang .brand-text{color:#fff}
.navbar-fang .nav-link{color:#cdd4e0;font-weight:500}
.navbar-fang .nav-link:hover{color:var(--gold)}
.navbar-fang .navbar-toggler{border-color:rgba(255,255,255,.3)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);color:#fff;padding:5rem 0;}
.hero h1{font-size:2.8rem;font-weight:800;line-height:1.15}
.hero .lead{color:#cdd4e0;max-width:600px}
.hero .gold{color:var(--gold)}

.section{padding:4rem 0}
.section-title{font-weight:700;color:var(--navy);margin-bottom:.25rem}
.section-sub{color:var(--muted);margin-bottom:2rem}

/* Stat cards */
.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.5rem;text-align:center}
.stat-card .num{font-size:2.2rem;font-weight:800;color:var(--gold)}
.stat-card .lbl{color:var(--muted);font-weight:500}

/* Journal cards */
.journal-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;height:100%;transition:.2s}
.journal-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(26,39,68,.12)}
.journal-card .cover{height:120px;background:linear-gradient(135deg,var(--navy),var(--navy-light));
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:2.4rem;font-weight:800}
.journal-card .body{padding:1.25rem}
.journal-card h5{color:var(--navy);font-weight:700}

/* Footer */
.site-footer{background:var(--navy);color:#cdd4e0;padding:3rem 0 1.5rem;margin-top:3rem}
.site-footer h5,.site-footer h6{color:#fff}
.footer-links{list-style:none;padding:0}
.footer-links a{color:#cdd4e0}
.footer-links a:hover{color:var(--gold)}
.text-muted-light{color:#9aa3b5}
.footer-hr{border-color:rgba(255,255,255,.1);margin:2rem 0 1rem}

/* ---------- Status badges ---------- */
.status-badge{font-weight:600;padding:.4em .7em}
.badge-yellow{background:#f4c430;color:#3a2c00}
.badge-teal{background:#1aa3a3;color:#fff}
.badge-purple{background:#7a4fd0;color:#fff}
.badge-darkgreen{background:#1f6b3a;color:#fff}
.badge-darkred{background:#8b1e1e;color:#fff}

/* ---------- Dashboard layout ---------- */
.dash-body{background:var(--bg)}
.dash-wrapper{display:flex;min-height:100vh}
.dash-sidebar{width:250px;background:var(--navy);color:#cdd4e0;display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:1040;transition:transform .25s}
.sidebar-brand{padding:1.1rem 1.25rem;font-weight:700;font-size:1.15rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand a{color:#fff}
.sidebar-role{padding:.6rem 1.25rem;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--gold)}
.sidebar-nav{list-style:none;padding:0;margin:0;flex:1;overflow-y:auto}
.sidebar-nav a{display:flex;align-items:center;gap:.7rem;padding:.7rem 1.25rem;color:#cdd4e0;font-weight:500}
.sidebar-nav a:hover{background:var(--navy-light);color:#fff}
.sidebar-nav a.active{background:var(--navy-light);color:#fff;border-left:3px solid var(--gold)}
.sidebar-foot{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:.5rem}
.sidebar-foot a{color:#9aa3b5}
.sidebar-foot a:hover{color:var(--gold)}

.dash-content{flex:1;margin-left:250px;display:flex;flex-direction:column;min-width:0}
.dash-topbar{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:1rem;padding:.75rem 1.5rem;position:sticky;top:0;z-index:1030}
.topbar-title{font-size:1.15rem;font-weight:700;color:var(--navy);margin:0;flex:1}
.topbar-right{display:flex;align-items:center}
.topbar-icon{color:var(--navy);font-size:1.2rem;padding:.3rem .5rem;display:inline-block}
.topbar-user{color:var(--navy);display:flex;align-items:center}
.avatar-circle{width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.notif-count{position:absolute;top:-2px;right:-2px;font-size:.6rem}
.notif-list{max-height:340px;overflow-y:auto}
.notif-item{display:block;padding:.6rem 1rem;border-bottom:1px solid var(--line);color:var(--ink)}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:#fbf7ec}
.dash-main{padding:1.5rem}

/* Dashboard cards */
.metric-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.25rem;display:flex;align-items:center;gap:1rem}
.metric-card .icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;background:var(--navy);color:var(--gold)}
.metric-card .num{font-size:1.7rem;font-weight:800;color:var(--navy);line-height:1}
.metric-card .lbl{color:var(--muted);font-size:.85rem}
.card-fang{background:#fff;border:1px solid var(--line);border-radius:12px}
.card-fang .card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:700;color:var(--navy)}

/* ---------- Status stepper (vertical) ---------- */
.stepper{list-style:none;padding:0;margin:0;position:relative}
.stepper li{position:relative;padding:0 0 1.4rem 2.2rem}
.stepper li:before{content:'';position:absolute;left:9px;top:22px;bottom:-4px;width:2px;background:var(--line)}
.stepper li:last-child:before{display:none}
.stepper .dot{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.7rem}
.stepper li.done .dot{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.stepper li.current .dot{background:var(--navy);border-color:var(--navy);color:#fff}
.stepper li.done:before,.stepper li.current:before{background:var(--gold)}
.stepper .step-title{font-weight:600;color:var(--ink)}
.stepper li.pending .step-title{color:var(--muted)}
.stepper .step-time{font-size:.8rem;color:var(--muted)}

/* Multi-step form */
.form-steps{display:flex;margin-bottom:1.5rem;gap:.25rem}
.form-steps .step{flex:1;text-align:center;padding:.6rem .3rem;border-bottom:3px solid var(--line);color:var(--muted);font-size:.85rem;font-weight:600;transition:color .2s,border-color .2s}
.form-steps .step.active{border-color:var(--gold);color:var(--navy)}
/* Hide inactive panes visually but keep inputs in DOM so file upload is submitted */
.step-pane{position:absolute;visibility:hidden;pointer-events:none;width:1px;height:1px;overflow:hidden}
.step-pane.active{position:static;visibility:visible;pointer-events:auto;width:auto;height:auto;overflow:visible}

/* Auth pages */
.auth-wrap{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-card{background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(26,39,68,.1);max-width:440px;width:100%;padding:2.2rem}
.auth-card h2{color:var(--navy);font-weight:700}

/* tabs */
.nav-tabs .nav-link.active{color:var(--navy);font-weight:700;border-bottom:3px solid var(--gold)}

@media (max-width:991px){
  .dash-sidebar{transform:translateX(-100%)}
  .dash-sidebar.open{transform:translateX(0)}
  .dash-content{margin-left:0}
  .hero h1{font-size:2rem}
}