@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap";:root{--primary:#da3830;--primary-dark:#b82720;--primary-light:#fdf2f1;--accent:#da3830;--accent-light:#fdf2f1;--secondary:#6b7280;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--danger-light:#fef2f2;--bg-page:#fafafa;--bg-card:#fff;--bg-sidebar:#fff;--border:#e5e7eb;--border-focus:#da3830;--text-main:#111827;--text-muted:#6b7280;--text-light:#9ca3af;--shadow-xs:0 1px 2px #0000000d;--shadow-sm:0 1px 3px #00000012, 0 1px 2px #0000000a;--shadow:0 4px 6px #0000000d, 0 2px 4px #0000000a;--shadow-lg:0 10px 15px #00000012, 0 4px 6px #0000000d;--shadow-xl:0 20px 25px #0000000f, 0 10px 10px #0000000a;--radius-sm:.375rem;--radius:.625rem;--radius-lg:.875rem;--radius-xl:1.25rem;--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;--sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--space-1:var(--sp-1);--space-2:var(--sp-2);--space-3:var(--sp-3);--space-4:var(--sp-4);--space-6:var(--sp-6);--space-8:var(--sp-8);--space-10:var(--sp-10);--font-main:"Outfit", "Sarabun", system-ui, sans-serif;--sidebar-width:15rem;--content-max:72rem;--ease:cubic-bezier(.4, 0, .2, 1);--dur-fast:.12s;--dur:.22s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}html,body{max-width:100%;overflow-x:hidden}body{font-family:var(--font-main);background:var(--bg-page);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;line-height:1.6}#root{min-height:100dvh;display:flex}.app-layout{width:100%;min-height:100dvh;display:flex}.main-content{background:var(--bg-page);flex:1;min-height:100dvh;overflow-x:hidden}@media (width>=64rem){.main-content{margin-left:var(--sidebar-width)}}.page-content{width:100%;max-width:var(--content-max);padding:var(--sp-8) var(--sp-8);margin:0 auto}@media (width<=64rem){.page-content{padding:5rem var(--sp-4) var(--sp-6)}}@media (width<=48rem){.page-content{padding:4.5rem var(--sp-3) var(--sp-4)}}.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border);height:100dvh;padding:var(--sp-6) var(--sp-4);z-index:1000;transition:transform var(--dur) var(--ease);flex-direction:column;display:flex;position:fixed;top:0;left:0;overflow-y:auto}@media (width<=64rem){.sidebar{box-shadow:var(--shadow-xl);transform:translate(-100%)}.sidebar.open{transform:translate(0)}}.sidebar-overlay{z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0000004d;display:none;position:fixed;inset:0}@media (width<=64rem){.sidebar-overlay.show{display:block}}.sidebar-logo{text-align:center;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-5);border-bottom:1px solid var(--border);margin-bottom:var(--sp-4);flex-direction:column;display:flex}.sidebar-logo-icon{border-radius:var(--radius);color:#fff;letter-spacing:.03em;background:0 0;flex-shrink:0;justify-content:center;align-items:center;width:100%;height:auto;max-height:4rem;font-size:.875rem;font-weight:800;display:flex}.sidebar-logo-text{color:var(--text-main);font-size:1rem;font-weight:800;line-height:1.2}.sidebar-logo-sub{color:var(--text-muted);font-size:.6875rem;font-weight:400}.nav-section-label{text-transform:uppercase;letter-spacing:.09em;color:var(--text-light);padding:var(--sp-3) var(--sp-3) var(--sp-1);font-size:.6875rem;font-weight:700}.nav-link{align-items:center;gap:var(--sp-3);padding:.6875rem var(--sp-3);border-radius:var(--radius);color:var(--text-muted);transition:all var(--dur-fast) var(--ease);cursor:pointer;text-align:left;background:0 0;border:none;width:100%;min-height:2.75rem;font-size:.9375rem;font-weight:500;text-decoration:none;display:flex}.nav-link:hover{background:var(--primary-light);color:var(--primary)}.nav-link.active{background:var(--primary);color:#fff}.nav-link.active svg{color:#fff}.sidebar-footer{padding-top:var(--sp-4);border-top:1px solid var(--border);margin-top:auto}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}.card:hover{box-shadow:var(--shadow)}.card-clickable{cursor:pointer}.card-clickable:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn{justify-content:center;align-items:center;gap:var(--sp-2);min-height:2.75rem;padding:0 var(--sp-5);border-radius:var(--radius);font-family:var(--font-main);cursor:pointer;white-space:nowrap;transition:all var(--dur-fast) var(--ease);border:none;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-dark)}.btn-secondary{color:var(--text-main);border:1px solid var(--border);background:#fff}.btn-secondary:hover:not(:disabled){background:var(--primary-light);border-color:#9ca3af}.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover:not(:disabled){background:#1d4ed8}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-success{background:var(--success);color:#fff}.btn-success:hover:not(:disabled){background:#15803d}.btn-sm{min-height:2.125rem;padding:0 var(--sp-4);border-radius:var(--radius-sm);font-size:.875rem}.btn-lg{min-height:3.25rem;padding:0 var(--sp-8);font-size:1.0625rem}.form-group{flex-direction:column;gap:.375rem;display:flex}.form-label{color:var(--text-main);font-size:.9375rem;font-weight:600}.form-label.required:after{content:" *";color:var(--danger)}.form-hint{color:var(--text-muted);font-size:.8125rem}input:not([type=checkbox]):not([type=radio]),select,textarea{appearance:none;border:1.5px solid var(--border);padding:.6875rem var(--sp-4);border-radius:var(--radius);color:var(--text-main);font-family:var(--font-main);width:100%;min-height:2.75rem;transition:border-color var(--dur-fast), box-shadow var(--dur-fast);background:#fff;outline:none;font-size:.9375rem}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:#9ca3af}input:focus,select:focus,textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #11182714}input::placeholder,textarea::placeholder{color:var(--text-light)}option{color:var(--text-main);background:#fff}.form-row{gap:var(--sp-4);flex-wrap:wrap;display:flex}.form-row>*{flex:1 1 0;min-width:10rem}@media (width<=40rem){.form-row>*{flex:100%;min-width:0}}.section-title{color:var(--text-main);align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);font-size:.9375rem;font-weight:700;display:flex}.badge{white-space:nowrap;border-radius:6.25rem;align-items:center;gap:.3125rem;padding:.25rem .6875rem;font-size:.8125rem;font-weight:600;display:inline-flex}.badge-draft{color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb}.badge-pending{color:#854d0e;background:#fefce8;border:1px solid #fde68a}.badge-approved{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}.badge-broken{color:#c2410c;background:#fff7ed;border:1px solid #fed7aa}.badge-waiting{color:#6d28d9;background:#f5f3ff;border:1px solid #ddd6fe}.badge-repairing{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}.badge-completed{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}.badge-rejected{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.badge-overdue{background:var(--danger);color:#fff;border:none;animation:1.5s ease-in-out infinite pulse-red}@keyframes pulse-red{0%,to{box-shadow:0 0 #dc262659}50%{box-shadow:0 0 0 5px #dc262600}}.status-bar{width:100%;padding:var(--sp-2) 0;align-items:flex-start;display:flex}.status-step{flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.status-step:before{content:"";background:var(--border);z-index:0;width:100%;height:2px;position:absolute;top:.8125rem;left:50%;right:-50%}.status-step:last-child:before{display:none}.status-step.done:before{background:var(--primary)}.status-step.active:before{background:var(--border)}.step-dot{border:2px solid var(--border);z-index:1;width:1.625rem;height:1.625rem;transition:all var(--dur-fast) var(--ease);background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:.6875rem;font-weight:700;display:flex;position:relative}.status-step.done .step-dot{background:var(--primary);border-color:var(--primary);color:#fff}.status-step.active .step-dot{border-color:var(--primary);color:var(--primary);background:#fff;box-shadow:0 0 0 3px #1118271a}.status-step.rejected .step-dot{background:var(--danger);border-color:var(--danger);color:#fff}.step-label{color:var(--text-light);text-align:center;word-break:break-word;max-width:4.5rem;margin-top:.375rem;font-size:.625rem;font-weight:500;line-height:1.3}.status-step.done .step-label{color:var(--text-muted)}.status-step.active .step-label{color:var(--primary);font-weight:700}.page-header{justify-content:space-between;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap;display:flex}.page-title{color:var(--text-main);font-size:1.625rem;font-weight:800;line-height:1.2}.page-subtitle{color:var(--text-muted);margin-top:.25rem;font-size:.9375rem}hr{border:none;border-top:1px solid var(--border);margin:var(--sp-6) 0}.table-container{-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:48rem}th{text-align:left;padding:var(--sp-3) var(--sp-4);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);background:#f9fafb;font-size:.8125rem;font-weight:700}td{padding:var(--sp-4);border-bottom:1px solid var(--border);vertical-align:middle;font-size:.9375rem}tr:last-child td{border-bottom:none}tbody tr:hover td{background:#fafafa}.modal-overlay{-webkit-backdrop-filter:blur(4px);z-index:9999;padding:var(--sp-4);animation:fadeIn var(--dur-fast) var(--ease);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:38rem;max-height:90dvh;animation:slideUp var(--dur) var(--ease);background:#fff;overflow-y:auto}.modal-header{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border);z-index:1;background:#fff;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.modal-body{padding:var(--sp-6)}.modal-footer{gap:var(--sp-3);padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--border);justify-content:flex-end;display:flex}.toast-container{top:var(--sp-5);right:var(--sp-5);z-index:99999;gap:var(--sp-2);flex-direction:column;display:flex;position:fixed}.toast{padding:var(--sp-3) var(--sp-5);border-radius:var(--radius);color:#fff;box-shadow:var(--shadow-lg);min-width:17rem;max-width:24rem;animation:slideInRight var(--dur) var(--ease);border-left:4px solid #fff6;font-size:.9375rem;font-weight:600}.toast-success{background:#15803d}.toast-error{background:var(--danger)}.toast-info{background:var(--primary)}.skeleton{border-radius:var(--radius);background:linear-gradient(90deg,#f3f4f6 25%,#e9eaec 50%,#f3f4f6 75%) 0 0/200% 100%;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.overdue-card{background:#fff8f8!important;border-color:#fca5a5!important}.sticky-footer{padding:1rem var(--sp-6);border-top:1px solid var(--border);z-index:1000;gap:var(--sp-4);animation:slideUp .3s var(--ease);background:#fff;flex-wrap:wrap;justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -10px 25px -5px #0000001a}@media (width>=64rem){.sticky-footer{left:var(--sidebar-width);padding:1rem var(--sp-8)}}.auth-container{background:var(--bg-page);min-height:100dvh;padding:var(--sp-4);justify-content:center;align-items:center;display:flex}.auth-card{border-radius:var(--radius-xl);width:100%;max-width:26rem;padding:var(--sp-10);box-shadow:var(--shadow-xl);border:1px solid var(--border);animation:slideUp .35s var(--ease);background:#fff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(1.5rem)}to{opacity:1;transform:translate(0)}}.animate-fade{animation:fadeIn .3s var(--ease) both}.animate-slide{animation:slideUp .3s var(--ease) both}.hamburger{top:var(--sp-4);left:var(--sp-4);z-index:1001;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow);background:#fff;justify-content:center;align-items:center;min-width:2.75rem;min-height:2.75rem;padding:.5rem;display:none;position:fixed}@media (width<=64rem){.hamburger{display:flex}}.grid-2{gap:var(--sp-4);grid-template-columns:repeat(2,1fr);display:grid}.grid-3{gap:var(--sp-4);grid-template-columns:repeat(3,1fr);display:grid}.grid-4{gap:var(--sp-4);grid-template-columns:repeat(4,1fr);display:grid}@media (width<=56rem){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=36rem){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#9ca3af}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--text-muted);font-size:.875rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.flex-wrap{flex-wrap:wrap}.w-full{width:100%}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mb-2{margin-bottom:var(--sp-2)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}.p-4{padding:var(--sp-4)}.p-6{padding:var(--sp-6)}.p-8{padding:var(--sp-8)}@media print{@page{size:A4 portrait;margin:10mm}.print-wrapper table{min-width:0!important}.sidebar,.hamburger,.no-print,.toast-container,.sticky-footer{display:none!important}html,body{color:#000!important;background:#fff!important;overflow:visible!important}body *{visibility:hidden}.print-wrapper,.print-wrapper *{visibility:visible}.print-wrapper{box-sizing:border-box;position:absolute;top:0;left:0;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}.main-content{background:0 0!important;min-height:auto!important;margin:0!important;padding:0!important}.page-content{padding:0!important}.card{box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.badge{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color:#000!important;background:0 0!important;border:1px solid #000!important}.print-wrapper div[style*="background: rgb"]{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}}@media screen{.print-only{display:none!important}}