@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#0c1a2e;--navy2:#1a3158;--teal:#0891b2;--teal2:#06b6d4;--green:#15803d;--amber:#b45309;--red:#b91c1c;}
body{font-family:'Sarabun',sans-serif;background:#f0f4f8;color:#1e293b;line-height:1.6}
.bg-navy{background:var(--navy)}.bg-teal{background:var(--teal)}.text-navy{color:var(--navy)}.text-teal{color:var(--teal)}
.ml-56{margin-left:14rem}.min-h-screen{min-height:100vh}
.flex{display:flex}.flex-1{flex:1}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}.items-start{align-items:flex-start}
.sticky{position:sticky}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}
.fixed{position:fixed}.w-56{width:14rem}.h-full{height:100%}.overflow-y-auto{overflow-y:auto}.overflow-x-auto{overflow-x:auto}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}
.grid{display:grid}.grid-2{grid-template-columns:1fr 1fr;gap:1rem}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:1rem}
.grid-4{grid-template-columns:repeat(4,1fr);gap:.75rem}.col-span-2{grid-column:span 2}
.card{background:white;border-radius:.875rem;box-shadow:0 1px 4px rgba(0,0,0,.07);overflow:hidden;margin-bottom:1rem;width:100%;max-width:none}
.card-header{padding:.875rem 1.25rem;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center}
.card-title{font-size:.875rem;font-weight:700;color:var(--navy)}.card-body{padding:1.25rem}
.sec-head{font-size:.72rem;font-weight:800;color:#1d4ed8;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:.5rem;padding:.45rem .75rem;margin:.875rem 0 .5rem}
.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.45rem .875rem;border-radius:.5rem;cursor:pointer;font-size:.73rem;font-weight:700;font-family:'Sarabun',sans-serif;border:none;transition:.15s;text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--navy);color:white}.btn-primary:hover{background:var(--navy2)}
.btn-teal{background:var(--teal);color:white}.btn-teal:hover{background:var(--teal2)}
.btn-success{background:#dcfce7;color:#166534;border:1.5px solid #86efac}
.btn-warning{background:#fef3c7;color:#92400e;border:1.5px solid #fcd34d}
.btn-danger{background:#fef2f2;color:#b91c1c;border:1.5px solid #fecaca}
.btn-ghost{background:white;color:#64748b;border:1.5px solid #e2e8f0}.btn-ghost:hover{background:#f8fafc}
.btn-sm{padding:.3rem .65rem;font-size:.68rem}.btn-xs{padding:.15rem .45rem;font-size:.62rem}
.form-group{margin-bottom:.875rem}
.form-label{display:block;font-size:.68rem;font-weight:700;color:#64748b;margin-bottom:.3rem}
.form-control{width:100%;padding:.5rem .75rem;border:1.5px solid #e2e8f0;border-radius:.5rem;font-size:.78rem;font-family:'Sarabun',sans-serif;color:#1e293b;outline:none;transition:.15s}
.form-control:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,145,178,.1)}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
textarea.form-control{resize:vertical}
.table{width:100%!important;min-width:100%;border-collapse:collapse;font-size:.76rem}
.table th{padding:.5rem .75rem;background:#f8fafc;color:#64748b;font-weight:700;font-size:.67rem;border-bottom:2px solid #e2e8f0;white-space:nowrap;text-align:left}
.table td{padding:.5rem .75rem;border-bottom:1px solid #f1f5f9;vertical-align:middle;text-align:left}
.table-hover tr:hover td{background:#fafafa}.table-bordered td,.table-bordered th{border:1px solid #e2e8f0}
.badge{display:inline-flex;align-items:center;padding:.15rem .55rem;border-radius:1rem;font-size:.62rem;font-weight:800}
.badge-draft{background:#f1f5f9;color:#64748b}.badge-submitted{background:#fef9c3;color:#92400e}
.badge-head_reviewed{background:#fef3c7;color:#b45309}.badge-director_approved{background:#dcfce7;color:#166534}
.badge-locked{background:#e0f2fe;color:#0369a1}.badge-rejected{background:#fee2e2;color:#b91c1c}
.alert{padding:.7rem 1rem;border-radius:.5rem;font-size:.78rem;margin-bottom:.75rem}
.alert-success{background:#f0fdf4;color:#166534;border-left:4px solid #22c55e}
.alert-danger{background:#fef2f2;color:#b91c1c;border-left:4px solid #ef4444}
.alert-warning{background:#fffbeb;color:#92400e;border-left:4px solid #f59e0b}
.alert-info{background:#eff6ff;color:#1d4ed8;border-left:4px solid #3b82f6}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1.25rem}
.stat-card{background:white;border-radius:.75rem;padding:.875rem;box-shadow:0 1px 3px rgba(0,0,0,.07);border-left:4px solid transparent}
.stat-val{font-size:1.4rem;font-weight:800;line-height:1.1}.stat-lbl{font-size:.63rem;color:#94a3b8;margin-top:.25rem}
.steps{display:flex;gap:0;margin-bottom:1.25rem}

/* Thai numerals: web shows Arabic, print shows Thai */
.thai-web{display:inline}
.thai-print{display:none}
@media print{
  .thai-web{display:none}
  .thai-print{display:inline}
}
.step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.step:not(:last-child)::after{content:'';position:absolute;top:13px;left:50%;width:100%;height:2px;background:#e2e8f0;z-index:0}
.step.done::after,.step.active::after{background:var(--teal)}
.step-dot{width:26px;height:26px;border-radius:50%;border:2px solid #e2e8f0;background:white;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;color:#94a3b8;position:relative;z-index:1;transition:.2s}
.step.done .step-dot{background:var(--teal);border-color:var(--teal);color:white}
.step.active .step-dot{border-color:var(--teal);color:var(--teal)}
.step-label{font-size:.58rem;font-weight:600;color:#94a3b8;margin-top:.3rem;text-align:center}
.step.active .step-label{color:var(--navy)}.step.done .step-label{color:var(--teal)}
.progress{background:#f1f5f9;border-radius:.5rem;height:.4rem;overflow:hidden}
.progress-bar{height:100%;border-radius:.5rem;transition:width .6s ease}
.tabs{display:flex;gap:.2rem;background:#f1f5f9;padding:.3rem;border-radius:.75rem;margin-bottom:1.25rem}
.tab{flex:1;padding:.45rem .4rem;text-align:center;border-radius:.5rem;cursor:pointer;font-size:.7rem;font-weight:700;color:#94a3b8;transition:.15s;border:none;background:none;font-family:'Sarabun',sans-serif}
.tab.active,.tab:hover.active{background:white;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.modal-backdrop{display:none;position:fixed;top:0;left:14rem;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:300;align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
.modal-backdrop.show{display:flex}
.modal-dialog{background:white;border-radius:1rem;width:100%;max-width:680px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-dialog>form{display:flex;flex-direction:column;flex:1;min-height:0}
.modal-header{padding:.875rem 1.25rem;background:var(--navy);color:white;border-radius:1rem 1rem 0 0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.modal-body{padding:1.25rem;overflow-y:auto;flex:1}
.modal-footer{padding:.875rem 1.25rem;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end;gap:.5rem;background:white;flex-shrink:0}
.btn-close{background:none;border:none;color:rgba(255,255,255,.6);font-size:1.1rem;cursor:pointer;line-height:1}
.btn-close:hover{color:white}
.text-right{text-align:right}.text-center{text-align:center}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.text-sm{font-size:.78rem}.text-xs{font-size:.7rem}.text-gray{color:#94a3b8}.text-muted{color:#64748b}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}
.w-full{width:100%}.rounded{border-radius:.375rem}.rounded-lg{border-radius:.625rem}
.border{border:1px solid #e2e8f0}.border-b{border-bottom:1px solid #e2e8f0}
.hidden{display:none!important}.print-only{display:none!important}
.scoreradio{display:flex;gap:.25rem}
.scoreradio label{width:34px;height:34px;border-radius:.45rem;border:2px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#94a3b8;cursor:pointer;transition:.15s;user-select:none}
.scoreradio input{display:none}
.scoreradio input:checked+label{background:var(--teal);border-color:var(--teal);color:white}
.scoreradio.dir input:checked+label{background:#f59e0b;border-color:#f59e0b;color:white}
@media print{.sidebar,.sidebar-wrapper,.no-print,.btn,.sidebar-toggle{display:none!important}.ml-56{margin-left:0}.main{margin-left:0!important}.page-wrap{padding:0!important;max-width:none}.card{box-shadow:none!important;border:none!important;background:transparent!important;border-radius:0!important}div[style*="border"]{border:none!important}.print-only{display:block!important;visibility:visible!important}
.table{border:1px solid #333!important}.table th,.table td{border:1px solid #333!important;background:white!important}
@page{size:A4;margin:1.5cm 2cm 1.5cm 1.5cm}
body{background:white!important;font-size:11pt!important;line-height:1.6}
.sec-head{font-size:11pt;font-weight:700;color:black;background:transparent;border:1px solid #333!important;border-radius:0;padding:.5rem .75rem}
.badge-submitted,.badge-draft,.badge-approved{background:transparent!important;color:black!important;border:1px solid #333!important}
}

/* ── Topbar (layout shell) ───────────────────────────── */
.topbar{background:white;border-bottom:1px solid #e2e8f0;padding:.75rem 1.375rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40}
.topbar-left{display:flex;align-items:center;gap:.75rem}
.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:.5rem;border:1px solid #e2e8f0;background:white;color:#64748b;cursor:pointer;transition:.2s;flex-shrink:0}
.sidebar-toggle:hover{background:#f8fafc;color:var(--navy);border-color:var(--teal)}
.sidebar-toggle svg{transition:transform .3s ease}
.sidebar-toggle.active svg{transform:rotate(180deg)}
.topbar-title{font-size:1rem;font-weight:800;color:var(--navy)}
.topbar-sub{font-size:.68rem;color:#94a3b8;margin-top:1px}
/* Shell wrapper */
.shell{display:flex;min-height:100vh}
/* Sidebar  */
.sidebar-wrapper{width:14rem;background:var(--navy);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:100;transition:width .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.sidebar-wrapper.collapsed{width:0;transform:translateX(-100%);opacity:0}
.sidebar-wrapper.collapsed .sb-brand,
.sidebar-wrapper.collapsed .sb-nav,
.sidebar-wrapper.collapsed .sb-foot{opacity:0;transition:opacity .15s}
.sb-brand{padding:1rem;border-bottom:1px solid rgba(255,255,255,.07);transition:opacity .2s .1s}
.sb-logo{display:inline-block;background:var(--teal);color:white;font-weight:900;font-size:.75rem;padding:.25rem .75rem;border-radius:.45rem;margin-bottom:.5rem;letter-spacing:.03em}
.sb-brand p{color:rgba(255,255,255,.4);font-size:.65rem;line-height:1.4}
.sb-nav{flex:1;padding:.75rem .5rem;transition:opacity .2s .1s}
.sb-grp{color:rgba(255,255,255,.22);font-size:.58rem;font-weight:800;letter-spacing:1.2px;padding:0 .5rem;margin:.75rem 0 .25rem;text-transform:uppercase;white-space:nowrap;overflow:hidden;transition:opacity .2s}
.sidebar-wrapper.collapsed .sb-grp{opacity:0}
.sb-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-radius:.5rem;color:rgba(255,255,255,.48);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);border:none;background:none;width:100%;text-align:left;font-family:'Sarabun',sans-serif;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden}
.sb-item:hover{background:rgba(8,145,178,.2);color:var(--teal2);transform:translateX(8px) scale(1.02);box-shadow:0 4px 12px rgba(8,145,178,.25),0 2px 4px rgba(0,0,0,.1)}
.sb-item:hover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal);border-radius:0 .25rem .25rem 0;animation:slideIn .25s ease}
.sb-item.active,.sb-item.on{background:rgba(8,145,178,.18);color:var(--teal2);border-left:3px solid var(--teal)}
.sb-item:active{transform:translateX(4px) scale(.98)}
@keyframes slideIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes floatOut{from{transform:translateX(0)}to{transform:translateX(8px)}}
.sb-item .ic{font-size:.875rem;width:1.125rem;text-align:center;flex-shrink:0}
.sb-bdg{background:rgba(239,68,68,.2);color:#f87171;font-size:.55rem;font-weight:800;padding:.1rem .375rem;border-radius:.625rem;margin-left:auto;flex-shrink:0;transition:transform .2s,opacity .2s}
.sb-item:hover .sb-bdg{transform:scale(1.05)}
.sb-foot{padding:.625rem .5rem;border-top:1px solid rgba(255,255,255,.07);transition:opacity .2s .1s}
.sb-user{display:flex;align-items:center;gap:.5rem;padding:.4rem .625rem;transition:opacity .2s}
.u-n{color:white;font-size:.7rem;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.u-r{color:rgba(255,255,255,.35);font-size:.62rem}
.av{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.logout-btn{display:flex;align-items:center;gap:.45rem;padding:.375rem .625rem;color:rgba(255,255,255,.3);font-size:.68rem;cursor:pointer;border-radius:.45rem;margin-top:.125rem;transition:.15s;border:none;background:none;width:100%;font-family:'Sarabun',sans-serif;white-space:nowrap}
.logout-btn:hover{color:#f87171;background:rgba(248,113,113,.08)}
/* Main content transition - ensure margin for sidebar */
.main{margin-left:14rem;transition:margin-left .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:1;min-height:100vh;width:100%;min-width:0;flex:1;display:flex;flex-direction:column}
.main.sidebar-collapsed{margin-left:0}
/* page-wrap */
.page-wrap{padding:1.25rem 1.375rem;flex:1;width:100%;max-width:none}
/* notice banner */
.notice-banner{background:linear-gradient(135deg,#0c1a2e,#164e63);color:white;border-radius:.75rem;padding:.875rem 1.125rem;margin-bottom:1rem;display:flex;align-items:center;gap:.875rem}
/* Modal Form Grid */
.modal-body .grid-2,.modal-body .grid-3{display:grid;gap:1rem;margin-bottom:1rem}
.modal-body .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.modal-body .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:960px){.modal-body .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.modal-body .grid-2,.modal-body .grid-3{grid-template-columns:1fr}}
@media(max-width:768px){.modal-backdrop{left:0}}
.modal-body .form-group{width:100%}
.modal-body .form-group label{display:block;margin-bottom:.25rem;font-size:12px;font-weight:600;color:#475569}
.modal-body .form-control{width:100%;min-width:0;box-sizing:border-box}