.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:#fff;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);z-index:var(--z-sticky)}@media (min-width: 768px){.header{left:var(--sidebar-width)}}.header-left{display:flex;align-items:center;gap:var(--space-3)}.header-menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-lg);color:var(--gray-600);transition:all var(--transition-base)}.header-menu-btn:hover{background:var(--gray-100)}@media (min-width: 768px){.header-menu-btn{display:none}}.header-title{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-800)}@media (min-width: 768px){.header-title{font-size:var(--font-size-xl)}}.header-right{display:flex;align-items:center;gap:var(--space-2)}.header-icon-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-lg);color:var(--gray-600);transition:all var(--transition-base)}.header-icon-btn:hover{background:var(--gray-100);color:var(--gray-800)}.header-notification{position:relative}.header-notification-badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;background:var(--error);color:#fff;font-size:10px;font-weight:600;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.header-user-btn{margin-left:var(--space-2);text-decoration:none;display:flex;align-items:center;transition:transform var(--transition-base)}.header-user-btn:hover{transform:scale(1.05)}.header-user-btn .avatar img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-full)}.header-user-btn .avatar span{font-size:var(--font-size-xs);font-weight:600}.sidebar-logout:hover{background:var(--error-50, #fef2f2);color:var(--error, #dc2626)}.sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;background:#fff;border-right:1px solid var(--gray-200);z-index:var(--z-modal);display:flex;flex-direction:column;transform:translate(-100%);transition:transform var(--transition-slow);overflow-y:auto}.sidebar-open{transform:translate(0)}@media (min-width: 768px){.sidebar{width:var(--sidebar-width);transform:translate(0);z-index:var(--z-sticky)}}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:var(--z-modal-backdrop);animation:fadeIn var(--transition-base) ease-out}@media (min-width: 768px){.sidebar-backdrop{display:none}}.sidebar-close{position:absolute;top:var(--space-3);right:var(--space-3);width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--gray-500);border-radius:var(--radius-lg);transition:all var(--transition-base)}.sidebar-close:hover{background:var(--gray-100);color:var(--gray-700)}@media (min-width: 768px){.sidebar-close{display:none}}.sidebar-logo{display:flex;align-items:center;justify-content:center;padding:var(--space-6) var(--space-4);border-bottom:1px solid var(--gray-100);text-decoration:none;transition:all var(--transition-base);cursor:pointer}.sidebar-logo:hover{background:var(--gray-50)}.sidebar-logo-img{max-width:100%;width:200px;height:auto;object-fit:contain;transition:transform var(--transition-base)}.sidebar-logo:hover .sidebar-logo-img{transform:scale(1.02)}.sidebar-nav{flex:1;padding:0 var(--space-3)}.sidebar-nav-section{margin-bottom:var(--space-6)}.sidebar-nav-label{display:block;padding:0 var(--space-3);margin-bottom:var(--space-2);font-size:var(--font-size-xs);font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em}.sidebar-nav-list{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar-nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);color:var(--gray-600);font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-base);width:100%;text-align:left}.sidebar-nav-item:hover{background:var(--gray-100);color:var(--gray-800)}.sidebar-nav-item.active{background:var(--primary-50);color:var(--primary-600)}.sidebar-nav-item.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--primary-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.sidebar-footer{padding:var(--space-4) var(--space-3);border-top:1px solid var(--gray-100);margin-top:auto}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-height);background:#fff;border-top:1px solid var(--gray-200);display:flex;align-items:stretch;z-index:var(--z-sticky);padding-bottom:env(safe-area-inset-bottom,0)}@media (min-width: 768px){.bottom-nav{display:none}}.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);color:var(--gray-500);font-size:10px;font-weight:500;transition:all var(--transition-base);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.bottom-nav-item:active{background:var(--gray-50)}.bottom-nav-item.active{color:var(--primary-600)}.bottom-nav-item.active svg{transform:scale(1.1)}.layout{min-height:100vh;min-height:100dvh}.main-content{padding-top:var(--header-height);padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0));min-height:100vh;min-height:100dvh}@media (min-width: 768px){.main-content{margin-left:var(--sidebar-width);padding-bottom:0}}.page-container{padding:var(--space-4);max-width:1400px;margin:0 auto}@media (min-width: 768px){.page-container{padding:var(--space-6)}}@media (min-width: 1024px){.page-container{padding:var(--space-8)}}.page-header{margin-bottom:var(--space-6)}.page-header-row{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-4)}@media (min-width: 640px){.page-header-row{flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}}.page-title{font-size:var(--font-size-xl);font-weight:700;color:var(--gray-800)}@media (min-width: 768px){.page-title{font-size:var(--font-size-2xl)}}.page-subtitle{font-size:var(--font-size-sm);color:var(--gray-500);margin-top:var(--space-1)}.clock-in-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0d1a2b99;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fadeIn .2s ease-out}.clock-in-modal{background:linear-gradient(135deg,#fffffff2,#ffffffe0);border-radius:var(--radius-2xl);box-shadow:0 25px 50px -12px #00000040,0 0 0 1px #fff3,inset 0 1px #ffffff80;width:100%;max-width:380px;overflow:hidden;animation:slideUp .3s cubic-bezier(.34,1.56,.64,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.clock-in-modal-header{background:var(--gradient-primary);padding:var(--space-5) var(--space-6);text-align:center;position:relative;overflow:hidden}.clock-in-modal-header:before{content:"";position:absolute;top:-50%;right:-30%;width:200px;height:200px;background:#ffffff1a;border-radius:50%}.clock-in-modal-title{color:#fff;font-size:var(--font-size-lg);font-weight:600;margin:0;position:relative;z-index:1}.clock-in-modal-subtitle{color:#fffc;font-size:var(--font-size-sm);margin-top:var(--space-1);position:relative;z-index:1}.clock-in-time-display{padding:var(--space-6);text-align:center;background:linear-gradient(180deg,rgba(61,115,162,.03) 0%,transparent 100%)}.clock-in-time{font-size:3.5rem;font-weight:700;color:var(--primary-700);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1;text-shadow:0 2px 4px rgba(30,58,95,.1)}.clock-in-date{font-size:var(--font-size-sm);color:var(--gray-500);margin-top:var(--space-2)}.clock-in-ip-note{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);margin:0 var(--space-6) var(--space-4);background:var(--gray-50);border-radius:var(--radius-lg);font-size:var(--font-size-sm);color:var(--gray-500)}.clock-in-ip-note svg{color:var(--accent-cyan)}.clock-in-modal-actions{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-6) var(--space-6)}.clock-in-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-xl);font-size:var(--font-size-base);font-weight:600;transition:all var(--transition-base);cursor:pointer;border:none}.clock-in-btn-cancel{background:var(--gray-100);color:var(--gray-600)}.clock-in-btn-cancel:hover{background:var(--gray-200)}.clock-in-btn-confirm{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 14px #1e3a5f4d}.clock-in-btn-confirm:hover{transform:translateY(-2px);box-shadow:0 6px 20px #1e3a5f66}.clock-in-btn-confirm:active{transform:translateY(0)}.clock-in-modal.clock-out .clock-in-modal-header{background:linear-gradient(135deg,#ec4899,#be185d)}.clock-in-modal.clock-out .clock-in-time{color:#be185d}.clock-in-modal.clock-out .clock-in-btn-confirm{background:linear-gradient(135deg,#ec4899,#be185d);box-shadow:0 4px 14px #be185d4d}.clock-in-modal.clock-out .clock-in-btn-confirm:hover{box-shadow:0 6px 20px #be185d66}.clock-in-work-summary{padding:var(--space-4) var(--space-6);background:linear-gradient(180deg,rgba(236,72,153,.05) 0%,transparent 100%);border-top:1px solid var(--gray-100)}.clock-in-work-summary-row{display:flex;justify-content:space-between;align-items:center}.clock-in-work-summary-label{font-size:var(--font-size-sm);color:var(--gray-500)}.clock-in-work-summary-value{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-800);font-variant-numeric:tabular-nums}.office-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}.office-card-header{display:flex;align-items:center;gap:12px}.office-card-icon-large{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));display:flex;align-items:center;justify-content:center;color:#fff}.office-card-title{flex:1;display:flex;align-items:center;gap:8px}.office-card-title h4{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}.office-hq-badge{padding:2px 8px;font-size:.65rem;font-weight:600;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;border-radius:6px;text-transform:uppercase}.office-card-body{display:flex;flex-direction:column;gap:8px;padding-left:4px}.office-info-item{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;color:var(--text-secondary)}.office-info-item svg{flex-shrink:0;margin-top:2px}.office-info-item a{color:var(--accent-primary);text-decoration:none}.office-info-item a:hover{text-decoration:underline}.office-nav-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border:none;border-radius:12px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;margin-top:4px}.office-nav-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #6366f166}.office-nav-btn:active{transform:translateY(0)}.office-card-compact{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--hover-bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.office-card-compact:hover{background:var(--border);transform:translateY(-1px)}.office-card-icon{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));display:flex;align-items:center;justify-content:center;color:#fff}.office-card-name{font-size:.85rem;font-weight:500;color:var(--text-primary);white-space:nowrap}.office-nav-icon{color:var(--accent-primary);margin-left:4px}.dashboard{display:flex;flex-direction:column;gap:var(--space-6)}.dashboard-welcome{background:var(--gradient-primary);border-radius:var(--radius-2xl);padding:var(--space-6);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--space-4)}@media (min-width: 768px){.dashboard-welcome{flex-direction:row;align-items:center;justify-content:space-between}}.dashboard-welcome:before{content:"";position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:#ffffff1a;border-radius:50%}.dashboard-welcome:after{content:"";position:absolute;bottom:-30%;left:10%;width:200px;height:200px;background:#ffffff0d;border-radius:50%}.dashboard-welcome-content{position:relative;z-index:1}.dashboard-welcome-title{font-size:var(--font-size-xl);font-weight:700;margin-bottom:var(--space-1)}@media (min-width: 768px){.dashboard-welcome-title{font-size:var(--font-size-2xl)}}.dashboard-welcome-subtitle{font-size:var(--font-size-sm);opacity:.9}.wave-icon{display:inline-block;vertical-align:middle;margin-left:var(--space-2);animation:wave 1.5s ease-in-out infinite;transform-origin:70% 70%}@keyframes wave{0%,to{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-4deg)}}.dashboard-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}@media (min-width: 768px){.dashboard-stats{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}}.stat-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-4);display:flex;align-items:center;gap:var(--space-3);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-icon{width:44px;height:44px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-card-primary .stat-icon{background:var(--primary-100);color:var(--primary-600)}.stat-card-purple .stat-icon{background:#8b5cf61a;color:#8b5cf6}.stat-card-pink .stat-icon{background:#ec48991a;color:#ec4899}.stat-card-orange .stat-icon{background:#f59e0b1a;color:#f59e0b}.stat-content{display:flex;flex-direction:column}.stat-value{font-size:var(--font-size-xl);font-weight:700;color:var(--gray-800);line-height:1.2}.stat-label{font-size:var(--font-size-xs);color:var(--gray-500)}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width: 768px){.dashboard-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}}.dashboard-card{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden}.dashboard-card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--gray-100)}.dashboard-card-title{display:flex;align-items:center;gap:var(--space-2);font-weight:600;color:var(--gray-800)}.dashboard-card-title svg{color:var(--primary-500)}.dashboard-card-link{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);color:var(--primary-600);font-weight:500;transition:all var(--transition-base)}.dashboard-card-link:hover{color:var(--primary-700)}.dashboard-card-body{padding:var(--space-4)}.empty-text{color:var(--gray-400);text-align:center;padding:var(--space-6);font-size:var(--font-size-sm)}.announcement-list{display:flex;flex-direction:column;gap:var(--space-3)}.announcement-item{padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-lg);transition:all var(--transition-base)}.announcement-item:hover{background:var(--gray-100)}.announcement-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.announcement-pin{color:var(--primary-500);display:flex}.announcement-priority{font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);text-transform:uppercase}.priority-high{background:#ef44441a;color:var(--error)}.priority-normal{background:var(--gray-200);color:var(--gray-600)}.announcement-title{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-800);margin-bottom:var(--space-1);line-height:1.4}.announcement-meta{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);color:var(--gray-500)}.event-list{display:flex;flex-direction:column;gap:var(--space-3)}.event-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-lg);transition:all var(--transition-base)}.event-item:hover{background:var(--gray-100)}.event-date-badge{width:48px;height:48px;background:var(--gradient-primary);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;color:#fff}.event-date-month{font-size:10px;font-weight:500;text-transform:uppercase;line-height:1}.event-date-day{font-size:var(--font-size-lg);font-weight:700;line-height:1.2}.event-info{flex:1;min-width:0}.event-title{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-800);margin-bottom:var(--space-1)}.event-meta{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--gray-500)}.holiday-list{display:flex;flex-direction:column;gap:var(--space-3)}.holiday-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-lg)}.holiday-date{display:flex;flex-direction:column;align-items:center;width:48px;flex-shrink:0}.holiday-weekday{font-size:10px;color:var(--gray-500);font-weight:500}.holiday-day{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-800)}.holiday-info{flex:1;display:flex;flex-direction:column}.holiday-name{font-size:var(--font-size-sm);font-weight:500;color:var(--gray-800)}.holiday-countdown{font-size:var(--font-size-xs);color:var(--primary-600)}.department-list{display:flex;flex-direction:column;gap:var(--space-3)}.department-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-lg)}.department-color{width:4px;height:32px;border-radius:var(--radius-full);flex-shrink:0}.department-name{flex:1;font-size:var(--font-size-sm);font-weight:500;color:var(--gray-800)}.department-count{font-size:var(--font-size-sm);color:var(--gray-500)}.dashboard-section{display:flex;flex-direction:column;gap:var(--space-3)}.dashboard-section-header{display:flex;align-items:center;justify-content:space-between}.dashboard-section-title{display:flex;align-items:center;gap:var(--space-2);font-weight:600;color:var(--gray-800)}.dashboard-section-title svg{color:var(--primary-500)}.birthday-scroll{display:flex;gap:var(--space-3);overflow-x:auto;padding-bottom:var(--space-2);scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.birthday-scroll::-webkit-scrollbar{display:none}.office-scroll{display:flex;gap:var(--space-3);overflow-x:auto;padding-bottom:var(--space-2);scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.office-scroll::-webkit-scrollbar{display:none}.dashboard-title.warning-text{color:#b45309}.dashboard-title.warning-text svg{color:#f59e0b}.dashboard-card.highlight-card{border:1px solid rgba(245,158,11,.3);background:linear-gradient(to right bottom,#fff,#fffbeb)}.action-needed-body{display:flex;align-items:center;gap:var(--space-4);position:relative;overflow:hidden}.action-icon-wrapper{width:48px;height:48px;background:#fef3c7;color:#d97706;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0}.action-content{flex:1}.action-content h3{margin:0 0 var(--space-1) 0;font-size:var(--font-size-base);font-weight:600;color:#92400e}.action-content p{margin:0;font-size:var(--font-size-sm);color:#b45309}.action-button{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-4);background:#d97706;color:#fff;border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:500;text-decoration:none;transition:all var(--transition-base)}.action-button:hover{background:#b45309;transform:translate(2px)}.dashboard-section-title.danger-text{color:#991b1b}.dashboard-section-title.danger-text svg{color:#dc2626}.dashboard-card.danger-card{border:1px solid rgba(239,68,68,.3);background:linear-gradient(to right bottom,#fff,#fef2f2)}.action-icon-wrapper.danger{background:#fee2e2;color:#dc2626}.danger-card .action-content h3{color:#991b1b}.danger-card .action-content p{color:#b91c1c}.action-button.danger{background:#dc2626}.action-button.danger:hover{background:#b91c1c}.dashboard-welcome-attendance{position:relative;z-index:1;flex-shrink:0}.attendance-clock-in-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:#fff3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-full);color:#fff;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.attendance-clock-in-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);opacity:0;transition:opacity var(--transition-base)}.attendance-clock-in-btn:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.attendance-clock-in-btn:hover:before{opacity:1}.attendance-clock-in-btn:active{transform:translateY(0)}.attendance-clock-in-btn svg{animation:gentle-pulse 2s ease-in-out infinite}@keyframes gentle-pulse{0%,to{opacity:1}50%{opacity:.6}}.attendance-status-btn{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:#ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-xl);color:#fff;cursor:pointer;transition:all var(--transition-base)}.attendance-status-btn:hover{background:#ffffff40;border-color:#fff6}.attendance-status-btn.clocked-in{background:linear-gradient(135deg,#10b98133,#ffffff26);border-color:#10b98166}.attendance-timer{display:flex;align-items:center;gap:var(--space-2)}.attendance-duration{font-size:var(--font-size-lg);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}.attendance-divider{width:1px;height:24px;background:#ffffff4d}.attendance-current-time{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);opacity:.9}.attendance-current-time svg{opacity:.7;transition:all var(--transition-base)}.attendance-status-btn:hover .attendance-current-time svg{opacity:1;color:#fda4af}@media (max-width: 767px){.attendance-clock-in-btn{width:100%;justify-content:center;padding:var(--space-4)}.attendance-status-btn{width:100%;justify-content:center}}.employees-toolbar{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}@media (min-width: 640px){.employees-toolbar{flex-direction:row;align-items:center}}.search-box{position:relative;flex:1}.search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--gray-400);pointer-events:none}.search-input{width:100%;padding:var(--space-3) var(--space-4) var(--space-3) 48px;font-size:var(--font-size-base);border:1px solid var(--gray-200);border-radius:var(--radius-xl);background:#fff;transition:all var(--transition-base);min-height:48px}.search-input:focus{outline:none;border-color:var(--primary-400);box-shadow:0 0 0 3px #6366f11a}.toolbar-actions{display:flex;align-items:center;gap:var(--space-2)}.toolbar-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);height:48px;padding:0 var(--space-4);background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);color:var(--gray-600);font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-base)}.toolbar-btn:hover,.toolbar-btn.active{background:var(--gray-50);border-color:var(--primary-400);color:var(--primary-600)}.toolbar-btn-label{display:none}@media (min-width: 640px){.toolbar-btn-label{display:inline}}.view-toggle{display:flex;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:4px}.view-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-lg);color:var(--gray-400);transition:all var(--transition-base)}.view-btn:hover{color:var(--gray-600)}.view-btn.active{background:var(--primary-100);color:var(--primary-600)}.filter-panel{background:#fff;border-radius:var(--radius-xl);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.filter-group{display:flex;flex-direction:column;gap:var(--space-3)}.filter-label{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-700)}.filter-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}.filter-chip{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);border-radius:var(--radius-full);border:1px solid var(--gray-200);background:#fff;color:var(--gray-600);transition:all var(--transition-base)}.filter-chip:hover{border-color:var(--gray-300);background:var(--gray-50)}.filter-chip.active{border-color:var(--primary-400);background:var(--primary-50);color:var(--primary-600)}.employees-count{font-size:var(--font-size-sm);color:var(--gray-500);margin-bottom:var(--space-4)}.employees-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--space-4)}@media (min-width: 480px){.employees-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 768px){.employees-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px){.employees-grid{grid-template-columns:repeat(4,1fr)}}.employees-list{display:flex;flex-direction:column;gap:var(--space-3)}.employee-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-5);background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.employee-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.employee-card-list{flex-direction:row;align-items:center;text-align:left;padding:var(--space-4);gap:var(--space-4)}.employee-avatar{width:72px;height:72px;border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-xl);font-weight:700;margin-bottom:var(--space-3);overflow:hidden;flex-shrink:0}.employee-card-list .employee-avatar{width:48px;height:48px;font-size:var(--font-size-base);margin-bottom:0}.employee-avatar img{width:100%;height:100%;object-fit:cover}.employee-name{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800);margin-bottom:var(--space-1)}.employee-position{font-size:var(--font-size-sm);color:var(--gray-500);margin-bottom:var(--space-2)}.employee-dept-badge{display:inline-flex;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-weight:500;border-radius:var(--radius-full)}.employee-contact{display:none;flex-direction:column;gap:var(--space-1);margin-top:var(--space-2)}@media (min-width: 640px){.employee-card-list .employee-contact{display:flex}}.contact-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);color:var(--gray-500)}.employee-arrow{color:var(--gray-300);flex-shrink:0;display:none}.employee-card-list .employee-arrow{display:block}.profile-page{max-width:800px;margin:0 auto}.back-btn{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--gray-600);font-size:var(--font-size-sm);font-weight:500;padding:var(--space-2) 0;margin-bottom:var(--space-4);transition:all var(--transition-base)}.back-btn:hover{color:var(--primary-600)}.profile-header{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-6);background:#fff;border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);margin-bottom:var(--space-6)}@media (min-width: 640px){.profile-header{flex-direction:row;text-align:left;gap:var(--space-6)}}.profile-avatar-section{position:relative;margin-bottom:var(--space-4)}@media (min-width: 640px){.profile-avatar-section{margin-bottom:0}}.profile-avatar{width:96px;height:96px;border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-3xl);font-weight:700;overflow:hidden}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-status-badge{position:absolute;bottom:0;right:0;padding:2px 10px;background:var(--success);color:#fff;font-size:10px;font-weight:600;border-radius:var(--radius-full);border:2px solid white}.profile-header-info{flex:1}.profile-name{font-size:var(--font-size-2xl);font-weight:700;color:var(--gray-800);margin-bottom:var(--space-1)}.profile-english-name{font-size:var(--font-size-sm);color:var(--gray-500)}.profile-position{font-size:var(--font-size-base);color:var(--gray-600);margin:var(--space-2) 0}.profile-dept-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm);font-weight:500;border-radius:var(--radius-full)}.profile-actions{display:flex;gap:var(--space-2);margin-top:var(--space-4)}@media (min-width: 640px){.profile-actions{margin-top:0;margin-left:auto}}.profile-content{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width: 640px){.profile-content{grid-template-columns:repeat(2,1fr)}}.profile-card{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden}.profile-card-full-width{grid-column:1 / -1}.profile-card-title{padding:var(--space-4);font-size:var(--font-size-base);font-weight:600;color:var(--gray-800);border-bottom:1px solid var(--gray-100)}.profile-card-body{padding:var(--space-4)}.info-item{display:flex;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--gray-100)}.info-item:last-child{border-bottom:none;padding-bottom:0}.info-item:first-child{padding-top:0}.info-icon{color:var(--gray-400);flex-shrink:0;margin-top:2px}.info-content{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.info-label{font-size:var(--font-size-xs);color:var(--gray-500)}.info-value{font-size:var(--font-size-sm);color:var(--gray-800);word-break:break-word}.info-link{color:var(--primary-600);transition:color var(--transition-base)}.info-link:hover{color:var(--primary-700)}.office-info-card{margin-bottom:var(--space-4)}.office-info-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4)}.office-info-icon{width:44px;height:44px;border-radius:var(--radius-lg);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.office-info-text{flex:1}.office-info-text h4{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800);margin:0 0 var(--space-1) 0}.office-info-text p{font-size:var(--font-size-sm);color:var(--gray-500);margin:0}.office-nav-btn-small{width:40px;height:40px;border-radius:var(--radius-lg);background:var(--primary-50);color:var(--primary-600);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.office-nav-btn-small:hover{background:var(--primary-100)}.edit-notice{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-lg);margin-bottom:var(--space-4);font-size:var(--font-size-sm);color:#b45309}.info-value-wrapper{display:flex;align-items:center;gap:var(--space-2)}.field-lock-icon{color:var(--gray-400);flex-shrink:0}.toast-container{position:fixed;bottom:calc(var(--bottom-nav-height) + 16px);left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;gap:8px;max-width:90vw;width:360px}.toast{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card-bg);border-radius:12px;box-shadow:0 8px 32px #0000004d;border:1px solid var(--border);animation:toastSlideIn .3s ease-out}@keyframes toastSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toast-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.toast-success .toast-icon{color:var(--success)}.toast-error .toast-icon{color:var(--error)}.toast-warning .toast-icon{color:var(--warning)}.toast-message{flex:1;font-size:.9rem;color:var(--text-primary)}.toast-close{flex-shrink:0;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .2s}.toast-close:hover{background:var(--hover-bg)}@media (max-width: 768px){.toast-container{width:calc(100vw - 32px)}}.bank-account-simple{display:flex;align-items:flex-start;gap:.75rem;width:100%}.bank-field{display:flex;flex-direction:column;gap:.25rem}.bank-field.account-field{flex:1;min-width:0}.bank-field-label{font-size:.7rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.bank-input-wrapper{position:relative;display:flex;align-items:center}.bank-code-input{width:80px;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1.5px solid #e2e8f0;border-radius:.5rem;font-size:1rem;font-family:SF Mono,Fira Code,Menlo,monospace;font-weight:600;letter-spacing:.15em;text-align:center;color:#1e293b;transition:all .2s ease}.bank-code-input:hover:not(:disabled){border-color:#cbd5e1}.bank-code-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.bank-code-input:disabled{background:#f1f5f9;cursor:not-allowed;opacity:.7}.bank-code-input.valid{border-color:#10b981;background:#f0fdf4}.bank-code-input.invalid{border-color:#f59e0b;background:#fffbeb}.bank-code-input::placeholder{color:#cbd5e1;font-weight:400;letter-spacing:.25em}.bank-account-input{width:100%;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1.5px solid #e2e8f0;border-radius:.5rem;font-size:1rem;font-family:SF Mono,Fira Code,Menlo,monospace;font-weight:500;letter-spacing:.08em;color:#1e293b;transition:all .2s ease}.bank-account-input:hover:not(:disabled){border-color:#cbd5e1}.bank-account-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.bank-account-input:disabled{background:#f1f5f9;cursor:not-allowed;opacity:.7}.bank-account-input.valid{border-color:#10b981;background:#f0fdf4}.bank-account-input.invalid{border-color:#f59e0b;background:#fffbeb}.bank-account-input::placeholder{color:#94a3b8;font-weight:400;letter-spacing:normal;font-family:inherit}.bank-field-status{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center}.bank-field-status.valid{color:#10b981}.bank-field-status.invalid{color:#f59e0b}.bank-field-hint{font-size:.65rem;color:#94a3b8;font-weight:500;margin-top:2px}.bank-field-hint.error{color:#f59e0b}.bank-separator{font-size:1.25rem;font-weight:300;color:#94a3b8;padding-top:1.5rem;-webkit-user-select:none;user-select:none}.bank-account-display{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.bank-badge.code-badge{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1.5px solid #c7d2fe;padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 1px 2px #6366f114}.bank-badge-code{font-weight:700;font-family:SF Mono,Fira Code,Menlo,monospace;color:#4f46e5;font-size:.95rem;letter-spacing:.15em}.bank-display-separator{font-size:1.25rem;font-weight:600;color:#94a3b8;margin:0 .25rem;-webkit-user-select:none;user-select:none}.bank-badge.account-badge{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1.5px solid #e2e8f0;padding:.5rem .875rem;border-radius:.5rem;box-shadow:0 1px 2px #0000000a}.bank-badge-account{font-family:SF Mono,Fira Code,Menlo,monospace;color:#334155;letter-spacing:.1em;font-size:.95rem;font-weight:600}.bank-account-empty{color:#94a3b8;font-style:italic;font-size:.875rem}@media (max-width: 480px){.bank-account-simple{flex-direction:column;gap:1rem}.bank-separator{display:none}.bank-code-input{width:100%}}.org-chart-page{display:flex;flex-direction:column;gap:var(--space-6);min-height:calc(100vh - var(--header-height) - var(--bottom-nav-height) - 100px)}.org-header{display:flex;flex-direction:column;gap:var(--space-4)}@media (min-width: 768px){.org-header{flex-direction:row;justify-content:space-between;align-items:center}}.org-stats{display:flex;flex-wrap:wrap;gap:var(--space-4)}.org-stat{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--gray-600)}.org-stat svg{color:var(--primary-500)}.org-stat strong{color:var(--gray-800)}.org-legend{display:flex;flex-wrap:wrap;gap:var(--space-3)}.org-legend-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);color:var(--gray-600)}.org-legend-dot{width:10px;height:10px;border-radius:var(--radius-sm)}.org-tree-container{flex:1;overflow:auto;padding:var(--space-6) var(--space-4);background:#fff;border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm);min-height:400px}.org-tree{display:flex;flex-direction:column;align-items:center;min-width:max-content;padding:var(--space-4)}.org-top-leaders{display:flex;justify-content:center;gap:var(--space-8);flex-wrap:wrap}@media (max-width: 767px){.org-top-leaders{gap:var(--space-4)}}.org-tree-branch{display:flex;flex-direction:column;align-items:center}.org-tree-node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}.org-connector-top,.org-connector-bottom{width:2px;height:24px;background:var(--primary-300)}.org-connector-horizontal{position:absolute;top:0;left:50%;transform:translate(-50%);height:2px;background:var(--primary-300)}.org-tree-node{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-4);background:#fff;border:2px solid var(--node-color, var(--primary-500));border-radius:var(--radius-2xl);min-width:120px;max-width:160px;transition:all var(--transition-base);position:relative;z-index:1}.org-tree-node:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6366f133}.org-tree-node-root{background:var(--gradient-primary);border:none;color:#fff;min-width:140px;padding:var(--space-5)}.org-tree-node-root .org-node-name,.org-tree-node-root .org-node-position{color:#fff}.org-tree-node-root .org-node-avatar{background:#ffffff40;border:2px solid rgba(255,255,255,.5)}.org-node-avatar-wrapper{margin-bottom:var(--space-2)}.org-node-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-lg);font-weight:600;overflow:hidden}.org-node-avatar img{width:100%;height:100%;object-fit:cover}.org-node-details{display:flex;flex-direction:column;gap:2px}.org-node-name{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-800);line-height:1.3}.org-node-position{font-size:var(--font-size-xs);color:var(--gray-500)}.org-tree-children{display:flex;flex-direction:column;align-items:center;position:relative;padding-top:24px}.org-children-wrapper{display:flex;gap:var(--space-4);position:relative}.org-children-wrapper:before{content:"";position:absolute;top:-24px;left:calc(0% + 60px);right:calc(0% + 60px);height:2px;background:var(--primary-300)}.org-children-wrapper:has(>:only-child):before{display:none}.org-tree-children .org-tree-branch{position:relative}@media (max-width: 767px){.org-tree-container{padding:var(--space-4) var(--space-2)}.org-tree{padding:var(--space-2)}.org-tree-node{min-width:90px;max-width:110px;padding:var(--space-2) var(--space-3)}.org-tree-node-root{min-width:100px;padding:var(--space-3)}.org-node-avatar{width:36px;height:36px;font-size:var(--font-size-sm)}.org-node-name{font-size:var(--font-size-xs)}.org-node-position{font-size:10px}.org-children-wrapper{gap:var(--space-3)}.org-connector-top,.org-connector-bottom{height:16px}.org-tree-children{padding-top:16px}.org-children-wrapper:before{top:-16px}}@media (min-width: 768px){.org-tree-children{position:relative}.org-tree-children:before{content:"";position:absolute;top:0;height:2px;background:var(--primary-300)}.org-children-wrapper{gap:var(--space-6)}.org-children-wrapper:before{content:"";position:absolute;top:-24px;left:60px;right:60px;height:2px;background:var(--primary-300)}.org-children-wrapper:has(>:nth-child(2):last-child):before{left:calc(60px + var(--space-3));right:calc(60px + var(--space-3))}.org-children-wrapper:has(>:nth-child(3)):before{left:calc(60px + var(--space-3));right:calc(60px + var(--space-3))}}.org-tree-branch{animation:orgFadeIn .4s ease-out both}.org-tree-branch:nth-child(1){animation-delay:0ms}.org-tree-branch:nth-child(2){animation-delay:.1s}.org-tree-branch:nth-child(3){animation-delay:.2s}.org-tree-branch:nth-child(4){animation-delay:.3s}.org-tree-branch:nth-child(5){animation-delay:.4s}@keyframes orgFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media print{.org-tree-container{overflow:visible;box-shadow:none}.org-tree-node{break-inside:avoid}}.calendar-page{display:flex;flex-direction:column;gap:var(--space-5);max-width:900px;margin:0 auto}.calendar-header{display:flex;flex-direction:column;gap:var(--space-3)}@media (min-width: 480px){.calendar-header{flex-direction:row;align-items:center;justify-content:space-between}}.calendar-nav{display:flex;align-items:center;gap:var(--space-3)}.calendar-nav-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-xl);background:linear-gradient(135deg,#ffffffe6,#ffffffb3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--gray-500);border:1px solid rgba(255,255,255,.6);box-shadow:0 2px 8px #0000000a,inset 0 1px #fffc;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer}.calendar-nav-btn:hover{background:linear-gradient(135deg,var(--primary-50),white);color:var(--primary-600);transform:translateY(-1px);box-shadow:0 4px 12px #6366f126}.calendar-nav-btn:active{transform:translateY(0);box-shadow:0 1px 4px #00000014}.calendar-title{font-size:var(--font-size-xl);font-weight:700;background:linear-gradient(135deg,var(--gray-800),var(--gray-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;min-width:160px;text-align:center;letter-spacing:-.02em}@media (min-width: 768px){.calendar-title{font-size:var(--font-size-2xl)}}.calendar-legend{display:flex;gap:var(--space-5);padding:var(--space-3) var(--space-4);background:linear-gradient(135deg,#fffc,#fff9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.6);box-shadow:0 2px 8px #00000008;width:fit-content}.legend-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);font-weight:500;color:var(--gray-600)}.legend-dot{width:10px;height:10px;border-radius:var(--radius-full);box-shadow:0 2px 4px #0000001a}.legend-dot-holiday{background:linear-gradient(135deg,#f87171,#ef4444)}.legend-dot-event{background:linear-gradient(135deg,var(--primary-400),var(--primary-600))}.calendar-grid{background:linear-gradient(180deg,#fffffff2,#ffffffd9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-2xl);box-shadow:0 4px 24px #0000000f,0 1px 2px #0000000a,inset 0 1px #ffffffe6;overflow:hidden;border:1px solid rgba(255,255,255,.8)}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:linear-gradient(180deg,var(--gray-50),rgba(249,250,251,.8));border-bottom:1px solid var(--gray-100)}.calendar-weekday{padding:var(--space-4);text-align:center;font-size:var(--font-size-xs);font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}.calendar-weekday.weekend{color:#f87171}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--gray-100)}.calendar-day{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2);background:#fff;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;overflow:hidden}.calendar-day:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,var(--primary-100) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}.calendar-day.empty{background:var(--gray-50);cursor:default}.calendar-day.empty:before{display:none}.calendar-day:not(.empty):hover{z-index:1}.calendar-day:not(.empty):hover:before{opacity:.5}.calendar-day:not(.empty):active{transform:scale(.97)}.calendar-day.weekend{background:linear-gradient(180deg,#fef2f280,#fff)}.calendar-day.holiday{background:linear-gradient(180deg,#fee2e266,#fef2f233)}.calendar-day-number{position:relative;z-index:2;font-size:var(--font-size-sm);font-weight:500;color:var(--gray-700);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);transition:all .25s cubic-bezier(.4,0,.2,1)}.calendar-day.weekend .calendar-day-number{color:#f87171}.calendar-day.today{background:linear-gradient(135deg,#eef2ffcc,#e0e7ff80)}.calendar-day.today:after{content:"";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background:var(--primary-500);border-radius:var(--radius-full);z-index:2}.calendar-day.today .calendar-day-number{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff!important;font-weight:600;box-shadow:0 4px 12px #6366f159,0 2px 4px #6366f133;animation:pulse-soft 2s ease-in-out infinite}@keyframes pulse-soft{0%,to{box-shadow:0 4px 12px #6366f159,0 2px 4px #6366f133}50%{box-shadow:0 4px 20px #6366f173,0 2px 8px #6366f14d}}.calendar-day.selected{background:linear-gradient(135deg,var(--primary-50),rgba(238,242,255,.6))}.calendar-day.selected:before{opacity:.8!important}.calendar-day.selected .calendar-day-number{background:linear-gradient(135deg,var(--primary-400),var(--primary-600));color:#fff!important;font-weight:600;transform:scale(1.05);box-shadow:0 4px 16px #6366f166,0 2px 4px #6366f133}.calendar-day:not(.empty):not(.today):not(.selected):hover .calendar-day-number{background:#6366f114;color:var(--primary-600);transform:scale(1.08)}.calendar-day.weekend:not(.today):not(.selected):hover .calendar-day-number{background:#f871711a;color:#dc2626}.calendar-day-indicators{position:relative;z-index:2;display:flex;gap:4px;margin-top:2px}.indicator{width:6px;height:6px;border-radius:var(--radius-full);transition:transform .2s ease}.calendar-day:hover .indicator{transform:scale(1.3)}.indicator-holiday{background:linear-gradient(135deg,#f87171,#ef4444);box-shadow:0 1px 3px #ef444466}.indicator-event{background:linear-gradient(135deg,var(--primary-400),var(--primary-600));box-shadow:0 1px 3px #6366f166}@media (min-width: 768px){.calendar-day{aspect-ratio:auto;min-height:90px;align-items:flex-start;justify-content:flex-start;padding:var(--space-3)}.calendar-day-number{width:28px;height:28px;font-size:var(--font-size-sm)}.calendar-day.today:after{display:none}.calendar-day-indicators{position:absolute;bottom:8px;left:50%;transform:translate(-50%)}}.calendar-details{background:linear-gradient(180deg,#fffffff2,#ffffffd9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-2xl);padding:var(--space-5);box-shadow:0 4px 24px #0000000f,0 1px 2px #0000000a;border:1px solid rgba(255,255,255,.8)}.details-date{font-size:var(--font-size-xl);font-weight:700;background:linear-gradient(135deg,var(--gray-800),var(--gray-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--gray-100)}.details-item{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-xl);margin-bottom:var(--space-3);transition:all .2s ease}.details-item:hover{transform:translate(4px)}.details-item svg{flex-shrink:0;margin-top:2px}.details-holiday{background:linear-gradient(135deg,#fee2e299,#fef2f266);border:1px solid rgba(248,113,113,.2)}.details-holiday svg{color:#ef4444}.details-event{background:linear-gradient(135deg,var(--primary-50),rgba(238,242,255,.5));border:1px solid rgba(99,102,241,.15)}.details-event svg{color:var(--primary-600)}.details-item>div{display:flex;flex-direction:column;gap:4px}.details-label{font-size:var(--font-size-xs);font-weight:500;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}.details-value{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800)}.details-meta{font-size:var(--font-size-sm);color:var(--gray-500)}.details-empty{text-align:center;color:var(--gray-400);padding:var(--space-8);font-size:var(--font-size-sm)}.animate-slideUp{animation:slideUp .3s ease-out}.category-tabs{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);margin-bottom:var(--space-4);-webkit-overflow-scrolling:touch}.category-tab{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:500;color:var(--gray-600);background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-full);white-space:nowrap;transition:all var(--transition-base)}.category-tab:hover{background:var(--gray-50)}.category-tab.active{background:var(--primary-500);border-color:var(--primary-500);color:#fff}.announcements-list{display:flex;flex-direction:column;gap:var(--space-4)}.announcement-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-sm);border-left:4px solid var(--gray-200);transition:all var(--transition-base)}.announcement-card:hover{box-shadow:var(--shadow-md)}.announcement-card.pinned{border-left-color:var(--primary-500);background:linear-gradient(to right,var(--primary-50),white)}.announcement-card-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-3)}.announcement-badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:10px;font-weight:600;border-radius:var(--radius-full);text-transform:uppercase}.badge-pinned{background:var(--primary-100);color:var(--primary-700)}.badge-priority{background:#ef44441a;color:var(--error)}.badge-category,.badge-general{background:var(--gray-100);color:var(--gray-600)}.badge-hr{background:#10b9811a;color:var(--success)}.badge-event{background:#f59e0b1a;color:var(--warning)}.badge-system{background:#3b82f61a;color:var(--info)}.announcement-actions{display:flex;gap:var(--space-1)}.action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);color:var(--gray-400);transition:all var(--transition-base)}.action-btn:hover{background:var(--gray-100);color:var(--gray-600)}.action-btn .pinned{color:var(--primary-500)}.action-btn-danger:hover{background:#ef44441a;color:var(--error)}.announcement-card-title{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800);margin-bottom:var(--space-2)}@media (min-width: 768px){.announcement-card-title{font-size:var(--font-size-lg)}}.announcement-card-content{font-size:var(--font-size-sm);color:var(--gray-600);line-height:1.6;margin-bottom:var(--space-4)}.announcement-card-footer{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--font-size-xs);color:var(--gray-500);padding-top:var(--space-3);border-top:1px solid var(--gray-100)}.announcement-author{font-weight:500}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:flex-end;justify-content:center;z-index:var(--z-modal);padding:0}@media (min-width: 640px){.modal-backdrop{align-items:center;padding:var(--space-4)}}.modal{background:#fff;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;width:100%;max-width:500px;max-height:90vh;overflow-y:auto}@media (min-width: 640px){.modal{border-radius:var(--radius-2xl)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-4) 0}.modal-header h3{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-800)}.modal-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-lg);color:var(--gray-500);transition:all var(--transition-base)}.modal-close:hover{background:var(--gray-100);color:var(--gray-700)}.modal-body{padding:var(--space-4)}.form-group{margin-bottom:var(--space-4)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--gray-700);margin-bottom:var(--space-2)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.textarea{min-height:120px;resize:vertical}.checkbox-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--gray-700);cursor:pointer}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary-500)}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--gray-100)}.events-page{display:flex;flex-direction:column;gap:var(--space-4)}.events-section{display:flex;flex-direction:column;gap:var(--space-3)}.events-section-title{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}.events-list{display:flex;flex-direction:column;gap:var(--space-3)}.event-card{display:flex;gap:var(--space-4);background:#fff;border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.event-card:hover{box-shadow:var(--shadow-md)}.event-card.past{opacity:.6}.event-card.past:hover{opacity:.8}.event-card-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:72px;background:var(--gradient-primary);border-radius:var(--radius-lg);color:#fff;flex-shrink:0}.event-card.past .event-card-date{background:var(--gray-400)}.event-month{font-size:10px;font-weight:500;text-transform:uppercase;line-height:1}.event-day{font-size:var(--font-size-xl);font-weight:700;line-height:1.2}.event-weekday{font-size:10px;opacity:.8}.event-card-content{flex:1;min-width:0}.event-card-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}.event-type-badge{display:inline-flex;padding:3px 10px;font-size:10px;font-weight:600;border-radius:var(--radius-full);text-transform:uppercase}.type-company{background:var(--primary-100);color:var(--primary-700)}.type-department{background:#8b5cf61a;color:#7c3aed}.type-meeting{background:#f59e0b1a;color:var(--warning)}.event-card-actions{display:flex;gap:var(--space-1);flex-shrink:0}.event-card-title-row{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0}.event-card-title{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800);margin:0}.event-card-desc{font-size:var(--font-size-sm);color:var(--gray-500);margin-bottom:var(--space-2);line-height:1.5}.event-card-meta{display:flex;flex-wrap:wrap;gap:var(--space-4)}.meta-item{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--gray-500)}.meta-item svg{color:var(--gray-400)}@media (max-width: 480px){.event-card{flex-direction:column}.event-card-date{width:100%;height:auto;flex-direction:row;gap:var(--space-2);padding:var(--space-3)}.event-month{order:2}.event-day{order:1}.event-weekday{order:3}}.admin-login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e1b4b,#312e81,#4338ca);padding:1rem}.admin-login-card{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:1.5rem;padding:2.5rem;width:100%;max-width:420px;box-shadow:0 25px 50px -12px #0006;text-align:center}.admin-login-header{text-align:center;margin-bottom:2rem}.admin-login-logo{width:auto;max-width:160px;height:auto;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}.admin-login-logo img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(30,27,75,.15))}.admin-login-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .875rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:2rem;font-size:.75rem;font-weight:600;letter-spacing:.025em}.admin-login-header h1{font-size:1.5rem;font-weight:700;color:#1e1b4b;margin-bottom:.25rem}.admin-login-header p{color:#6b7280;font-size:.875rem}.admin-login-form{display:flex;flex-direction:column;gap:1rem}.admin-login-error{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#fef2f2;border:1px solid #fecaca;border-radius:.75rem;color:#dc2626;font-size:.875rem}.admin-input-group{position:relative}.admin-input-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none}.admin-input-group input{width:100%;padding:.875rem 1rem .875rem 3rem;border:2px solid #e5e7eb;border-radius:.75rem;font-size:1rem;transition:all .2s;background:#fff}.admin-input-group input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.admin-input-group input::placeholder{color:#9ca3af}.admin-login-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.875rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:.75rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:.5rem}.admin-login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px -5px #6366f166}.admin-login-btn:disabled{opacity:.7;cursor:not-allowed}.admin-google-login-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.875rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#f8fafc,#fff);border:2px solid #e2e8f0;border-radius:.875rem;font-size:1rem;font-weight:600;color:#1e293b;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000000a}.admin-google-login-btn:hover:not(:disabled){border-color:#6366f1;background:linear-gradient(135deg,#f5f3ff,#fff);transform:translateY(-2px);box-shadow:0 8px 24px #6366f12e,0 2px 8px #0000000f}.admin-google-login-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #6366f11a}.admin-google-login-btn:disabled{opacity:.6;cursor:not-allowed}.admin-google-login-btn svg{flex-shrink:0}.admin-login-note{margin-top:1.75rem;font-size:.8rem;color:#94a3b8;letter-spacing:.02em}.admin-back-link{display:inline-flex;align-items:center;gap:.25rem;margin-top:1.25rem;font-size:.875rem;font-weight:500;color:#6366f1;text-decoration:none;transition:all .2s ease;padding:.5rem 1rem;border-radius:.5rem}.admin-back-link:hover{color:#4f46e5;background:#6366f114}.admin-login-footer{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #e5e7eb}.admin-login-footer p{font-size:.75rem;color:#9ca3af}.admin-layout{display:flex;min-height:100vh;background:#f8fafc}.admin-sidebar{width:260px;background:linear-gradient(180deg,#1e1b4b,#312e81);color:#fff;padding:1.5rem;display:flex;flex-direction:column}.admin-sidebar-header{padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:1.5rem}.admin-sidebar-header h2{font-size:1.25rem;font-weight:700}.admin-sidebar-header span{font-size:.75rem;color:#fff9}.admin-nav{flex:1;display:flex;flex-direction:column;gap:.5rem}.admin-nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.75rem;color:#ffffffb3;text-decoration:none;transition:all .2s;font-size:.9rem}.admin-nav-item:hover{background:#ffffff1a;color:#fff}.admin-nav-item.active{background:#ffffff26;color:#fff}.admin-nav-item svg{flex-shrink:0}.admin-logout-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.75rem;color:#ffffffb3;background:none;border:none;cursor:pointer;font-size:.9rem;width:100%;margin-top:auto;transition:all .2s}.admin-logout-btn:hover{background:#ef444433;color:#fca5a5}.admin-main{flex:1;padding:2rem;overflow-y:auto}.admin-header{margin-bottom:2rem}@media (max-width: 640px){.admin-header{margin-bottom:1.25rem}}.admin-header h1{font-size:1.75rem;font-weight:700;color:#1e1b4b;margin-bottom:.25rem}@media (max-width: 640px){.admin-header h1{font-size:1.25rem}}.admin-header p{color:#6b7280}@media (max-width: 640px){.admin-header p{font-size:.875rem}}.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem}@media (max-width: 640px){.admin-stats{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}}.admin-stat-card{background:#fff;border-radius:1rem;padding:1.5rem;box-shadow:0 1px 3px #0000001a}@media (max-width: 640px){.admin-stat-card{padding:.75rem .5rem;border-radius:.625rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}}.admin-stat-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}@media (max-width: 640px){.admin-stat-card-header{flex-direction:column-reverse;align-items:center;gap:.25rem;margin-bottom:0;width:100%}.admin-stat-card-header span{font-size:.625rem;color:#6b7280;font-weight:500}}.admin-stat-card-icon{width:48px;height:48px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;color:#fff}@media (max-width: 640px){.admin-stat-card-icon{width:28px;height:28px;border-radius:.375rem}.admin-stat-card-icon svg{width:14px;height:14px}}.admin-stat-card h3{font-size:2rem;font-weight:700;color:#1e1b4b}@media (max-width: 640px){.admin-stat-card h3{font-size:1.125rem;margin:0;line-height:1.2}}.admin-stat-card p{color:#6b7280;font-size:.875rem}@media (max-width: 640px){.admin-stat-card p{font-size:.5rem;margin:0;line-height:1.3}}.admin-table-container{background:#fff;border-radius:1rem;box-shadow:0 1px 3px #0000001a;overflow:hidden}@media (max-width: 640px){.admin-table-container{border-radius:.75rem;overflow-x:auto;-webkit-overflow-scrolling:touch}}.admin-table-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e5e7eb}@media (max-width: 640px){.admin-table-header{padding:1rem;flex-wrap:wrap;gap:.75rem}.admin-table-header h2{font-size:1rem}}.admin-table-header h2{font-size:1.125rem;font-weight:600;color:#1e1b4b}.admin-add-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#6366f1;color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}@media (max-width: 640px){.admin-add-btn{padding:.5rem .75rem;font-size:.75rem}.admin-add-btn svg{width:14px;height:14px}}.admin-add-btn:hover{background:#4f46e5}.admin-table{width:100%;border-collapse:collapse}@media (max-width: 640px){.admin-table{min-width:500px}}.admin-table th,.admin-table td{padding:1rem 1.5rem;text-align:center}@media (max-width: 640px){.admin-table th,.admin-table td{padding:.75rem .5rem;font-size:.75rem;white-space:nowrap}}.admin-table th{background:#f9fafb;font-size:.75rem;font-weight:600;text-transform:uppercase;color:#6b7280;border-bottom:1px solid #e5e7eb}@media (max-width: 640px){.admin-table th{font-size:.625rem}}.admin-table td{border-bottom:1px solid #f3f4f6;font-size:.875rem;color:#374151}@media (max-width: 640px){.admin-table td{font-size:.75rem}}.admin-table tr:hover td{background:#f9fafb}.admin-table-actions{display:flex;gap:.5rem;justify-content:center}.admin-table-btn{padding:.375rem .75rem;border-radius:.375rem;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s;border:none}.admin-table-btn.edit{background:#dbeafe;color:#2563eb}.admin-table-btn.edit:hover{background:#bfdbfe}.admin-table-btn.delete{background:#fee2e2;color:#dc2626}.admin-table-btn.delete:hover{background:#fecaca}.admin-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.admin-modal{background:#fff;border-radius:1rem;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px -12px #00000040}.admin-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e5e7eb}.admin-modal-header h3{font-size:1.125rem;font-weight:600;color:#1e1b4b}.admin-modal-header button{background:none;border:none;color:#6b7280;cursor:pointer;padding:.25rem;border-radius:.375rem;transition:all .2s}.admin-modal-header button:hover{background:#f3f4f6;color:#1f2937}.admin-modal-form{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.admin-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.admin-form-group{display:flex;flex-direction:column;gap:.375rem}.admin-form-group label{font-size:.875rem;font-weight:500;color:#374151}.admin-form-group input,.admin-form-group select{padding:.625rem .875rem;border:1px solid #d1d5db;border-radius:.5rem;font-size:.875rem;transition:all .2s}.admin-form-group input:focus,.admin-form-group select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.admin-modal-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1.25rem 1.5rem;border-top:1px solid #e5e7eb;margin-top:.5rem;background:#fafafa;border-radius:0 0 1rem 1rem}.admin-btn-cancel{padding:.625rem 1.25rem;background:#f3f4f6;color:#374151;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.admin-btn-cancel:hover{background:#e5e7eb}.admin-btn-submit{padding:.625rem 1.25rem;background:#6366f1;color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.admin-btn-submit:hover{background:#4f46e5}.admin-employee-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.875rem;overflow:hidden;margin:0 auto}.admin-employee-avatar img{width:100%;height:100%;object-fit:cover}.admin-avatar-upload{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem}.admin-avatar-preview{width:100px;height:100px;border-radius:50%;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:pointer;position:relative;overflow:hidden;border:3px solid #e5e7eb;transition:all .2s}.admin-avatar-preview:hover{border-color:#6366f1}.admin-avatar-preview img{width:100%;height:100%;object-fit:cover}.admin-avatar-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .2s}.admin-avatar-preview:hover .admin-avatar-overlay{opacity:1}.admin-avatar-hint{font-size:.75rem;color:#6b7280}.admin-modal-lg{max-width:700px}.admin-modal-sm{max-width:400px}.admin-confirm-content{padding:2rem;text-align:center}.admin-confirm-icon{width:64px;height:64px;border-radius:50%;background:#fef2f2;color:#dc2626;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}.admin-confirm-content h3{font-size:1.25rem;font-weight:600;color:#1e1b4b;margin-bottom:.5rem}.admin-confirm-content p{color:#6b7280;font-size:.875rem;margin-bottom:1.5rem}.admin-confirm-actions{display:flex;gap:.75rem;justify-content:center}.admin-btn-danger{padding:.625rem 1.25rem;background:#dc2626;color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.admin-btn-danger:hover{background:#b91c1c}.admin-notifications{position:fixed;top:1rem;right:1rem;z-index:2000;display:flex;flex-direction:column;gap:.5rem;max-width:400px}.admin-notification{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border-radius:.75rem;background:#fff;box-shadow:0 10px 25px -5px #00000026;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.admin-notification span{flex:1;font-size:.875rem;color:#1f2937}.admin-notification button{background:none;border:none;color:#9ca3af;cursor:pointer;padding:.25rem;border-radius:.25rem;transition:all .2s}.admin-notification button:hover{background:#f3f4f6;color:#1f2937}.admin-notification-success{border-left:4px solid #10b981}.admin-notification-success svg:first-child{color:#10b981}.admin-notification-error{border-left:4px solid #ef4444}.admin-notification-error svg:first-child{color:#ef4444}.admin-notification-warning{border-left:4px solid #f59e0b}.admin-notification-warning svg:first-child{color:#f59e0b}.admin-tab-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f3f4f6;color:#6b7280;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}@media (max-width: 640px){.admin-tab-btn{padding:.375rem .75rem;font-size:.75rem;gap:.25rem}.admin-tab-btn svg{width:14px;height:14px}}.admin-tab-btn:hover{background:#e5e7eb;color:#374151}.admin-tab-btn.active{background:#6366f1;color:#fff}.admin-filter-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.admin-filter-btn:hover{background:#f9fafb;border-color:#9ca3af}.admin-filters{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem 1.5rem;background:#f9fafb;border-bottom:1px solid #e5e7eb}.admin-filter-group{display:flex;flex-direction:column;gap:.25rem;min-width:150px}.admin-filter-group label{font-size:.75rem;font-weight:500;color:#6b7280}.admin-filter-group select{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;background:#fff;cursor:pointer}.admin-filter-group select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f11a}.admin-modal-info{background:#f9fafb;padding:1rem;border-radius:.5rem;margin-bottom:1rem}.admin-modal-info p{margin:0;font-size:.875rem;color:#374151}.admin-modal-info p+p{margin-top:.5rem}.admin-form-group textarea{padding:.625rem .875rem;border:1px solid #d1d5db;border-radius:.5rem;font-size:.875rem;font-family:inherit;transition:all .2s;width:100%;box-sizing:border-box}.admin-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}.admin-detail-item{display:flex;flex-direction:column;gap:.375rem}.admin-detail-item.full-width{grid-column:1 / -1}.admin-detail-item label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.025em}.admin-detail-item span{font-size:.9375rem;color:#1f2937}.admin-receipts-grid{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}.admin-receipts-grid a{display:block;width:80px;height:80px;border-radius:.5rem;overflow:hidden;border:2px solid #e5e7eb;transition:all .2s}.admin-receipts-grid a:hover{border-color:#6366f1;transform:scale(1.05)}.admin-receipts-grid img{width:100%;height:100%;object-fit:cover}.admin-pdf-thumb{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.admin-pdf-thumb svg{opacity:.9}.admin-pdf-thumb span{font-size:10px;font-weight:700;letter-spacing:.5px}.admin-modal-content{max-height:60vh;overflow-y:auto}@media (max-width: 768px){.admin-detail-grid{grid-template-columns:1fr}.admin-filters{flex-direction:column}.admin-filter-group{width:100%}.admin-form-row{grid-template-columns:1fr}}.admin-filter-tabs{display:flex;gap:.5rem;flex-wrap:wrap}.admin-filter-tab{padding:.5rem 1rem;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;font-size:.875rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .2s}.admin-filter-tab:hover{border-color:#6366f1;color:#6366f1}.admin-filter-tab.active{background:#6366f1;border-color:#6366f1;color:#fff}.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.admin-stat-card{background:#fff;border-radius:.75rem;padding:1.25rem;box-shadow:0 1px 3px #0000001a;text-align:center}.admin-stat-value{font-size:1.75rem;font-weight:700;color:#1e1b4b;margin-bottom:.25rem}.admin-stat-label{font-size:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.admin-form-group textarea{padding:.625rem .875rem;border:1px solid #d1d5db;border-radius:.5rem;font-size:.875rem;font-family:inherit;transition:all .2s;min-height:80px}.admin-form-group textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.admin-btn-submit{display:inline-flex;align-items:center;gap:.5rem}.admin-btn-submit:disabled{opacity:.7;cursor:not-allowed}.admin-attendance-container{display:flex;flex-direction:column;gap:1.5rem}.admin-settings-card{background:#fff;border-radius:1rem;box-shadow:0 1px 3px #0000001a;overflow:hidden}.admin-settings-card.preview{border:2px solid #e0e7ff;background:linear-gradient(180deg,#f5f3ff,#fff)}.admin-settings-card-header{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid #f3f4f6}.admin-settings-card-header h3{font-size:1.125rem;font-weight:600;color:#1e1b4b;margin:0}.admin-settings-card-header p{font-size:.875rem;color:#6b7280;margin:0}.admin-settings-card-icon{width:48px;height:48px;border-radius:.75rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.admin-settings-card-icon.warning{background:linear-gradient(135deg,#f59e0b,#d97706)}.admin-settings-card-icon.success{background:linear-gradient(135deg,#10b981,#059669)}.admin-settings-card-body{padding:1.5rem}.admin-settings-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem}@media (max-width: 768px){.admin-settings-row{grid-template-columns:1fr;gap:1.5rem}}.admin-settings-field{display:flex;flex-direction:column;gap:.5rem}.admin-settings-field label{font-size:.875rem;font-weight:600;color:#374151}.admin-settings-field input[type=time],.admin-settings-field input[type=number]{padding:.75rem 1rem;border:2px solid #e5e7eb;border-radius:.75rem;font-size:1rem;font-weight:500;color:#1e1b4b;transition:all .2s;background:#fff}.admin-settings-field input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.admin-settings-input-group{display:flex;align-items:center;gap:.75rem}.admin-settings-input-group input{flex:1;max-width:120px}.admin-settings-unit{font-size:.875rem;font-weight:500;color:#6b7280}.admin-settings-hint{font-size:.75rem;color:#9ca3af;line-height:1.5}.admin-settings-preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media (max-width: 640px){.admin-settings-preview-grid{grid-template-columns:1fr}}.admin-settings-preview-item{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:#fff;border-radius:.75rem;border:1px solid #e5e7eb}.admin-settings-preview-item .preview-label{font-size:.875rem;color:#6b7280}.admin-settings-preview-item .preview-value{font-size:.875rem;font-weight:600;font-family:SF Mono,Fira Code,monospace}.admin-settings-preview-item .preview-value.success{color:#059669}.admin-settings-preview-item .preview-value.warning{color:#d97706}.admin-settings-actions{display:flex;justify-content:flex-end;gap:1rem;padding-top:.5rem}.admin-settings-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:.75rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;border:none}.admin-settings-btn.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 4px 14px #6366f14d}.admin-settings-btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.admin-settings-btn.primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.admin-settings-btn.secondary{background:#f3f4f6;color:#374151}.admin-settings-btn.secondary:hover:not(:disabled){background:#e5e7eb}.admin-settings-card.records-section{grid-column:1 / -1;margin-top:1rem}.admin-records-filters{display:flex;align-items:flex-end;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.admin-records-filter{display:flex;flex-direction:column;gap:.5rem;min-width:220px}.admin-records-filter label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.admin-records-filter select{padding:.75rem 1rem;border:1px solid #e5e7eb;border-radius:.5rem;font-size:.875rem;background:#fff;cursor:pointer}.admin-records-filter select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.admin-records-month-nav{display:flex;align-items:center;gap:.75rem}.admin-records-month-nav button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:.5rem;background:#fff;cursor:pointer;transition:all .2s}.admin-records-month-nav button:hover{background:#f3f4f6;border-color:#d1d5db}.admin-records-month-nav span{font-weight:600;color:#374151;min-width:120px;text-align:center}.admin-records-add-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;margin-left:auto;transition:all .2s}.admin-records-add-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.admin-records-table{width:100%;border-collapse:collapse}.admin-records-table thead{background:#f9fafb}.admin-records-table th{padding:.75rem 1rem;text-align:left;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #e5e7eb}.admin-records-table td{padding:1rem;font-size:.875rem;color:#374151;border-bottom:1px solid #f3f4f6}.admin-records-table tbody tr:hover{background:#f9fafb}.admin-records-actions{display:flex;gap:.5rem}.admin-records-actions button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:.375rem;background:#f3f4f6;color:#6b7280;cursor:pointer;transition:all .2s}.admin-records-actions button:hover{background:#e5e7eb;color:#374151}.admin-records-actions button.danger:hover{background:#fef2f2;color:#dc2626}.admin-records-empty,.admin-records-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem;color:#9ca3af}.admin-records-loading{flex-direction:row}.admin-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.admin-modal{background:#fff;border-radius:1rem;width:100%;max-width:420px;box-shadow:0 25px 50px -12px #00000040;animation:modalSlideUp .2s ease-out}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.admin-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #f3f4f6}.admin-modal-header h3{font-size:1rem;font-weight:600;color:#111827}.admin-modal-header button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:#f3f4f6;border-radius:.5rem;cursor:pointer;color:#6b7280;transition:all .2s}.admin-modal-header button:hover{background:#e5e7eb;color:#374151}.admin-modal-body{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.admin-modal-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.admin-modal-field{display:flex;flex-direction:column;gap:.5rem}.admin-modal-field label{font-size:.75rem;font-weight:600;color:#6b7280}.admin-modal-field input,.admin-modal-field select{padding:.75rem 1rem;border:1px solid #e5e7eb;border-radius:.5rem;font-size:.875rem}.admin-modal-field input:focus,.admin-modal-field select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.admin-modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid #f3f4f6;background:#f9fafb;border-radius:0 0 1rem 1rem}.admin-modal-btn{padding:.625rem 1.25rem;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:all .2s}.admin-modal-btn.secondary{background:#e5e7eb;color:#374151}.admin-modal-btn.secondary:hover{background:#d1d5db}.admin-modal-btn.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.admin-modal-btn.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.admin-modal-btn.primary:disabled{opacity:.6;cursor:not-allowed}.claims-page{display:flex;flex-direction:column;gap:var(--space-6)}@media (max-width: 640px){.claims-page{gap:var(--space-4)}}.claims-alert-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:var(--radius-lg);margin-bottom:var(--space-4);border:1px solid #fcd34d}@media (max-width: 640px){.claims-alert-banner{flex-direction:column;align-items:stretch;gap:var(--space-2);padding:var(--space-3);margin-bottom:var(--space-3)}}.claims-alert-content{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0}.claims-alert-icon{color:#b45309;flex-shrink:0}.claims-alert-text{min-width:0}.claims-alert-text strong{display:block;font-size:var(--font-size-sm);color:#92400e;line-height:1.4}@media (max-width: 640px){.claims-alert-text strong{font-size:var(--font-size-xs)}}.claims-alert-text p{font-size:var(--font-size-xs);color:#a16207;margin:2px 0 0}.claims-alert-action{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:#b45309;color:#fff;border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:500;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:all var(--transition-base)}.claims-alert-action:hover{background:#92400e}@media (max-width: 640px){.claims-alert-action{justify-content:center;width:100%;padding:var(--space-2)}}.claims-submit-section{position:sticky;bottom:0;padding:var(--space-3);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px));background:#fff;margin:0 calc(-1 * var(--space-4));margin-top:var(--space-4);padding-left:var(--space-4);padding-right:var(--space-4);border-top:1px solid var(--gray-100);box-shadow:0 -4px 16px #00000014;z-index:10}@media (max-width: 768px){.claims-submit-section{padding-bottom:calc(var(--space-4) + 80px + env(safe-area-inset-bottom,0px))}}.claims-submit-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;padding:var(--space-3);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-base);box-shadow:0 4px 16px #1e3a5f4d;text-decoration:none}.claims-submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #1e3a5f66}@media (min-width: 480px){.claims-submit-btn{padding:var(--space-4);font-size:var(--font-size-base);border-radius:var(--radius-xl)}}.claims-actions{display:flex;gap:var(--space-3)}.claims-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-xl);font-size:var(--font-size-base);font-weight:600;transition:all var(--transition-base);text-decoration:none}.claims-action-btn.primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 16px #6366f14d}.claims-action-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.claims-action-btn.secondary{background:#fff;color:var(--gray-700);border:1px solid var(--gray-200)}.claims-action-btn.secondary:hover{background:var(--gray-50);border-color:var(--primary-400);color:var(--primary-600)}.history-filters{display:flex;gap:var(--space-2);flex-wrap:wrap}.history-filters .form-select{flex:1;min-width:120px}.export-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);color:var(--gray-600);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-base)}.export-btn:hover{background:var(--gray-50);border-color:var(--primary-400);color:var(--primary-600)}.history-summary{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--gray-50);border-radius:var(--radius-lg);font-size:var(--font-size-sm);color:var(--gray-600)}.summary-total{font-weight:600;color:var(--gray-800)}.claims-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}@media (max-width: 640px){.claims-stats{grid-template-columns:1fr}}.claims-stats .stat-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.stat-icon-wrapper{width:44px;height:44px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-icon-wrapper.stat-primary{background:var(--primary-100);color:var(--primary-600)}.stat-icon-wrapper.stat-warning{background:#f59e0b1a;color:#f59e0b}.stat-icon-wrapper.stat-success{background:#10b9811a;color:#10b981}.stat-info{display:flex;flex-direction:column}.stat-info .stat-value{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-800)}.stat-info .stat-label{font-size:var(--font-size-xs);color:var(--gray-500)}.claims-section{display:flex;flex-direction:column;gap:var(--space-4)}.claims-section-header{display:flex;align-items:center;justify-content:space-between}.claims-section-title{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-800);margin:0}.claims-section-link{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);color:var(--primary-600);font-weight:500;text-decoration:none}.claim-list{display:flex;flex-direction:column;gap:var(--space-3)}.claim-card{display:flex;gap:var(--space-3);padding:var(--space-4);background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);align-items:flex-start}.claim-category-icon{width:44px;height:44px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}.claim-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}.claim-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.claim-category{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800)}.claim-status{display:flex;align-items:center;gap:var(--space-1);padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:500}.claim-status.status-pending{background:#f59e0b1a;color:#b45309}.claim-status.status-approved{background:#10b9811a;color:#047857}.claim-status.status-reimbursed{background:#6366f11a;color:var(--primary-600)}.claim-status.status-rejected{background:#ef44441a;color:#b91c1c}.claim-description{font-size:var(--font-size-sm);color:var(--gray-600);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.claim-meta{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm)}.claim-date{color:var(--gray-400)}.claim-amount{font-weight:600;color:var(--gray-800)}.claim-amount-twd{font-size:var(--font-size-xs);color:var(--gray-400)}.claim-receipt-badge{display:flex;align-items:center;gap:2px;padding:4px 8px;background:var(--gray-100);border-radius:var(--radius-full);font-size:var(--font-size-xs);color:var(--gray-500);flex-shrink:0}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}@media (min-width: 640px){.category-grid{grid-template-columns:repeat(6,1fr)}}.category-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4);background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);text-decoration:none;transition:all var(--transition-base)}.category-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.category-icon{font-size:1.5rem}.category-name{font-size:var(--font-size-sm);font-weight:500;color:var(--gray-700);text-align:center}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);background:#fff;border-radius:var(--radius-xl);text-align:center}.empty-icon{color:var(--gray-300);margin-bottom:var(--space-3)}.empty-state p{color:var(--gray-500);margin:0}.claim-form{display:flex;flex-direction:column;gap:var(--space-5)}.category-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.category-option{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2);border:2px solid var(--gray-200);border-radius:var(--radius-lg);background:#fff;cursor:pointer;transition:all var(--transition-base);min-height:70px;position:relative}@media (min-width: 480px){.category-option{gap:var(--space-2);padding:var(--space-3);min-height:auto}}.category-option:hover{border-color:var(--gray-300);background:var(--gray-50)}.category-option.selected{border-color:var(--primary-500);background:var(--primary-50)}.category-option .cat-icon{font-size:1.25rem}@media (min-width: 480px){.category-option .cat-icon{font-size:1.5rem}}.category-option .cat-name{font-size:var(--font-size-sm);font-weight:500;color:var(--gray-700)}.category-option.selected .cat-name{color:var(--primary-600)}.form-row{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width: 480px){.form-row{grid-template-columns:3fr 2fr;gap:var(--space-4)}}.form-row>div{min-width:0}.form-field-amount,.form-field-date{width:100%;box-sizing:border-box}.currency-input-group{display:flex;gap:var(--space-2);align-items:stretch;width:100%;flex-wrap:nowrap;min-width:0}.currency-select{flex:0 0 auto;width:90px;min-width:90px;max-width:90px;text-align:center;padding-left:var(--space-2);padding-right:var(--space-2)}.amount-input{flex:1 1 auto;min-width:60px;font-size:var(--font-size-lg);font-weight:600}.amount-twd-display{padding:var(--space-2);background:var(--primary-50);border-radius:var(--radius-md);font-size:var(--font-size-xs);color:var(--primary-600);text-align:center;margin-top:var(--space-2)}.receipt-uploader{display:flex;flex-direction:column;gap:var(--space-3)}.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-6);border:2px dashed var(--gray-300);border-radius:var(--radius-xl);background:var(--gray-50);cursor:pointer;transition:all var(--transition-base)}.upload-zone:hover{border-color:var(--primary-400);background:var(--primary-50)}.upload-icon{width:48px;height:48px;border-radius:var(--radius-full);background:var(--gray-100);display:flex;align-items:center;justify-content:center;color:var(--gray-400)}.upload-zone:hover .upload-icon{background:var(--primary-100);color:var(--primary-600)}.upload-text{text-align:center}.upload-text p{margin:0;font-size:var(--font-size-sm);color:var(--gray-600)}.upload-text span{font-size:var(--font-size-xs);color:var(--gray-400)}.upload-actions{display:flex;gap:var(--space-2)}.upload-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:#fff;color:var(--gray-700);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-base)}.upload-btn:hover{background:var(--gray-50);border-color:var(--primary-400);color:var(--primary-600)}.receipt-preview{display:flex;gap:var(--space-3);flex-wrap:wrap}.receipt-item{position:relative;width:80px;height:80px;border-radius:var(--radius-lg);background:var(--gray-100);overflow:hidden}.receipt-item img{width:100%;height:100%;object-fit:cover}.receipt-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:var(--radius-full);background:#0009;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none}.pdf-preview-thumb{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.pdf-preview-thumb svg{opacity:.9}.pdf-preview-thumb span{font-size:10px;font-weight:700;letter-spacing:.5px}.approval-page{display:flex;flex-direction:column;gap:var(--space-5)}.approval-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-sm)}.approval-card-header{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}.approval-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;flex-shrink:0}.approval-info{flex:1}.approval-name{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800)}.approval-position{font-size:var(--font-size-sm);color:var(--gray-500)}.approval-amount{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-800);text-align:right}.approval-details{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-lg);margin-bottom:var(--space-4)}.approval-detail-row{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--gray-600)}.receipt-gallery{display:flex;gap:var(--space-2);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-lg);margin-bottom:var(--space-4);overflow-x:auto}.receipt-thumb{width:60px;height:60px;border-radius:var(--radius-md);background:var(--gray-200);flex-shrink:0;overflow:hidden;cursor:pointer}.receipt-thumb img{width:100%;height:100%;object-fit:cover}.approval-actions{display:flex;gap:var(--space-3)}.approval-btn{flex:1;padding:var(--space-3);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;transition:all var(--transition-base);border:none}.approval-btn.approve{background:var(--success);color:#fff}.approval-btn.approve:hover{background:#047857}.approval-btn.reject{background:#fff;color:var(--error);border:1px solid var(--error)}.approval-btn.reject:hover{background:#ef44441a}.loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);color:var(--gray-500);gap:var(--space-3)}.spin{animation:spin 1s linear infinite}.retry-btn{padding:var(--space-2) var(--space-4);background:var(--primary-500);color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer}.page-title{margin-bottom:var(--space-2)}.page-title h1{font-size:var(--font-size-xl);font-weight:700;color:var(--gray-800);margin:0}.page-subtitle{font-size:var(--font-size-sm);color:var(--gray-500);margin:var(--space-1) 0 0 0}.statement-alert{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:var(--radius-xl);border:1px solid #f59e0b}.alert-content{display:flex;align-items:center;gap:var(--space-3);color:#92400e}.alert-content strong{display:block;font-size:var(--font-size-sm)}.alert-content p{font-size:var(--font-size-xs);margin:0;opacity:.8}.alert-action{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:#92400e;color:#fff;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:500;text-decoration:none}.claim-status.status-draft{background:#6b72801a;color:#4b5563}a.claim-card{text-decoration:none;cursor:pointer;transition:all var(--transition-base)}a.claim-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.empty-action{margin-top:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:500;text-decoration:none}.field-error{font-size:var(--font-size-xs);color:var(--error);margin-left:var(--space-2);font-weight:400}.input-error{border-color:var(--error)!important}.cat-required{font-size:var(--font-size-xs);color:var(--primary-500);background:var(--primary-50);padding:2px 6px;border-radius:var(--radius-full);position:absolute;top:4px;right:4px}@media (max-width: 640px){.cat-required{font-size:.5rem;padding:1px 4px;top:2px;right:2px}}.upload-hint{font-size:var(--font-size-xs);color:var(--gray-400);text-align:center;margin:0}.submit-hint{text-align:center;font-size:var(--font-size-sm);color:var(--gray-500);margin-top:var(--space-2)}.statement-list{display:flex;flex-direction:column;gap:var(--space-4)}.statement-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-sm);text-decoration:none;transition:all var(--transition-base);position:relative}.statement-card.pending{border:2px solid #f59e0b;background:linear-gradient(180deg,#fffbeb,#fff 30%)}.statement-card.history:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.statement-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.statement-period{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);font-weight:600;color:var(--gray-800)}.statement-summary{display:flex;gap:var(--space-6);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-lg);margin-bottom:var(--space-3)}.summary-item{display:flex;flex-direction:column}.summary-label{font-size:var(--font-size-xs);color:var(--gray-500)}.summary-value{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800)}.summary-value.total{color:var(--primary-600);font-size:var(--font-size-lg)}.statement-claims-preview{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}.preview-item{display:flex;justify-content:space-between;font-size:var(--font-size-sm);color:var(--gray-600);padding:var(--space-1) 0;border-bottom:1px dashed var(--gray-200)}.preview-more{font-size:var(--font-size-xs);color:var(--gray-400);text-align:center}.statement-actions{display:flex;gap:var(--space-3)}.statement-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-base);text-decoration:none;border:none}.statement-btn.primary{background:var(--gradient-primary);color:#fff}.statement-btn.primary:hover:not(:disabled){box-shadow:0 4px 12px #6366f14d}.statement-btn.primary:disabled{opacity:.5;cursor:not-allowed}.statement-btn.secondary{background:#fff;color:var(--gray-700);border:1px solid var(--gray-200)}.statement-btn.secondary:hover{background:var(--gray-50);border-color:var(--primary-400);color:var(--primary-600)}.statement-meta{font-size:var(--font-size-xs);color:var(--gray-500);margin-top:var(--space-2)}.statement-reject-reason{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#ef44441a;border-radius:var(--radius-lg);font-size:var(--font-size-sm);color:#b91c1c;margin-top:var(--space-2)}.statement-arrow{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);color:var(--gray-400)}.statement-detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.statement-title{display:flex;align-items:center;gap:var(--space-3)}.statement-title h1{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-800);margin:0}.claim-status.large{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.reject-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-xl);margin-bottom:var(--space-4);color:#b91c1c}.reject-alert strong{display:block;margin-bottom:var(--space-1)}.reject-alert p{margin:0;font-size:var(--font-size-sm)}.statement-summary-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-sm);margin-bottom:var(--space-4)}.summary-row{display:flex;justify-content:space-between;padding:var(--space-2) 0;border-bottom:1px solid var(--gray-100)}.summary-row:last-child{border-bottom:none}.timeline{display:flex;flex-direction:column;gap:0;padding:var(--space-4);background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.timeline-item{display:flex;gap:var(--space-3);padding:var(--space-3) 0;position:relative}.timeline-item:before{content:"";position:absolute;left:15px;top:40px;bottom:-12px;width:2px;background:var(--gray-200)}.timeline-item:last-child:before{display:none}.timeline-icon{width:32px;height:32px;border-radius:var(--radius-full);background:var(--gray-100);color:var(--gray-400);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1}.timeline-item.completed .timeline-icon{background:var(--success);color:#fff}.timeline-item.current .timeline-icon{background:#f59e0b;color:#fff}.timeline-item.rejected .timeline-icon{background:var(--error);color:#fff}.timeline-content{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.timeline-title{font-weight:600;color:var(--gray-800)}.timeline-date{font-size:var(--font-size-xs);color:var(--gray-500)}.timeline-user{font-size:var(--font-size-sm);color:var(--gray-600)}.timeline-rejected{font-size:var(--font-size-xs);color:var(--error);font-weight:500}.timeline.horizontal{flex-direction:row;align-items:flex-start;justify-content:space-between;padding:var(--space-6) var(--space-8);gap:var(--space-4);background:#fff;overflow:hidden}.timeline.horizontal .timeline-item{flex:1;flex-direction:column;align-items:center;text-align:center;padding:0;gap:var(--space-3);overflow:visible}.timeline.horizontal .timeline-item:before{content:"";position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--gray-200);z-index:0}.timeline.horizontal .timeline-item.completed:has(+.timeline-item.completed):before{background:var(--success);opacity:.6}.timeline.horizontal .timeline-item.completed:has(+.timeline-item:not(.completed)):before{background:var(--gray-300);opacity:1}.timeline.horizontal .timeline-item:last-child:before{display:none}.timeline.horizontal .timeline-icon{position:relative;z-index:2;width:32px;height:32px;background:#fff;border:4px solid white;box-shadow:0 0 0 1px var(--gray-200);margin-bottom:var(--space-1);transition:all var(--transition-base)}.timeline.horizontal .timeline-item.completed .timeline-icon{box-shadow:none;border-color:#fff;background:var(--success);color:#fff}.timeline.horizontal .timeline-item.current .timeline-icon{box-shadow:0 0 0 2px #f59e0b;border-color:#fff;background:#fff;color:#f59e0b}.timeline.horizontal .timeline-item.completed .timeline-title{color:var(--success)}.timeline.horizontal .timeline-item.current .timeline-title{color:#f59e0b}.timeline.horizontal .timeline-content{align-items:center;width:100%;gap:2px}.timeline.horizontal .timeline-title{font-size:var(--font-size-sm);white-space:nowrap}.timeline.horizontal .timeline-date{font-size:10px;color:var(--gray-400);background:var(--gray-50);padding:2px 6px;border-radius:var(--radius-full)}.timeline.horizontal .timeline-user{font-size:11px;color:var(--gray-500)}.timeline.horizontal .timeline-rejected{margin-top:2px;background:#ef44441a;padding:2px 6px;border-radius:var(--radius-sm)}.statement-timeline-section{margin-bottom:var(--space-4)}@media (max-width: 640px){.statement-timeline-section{margin-bottom:var(--space-3)}.statement-timeline-section .admin-table-header{padding:var(--space-2) var(--space-3)}.statement-timeline-section .admin-table-header h2{font-size:var(--font-size-sm)!important}}.timeline-wrapper{padding:var(--space-4)}@media (max-width: 640px){.timeline-wrapper{padding:var(--space-3) var(--space-2)}.timeline.horizontal{padding:var(--space-2) var(--space-3);gap:var(--space-2)}.timeline.horizontal .timeline-item{gap:var(--space-2)}.timeline.horizontal .timeline-icon{width:24px;height:24px;border-width:2px}.timeline.horizontal .timeline-item:before{top:12px;height:1px}.timeline.horizontal .timeline-title{font-size:var(--font-size-xs)}.timeline.horizontal .timeline-date{font-size:8px;padding:1px 4px}.timeline.horizontal .timeline-content{gap:1px}}.claim-card.detail{cursor:default}.statement-detail-actions{margin-top:var(--space-4);text-align:center}.submit-btn{width:100%;max-width:400px;padding:var(--space-4);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-xl);font-size:var(--font-size-base);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;transition:all var(--transition-base);box-shadow:0 4px 16px #6366f14d}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.submit-btn svg.spin{animation:spin 1s linear infinite}.claim-receipts-preview{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2)}.claim-receipts-preview .receipt-thumb{width:48px;height:48px;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;border:2px solid var(--gray-200);background:var(--gray-100);transition:all var(--transition-base);padding:0}.claim-receipts-preview .receipt-thumb:hover{border-color:var(--primary-400);transform:scale(1.05)}.pdf-thumb{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--font-size-xs);font-weight:600;color:var(--gray-500);background:var(--gray-100)}.form-section{background:#fff;border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm)}.form-section-title{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800);margin:0 0 var(--space-4) 0;display:flex;align-items:center;gap:var(--space-2)}.field-error{font-size:var(--font-size-xs);font-weight:500;color:var(--error)}.category-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}@media (min-width: 480px){.category-selector{grid-template-columns:repeat(4,1fr)}}.category-option{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4);border:2px solid var(--gray-200);border-radius:var(--radius-xl);background:#fff;cursor:pointer;transition:all var(--transition-base);position:relative}.category-option:hover{border-color:var(--primary-300);background:var(--primary-50)}.category-option.selected{border-color:var(--primary-500);background:var(--primary-50);box-shadow:0 0 0 3px #6366f126}.category-option .cat-icon{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--gray-100);display:flex;align-items:center;justify-content:center;transition:all var(--transition-base)}.category-option.selected .cat-icon{background:var(--primary-100)}.category-option .cat-name{font-size:var(--font-size-sm);font-weight:500;color:var(--gray-700);text-align:center}.category-option.selected .cat-name{color:var(--primary-700);font-weight:600}.category-option .cat-required{position:absolute;top:8px;right:8px;font-size:10px;padding:2px 6px;background:#f59e0b1a;color:#b45309;border-radius:var(--radius-full);font-weight:500}.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-base);color:var(--gray-800);background:#fff;transition:all var(--transition-base)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary-400);box-shadow:0 0 0 3px #6366f11a}.form-input.input-error,.form-textarea.input-error{border-color:var(--error)}.form-textarea{resize:vertical;min-height:100px}.char-count{text-align:right;font-size:var(--font-size-xs);color:var(--gray-400);margin-top:var(--space-1)}.upload-hint{text-align:center;font-size:var(--font-size-xs);color:var(--gray-400);margin:var(--space-2) 0 0 0}.receipt-item{border:2px solid var(--gray-200);box-shadow:var(--shadow-sm)}.receipt-item:hover{border-color:var(--primary-300)}.submit-section{position:sticky;bottom:0;padding:var(--space-3);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px));background:#fff;margin:0 calc(-1 * var(--space-4));padding-left:var(--space-4);padding-right:var(--space-4);border-top:1px solid var(--gray-100);box-shadow:0 -4px 16px #00000014;z-index:10}@media (max-width: 768px){.submit-section{padding-bottom:calc(var(--space-4) + 80px + env(safe-area-inset-bottom,0px))}}.form-submit-btn{width:100%;padding:var(--space-3);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;transition:all var(--transition-base);box-shadow:0 4px 16px #6366f14d}@media (min-width: 480px){.form-submit-btn{padding:var(--space-4);font-size:var(--font-size-base);border-radius:var(--radius-xl)}}.form-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.form-submit-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:transparent;border:none;color:var(--gray-600);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;border-radius:var(--radius-lg);transition:all var(--transition-base)}.back-btn:hover{background:var(--gray-100);color:var(--gray-800)}.approval-statement-card{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:var(--space-3);border:1px solid var(--gray-100)}.approval-statement-header{display:flex;align-items:center;padding:var(--space-4);gap:var(--space-3);cursor:pointer;transition:background-color var(--transition-base)}.approval-statement-header:hover{background-color:var(--gray-50)}.approval-statement-meta{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-end}.statement-meta-row{display:flex;align-items:center;gap:var(--space-3)}.statement-count-badge,.statement-date{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--gray-500)}.statement-period-badge{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--primary-600);background:var(--primary-50);padding:2px 8px;border-radius:var(--radius-full)}.approval-statement-details{padding:var(--space-4);background:var(--gray-50);border-top:1px solid var(--gray-100)}.approval-list{display:flex;flex-direction:column;gap:var(--space-3)}.approval-employee-card{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;border:2px solid var(--gray-100);transition:all var(--transition-base)}.approval-employee-card.clickable{cursor:pointer}.approval-employee-card.clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--primary-400)}.employee-card-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);position:relative}.approval-avatar.large{width:64px;height:64px;font-size:var(--font-size-xl)}.employee-info{flex:1;min-width:0}.employee-name{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-800);margin-bottom:var(--space-1)}.employee-meta{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--gray-500)}.employee-position{font-weight:500}.separator{color:var(--gray-300)}.employee-department{display:flex;align-items:center;gap:var(--space-1)}.card-arrow{color:var(--gray-400);flex-shrink:0}.employee-card-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--gray-50);border-top:1px solid var(--gray-100);gap:var(--space-2);flex-wrap:wrap}.footer-item{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--gray-600)}.footer-item.highlight{margin-left:auto}.footer-icon{color:var(--gray-400);flex-shrink:0}.total-amount{font-size:var(--font-size-base);font-weight:700;color:var(--primary-600)}.employee-card-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);padding:var(--space-4);background:linear-gradient(135deg,var(--primary-50) 0%,white 100%);border-top:1px solid var(--primary-100)}@media (max-width: 640px){.employee-card-summary{grid-template-columns:1fr}}.summary-item.highlight{grid-column:span 1}@media (max-width: 640px){.summary-item.highlight{grid-column:span 1}}.approval-actions-fixed{position:sticky;bottom:0;left:0;right:0;display:flex;gap:var(--space-3);padding:var(--space-4);background:linear-gradient(to top,white 80%,rgba(255,255,255,.95) 95%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;margin:var(--space-4) calc(-1 * var(--space-4)) 0}.approval-actions-fixed .approval-btn{flex:1;padding:var(--space-4);font-size:var(--font-size-base);min-height:56px;border-radius:var(--radius-xl);font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;transition:all var(--transition-base);border:none}.approval-actions-fixed .approval-btn.approve{background:linear-gradient(135deg,#10b981,#047857);color:#fff;box-shadow:0 4px 16px #10b9814d}.approval-actions-fixed .approval-btn.approve:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.approval-actions-fixed .approval-btn.reject{background:#fff;color:var(--error);border:2px solid var(--error)}.approval-actions-fixed .approval-btn.reject:hover:not(:disabled){background:#ef44441a}.approval-actions-fixed .approval-btn:disabled{opacity:.6;cursor:not-allowed}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-4)}.modal-content{background:#fff;border-radius:var(--radius-2xl);padding:var(--space-6);max-width:500px;width:100%;box-shadow:var(--shadow-xl)}.modal-content h3{font-size:var(--font-size-xl);font-weight:700;color:var(--gray-800);margin:0 0 var(--space-2) 0}.modal-hint{font-size:var(--font-size-sm);color:var(--gray-600);margin:0 0 var(--space-4) 0}.modal-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4)}.modal-btn{flex:1;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-base);border:none}.modal-btn.secondary{background:var(--gray-100);color:var(--gray-700)}.modal-btn.secondary:hover{background:var(--gray-200)}.modal-btn.primary{background:var(--gradient-primary);color:#fff}.modal-btn.primary:hover:not(:disabled){box-shadow:0 4px 12px #6366f14d}.modal-btn.danger{background:var(--error);color:#fff}.modal-btn.danger:hover:not(:disabled){background:#dc2626}.modal-btn:disabled{opacity:.5;cursor:not-allowed}.signature-input-wrapper{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);background:#fff}.signature-input-wrapper:focus-within{border-color:var(--primary-400);box-shadow:0 0 0 3px #6366f11a}.signature-input{flex:1;border:none;outline:none;font-size:var(--font-size-base);padding:0}.signature-preview{min-height:60px;display:flex;align-items:center;justify-content:center;margin-top:var(--space-3)}.signature-display{font-family:Brush Script MT,cursive;font-size:var(--font-size-3xl);color:var(--gray-700);padding:var(--space-2) var(--space-4);border-bottom:2px solid var(--gray-300)}.statement-info-row{display:flex;justify-content:space-between;padding:var(--space-2) 0;font-size:var(--font-size-sm);border-bottom:1px solid var(--gray-200)}.statement-info-row:last-child{border-bottom:none}.info-label{color:var(--gray-600);font-weight:500}.info-value{color:var(--gray-800);font-weight:600}.approval-claims-list{margin-top:var(--space-4)}.approval-claims-list h4{font-size:var(--font-size-base);font-weight:600;color:var(--gray-700);margin:0 0 var(--space-3) 0}.approval-claim-item{display:flex;gap:var(--space-2);padding:var(--space-3);background:#fff;border-radius:var(--radius-lg);margin-bottom:var(--space-2);align-items:flex-start}.claim-item-icon{width:36px;height:36px;border-radius:var(--radius-md);background:var(--primary-100);color:var(--primary-600);display:flex;align-items:center;justify-content:center;flex-shrink:0}.claim-item-content{flex:1;min-width:0}.claim-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-1)}.claim-item-category{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-800)}.claim-item-amount{font-size:var(--font-size-sm);font-weight:700;color:var(--primary-600)}.claim-item-desc{font-size:var(--font-size-sm);color:var(--gray-600);margin-bottom:var(--space-1)}.claim-item-date{font-size:var(--font-size-xs);color:var(--gray-400)}.claim-item-receipts{display:flex;align-items:center;gap:var(--space-1);margin-top:var(--space-2)}.receipt-mini-thumb{width:32px;height:32px;border-radius:var(--radius-sm);overflow:hidden;background:var(--gray-100);display:flex;align-items:center;justify-content:center}.receipt-mini-thumb img{width:100%;height:100%;object-fit:cover}.receipt-count{font-size:var(--font-size-xs);color:var(--gray-500);font-weight:500}.loading-state.compact{padding:var(--space-6)}.expand-icon{color:var(--gray-400);transition:transform var(--transition-base)}.finance-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.finance-stat-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--gray-100)}.finance-stat-card .stat-icon-wrapper{width:56px;height:56px;border-radius:var(--radius-xl)}.finance-stat-card .stat-content{display:flex;flex-direction:column;gap:var(--space-1)}.finance-stat-card .stat-number{font-size:var(--font-size-xl);font-weight:700;color:var(--gray-800)}.employee-card-header.clickable{cursor:pointer;transition:background-color var(--transition-base)}.employee-card-header.clickable:hover{background-color:var(--gray-50)}.statement-right-info{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);margin-left:auto}.finance-details-section{padding:var(--space-4);background:var(--gray-50);border-top:1px solid var(--gray-100)}.finance-approval-info{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4)}.finance-approval-info h4{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-700);margin:0 0 var(--space-3) 0}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.info-item{display:flex;flex-direction:column;gap:var(--space-1)}.info-item .info-label{font-size:var(--font-size-xs);color:var(--gray-500)}.info-item .info-value{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-800)}.claim-card.detail{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);border:1px solid var(--gray-100)}.claim-card.detail .claim-meta{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2)}.claim-card.detail .claim-date{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--gray-500)}.claim-receipts-preview{display:flex;gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap}.claim-receipts-preview .receipt-thumb{width:56px;height:56px;border-radius:var(--radius-md);overflow:hidden;background:var(--gray-100);border:1px solid var(--gray-200)}.claim-receipts-preview .receipt-thumb img{width:100%;height:100%;object-fit:cover}.pdf-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);font-weight:600;color:var(--gray-500);background:var(--gray-100)}.payment-info-card{background:var(--gray-50);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4)}.payment-info-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) 0;border-bottom:1px solid var(--gray-200)}.payment-info-row:last-child{border-bottom:none}.payment-info-row.highlight{background:linear-gradient(135deg,var(--primary-50) 0%,white 100%);margin:var(--space-2) calc(-1 * var(--space-4));padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border-bottom:none}.payment-info-row .payment-label{font-size:var(--font-size-sm);color:var(--gray-600)}.payment-info-row .payment-value{font-size:var(--font-size-sm);font-weight:600;color:var(--gray-800)}.payment-info-row .payment-value.amount{font-size:var(--font-size-lg);color:var(--primary-600)}.empty-state .empty-icon.success{color:var(--success)}.empty-state .empty-hint{font-size:var(--font-size-sm);color:var(--gray-400);margin-top:var(--space-2)}.amount-input-wrapper{display:flex;align-items:center;background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--transition-base)}.amount-input-wrapper:focus-within{border-color:var(--primary-400)}.amount-prefix{padding:var(--space-3) var(--space-4);background:var(--gray-50);color:var(--gray-600);font-weight:600;border-right:1px solid var(--gray-200)}.amount-field{flex:1;border:none;padding:var(--space-3) var(--space-4);font-size:var(--font-size-lg);font-weight:600;outline:none}.amount-diff-hint{font-size:var(--font-size-sm);color:var(--warning);margin-top:var(--space-2)}.approval-tabs{display:flex;background:#fff;border-radius:var(--radius-xl);padding:var(--space-1);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;border:1px solid var(--gray-100)}.approval-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:600;color:var(--gray-500);background:transparent;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);position:relative;z-index:1;min-height:48px}.approval-tab:hover:not(.active){color:var(--gray-700);background:var(--gray-50)}.approval-tab.active{color:#fff;background:var(--gradient-primary);box-shadow:0 4px 12px #2b8eb34d,inset 0 1px #fff3}.approval-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 var(--space-2);font-size:11px;font-weight:700;border-radius:var(--radius-full);background:#ef444426;color:var(--error);transition:all var(--transition-base)}.approval-tab.active .approval-badge{background:#ffffff40;color:#fff}.approval-tab:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-lg);background:var(--gradient-primary);opacity:0;transform:scale(.95);transition:all var(--transition-base);z-index:-1}.approval-tab.active:before{opacity:1;transform:scale(1)}.approval-tabs.segment-style{background:var(--gray-100);border:none;box-shadow:inset 0 1px 3px #00000014}.approval-tabs.segment-style .approval-tab.active{background:#fff;color:var(--primary-700);box-shadow:var(--shadow-md)}.approval-tab svg{flex-shrink:0;transition:transform var(--transition-base)}.approval-tab.active svg{transform:scale(1.1)}@media (max-width: 480px){.approval-tabs{padding:var(--space-1)}.approval-tab{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);min-height:44px}.approval-badge{min-width:18px;height:18px;font-size:10px;padding:0 var(--space-1)}}.total-amount.paid{color:var(--success)}.paid-info{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--success);background:#10b9811a;padding:2px 8px;border-radius:var(--radius-full)}.paid-info .paid-icon{color:var(--success)}.info-value.highlight{color:var(--success);font-weight:700}.statement-user-info{display:flex;align-items:center;gap:var(--space-3)}.avatar-circle{width:48px;height:48px;border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-lg);font-weight:700;flex-shrink:0}.statement-user-info h1{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-800);margin:0}.dept-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--gray-500);background:var(--gray-100);padding:2px 8px;border-radius:var(--radius-full);margin-top:var(--space-1)}.approval-actions-fixed-bottom{position:fixed;bottom:0;left:0;right:0;display:flex;gap:var(--space-3);padding:var(--space-4);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom));background:linear-gradient(to top,white 85%,rgba(255,255,255,.95) 95%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:var(--z-sticky);max-width:100%;box-sizing:border-box}@media (min-width: 768px){.approval-actions-fixed-bottom{left:256px;padding:var(--space-4) var(--space-6)}}.action-btn{flex:1;padding:var(--space-4);font-size:var(--font-size-base);min-height:56px;border-radius:var(--radius-xl);font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;transition:all var(--transition-base);border:none}.action-btn.approve{background:linear-gradient(135deg,#10b981,#047857);color:#fff;box-shadow:0 4px 16px #10b9814d}.action-btn.approve:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.action-btn.reject{background:#fff;color:var(--error);border:2px solid var(--error)}.action-btn.reject:hover:not(:disabled){background:#ef44441a}.action-btn:disabled{opacity:.6;cursor:not-allowed}.claims-page:has(.approval-actions-fixed-bottom){padding-bottom:100px}.approval-employee-card.hover-effect{transition:all var(--transition-base)}.approval-employee-card.hover-effect:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--primary-300)}.action-arrow{display:flex;align-items:center;gap:var(--space-1);color:var(--gray-400);font-size:var(--font-size-xs);margin-top:var(--space-1)}.employee-card-header.horizontal-layout{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5)}.card-section-left{display:flex;align-items:center;gap:var(--space-4);flex:1;min-width:0}.card-section-center{display:flex;align-items:center;justify-content:center;padding:0 var(--space-4)}.card-section-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:140px}.horizontal-layout .month-highlight-badge{box-shadow:none;background:transparent;border:1px solid var(--primary-200);padding:4px 12px;min-width:auto;width:60px}.horizontal-layout .month-highlight-badge.completed{border-color:#10b981}.horizontal-layout .month-badge-header{background:transparent;padding:0;color:var(--primary-600);font-weight:600}.horizontal-layout .month-badge-header span{color:var(--gray-600)}.horizontal-layout .month-badge-number{font-size:20px;color:var(--primary-700);text-shadow:none;margin:2px 0}.horizontal-layout .month-badge-label{display:none}.horizontal-layout .month-highlight-badge{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px #667eea33;border:none;width:80px;padding:8px 0}.horizontal-layout .month-highlight-badge.completed{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px #10b98133;border:none}.horizontal-layout .month-badge-header,.horizontal-layout .month-badge-header span{color:#ffffffe6}.horizontal-layout .month-badge-number{color:#fff;font-size:24px;margin:0}.horizontal-layout .month-badge-label{display:block;font-size:10px;color:#fffc}.month-highlight-badge{display:flex;flex-direction:column;align-items:center;padding:var(--space-2) var(--space-3);background:linear-gradient(135deg,#667eea,#764ba2);border-radius:var(--radius-lg);min-width:70px;box-shadow:0 4px 12px #667eea4d}.month-highlight-badge.completed{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px #10b9814d}.month-badge-header{display:flex;align-items:center;gap:4px;font-size:10px;color:#ffffffd9;margin-bottom:2px}.month-badge-number{font-size:24px;font-weight:800;color:#fff;line-height:1;text-shadow:0 2px 4px rgba(0,0,0,.1)}.month-badge-label{font-size:10px;color:#ffffffe6;font-weight:500;margin-top:2px}.month-hero-section{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:linear-gradient(135deg,#f0f4ff,#f8f0ff);border-radius:var(--radius-xl);border:1px solid rgba(102,126,234,.2);margin-bottom:var(--space-4)}.month-hero-calendar{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 16px #667eea26;min-width:72px}.month-hero-calendar .calendar-header{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:6px 12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:11px;font-weight:500}.month-hero-calendar .calendar-body{display:flex;align-items:baseline;justify-content:center;gap:2px;padding:var(--space-2) var(--space-3)}.month-hero-calendar .calendar-month{font-size:32px;font-weight:800;color:var(--gray-800);line-height:1}.month-hero-calendar .calendar-label{font-size:14px;font-weight:600;color:var(--gray-500)}.month-hero-info{flex:1}.month-hero-title{font-size:var(--font-size-xl);font-weight:700;color:var(--gray-800);margin:0 0 var(--space-1) 0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.month-hero-desc{font-size:var(--font-size-sm);color:var(--gray-500);margin:0}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;animation:fadeIn .2s ease-out forwards}.modal-content{background:#fff;border-radius:16px;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #00000003;width:90%;max-width:450px;position:relative;transform:scale(.95);opacity:0;animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards;overflow:hidden;display:flex;flex-direction:column}.modal-header{padding:24px 24px 12px;display:flex;align-items:center;gap:12px}.modal-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.modal-icon.warning{background-color:#fef3c7;color:#d97706}.modal-icon.danger{background-color:#fee2e2;color:#dc2626}.modal-icon.success{background-color:#d1fae5;color:#059669}.modal-icon.info{background-color:#dbeafe;color:#2563eb}.modal-title{font-size:1.125rem;font-weight:600;color:#111827;margin:0}.modal-body{padding:8px 24px 24px;color:#6b7280;font-size:.95rem;line-height:1.5}.modal-footer{padding:16px 24px;background-color:#f9fafb;border-top:1px solid #E5E7EB;display:flex;justify-content:flex-end;gap:12px}.modal-btn{display:inline-flex;justify-content:center;align-items:center;padding:8px 16px;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.modal-btn.secondary{background-color:#fff;border-color:#d1d5db;color:#374151}.modal-btn.secondary:hover{background-color:#f3f4f6;border-color:#9ca3af}.modal-btn.primary{background-color:#2563eb;color:#fff;box-shadow:0 1px 2px #0000000d}.modal-btn.primary:hover{background-color:#1d4ed8}.modal-btn.danger{background-color:#dc2626;color:#fff;box-shadow:0 1px 2px #0000000d}.modal-btn.danger:hover{background-color:#b91c1c}@keyframes scaleIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.lightbox-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;z-index:9999;display:flex;align-items:center;justify-content:center}.lightbox-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.lightbox-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#00000080}.lightbox-counter{color:#fff;font-size:.875rem}.lightbox-actions{display:flex;gap:.5rem}.lightbox-actions button{background:#ffffff1a;border:none;color:#fff;padding:.5rem;border-radius:.5rem;cursor:pointer;transition:background .2s}.lightbox-actions button:hover{background:#fff3}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:1rem}.lightbox-image{max-width:100%;max-height:100%;object-fit:contain;transition:transform .3s}.lightbox-content.zoomed .lightbox-image{max-width:none;max-height:none;cursor:zoom-out}.lightbox-pdf{width:80%;height:100%;background:#fff;border-radius:.5rem;overflow:hidden}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff1a;border:none;color:#fff;padding:1rem;cursor:pointer;transition:background .2s;border-radius:.5rem}.lightbox-nav:hover{background:#fff3}.lightbox-prev{left:1rem}.lightbox-next{right:1rem}.lightbox-thumbnails{display:flex;justify-content:center;gap:.5rem;padding:1rem;background:#00000080;overflow-x:auto}.lightbox-thumb{width:48px;height:48px;border:2px solid transparent;border-radius:.375rem;overflow:hidden;cursor:pointer;padding:0;background:#ffffff1a;transition:border-color .2s}.lightbox-thumb.active{border-color:var(--primary-500)}.lightbox-thumb img{width:100%;height:100%;object-fit:cover}.thumb-pdf{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:.625rem;color:#fff;font-weight:600}@media (max-width: 768px){.lightbox-nav{padding:.75rem}.lightbox-prev{left:.5rem}.lightbox-next{right:.5rem}}.attendance-page{display:flex;flex-direction:column;gap:var(--space-6)}.attendance-header{display:flex;flex-direction:column;gap:var(--space-4)}@media (min-width: 768px){.attendance-header{flex-direction:row;align-items:center;justify-content:space-between}}.attendance-title{display:flex;align-items:center;gap:var(--space-3)}.attendance-title h1{font-size:var(--font-size-2xl);font-weight:700;color:var(--gray-800);margin:0}.attendance-title svg{color:var(--primary-500)}.attendance-month-picker{display:flex;align-items:center;gap:var(--space-2);background:#fff;padding:var(--space-2) var(--space-3);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}.month-picker-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);color:var(--gray-600);background:transparent;border:none;cursor:pointer;transition:all var(--transition-base)}.month-picker-btn:hover{background:var(--gray-100);color:var(--primary-600)}.month-picker-label{font-size:var(--font-size-base);font-weight:600;color:var(--gray-800);min-width:120px;text-align:center}.attendance-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}@media (min-width: 768px){.attendance-stats{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}}.attendance-stat-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:var(--space-4);transition:all var(--transition-base);border:1px solid var(--gray-100)}.attendance-stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.attendance-stat-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.attendance-stat-icon.primary{background:var(--primary-100);color:var(--primary-600)}.attendance-stat-icon.success{background:#10b9811a;color:var(--accent-green)}.attendance-stat-icon.warning{background:#f59e0b1a;color:var(--accent-orange)}.attendance-stat-icon.danger{background:#ef44441a;color:var(--accent-red)}.attendance-stat-content h3{font-size:var(--font-size-2xl);font-weight:700;color:var(--gray-800);margin:0;line-height:1.2}.attendance-stat-content p{font-size:var(--font-size-sm);color:var(--gray-500);margin:0}.attendance-table-card{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid var(--gray-100)}.attendance-table-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between}.attendance-table-title{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-800)}.attendance-table-wrapper{overflow-x:auto}.attendance-table{width:100%;border-collapse:collapse;min-width:600px}.attendance-table th{text-align:left;padding:var(--space-3) var(--space-4);font-size:var(--font-size-xs);font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;background:var(--gray-50);border-bottom:1px solid var(--gray-200)}.attendance-table td{padding:var(--space-4);font-size:var(--font-size-sm);color:var(--gray-700);border-bottom:1px solid var(--gray-100);vertical-align:middle}.attendance-table tbody tr{transition:background var(--transition-base)}.attendance-table tbody tr:hover{background:var(--gray-50)}.attendance-table tbody tr:last-child td{border-bottom:none}.attendance-date-cell{display:flex;flex-direction:column}.attendance-date-primary{font-weight:600;color:var(--gray-800)}.attendance-date-weekday{font-size:var(--font-size-xs);color:var(--gray-500)}.attendance-time{font-variant-numeric:tabular-nums;font-family:SF Mono,Fira Code,monospace;font-weight:500}.attendance-time.missing{color:var(--gray-400);font-style:italic}.attendance-duration{font-weight:600;color:var(--primary-700);font-variant-numeric:tabular-nums}.attendance-location-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);background:var(--gray-100);color:var(--gray-500);border:none;cursor:pointer;transition:all var(--transition-base)}.attendance-location-toggle:hover,.attendance-location-toggle.expanded{background:var(--primary-100);color:var(--primary-600)}.attendance-location-toggle svg{transition:transform var(--transition-base)}.attendance-location-toggle.expanded svg{transform:rotate(180deg)}.attendance-location-row td{padding:0 var(--space-4) var(--space-4);background:var(--gray-50)}.attendance-location-content{display:flex;gap:var(--space-4);flex-wrap:wrap}.attendance-location-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#fff;border-radius:var(--radius-lg);border:1px solid var(--gray-200)}.attendance-location-item svg{color:var(--gray-400)}.attendance-location-item span{font-size:var(--font-size-xs);color:var(--gray-600);font-family:SF Mono,Fira Code,monospace}.attendance-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);color:var(--gray-400)}.attendance-empty svg{margin-bottom:var(--space-4);opacity:.5}.attendance-empty p{font-size:var(--font-size-sm)}.attendance-loading{display:flex;align-items:center;justify-content:center;padding:var(--space-12);color:var(--primary-500)}.attendance-download-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--primary-50);color:var(--primary-600);border:1px solid var(--primary-100);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;height:48px}.attendance-download-btn:hover:not(:disabled){background:var(--primary-100);border-color:var(--primary-200);transform:translateY(-1px)}.attendance-download-btn:disabled{opacity:.5;cursor:not-allowed;background:var(--gray-100);color:var(--gray-400);border-color:var(--gray-200)}@media (max-width: 768px){.attendance-download-btn{width:100%;justify-content:center;height:40px}}.attendance-pdf-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}.attendance-pdf-modal{background:#fff;border-radius:var(--radius-xl);width:100%;max-width:900px;height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.attendance-pdf-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--gray-200);background:var(--gray-50)}.attendance-pdf-header h3{display:flex;align-items:center;gap:var(--space-2);margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--gray-800)}.attendance-pdf-header h3 svg{color:var(--primary-500)}.attendance-pdf-actions{display:flex;align-items:center;gap:var(--space-2)}.attendance-pdf-download{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-base)}.attendance-pdf-download:hover{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.attendance-pdf-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:none;border-radius:var(--radius-lg);color:var(--gray-500);cursor:pointer;transition:all var(--transition-base)}.attendance-pdf-close:hover{background:var(--gray-100);color:var(--gray-700)}.attendance-pdf-content{flex:1;overflow:hidden}.attendance-pdf-content iframe{width:100%;height:100%;border:none}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0c1929,#0f2744 40%,#1a365d,#2b4a7d);padding:1rem;position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;top:-50%;right:-30%;width:80%;height:150%;background:radial-gradient(ellipse,rgba(59,130,246,.08) 0%,transparent 60%);pointer-events:none}.login-page:after{content:"";position:absolute;bottom:-30%;left:-20%;width:60%;height:100%;background:radial-gradient(ellipse,rgba(34,211,238,.05) 0%,transparent 50%);pointer-events:none}.login-container{background:#fffffffa;border-radius:1.75rem;padding:3rem;width:100%;max-width:420px;box-shadow:0 25px 60px -15px #00000059,0 0 0 1px #ffffff1a,inset 0 1px #fffc;text-align:center;position:relative;z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-header{margin-bottom:2.5rem}.login-logo{width:auto;max-width:180px;height:auto;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}.login-logo img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(15,39,68,.15))}.login-subtitle{font-size:1.125rem;font-weight:500;color:#475569;margin:0;letter-spacing:.05em}.login-error{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.25rem;background:linear-gradient(135deg,#fef2f2,#fff5f5);border:1px solid #fecaca;border-radius:.875rem;color:#dc2626;font-size:.875rem;margin-bottom:1.5rem;box-shadow:0 2px 8px #dc26261a}.google-login-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.875rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#f8fafc,#fff);border:2px solid #e2e8f0;border-radius:.875rem;font-size:1rem;font-weight:600;color:#1e293b;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000000a}.google-login-btn:hover:not(:disabled){border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#fff);transform:translateY(-2px);box-shadow:0 8px 24px #3b82f62e,0 2px 8px #0000000f}.google-login-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #3b82f61a}.google-login-btn:disabled{opacity:.6;cursor:not-allowed}.google-login-btn svg{flex-shrink:0}.login-note{margin-top:1.75rem;font-size:.8rem;color:#94a3b8;letter-spacing:.02em}.admin-link{display:inline-flex;align-items:center;gap:.25rem;margin-top:1.75rem;font-size:.875rem;font-weight:500;color:#3b82f6;text-decoration:none;transition:all .2s ease;padding:.5rem 1rem;border-radius:.5rem}.admin-link:hover{color:#1d4ed8;background:#3b82f614}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@media (max-width: 480px){.login-container{padding:2rem 1.5rem;border-radius:1.25rem;margin:1rem}.login-logo{max-width:150px}.login-subtitle{font-size:1rem}}:root{--primary-50: #e8eef4;--primary-100: #c5d5e4;--primary-200: #9fb9d1;--primary-300: #789dbe;--primary-400: #5a88b0;--primary-500: #3d73a2;--primary-600: #2d5a80;--primary-700: #1e3a5f;--primary-800: #152a45;--primary-900: #0d1a2b;--accent-pink: #ec4899;--accent-cyan: #06b6d4;--accent-orange: #f59e0b;--accent-green: #10b981;--accent-red: #ef4444;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--info: #3d73a2;--gradient-primary: linear-gradient(135deg, #5a88b0 0%, #3d73a2 40%, #1e3a5f 100%);--gradient-hero: linear-gradient(135deg, #3d73a2 0%, #1e3a5f 100%);--gradient-card: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 100%);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-glow: 0 0 20px rgba(30, 58, 95, .3);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--sidebar-width: 0px;--header-height: 56px;--bottom-nav-height: 64px}@media (min-width: 768px){:root{--sidebar-width: 260px;--header-height: 64px;--bottom-nav-height: 0px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--gray-800);background-color:var(--gray-50);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;min-height:100dvh}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none}input,textarea,select{font-family:inherit;font-size:inherit}img,svg{display:block;max-width:100%}ul,ol{list-style:none}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.px-3{padding-left:var(--space-3);padding-right:var(--space-3)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)}.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-center{text-align:center}.text-gray-400{color:var(--gray-400)}.text-gray-500{color:var(--gray-500)}.text-gray-600{color:var(--gray-600)}.text-gray-700{color:var(--gray-700)}.text-primary{color:var(--primary-600)}.text-white{color:#fff}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh;min-height:100dvh}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:var(--radius-full)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.bg-white{background-color:#fff}.bg-gray-50{background-color:var(--gray-50)}.bg-gray-100{background-color:var(--gray-100)}.bg-primary{background:var(--gradient-primary)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.hidden{display:none}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-y-auto{overflow-y:auto}.transition{transition:all var(--transition-base)}.card{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card-header{padding:var(--space-4);border-bottom:1px solid var(--gray-100)}.card-body{padding:var(--space-4)}@media (min-width: 768px){.card-header,.card-body{padding:var(--space-6)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:500;border-radius:var(--radius-lg);transition:all var(--transition-base);white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{box-shadow:var(--shadow-lg),var(--shadow-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#fff;color:var(--gray-700);border:1px solid var(--gray-200)}.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-300)}.btn-ghost{background:transparent;color:var(--gray-600)}.btn-ghost:hover{background:var(--gray-100)}.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--radius-lg)}@media (min-width: 768px){.btn{padding:var(--space-2) var(--space-4);min-height:40px}.btn-icon{width:40px;height:40px}}.input-group{display:flex;flex-direction:column;gap:var(--space-2)}.input-label{font-size:var(--font-size-sm);font-weight:500;color:var(--gray-700)}.input{width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-base);border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:#fff;transition:border-color var(--transition-base),box-shadow var(--transition-base);min-height:48px}.input:focus{outline:none;border-color:var(--primary-400);box-shadow:0 0 0 3px #2b8eb326}.input::placeholder{color:var(--gray-400)}.input-with-icon{position:relative}.input-with-icon .input{padding-left:44px}.input-with-icon .input-icon{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);color:var(--gray-400)}@media (min-width: 768px){.input{min-height:44px}}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:500;border-radius:var(--radius-full)}.badge-primary{background:var(--primary-100);color:var(--primary-700)}.badge-success{background:#10b9811a;color:var(--success)}.badge-warning{background:#f59e0b1a;color:var(--warning)}.badge-error{background:#ef44441a;color:var(--error)}.avatar{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--gradient-primary);color:#fff;font-weight:600;flex-shrink:0;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-sm{width:32px;height:32px;font-size:var(--font-size-xs)}.avatar-md{width:40px;height:40px;font-size:var(--font-size-sm)}.avatar-lg{width:48px;height:48px;font-size:var(--font-size-base)}.avatar-xl{width:64px;height:64px;font-size:var(--font-size-lg)}.avatar-2xl{width:96px;height:96px;font-size:var(--font-size-2xl)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-6);text-align:center}.empty-state-icon{width:64px;height:64px;margin-bottom:var(--space-4);color:var(--gray-300)}.empty-state-title{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-700);margin-bottom:var(--space-2)}.empty-state-desc{color:var(--gray-500);max-width:300px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-fadeIn{animation:fadeIn var(--transition-base) ease-out}.animate-slideUp{animation:slideUp var(--transition-slow) ease-out}.animate-slideInRight{animation:slideInRight var(--transition-slow) ease-out}.animate-scaleIn{animation:scaleIn var(--transition-base) ease-out}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.stagger-item{animation:slideUp var(--transition-slow) ease-out both}.stagger-item:nth-child(1){animation-delay:0ms}.stagger-item:nth-child(2){animation-delay:50ms}.stagger-item:nth-child(3){animation-delay:.1s}.stagger-item:nth-child(4){animation-delay:.15s}.stagger-item:nth-child(5){animation-delay:.2s}.stagger-item:nth-child(6){animation-delay:.25s}.stagger-item:nth-child(7){animation-delay:.3s}.stagger-item:nth-child(8){animation-delay:.35s}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}@supports (padding-bottom: env(safe-area-inset-bottom)){:root{--safe-area-bottom: env(safe-area-inset-bottom)}}