/* ===== Career Bench — shared styles ===== */
:root{--cb-primary:#0e6b4f;--cb-dark:#0a3b36;--cb-accent:#ffcf1a;--cb-bg:#f2f8f5;--sidebar-w:258px}
body{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:.92rem}
a{color:var(--cb-primary)}
.btn-primary{--bs-btn-bg:var(--cb-primary);--bs-btn-border-color:var(--cb-primary);--bs-btn-hover-bg:var(--cb-dark);--bs-btn-hover-border-color:var(--cb-dark);--bs-btn-active-bg:var(--cb-dark);--bs-btn-active-border-color:var(--cb-dark);--bs-btn-disabled-bg:var(--cb-primary);--bs-btn-disabled-border-color:var(--cb-primary)}
.btn-outline-primary{--bs-btn-color:var(--cb-primary);--bs-btn-border-color:var(--cb-primary);--bs-btn-hover-bg:var(--cb-primary);--bs-btn-hover-border-color:var(--cb-primary);--bs-btn-active-bg:var(--cb-primary)}
.btn-accent{background:var(--cb-accent);color:#111;font-weight:600;border:0}.btn-accent:hover{filter:brightness(.95);color:#111}
.bg-primary{background-color:var(--cb-primary)!important}.text-primary{color:var(--cb-primary)!important}
.nav-pills{--bs-nav-pills-link-active-bg:var(--cb-primary)}
.page-link{color:var(--cb-primary)}.active>.page-link{background:var(--cb-primary);border-color:var(--cb-primary)}
.form-check-input:checked{background-color:var(--cb-primary);border-color:var(--cb-primary)}

/* ----- Portal layout ----- */
body.portal{background:var(--cb-bg)}
.sidebar{background:linear-gradient(180deg,var(--cb-dark),var(--cb-primary));color:#fff;width:var(--sidebar-w)}
@media(min-width:992px){.sidebar{position:fixed;top:0;bottom:0;left:0;overflow-y:auto;z-index:1030}.main{margin-left:var(--sidebar-w)}}
@media(max-width:991.98px){.sidebar.offcanvas-lg{--bs-offcanvas-width:270px;background:linear-gradient(180deg,var(--cb-dark),var(--cb-primary))}}
.sidebar-brand{display:flex;align-items:center;justify-content:center;position:relative;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.15);font-weight:600}
.brand-logo{height:40px;max-width:190px;width:auto;background:#fff;border-radius:8px;padding:3px 6px}
.sidebar-nav{padding:8px 8px 30px;width:100%}
.sidebar .nav-group{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin:14px 10px 4px}
.sidebar .nav-link{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.88);padding:8px 12px;border-radius:9px;margin:1px 0;font-size:.88rem}
.sidebar .nav-link:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar .nav-link.active{background:var(--cb-accent);color:#111;font-weight:600}
.sidebar .nav-link i{font-size:1.05rem;width:20px;text-align:center}
.topbar{position:sticky;top:0;z-index:1020;background:#fff;display:flex;align-items:center;padding:10px 18px;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.content{padding:18px}
@media(max-width:576px){.content{padding:12px}}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.avatar-txt{display:inline-flex;align-items:center;justify-content:center;background:var(--cb-primary);color:#fff;font-weight:600}
.card{border:0;box-shadow:0 1px 4px rgba(0,0,0,.06);border-radius:12px}
.card-header{background:#fff;border-bottom:1px solid #eef0f2;font-weight:600}
.stat-card .stat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.section-title{border-bottom:2px solid var(--cb-accent);padding-bottom:6px;color:var(--cb-dark);font-weight:600}
.table{font-size:.86rem}.table th{white-space:nowrap;font-weight:600;color:#555;background:#f8faf9}
.table-responsive{border-radius:10px}
.row-unpaid td{background:#fde8e8!important}.row-partial td{background:#fff5d6!important}.row-paid td{background:#e6f6ec!important}
.legend span{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:middle;margin:0 4px 0 10px}
.ticker{display:flex;align-items:center;background:var(--cb-accent);color:#111;font-weight:500;overflow:hidden}
.ticker-label{background:var(--cb-dark);color:#fff;padding:6px 12px;white-space:nowrap;z-index:1}
.ticker-track{overflow:hidden;flex:1}.ticker-move{display:inline-block;white-space:nowrap;padding:6px 0;padding-left:100%;animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
.att-btns .btn-check+label{min-width:34px}
.profile-photo{width:110px;height:130px;object-fit:cover;border-radius:10px;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.kv th{width:38%;color:#666;font-weight:500;background:transparent}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:10px}
.bar-chart .bar{flex:1;background:var(--cb-primary);border-radius:6px 6px 0 0;position:relative;min-height:2px}
.bar-chart .bar span{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:.72rem;font-weight:600}
.bar-labels{display:flex;gap:6px}.bar-labels div{flex:1;text-align:center;font-size:.68rem;color:#777}
.wa-send.clicked{opacity:.45}
.perm-table td,.perm-table th{text-align:center;vertical-align:middle}.perm-table td:first-child,.perm-table th:first-child{text-align:left}

/* ----- Auth pages ----- */
.auth-page{min-height:100vh;background:linear-gradient(135deg,var(--cb-dark),var(--cb-primary) 60%,var(--cb-accent))}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.auth-card{width:100%;max-width:430px;border-radius:18px}
.auth-logo{max-height:64px;max-width:240px}

/* ----- Print ----- */
.print-page{background:#fff}
@media print{.no-print{display:none!important}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.receipt{max-width:720px;margin:10px auto;border:1px solid #ccc;padding:20px;border-radius:8px}
.idcard{width:250px;border-radius:12px;overflow:hidden;border:1px solid #ddd;margin:20px auto;font-size:.76rem}
.idcard h5{font-size:1rem}.idcard .profile-photo{width:96px;height:116px}.idcard-tbl th,.idcard-tbl td{padding:2px 4px;font-size:.72rem}.idcard-tbl th{width:34%;background:transparent}
.idcard .top{background:var(--cb-primary);color:#fff;padding:10px;text-align:center}
.cert{max-width:1000px;margin:10px auto;aspect-ratio:1.414;border:14px solid var(--cb-primary);outline:4px solid var(--cb-accent);outline-offset:-24px;padding:50px 70px;text-align:center;position:relative;background:#fffdf5;font-family:Georgia,serif}
.cert h1{font-family:Oswald,sans-serif;color:var(--cb-dark);letter-spacing:.06em}

/* ===== Public website ===== */
.site{background:#fff;color:#1d2a27}
.site h1,.site h2,.site h3,.site .display-font{font-family:Oswald,Poppins,sans-serif;letter-spacing:.01em}
.site-top{background:var(--cb-dark);color:#fff;font-size:.82rem}
.site-top a{color:#fff;text-decoration:none}
.site-nav{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.site-nav .navbar-brand img{height:52px}
.site-nav .nav-link{font-weight:500;color:#223;white-space:nowrap}
.site-nav .nav-link:hover{color:var(--cb-primary)}
.site-flash{background:var(--cb-accent);color:#111}
.hero{position:relative;background:linear-gradient(120deg,var(--cb-dark),var(--cb-primary));color:#fff;overflow:hidden}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:700;line-height:1.05}
.hero .lead{opacity:.92}
.hero-badge{display:inline-block;background:var(--cb-accent);color:#111;font-weight:600;padding:4px 14px;border-radius:30px;font-size:.85rem}
.hero-slider img{width:100%;border-radius:18px;box-shadow:0 20px 40px rgba(0,0,0,.3);aspect-ratio:4/5;object-fit:cover}
.layout-classic .hero-full .carousel-item img{height:min(78vh,720px);object-fit:contain;background:var(--cb-dark)}
.layout-magazine .hero{background:var(--cb-bg);color:#1d2a27}
.layout-magazine .hero .lead{color:#444}
.feature-pill{background:#fff;border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.06);height:100%;display:flex;gap:12px;align-items:center;font-weight:500}
.feature-pill i{font-size:1.5rem;color:var(--cb-primary);background:var(--cb-bg);border-radius:10px;padding:8px 10px}
.sec{padding:64px 0}.sec-alt{background:var(--cb-bg)}
.sec-title{font-size:clamp(1.6rem,3.5vw,2.4rem);color:var(--cb-dark);font-weight:700}
.sec-title span{color:var(--cb-primary)}
.course-card{border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s;height:100%}
.course-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.course-card img{aspect-ratio:4/3;object-fit:cover;object-position:top}
.course-card .tag{background:var(--cb-accent);color:#111;font-size:.75rem;font-weight:600;border-radius:20px;padding:2px 10px}
.stat-box{text-align:center;color:#fff}.stat-box b{display:block;font-family:Oswald,sans-serif;font-size:2.4rem;color:var(--cb-accent)}
.gallery-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;cursor:zoom-in;transition:transform .2s}
.gallery-item img:hover{transform:scale(1.03)}
.video-wrap{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#000}.video-wrap iframe,.video-wrap video{width:100%;height:100%;border:0}
.social-card{border-left:4px solid var(--cb-accent)}
.enquiry-box{background:linear-gradient(135deg,var(--cb-dark),var(--cb-primary));color:#fff;border-radius:22px}
.enquiry-box .form-control,.enquiry-box .form-select{border-radius:10px}
.site-footer{background:var(--cb-dark);color:rgba(255,255,255,.85)}.site-footer a{color:#fff}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:1040;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.wa-float:hover{color:#fff;transform:scale(1.05)}
.font-sans .site h1,.font-sans .site h2,.font-sans .site h3{font-family:Poppins,sans-serif}

.sidebar-brand>a{justify-content:center;width:100%}
.sidebar-brand .btn-close{position:absolute;right:12px;top:50%;transform:translateY(-50%)}

.time-ctl{max-width:230px}.time-ctl input{min-width:92px;text-align:center}
.star-rate{display:inline-flex;flex-direction:row-reverse;gap:2px}.star-rate input{display:none}.star-rate label{font-size:1.6rem;color:#d0d4d8;cursor:pointer;line-height:1}
.star-rate label:hover,.star-rate label:hover~label,.star-rate input:checked~label{color:#f5b301}