:root{--navy:#022247;--blue:#064a8b;--soft:#a4b3d3;--gold:#c3a138;--bg:#f4f7fb;--text:#26364a;--sidebar-w:265px;--sidebar-collapsed-w:78px}*{box-sizing:border-box}html,body{min-height:100%;font-family:'Kanit',sans-serif;background:var(--bg);color:var(--text)}body{margin:0}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff;z-index:1040;display:flex;flex-direction:column;transition:.28s ease;box-shadow:8px 0 30px rgba(2,34,71,.14)}.sidebar-brand{height:76px;display:flex;align-items:center;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.12)}.brand-mark{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(195,161,56,.18);color:#f0d36c;font-size:21px;margin-right:12px}.sidebar-brand strong{display:block;font-size:16px}.sidebar-brand small{display:block;color:#cad7e7;font-size:11px;margin-top:2px}.sidebar-nav{padding:18px 12px;flex:1;overflow-y:auto}.sidebar-nav a{display:flex;align-items:center;color:#dce7f3;padding:11px 14px;border-radius:8px;margin-bottom:5px;text-decoration:none;transition:.2s ease}.sidebar-nav a:hover{color:#fff;background:rgba(255,255,255,.11);transform:translateX(3px)}.sidebar-nav a.active{color:#fff;background:rgba(255,255,255,.15);box-shadow:inset 3px 0 0 var(--gold),0 5px 14px rgba(0,0,0,.08);font-weight:500}.sidebar-nav a.active i{color:#f0d36c}.sidebar-nav .danger-link.active{color:#fff;background:rgba(255,255,255,.13)}.sidebar-nav i{width:25px;text-align:center;margin-right:9px}.sidebar-nav .danger-link{color:#ffd1d1}.sidebar-footer-note{padding:16px 20px;font-size:11px;color:#b9cce0;border-top:1px solid rgba(255,255,255,.12)}.main-area{min-height:100vh;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column;transition:margin-left .28s ease}.top-navbar{height:76px;position:sticky;top:0;z-index:1020;box-shadow:0 2px 18px rgba(30,50,70,.08)}.hamburger{font-size:20px;color:var(--navy)!important}.navbar-title{font-weight:600;color:var(--navy);font-size:18px}.user-mini{align-items:center}.user-mini img,.avatar-placeholder{width:38px;height:38px;border-radius:50%;object-fit:cover;margin-right:9px;border:2px solid #e2e9f2}.avatar-placeholder{display:grid;place-items:center;background:#eef3f8;color:var(--blue)}.user-mini strong,.user-mini small{display:block;line-height:1.15}.user-mini strong{font-size:12px}.user-mini small{font-size:10px;color:#8896a6;margin-top:4px}.content-area{padding:26px;flex:1;min-width:0;width:100%}.app-footer{padding:14px 24px;text-align:center;color:#76869a;background:#fff;border-top:1px solid #e9eef4;font-size:12px}.sidebar-overlay{display:none}.card{border:0;border-radius:10px!important;box-shadow:0 7px 25px rgba(31,62,95,.08)}.card-hover{transition:.22s ease}.card-hover:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(31,62,95,.13)}.page-head{background:linear-gradient(120deg,#fff,#f5f8fc);border-left:4px solid var(--gold);padding:18px 22px;border-radius:9px;margin-bottom:22px;box-shadow:0 6px 20px rgba(31,62,95,.06)}.page-head h1{font-size:22px;color:var(--navy);margin:0 0 5px;font-weight:600}.page-head p{margin:0;color:#75859a;font-size:13px}.stat-card{padding:19px;min-height:116px;position:relative;overflow:hidden}.stat-card .icon{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;background:#eef4fa;color:var(--blue);font-size:20px}.stat-card .number{font-size:29px;font-weight:700;color:var(--navy);line-height:1}.stat-card .label{font-size:12px;color:#7b8a9c;margin-top:7px}.stat-card.gold .icon{background:#faf5e8;color:#ad8b22}.btn{border-radius:7px!important;text-transform:none!important;font-weight:500;box-shadow:none!important;margin:0!important}.btn-primary{background:var(--blue)!important}.btn-deep-navy{background:var(--navy);color:#fff}.btn-deep-navy:hover{color:#fff;background:#031a35}.btn-gold{background:var(--gold);color:#fff}.page-actions,.form-actions,.result-actions,.table-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.page-actions{justify-content:flex-end;margin-bottom:16px}.form-actions{justify-content:flex-end;margin-top:18px}.result-actions{justify-content:center;margin-top:4px}.table-actions{gap:6px;flex-wrap:nowrap}.table-actions .btn-sm{min-width:36px;padding:.375rem .62rem}.stacked-actions{display:flex;flex-direction:column;gap:8px}.stacked-actions .btn{width:100%}.exam-submit-row{gap:12px}.form-control,.custom-select{border-radius:7px!important;border:1px solid #dbe3ec;height:44px}.form-control:focus,.custom-select:focus{border-color:var(--blue);box-shadow:0 0 0 .16rem rgba(6,74,139,.12)}textarea.form-control{height:auto}.form-group label{font-size:12px;font-weight:500;color:#52657b;margin-bottom:7px}.profile-photo{width:118px;height:118px;border-radius:14px;object-fit:cover;border:4px solid #eef3f8}.profile-photo-lg{width:150px;height:150px;border-radius:16px;object-fit:cover}.badge{border-radius:5px;padding:.45em .65em}.exam-question{border-left:4px solid #dce6f2}.question-number{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--navy);color:#fff;margin-right:8px;font-size:13px}.choice-row{display:block;border:1px solid #e1e7ef;border-radius:8px;padding:11px 13px;margin-bottom:9px;cursor:pointer;transition:.2s}.choice-row:hover{border-color:#8caecf;background:#f7fbff}.choice-row input{margin-right:8px}.status-pass{color:#18894b}.status-wait{color:#ba7e10}.auth-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(140deg,rgba(2,34,71,.96),rgba(6,74,139,.91)),url('../certificate/4.jpg') center/cover fixed;padding:25px}.auth-card{width:100%;max-width:530px;background:rgba(255,255,255,.97);border-radius:12px;padding:30px;box-shadow:0 25px 70px rgba(0,0,0,.28);animation:authIn .55s ease}.auth-logo{width:62px;height:62px;border-radius:14px;background:linear-gradient(140deg,var(--navy),var(--blue));color:#fff;display:grid;place-items:center;font-size:27px;margin:0 auto 15px;box-shadow:0 10px 25px rgba(6,74,139,.26)}.auth-card h1{text-align:center;font-size:22px;color:var(--navy);font-weight:600}.auth-card .subtitle{text-align:center;color:#718096;font-size:12px;line-height:1.65;margin-bottom:22px}.auth-footer{text-align:center;font-size:11px;color:#8997a7;margin-top:20px}@keyframes authIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}.photo-preview{width:92px;height:92px;border-radius:10px;object-fit:cover;background:#f1f4f8;display:none;margin:10px auto}.table td,.table th{vertical-align:middle;font-size:12px}.table thead th{color:var(--navy);font-weight:600;border-top:0}.gold-line{height:3px;width:56px;background:var(--gold);border-radius:2px;margin:8px 0 18px}.result-score{font-size:64px;font-weight:700;line-height:1;color:var(--navy)}.result-score small{font-size:24px;color:#8a99a9}.success-glow{box-shadow:0 0 0 6px rgba(31,154,86,.08),0 12px 35px rgba(31,154,86,.12)}.danger-zone{border:1px solid #efcaca!important;background:#fffafa}.admin-note{background:#fff9e9;border-left:4px solid var(--gold);padding:12px 15px;border-radius:6px;font-size:12px}.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-w);transform:none}.sidebar-collapsed .main-area{margin-left:var(--sidebar-collapsed-w)}.sidebar-collapsed .sidebar-brand{justify-content:center;padding:0}.sidebar-collapsed .sidebar-brand-text{display:none}.sidebar-collapsed .brand-mark{margin-right:0}.sidebar-collapsed .sidebar-nav{padding:18px 9px;overflow:visible}.sidebar-collapsed .sidebar-nav a{position:relative;justify-content:center;padding:12px 0}.sidebar-collapsed .sidebar-nav a:hover{transform:none}.sidebar-collapsed .sidebar-nav a i{width:100%;margin-right:0;font-size:18px}.sidebar-collapsed .sidebar-nav a span{display:none}.sidebar-collapsed .sidebar-nav a::after{content:attr(data-label);position:absolute;left:62px;top:50%;transform:translate(7px,-50%);white-space:nowrap;background:#022247;color:#fff;padding:7px 10px;border-radius:6px;font-size:11px;font-weight:400;box-shadow:0 8px 20px rgba(2,34,71,.22);opacity:0;visibility:hidden;transition:.18s ease;z-index:1080;pointer-events:none}.sidebar-collapsed .sidebar-nav a:hover::after{opacity:1;visibility:visible;transform:translate(0,-50%)}.sidebar-collapsed .sidebar-footer-note{padding:15px 0;text-align:center}.sidebar-collapsed .sidebar-footer-note span{display:none}.sidebar-collapsed .sidebar-footer-note i{margin:0!important;font-size:16px}@media(max-width:991.98px){.sidebar,.sidebar-collapsed .sidebar{width:var(--sidebar-w);transform:translateX(calc(-1 * var(--sidebar-w)))}.main-area,.sidebar-collapsed .main-area{margin-left:0}.sidebar-collapsed .sidebar-brand{justify-content:flex-start;padding:0 22px}.sidebar-collapsed .sidebar-brand-text{display:block}.sidebar-collapsed .brand-mark{margin-right:12px}.sidebar-collapsed .sidebar-nav{padding:18px 12px;overflow-y:auto}.sidebar-collapsed .sidebar-nav a{justify-content:flex-start;padding:11px 14px}.sidebar-collapsed .sidebar-nav a i{width:25px;margin-right:9px;font-size:inherit}.sidebar-collapsed .sidebar-nav a span{display:inline}.sidebar-collapsed .sidebar-nav a::after{display:none}.sidebar-collapsed .sidebar-footer-note{padding:16px 20px;text-align:left}.sidebar-collapsed .sidebar-footer-note span{display:inline}.app-shell.mobile-sidebar-open .sidebar,.sidebar-collapsed.mobile-sidebar-open .sidebar{transform:translateX(0)}.app-shell.mobile-sidebar-open .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1035}.content-area{padding:18px}.top-navbar{height:66px}.page-head h1{font-size:19px}.role-learner .sidebar,.role-learner .sidebar-overlay{display:none!important}.role-learner .hamburger{display:none}.mobile-app-title{display:flex;flex-direction:column;min-width:0;line-height:1.15}.mobile-app-title strong{font-size:13px;color:var(--navy);font-weight:600}.mobile-app-title small{font-size:9px;color:#8b99a9;margin-top:3px;max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-learner .content-area{padding-bottom:92px}.role-learner .app-footer{margin-bottom:68px}.mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1060;display:flex;align-items:stretch;justify-content:space-around;height:68px;padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.98);border-top:1px solid #e2e9f2;box-shadow:0 -7px 24px rgba(2,34,71,.10);backdrop-filter:blur(12px)}.mobile-bottom-nav a{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#7b8a9c;text-decoration:none;font-size:10px;font-weight:500;transition:.18s ease}.mobile-bottom-nav a i{font-size:18px;line-height:1}.mobile-bottom-nav a.active{color:var(--blue)}.mobile-bottom-nav a.active i{color:var(--blue)}.mobile-bottom-nav a.active::before{content:"";position:absolute;top:0;width:34px;height:3px;border-radius:0 0 4px 4px;background:var(--gold)}.mobile-bottom-nav a:active{background:#f4f7fb}.logout-button{min-width:38px}.role-learner .logout-button{padding:.375rem .6rem}.role-learner .logout-label{display:none}.role-learner .logout-button i{margin:0!important}}@media(min-width:992px){.mobile-bottom-nav{display:none!important}}@media(max-width:575.98px){.auth-card{padding:23px 18px}.content-area{padding:14px}.role-learner .content-area{padding-bottom:92px}.stat-card{min-height:104px}.result-score{font-size:54px}.table-responsive{border-radius:8px}.page-head{padding:16px}.page-head p{font-size:12px}.page-actions .btn{width:100%}.form-actions,.result-actions{align-items:stretch;flex-direction:column}.form-actions .btn,.result-actions .btn{width:100%}.table-actions{flex-wrap:wrap}.exam-submit-row{align-items:stretch!important}.exam-submit-row .btn{width:100%}}

/* Layout stability for tables/charts when sidebar width changes */
.card,.table-responsive,.dataTables_wrapper{max-width:100%;min-width:0}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dataTables_wrapper{width:100%!important}
.dataTables_wrapper .row{margin-left:0;margin-right:0}
.dataTables_wrapper .row>div{padding-left:6px;padding-right:6px}
.dataTables_wrapper table.dataTable{width:100%!important}
.swal2-popup{font-family:'Kanit',sans-serif!important;border-radius:12px!important}
.swal2-title{color:#022247!important}
.swal2-confirm,.swal2-cancel{border-radius:7px!important}