@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{font-family:"Noto Sans Thai",system-ui,sans-serif;color:#162238;background:#f2f6fb;font-synthesis:none;--blue:#2477ee;--navy:#0b1730;--cyan:#2ab8df;--line:#dce5f1;--muted:#6e7d92}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 0,rgba(48,144,255,.12),transparent 32%),#f2f6fb}button,input,select,textarea{font:inherit}button,a{transition:.18s ease}button{cursor:pointer}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 15% 15%,rgba(50,137,255,.22),transparent 28%),linear-gradient(145deg,#071226,#0c1d3a)}.login-card{width:min(440px,100%);display:grid;gap:17px;padding:32px;border-radius:24px;background:#fff;box-shadow:0 28px 80px rgba(0,7,24,.35)}.login-card h1{margin:3px 0;text-align:center;font-size:27px}.login-card .eyebrow,.login-card .muted{text-align:center}.brand{display:flex;align-items:center;gap:11px;font-weight:800}.brand.center{justify-content:center}.brand-logo{width:48px;height:48px;padding:8px;border-radius:14px;display:grid;place-items:center;background:#fff;box-shadow:0 8px 22px rgba(36,119,238,.18)}.brand-logo img{width:100%;height:100%;object-fit:contain}.brand small{display:block;color:#7890b4;font-size:8px;letter-spacing:2px}.eyebrow{margin:0 0 4px;color:#2477ee;font-size:10px;font-weight:800;letter-spacing:2px}.muted{margin:0;color:var(--muted);font-size:13px}.login-card label,.request-form label,.admin-controls label{display:grid;gap:6px;font-size:13px;font-weight:700}input,select,textarea{width:100%;border:1px solid #cfd9e7;border-radius:11px;background:#fff;color:#172238;padding:12px 13px;outline:none}input:focus,select:focus,textarea:focus{border-color:#6da7f6;box-shadow:0 0 0 3px rgba(36,119,238,.1)}textarea{resize:vertical}.primary{border:0;border-radius:12px;padding:13px 18px;color:#fff;background:linear-gradient(135deg,#2268e8,#29a4ef);font-weight:800}.primary:hover{filter:brightness(1.06)}.primary:disabled{opacity:.6}.secondary,.top-actions button,.top-actions a,.admin-controls button,.history-heading input{border:1px solid #cfdae9;border-radius:10px;padding:9px 12px;color:#29405f;background:#fff;text-decoration:none;font-weight:700}.text-button{border:0;background:none;color:#3075d4;padding:0}.login-links{display:flex;justify-content:space-between;gap:12px;font-size:12px}.login-links a{color:#3075d4;text-decoration:none}.notice{padding:11px 13px;border-radius:10px;margin:0;font-size:13px}.notice.error{color:#b42318;background:#fff0f0}.notice.success{color:#087a3f;background:#e8fbf0}.app-shell,.admin-shell{width:min(1440px,calc(100% - 40px));margin:auto;padding:24px 0 0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:18px;border-bottom:1px solid #dce5f0}.topbar h1{margin:0 0 3px;font-size:30px}.topbar small{color:var(--muted)}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.top-actions button:hover,.top-actions a:hover,.secondary:hover{border-color:#7badef;color:#1762c7}.user-pill{padding:8px 11px;border-radius:99px;background:#e9f3ff;color:#185fbf;font-weight:800;font-size:12px}.hero{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:38px 0 25px}.hero h1{margin:4px 0 4px;font-size:38px}.hero p:not(.eyebrow){margin:0;color:var(--muted)}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}.summary-grid article{display:grid;gap:4px;padding:17px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(31,63,104,.05)}.summary-grid span,.summary-grid small{color:var(--muted);font-size:12px}.summary-grid b{font-size:24px}.staff-grid{display:grid;grid-template-columns:minmax(330px,.85fr) minmax(0,1.4fr);gap:18px}.panel{padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 15px 40px rgba(31,63,104,.06)}.panel-title{display:flex;align-items:flex-start;gap:11px;margin-bottom:19px}.panel-title>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:#2477ee;background:#eaf3ff;font-size:20px;font-weight:800}.panel-title h2{margin:0;font-size:20px}.panel-title p{margin:2px 0 0;color:var(--muted);font-size:12px}.request-form{display:grid;gap:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.optional{color:#8896aa;font-weight:500}.upload-box{position:relative;display:grid;place-items:center;gap:3px;padding:19px;border:2px dashed #bdcadc;border-radius:14px;color:#41628e;text-align:center}.upload-box b{font-size:26px}.upload-box small,.upload-box em{color:#8391a5;font-size:11px;font-style:normal}.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer}.history-heading{align-items:center}.history-heading>label{margin-left:auto;font-size:11px}.history-heading input{padding:7px 9px}.history-list,.admin-request-list,.urgent-list{display:grid;gap:10px}.history-item{display:grid;grid-template-columns:minmax(150px,1.4fr) 100px 120px;gap:12px;align-items:center;padding:14px;border:1px solid #e0e7f0;border-left:5px solid #e5a92c;border-radius:13px}.history-item.approved{border-left-color:#3099e8}.history-item.rejected{border-left-color:#dc4c50}.history-item.ordered{border-left-color:#765ddd}.history-item.completed{border-left-color:#16a765}.history-item h3{margin:0;font-size:15px}.history-item p,.history-item small{margin:2px 0 0;color:var(--muted);font-size:11px}.status{display:inline-flex;width:max-content;padding:6px 9px;border-radius:99px;font-size:11px;font-weight:800}.status-pending{background:#fff4d6;color:#885c00}.status-approved{background:#e3f3ff;color:#1766a8}.status-rejected{background:#ffe5e5;color:#b42318}.status-ordered{background:#eee9ff;color:#5c43b5}.status-completed{background:#ddf8e9;color:#087a3f}.urgency{font-size:11px;font-weight:800}.urgency-out{color:#b42318}.urgency-urgent{color:#a56b00}.history-actions{display:flex;gap:6px;flex-wrap:wrap}.history-actions button,.history-actions a{border:1px solid #d3deeb;border-radius:8px;padding:6px 8px;background:#fff;color:#2d5c98;text-decoration:none;font-size:10px}.empty,.loading{padding:32px;text-align:center;color:#8290a3}.toast{position:fixed;z-index:1000;top:20px;right:20px;width:min(390px,calc(100% - 40px));padding:14px 16px;border-radius:13px;color:#fff;background:#243650;box-shadow:0 18px 45px rgba(20,35,60,.25);font-weight:700}.toast.success{background:#087a3f}.toast.error{background:#b42318}.toast.new{background:linear-gradient(135deg,#1767d3,#24a4e9)}footer{padding:30px;text-align:center;color:#8794a6;font-size:11px}.admin-page{background:#f3f6fa}.admin-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:20px 0}.admin-controls label{min-width:150px}.admin-controls label:nth-child(3){min-width:230px;flex:1}.admin-controls small{width:100%;text-align:right;color:var(--muted)}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.category-chart{display:grid;gap:12px}.chart-row{display:grid;grid-template-columns:130px 1fr 90px;gap:10px;align-items:center;font-size:12px}.chart-bar{height:9px;border-radius:99px;background:#e8eef6;overflow:hidden}.chart-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2477ee,#2fc2df)}.chart-row b{text-align:right}.urgent-item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;border:1px solid #efd6af;border-radius:11px;background:#fffaf1}.urgent-item strong{font-size:13px}.urgent-item small{color:var(--muted)}.admin-request{display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(140px,.9fr) 130px minmax(260px,1.4fr);gap:13px;align-items:center;padding:14px;border:1px solid #e0e7f0;border-radius:14px}.admin-request.pending{border-left:5px solid #e5a92c}.admin-request.approved{border-left:5px solid #3099e8}.admin-request.rejected{border-left:5px solid #dc4c50}.admin-request.ordered{border-left:5px solid #765ddd}.admin-request.completed{border-left:5px solid #16a765}.admin-request h3{margin:0;font-size:15px}.admin-request p,.admin-request small{margin:2px 0;color:var(--muted);font-size:11px}.request-actions{display:flex;gap:6px;flex-wrap:wrap}.request-actions button,.request-actions a{border:1px solid #cfdae8;border-radius:8px;padding:7px 9px;background:#fff;color:#284e7d;text-decoration:none;font-size:11px}.request-actions .approve{color:#087a3f;border-color:#9bd7b5}.request-actions .reject{color:#b42318;border-color:#efb3b5}.request-actions .order{color:#5c43b5;border-color:#c8baf6}.request-actions .complete{color:#087a3f;border-color:#9bd7b5}.cost{color:#087a3f;font-weight:800}
@media(max-width:1050px){.staff-grid,.admin-grid{grid-template-columns:1fr}.admin-request{grid-template-columns:1fr 1fr}.summary-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.app-shell,.admin-shell{width:min(100% - 24px,620px);padding-top:14px}.topbar{align-items:flex-start;display:grid}.top-actions{justify-content:flex-start}.topbar h1{font-size:25px}.hero{align-items:flex-start;padding:25px 0 18px}.hero h1{font-size:31px}.hero p:not(.eyebrow){font-size:12px}.hero .secondary{display:none}.summary-grid{gap:8px}.summary-grid article{padding:13px}.summary-grid b{font-size:19px}.panel{padding:16px;border-radius:17px}.form-row{grid-template-columns:1fr}.history-heading{display:grid;grid-template-columns:38px 1fr}.history-heading>label{grid-column:1/-1;margin:0}.history-item,.admin-request{grid-template-columns:1fr}.admin-controls{display:grid;grid-template-columns:1fr 1fr}.admin-controls label,.admin-controls label:nth-child(3){min-width:0}.admin-controls label:nth-child(3),.admin-controls button,.admin-controls small{grid-column:1/-1}.chart-row{grid-template-columns:100px 1fr 75px}.login-card{padding:25px}.login-links{display:grid;text-align:center}}