/* ==========================================================================
   Yabatech Application Portal - modern design system (layered over Bootstrap 5)
   Brand: YCT green. Used by every revamped page.
   ========================================================================== */
:root{
  --yct-green:#198754; --yct-green-700:#13643f; --yct-green-900:#0e4a2f;
  --yct-gold:#ffc107; --yct-ink:#14201a; --yct-muted:#5b6b63;
  --yct-bg:#f4f7f5; --yct-card:#ffffff; --yct-line:#e4ece7;
  --yct-soft:#eaf5ef; --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(16,40,28,.06),0 1px 3px rgba(16,40,28,.08);
  --shadow:0 6px 24px rgba(16,40,28,.10); --shadow-lg:0 18px 50px rgba(16,40,28,.18);
}
*{box-sizing:border-box}
body{
  background:var(--yct-bg); color:var(--yct-ink);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; margin:0;
}
a{color:var(--yct-green-700); text-decoration:none}
a:hover{color:var(--yct-green-900)}

/* ---------- Top bar ---------- */
.app-topbar{
  position:sticky; top:0; z-index:1030; background:#fff; border-bottom:1px solid var(--yct-line);
  box-shadow:var(--shadow-sm);
}
.app-topbar .inner{display:flex; align-items:center; gap:16px; padding:10px 22px; max-width:1320px; margin:0 auto}
.app-brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.2px; color:var(--yct-green-900)}
.app-brand img{width:38px; height:38px; object-fit:contain}
.app-brand small{display:block; font-weight:500; color:var(--yct-muted); font-size:.72rem; letter-spacing:.3px}
.app-topbar .spacer{flex:1}
.app-who{display:flex; align-items:center; gap:10px; color:var(--yct-muted); font-size:.86rem}
.app-who .chip{background:var(--yct-soft); color:var(--yct-green-900); border-radius:999px; padding:6px 12px; font-weight:600}

/* ---------- Layout shell ---------- */
.app-shell{max-width:1320px; margin:0 auto; padding:22px; display:grid; grid-template-columns:280px 1fr; gap:22px}
@media (max-width:991px){ .app-shell{grid-template-columns:1fr; padding:14px} }

/* ---------- Sidebar / steps ---------- */
.app-side{position:sticky; top:84px; align-self:start}
.side-card{background:var(--yct-card); border:1px solid var(--yct-line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden}
.side-profile{padding:18px; background:linear-gradient(135deg,var(--yct-green) 0%,var(--yct-green-900) 100%); color:#fff}
.side-profile img{width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.5)}
.side-profile .name{font-weight:700; margin-top:10px; line-height:1.2}
.side-profile .meta{opacity:.85; font-size:.8rem}
.steps{list-style:none; margin:0; padding:8px}
.steps li a{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--radius-sm); color:var(--yct-ink); font-weight:500; transition:.15s}
.steps li a:hover{background:var(--yct-soft)}
.steps li a.active{background:var(--yct-green); color:#fff; box-shadow:var(--shadow-sm)}
.steps .ic{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--yct-soft); color:var(--yct-green-700); flex:0 0 auto}
.steps li a.active .ic{background:rgba(255,255,255,.22); color:#fff}
.steps .done{margin-left:auto; color:var(--yct-green); font-size:1.05rem}
.steps li a.active .done{color:#fff}
.steps .todo{margin-left:auto; color:#c9d4cd}

/* ---------- Cards / surfaces ---------- */
.surface{background:var(--yct-card); border:1px solid var(--yct-line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.surface .surface-head{padding:18px 22px; border-bottom:1px solid var(--yct-line); display:flex; align-items:center; justify-content:space-between; gap:12px}
.surface .surface-head h2{font-size:1.12rem; font-weight:700; margin:0}
.surface .surface-head p{margin:2px 0 0; color:var(--yct-muted); font-size:.86rem}
.surface .surface-body{padding:22px}
.eyebrow{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--yct-green-700); font-weight:700}

/* ---------- Hero / progress ---------- */
.hero{background:linear-gradient(135deg,var(--yct-green) 0%,var(--yct-green-900) 100%); color:#fff; border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.hero h1{font-weight:800; letter-spacing:-.5px; margin:0 0 6px}
.hero .lead{opacity:.92; margin:0}
.progress-rail{height:10px; border-radius:999px; background:rgba(255,255,255,.25); overflow:hidden; margin-top:16px}
.progress-rail > span{display:block; height:100%; background:var(--yct-gold); border-radius:999px; transition:width .5s ease}

/* ---------- Forms ---------- */
.form-label,.lbl{font-weight:600; font-size:.86rem; color:var(--yct-ink); margin-bottom:6px}
.lbl sup{color:#d6336c}
.form-control,.form-select{border-radius:var(--radius-sm); border:1.5px solid var(--yct-line); padding:.6rem .8rem; box-shadow:none!important; transition:.15s}
.form-control:focus,.form-select:focus{border-color:var(--yct-green); box-shadow:0 0 0 4px var(--yct-soft)!important}
.form-control:disabled,.form-select:disabled{background:#f6f8f7}
.field-hint{font-size:.78rem; color:var(--yct-muted); margin-top:5px}
.field-err{font-size:.78rem; color:#d6336c; margin-top:5px}

/* ---------- Buttons ---------- */
.btn{border-radius:var(--radius-sm); font-weight:600; padding:.6rem 1.05rem}
.btn-success{background:var(--yct-green); border-color:var(--yct-green)}
.btn-success:hover{background:var(--yct-green-700); border-color:var(--yct-green-700)}
.btn-outline-success{color:var(--yct-green-700); border-color:var(--yct-green)}
.btn-lg{padding:.8rem 1.2rem}
.btn-ghost{background:var(--yct-soft); color:var(--yct-green-900); border:none}
.btn-ghost:hover{background:#dcefe3}

/* ---------- Badges / pills ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:.76rem; font-weight:700}
.pill.ok{background:var(--yct-soft); color:var(--yct-green-900)}
.pill.warn{background:#fff4d6; color:#8a6100}
.pill.bad{background:#fde7ee; color:#a3214b}

/* ---------- Stat tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.tile{background:var(--yct-card); border:1px solid var(--yct-line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm)}
.tile .k{color:var(--yct-muted); font-size:.8rem; font-weight:600}
.tile .v{font-size:1.5rem; font-weight:800; margin-top:4px}
.tile .ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--yct-soft); color:var(--yct-green-700); font-size:1.2rem; margin-bottom:10px}
a.tile-link{display:block; text-decoration:none; color:inherit; position:relative; cursor:pointer; transition:.18s}
a.tile-link:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--yct-green)}
a.tile-link .go{position:absolute; top:14px; right:14px; color:#c9d4cd; transition:.18s}
a.tile-link:hover .go{color:var(--yct-green); transform:translateX(2px)}

/* ---------- Auth screens ---------- */
.auth-wrap{min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr}
@media (max-width:991px){ .auth-wrap{grid-template-columns:1fr} .auth-aside{display:none} }
.auth-aside{background:linear-gradient(160deg,var(--yct-green) 0%,var(--yct-green-900) 100%); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:center}
.auth-aside h2{font-weight:800; font-size:2rem; letter-spacing:-.5px}
.auth-aside .step{display:flex; gap:14px; margin-top:22px}
.auth-aside .step .n{width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-weight:700}
.auth-main{display:flex; align-items:center; justify-content:center; padding:32px; background:var(--yct-bg)}
.auth-card{width:100%; max-width:520px; background:#fff; border:1px solid var(--yct-line); border-radius:18px; box-shadow:var(--shadow-lg); padding:34px}
.auth-card .logo{width:58px; height:58px; object-fit:contain}

/* ---------- Toast ---------- */
.app-toast{position:fixed; right:18px; bottom:18px; z-index:2000; min-width:260px; max-width:380px; padding:14px 16px; border-radius:12px; color:#fff; box-shadow:var(--shadow-lg); display:none}
.app-toast.show{display:block; animation:toastin .25s ease}
.app-toast.ok{background:var(--yct-green-700)} .app-toast.err{background:#b02a4a} .app-toast.info{background:#1f6f8b}
@keyframes toastin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Public landing ---------- */
.land-hero{background:linear-gradient(135deg,var(--yct-green) 0%,var(--yct-green-900) 100%); color:#fff}
.feature{background:#fff; border:1px solid var(--yct-line); border-radius:var(--radius); padding:22px; height:100%; box-shadow:var(--shadow-sm); transition:.18s}
.feature:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.feature .ic{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-size:1.4rem; background:var(--yct-soft); color:var(--yct-green-700); margin-bottom:12px}
.action-card{background:#fff; border:1px solid var(--yct-line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); height:100%; display:flex; flex-direction:column; justify-content:space-between}

/* ---------- Misc ---------- */
.muted{color:var(--yct-muted)}
.divider{height:1px; background:var(--yct-line); margin:18px 0}

/* ---------- Application form document (preview) ---------- */
.doc{background:#fff; border:1px solid var(--yct-line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; max-width:940px; margin:0 auto}
.doc-head{display:flex; align-items:center; gap:18px; padding:22px 28px; background:linear-gradient(135deg,var(--yct-green) 0%,var(--yct-green-900) 100%); color:#fff}
.doc-head .logo{width:62px; height:62px; object-fit:contain; background:#fff; border-radius:12px; padding:6px; flex:0 0 auto}
.doc-head .titles{flex:1; min-width:0}
.doc-head .titles h1{font-size:1.35rem; font-weight:800; margin:0; letter-spacing:-.3px}
.doc-head .titles p{margin:3px 0 0; opacity:.92; font-size:.85rem}
.doc-head .photo{width:88px; height:88px; border-radius:12px; object-fit:cover; border:3px solid rgba(255,255,255,.55); flex:0 0 auto}
.doc-band{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding:16px 28px; background:var(--yct-soft); border-bottom:1px solid var(--yct-line)}
.doc-band .who{font-weight:800; font-size:1.15rem; color:var(--yct-green-900); line-height:1.2}
.doc-band .sub{color:var(--yct-muted); font-size:.85rem; margin-top:2px}
.doc-section{padding:22px 28px; border-bottom:1px solid var(--yct-line)}
.doc-section:last-child{border-bottom:0}
.doc-section-title{display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:800; color:var(--yct-green-900); text-transform:uppercase; letter-spacing:.06em; margin:0 0 16px}
.doc-section-title .num{display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:var(--yct-green); color:#fff; font-size:.76rem}
.field-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px 24px}
.field{display:flex; flex-direction:column; gap:2px; border-bottom:1px dashed var(--yct-line); padding-bottom:9px}
.field.wide{grid-column:1/-1}
.f-label{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--yct-muted); font-weight:700}
.f-value{font-weight:600; color:var(--yct-ink); word-break:break-word}
.doc-table{width:100%; border-collapse:collapse; font-size:.86rem}
.doc-table th{background:var(--yct-soft); color:var(--yct-green-900); text-align:left; padding:9px 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--yct-line)}
.doc-table td{padding:9px 12px; border:1px solid var(--yct-line)}
.doc-table tbody tr:nth-child(even){background:#fafdfb}
.doc-foot{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; padding:22px 28px; background:#fafdfb}
.doc-foot .decl{max-width:580px; font-size:.78rem; color:var(--yct-muted); line-height:1.5}
[v-cloak]{display:none}
.fade-in{animation:fadein .4s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.print-only{display:none}
@media print{ .app-topbar,.app-side,.no-print{display:none!important} .app-shell{grid-template-columns:1fr} .print-only{display:block} body{background:#fff} }