:root{--uob-dark-navy: #06162d;--uob-navy: #0B2F64;--uob-navy-light: #163666;--uob-blue: #0056b3;--uob-blue-glow: rgba(0, 86, 179, .35);--uob-gold: #E2B808;--uob-gold-glow: rgba(226, 184, 8, .3);--uob-light-gray: #f8fafc;--text-white: #ffffff;--text-gray-light: #94a3b8;--text-gray-dark: #334155;--success: #10b981;--success-glow: rgba(16, 185, 129, .25);--warning: #f59e0b;--warning-glow: rgba(245, 158, 11, .25);--danger: #ef4444;--danger-glow: rgba(239, 68, 68, .25);--bg-gradient: linear-gradient(135deg, #020914 0%, #06162d 50%, #0b2244 100%);--glass-bg: rgba(11, 35, 68, .35);--glass-border: rgba(255, 255, 255, .08);--glass-glow: rgba(226, 184, 8, .05)}*{margin:0;padding:0;box-sizing:border-box;font-family:Sarabun,Outfit,sans-serif;scrollbar-width:thin;scrollbar-color:var(--uob-navy-light) transparent}body{background:var(--bg-gradient);background-attachment:fixed;color:var(--text-white);min-height:100vh;overflow-x:hidden;font-size:15px;line-height:1.6}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:var(--uob-navy-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--uob-blue)}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 8px 32px #0000005e;transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-panel:hover{border-color:#ffffff26;box-shadow:0 12px 40px #00000073}.glass-card-gold{position:relative;overflow:hidden}.glass-card-gold:after{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--uob-blue),var(--uob-gold))}.app-header{border-bottom:1px solid var(--glass-border);background:#040f21cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}.nav-container{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo-container{display:flex;align-items:center;gap:12px}.logo-icon{width:40px;height:40px;background:var(--uob-navy);border:2px solid var(--uob-gold);border-radius:8px;display:flex;align-items:center;justify-content:center}.logo-text h1{font-size:1.25rem;font-weight:700;letter-spacing:.5px;background:linear-gradient(135deg,#ffffff 50%,var(--uob-gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:6px}.logo-text p{font-size:.75rem;color:var(--text-gray-light);letter-spacing:1px}.nav-tabs{display:flex;gap:8px}.nav-btn{background:transparent;border:1px solid transparent;color:var(--text-gray-light);padding:8px 18px;border-radius:8px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease}.nav-btn:hover{color:var(--text-white);background:#ffffff0d}.nav-btn.active{color:var(--text-white);background:var(--uob-navy);border-color:#e2b80866;box-shadow:0 0 15px #e2b8081a}.user-badge{display:flex;align-items:center;gap:8px;background:#e2b80814;border:1px solid rgba(226,184,8,.25);padding:6px 14px;border-radius:20px;color:var(--uob-gold);font-weight:500;font-size:.85rem;cursor:pointer;transition:all .2s ease}.user-badge:hover{background:#e2b80826}.main-content{max-width:1400px;margin:0 auto;padding:2rem}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-bottom:2rem}.kpi-card{padding:1.5rem;display:flex;flex-direction:column;gap:10px;position:relative}.kpi-header{display:flex;justify-content:space-between;align-items:center;color:var(--text-gray-light);font-size:.85rem;font-weight:500}.kpi-value{font-size:1.8rem;font-weight:700;color:var(--text-white);font-family:Outfit,sans-serif;line-height:1.2}.kpi-value-thai{font-family:Sarabun,sans-serif}.kpi-trend{font-size:.8rem;display:flex;align-items:center;gap:4px}.trend-up{color:var(--success)}.trend-warning{color:var(--warning)}.trend-info{color:var(--uob-gold)}.dashboard-row{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;margin-bottom:2rem}@media (max-width: 1024px){.dashboard-row{grid-template-columns:1fr}}.chart-container{padding:1.5rem;min-height:350px;display:flex;flex-direction:column;gap:1rem}.chart-title{font-size:1.05rem;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--text-white)}.chart-wrapper{flex-grow:1;width:100%;height:280px}.filter-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;padding:1.25rem;margin-bottom:1.5rem;align-items:end}.search-input-wrapper{grid-column:span 2;position:relative}@media (max-width: 768px){.search-input-wrapper{grid-column:span 1}}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-size:.8rem;color:var(--text-gray-light);font-weight:500}.text-input{width:100%;background:#040f2199;border:1px solid var(--glass-border);padding:10px 14px 10px 40px;border-radius:8px;color:var(--text-white);outline:none;transition:all .2s ease;font-size:.9rem}.text-input:focus{border-color:var(--uob-gold);box-shadow:0 0 10px var(--uob-gold-glow)}.search-icon-inline{position:absolute;left:14px;top:36px;color:var(--text-gray-light);pointer-events:none}.select-input{width:100%;background:#040f2199;border:1px solid var(--glass-border);padding:10px 14px;border-radius:8px;color:var(--text-white);outline:none;cursor:pointer;transition:all .2s ease;font-size:.9rem}.select-input:focus{border-color:var(--uob-gold)}.select-input option{background:var(--uob-dark-navy);color:var(--text-white);padding:10px}.table-container{overflow-x:auto;border-radius:12px}.branch-table{width:100%;border-collapse:collapse;text-align:left;font-size:.9rem}.branch-table th{background:#0b2344b3;padding:14px 16px;font-weight:600;color:var(--text-gray-light);border-bottom:1px solid var(--glass-border);font-size:.8rem;letter-spacing:.5px;text-transform:uppercase}.branch-table td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}.branch-table tr{transition:all .2s ease}.branch-table tr:hover{background:#ffffff05}.badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;display:inline-flex;align-items:center;gap:4px}.badge-pending{background:#94a3b81f;border:1px solid rgba(148,163,184,.3);color:var(--text-gray-light)}.badge-progress{background:#f59e0b1f;border:1px solid rgba(245,158,11,.3);color:var(--warning)}.badge-completed{background:#10b9811f;border:1px solid rgba(16,185,129,.3);color:var(--success)}.task-mini-indicators{display:flex;gap:6px}.task-dot{width:8px;height:8px;border-radius:50%;background:#94a3b833;position:relative}.task-dot.done{background:var(--success);box-shadow:0 0 6px var(--success)}.task-tooltip-trigger:hover:after{content:attr(data-tooltip);position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:4px 8px;border-radius:4px;font-size:.7rem;white-space:nowrap;z-index:10}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#020914bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:200;display:flex;justify-content:center;align-items:center;padding:1rem}.modal-content{width:100%;max-width:580px;max-height:90vh;overflow-y:auto;padding:2rem;display:flex;flex-direction:column;gap:1.5rem}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,white 60%,var(--uob-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.modal-close-btn{background:transparent;border:none;color:var(--text-gray-light);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.modal-close-btn:hover{color:var(--text-white)}.auth-grid{display:grid;gap:1rem;margin-top:1rem}.pin-display{display:flex;justify-content:center;gap:12px;margin:1rem 0}.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--text-gray-light);transition:all .15s ease}.pin-dot.filled{background:var(--uob-gold);border-color:var(--uob-gold);box-shadow:0 0 10px var(--uob-gold)}.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:260px;margin:0 auto}.pin-btn{height:52px;border-radius:50%;background:#ffffff0d;border:1px solid var(--glass-border);color:var(--text-white);font-size:1.25rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.pin-btn:hover{background:var(--uob-navy);border-color:var(--uob-gold)}.pin-btn-action{font-size:.9rem;background:transparent;border:none}.pin-btn-action:hover{background:#ffffff14}.task-form-list{display:flex;flex-direction:column;gap:12px}.task-form-item{display:flex;align-items:center;justify-content:space-between;background:#ffffff08;border:1px solid var(--glass-border);padding:14px 18px;border-radius:10px;cursor:pointer;transition:all .2s ease}.task-form-item:hover{background:#ffffff0f;border-color:#ffffff26}.task-form-item.checked{border-color:#10b98159;background:#10b9810f}.checkbox-custom{width:22px;height:22px;border-radius:6px;border:2px solid var(--text-gray-light);display:flex;align-items:center;justify-content:center;transition:all .2s ease}.task-form-item.checked .checkbox-custom{background:var(--success);border-color:var(--success);color:#fff}.audit-details{background:#040f2180;border:1px solid var(--glass-border);border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}.audit-line{font-size:.8rem;color:var(--text-gray-light);display:flex;align-items:center;gap:6px}.audit-user{color:var(--uob-gold);font-weight:600}.btn-primary{background:linear-gradient(135deg,var(--uob-navy) 0%,var(--uob-blue) 100%);border:1px solid rgba(226,184,8,.3);color:var(--text-white);padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.btn-primary:hover{border-color:var(--uob-gold);box-shadow:0 0 15px var(--uob-blue-glow)}.btn-secondary{background:#ffffff0d;border:1px solid var(--glass-border);color:var(--text-white);padding:10px 20px;border-radius:8px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.btn-secondary:hover{background:#ffffff14}.calendar-view{display:grid;grid-template-columns:1fr;gap:1.5rem}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}@media (max-width: 768px){.calendar-grid{grid-template-columns:repeat(3,1fr)}}.calendar-day-header{text-align:center;font-weight:600;color:var(--text-gray-light);font-size:.8rem;padding:8px 0}.calendar-cell{min-height:100px;padding:8px;display:flex;flex-direction:column;gap:6px;background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:8px;transition:all .2s ease}.calendar-cell:hover{background:#ffffff0a;border-color:#ffffff14}.calendar-cell.today{border-color:#e2b80866;background:#e2b8080a}.calendar-date-num{font-family:Outfit,sans-serif;font-size:.85rem;font-weight:500;color:var(--text-gray-light)}.calendar-cell.today .calendar-date-num{color:var(--uob-gold);font-weight:700}.calendar-events{display:flex;flex-direction:column;gap:4px;overflow-y:auto;max-height:80px}.calendar-event-item{font-size:.7rem;padding:2px 6px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.calendar-event-pending{background:#94a3b81f;border-left:3px solid var(--text-gray-light);color:var(--text-gray-light)}.calendar-event-progress{background:#f59e0b1f;border-left:3px solid var(--warning);color:var(--warning)}.calendar-event-completed{background:#10b9811f;border-left:3px solid var(--success);color:var(--success)}