:root{--primary: #F04D25;--primary-hover: #FF8A65;--secondary: #94A3B8;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--bg-main: #FFFFFF;--bg-card: #F8FAFC;--bg-hover: #F1F5F9;--bg-overlay: rgba(255, 255, 255, .8);--btn-bg: #F1F5F9;--btn-text: #1E293B;--btn-hover-bg: #F1F5F9;--btn-hover-text: #F04D25;--text-primary: #0F172A;--text-secondary: #334155;--text-muted: #64748B;--sidebar-width: 260px;--sidebar-collapsed-width: 64px;--header-height: 64px;--shadow: none;--border-radius: 12px;--transition-speed: .3s;--transition-timing: cubic-bezier(.4, 0, .2, 1)}.dark{--bg-main: #0F172A;--bg-card: #1E293B;--bg-hover: #334155;--bg-overlay: rgba(15, 23, 42, .8);--btn-bg: #1E293B;--btn-text: #F8FAFC;--btn-hover-bg: #1E293B;--btn-hover-text: #F04D25;--text-primary: #F8FAFC;--text-secondary: #CBD5E1;--text-muted: #94A3B8;--shadow: none}body{transition:background-color var(--transition-speed) var(--transition-timing),color var(--transition-speed) var(--transition-timing);background-color:var(--bg-main);color:var(--text-primary)}*{transition:background-color var(--transition-speed) var(--transition-timing),border-color var(--transition-speed) var(--transition-timing),color var(--transition-speed) var(--transition-timing),box-shadow var(--transition-speed) var(--transition-timing);margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.app-container{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--bg-card);border-right:1px solid var(--bg-hover);padding:24px 16px;position:fixed;height:100vh;display:flex;flex-direction:column;transition:width .3s cubic-bezier(.4,0,.2,1);z-index:100}.sidebar.collapsed{width:var(--sidebar-collapsed-width);padding:20px 8px}.sidebar.collapsed .logo-text,.sidebar.collapsed .nav-link span,.sidebar.collapsed .nav-section-title,.sidebar.collapsed .user-info-text,.sidebar.collapsed .version-text,.sidebar.collapsed .logo-subtitle{display:none}.sidebar.collapsed .logo{justify-content:center}.logo{display:flex;align-items:center;gap:12px;margin-top:0;padding:20px 16px;border-bottom:1px solid var(--bg-hover);margin-bottom:10px}.logo-img{width:44px;height:44px;object-fit:contain}.logo-text{display:flex;flex-direction:column;line-height:1}.logo-title{font-size:1.5rem;font-weight:800;color:var(--text-primary);letter-spacing:-.02em;text-transform:uppercase;margin:0;display:block}.logo-subtitle{font-size:.65rem;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}.sidebar-toggle{position:absolute;right:-12px;top:32px;width:24px;height:24px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;box-shadow:var(--shadow);z-index:101}.sidebar-nav-wrapper{display:flex;flex-direction:column;flex:1;overflow-y:auto;scrollbar-width:none}.sidebar-nav-wrapper::-webkit-scrollbar{display:none}.nav-section{margin-bottom:24px}.secondary-nav{margin-top:auto}.user-info{padding-top:16px;border-top:1px solid var(--bg-hover);margin-top:16px}.user-info-inner{display:flex;align-items:center;gap:12px}.user-name{font-weight:500;font-size:.875rem}.user-role{font-size:.75rem;color:var(--text-muted)}.version-text{font-size:.65rem;color:var(--text-muted);text-align:center;margin-top:12px;opacity:.7}.nav-section-title{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}.nav-link{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;color:var(--text-secondary);transition:all .2s ease;margin-bottom:4px}.nav-link:hover{background:var(--bg-hover);color:var(--primary)!important}.nav-link.active{background:var(--bg-hover);color:var(--primary);font-weight:600}.main-content{flex:1;padding:20px}.content-layout{flex:1;margin-left:var(--sidebar-width);transition:margin-left .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;min-height:100vh;width:calc(100% - var(--sidebar-width));overflow-x:hidden}.content-layout.expanded{margin-left:var(--sidebar-collapsed-width);width:calc(100% - var(--sidebar-collapsed-width))}.content-layout.full-width{margin-left:0;width:100%}.pill-3d-btn{background:var(--btn-bg)!important;color:var(--text-primary)!important;transition:all .2s ease!important;box-shadow:none!important;border:1px solid var(--bg-hover)!important}.pill-3d-btn:hover{background:var(--bg-hover)!important;color:var(--primary)!important}.pill-3d-btn .text-content{color:inherit!important}.pill-3d-btn .icon-box{background:#0000000d!important;color:inherit!important}.pill-3d-btn:hover .icon-box{background:#fff3!important}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.page-title{font-size:1.75rem;font-weight:700}.header-actions{display:flex;gap:12px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:32px}.stat-card{background:var(--bg-card);border-radius:var(--border-radius);padding:24px;display:flex;align-items:center;gap:16px;transition:transform .2s ease,box-shadow .2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.stat-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px}.stat-icon.primary{background:#3b82f633;color:var(--primary)}.stat-icon.success{background:#22c55e33;color:var(--success)}.stat-icon.warning{background:#f59e0b33;color:var(--warning)}.stat-icon.danger{background:#ef444433;color:var(--danger)}.stat-info h3{font-size:.875rem;color:var(--text-secondary);font-weight:500}.stat-info .value{font-size:2rem;font-weight:700}.table-container{background:var(--bg-card);border-radius:var(--border-radius);overflow:hidden}.table-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--bg-hover)}.table-title{font-size:1.125rem;font-weight:600}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:16px 24px}th{background:var(--bg-hover);font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:0}tr:not(:last-child) td{border-bottom:1px solid var(--bg-hover)}tr:hover td{background:#ffffff05}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:50px;font-size:.75rem;font-weight:500}.badge.pending{background:#f59e0b33;color:var(--warning)}.badge.approved{background:#22c55e33;color:var(--success)}.badge.checked-in{background:#3b82f633;color:var(--primary)}.badge.checked-out{background:#64748b33;color:var(--secondary)}.badge.rejected{background:#ef444433;color:var(--danger)}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;transition:all .2s ease}.btn-primary{background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--bg-hover)}.btn-primary:hover{background:var(--btn-hover-bg);color:var(--btn-hover-text)}.btn-secondary{background:var(--bg-hover);color:var(--text-primary)}.btn-secondary:hover{background:#ffffff1a}.btn-sm{padding:8px 16px;font-size:.75rem}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:10px;font-size:.95rem;font-weight:600;color:var(--text-secondary)}.form-input{width:100%;padding:14px 20px;background:var(--bg-hover);border:1px solid transparent;border-radius:12px;color:var(--text-primary);font-size:1rem;transition:border-color .2s ease}@media(max-width:1024px){.form-input{padding:16px 22px;font-size:1.1rem}.form-label{font-size:1rem}}.form-input:focus{outline:none;border-color:var(--primary)}.verify-container h3{font-size:1.5rem;margin-bottom:12px}.verify-container p{font-size:1.05rem;line-height:1.5}@media(max-width:1024px){.verify-container{max-width:500px!important}.verify-container h3{font-size:1.75rem}.verify-container p{font-size:1.2rem}.btn{padding:16px 32px;font-size:1.1rem;border-radius:12px}}.form-input::placeholder{color:var(--text-muted)}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--bg-card);border-radius:var(--border-radius);width:100%;max-width:500px;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--bg-hover)}.modal-title{font-size:1.125rem;font-weight:600}.modal-body{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid var(--bg-hover)}.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem}.loading{display:flex;align-items:center;justify-content:center;padding:48px}.spinner{width:40px;height:40px;border:3px solid var(--bg-hover);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}@media(max-width:768px){.app-container{flex-direction:column}.mobile-top-header{display:flex!important;align-items:center;justify-content:space-between!important;padding:0 16px!important;background:var(--bg-card);border-bottom:1px solid var(--bg-hover);position:fixed;top:0;left:0;width:100%;height:60px;z-index:1000}.mobile-top-header img{height:32px;width:32px;object-fit:contain}.header-actions{display:flex!important;align-items:center;gap:12px}.mobile-logout-btn{display:flex!important;align-items:center;gap:6px;background:var(--bg-hover);color:var(--text-primary);border:none;padding:6px 12px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.mobile-logout-btn:active{background:#f04d251a;color:var(--primary)}.sidebar{width:100%!important;height:70px!important;position:fixed!important;bottom:0!important;top:auto!important;left:0!important;flex-direction:row!important;padding:0!important;border-right:none!important;border-top:1px solid var(--bg-hover)!important;background:var(--bg-card)!important;z-index:1000!important;justify-content:space-around!important;align-items:center!important}.sidebar-nav-wrapper{flex-direction:row!important;width:100%!important;height:100%!important;justify-content:space-around!important;align-items:center!important;overflow:hidden!important;display:flex!important}.nav-section{display:contents!important}.nav-link{flex-direction:column!important;justify-content:center!important;align-items:center!important;padding:10px!important;gap:0!important;margin-bottom:0!important;background:transparent!important;border-radius:0!important;flex:1!important}.nav-link span{display:none!important}.nav-link svg{width:24px!important;height:24px!important}.nav-link.active{color:var(--primary)!important;border-top:2px solid var(--primary)!important}.logo,.sidebar-toggle,.secondary-nav,.user-info,.version-text,.nav-section-title{display:none!important}.main-content{margin-left:0!important;padding:16px!important;margin-top:60px!important;margin-bottom:70px!important}.content-layout{margin-left:0!important;width:100%!important}}.mobile-top-header{display:none}@media(max-width:480px){.sidebar{padding:8px 12px}.nav-link{padding:8px}.logo-img{width:24px;height:24px}.main-content{padding:16px}html{font-size:14px}}.avatar-group{display:flex;align-items:center}.avatar-sm{width:32px;height:32px;border-radius:50%;background:var(--bg-hover);border:2px solid var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;object-fit:cover}.sub-table{border-collapse:separate;border-spacing:0 8px}.sub-table tr{background:var(--bg-card)}.sub-table td{padding:12px;border:none}.sub-table tr:hover td{background:var(--bg-hover)!important}