@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root,:root[data-theme=dark]{--bg-base:#0a0e1a;--bg-card:#ffffff0a;--bg-card-hover:#ffffff12;--border:#ffffff14;--border-focus:#63d29680;--text-primary:#f0f4ff;--text-secondary:#8892b0;--text-muted:#495670;--accent-green:#3dffa0;--accent-green-dim:#3dffa01f;--accent-red:#ff4d6d;--accent-red-dim:#ff4d6d1f;--accent-amber:#ffb830;--accent-amber-dim:#ffb8301f;--accent-blue:#4facfe;--accent-blue-dim:#4facfe1f;--accent-purple:#a855f7;--personnel-color:#4facfe;--resident-color:#a855f7;--visiteur-color:#ffb830;--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--shadow:0 4px 24px #0006;--shadow-lg:0 8px 48px #0009;--topbar-bg:#0a0e1af2;--btn-primary-text:#0a0e1a;--modal-bg:#12172a;--tab-active-text:#0a0e1a}:root[data-theme=light]{--bg-base:#f8fafc;--bg-card:#fff;--bg-card-hover:#f1f5f9;--border:#e2e8f0;--border-focus:#10b98180;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--accent-green:#10b981;--accent-green-dim:#10b9811f;--accent-red:#ef4444;--accent-red-dim:#ef44441f;--accent-amber:#f59e0b;--accent-amber-dim:#f59e0b1f;--accent-blue:#3b82f6;--accent-blue-dim:#3b82f61f;--accent-purple:#8b5cf6;--personnel-color:#3b82f6;--resident-color:#8b5cf6;--visiteur-color:#f59e0b;--shadow:0 4px 20px #0000000d;--shadow-lg:0 8px 40px #0000001a;--topbar-bg:#f8fafcf2;--btn-primary-text:#fff;--modal-bg:#fff;--tab-active-text:#fff}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:15px}body{background:var(--bg-base);color:var(--text-primary);min-height:100vh;font-family:Inter,system-ui,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--border);z-index:100;background:#ffffff08;flex-direction:column;flex-shrink:0;width:240px;padding:0;display:flex;position:fixed;top:0;bottom:0;left:0}.main-area{flex-direction:column;flex:1;min-height:100vh;margin-left:240px;display:flex}.topbar{border-bottom:1px solid var(--border);background:var(--topbar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:50;justify-content:space-between;align-items:center;height:60px;padding:0 24px;display:flex;position:sticky;top:0}.topbar-left{align-items:center;display:flex}.hamburger-menu{color:var(--text-primary);margin-right:16px}.page-content{flex:1;padding:32px 28px}.sidebar-scrollable-content{scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;flex:1;padding-bottom:16px;overflow:hidden auto}.sidebar-scrollable-content::-webkit-scrollbar{width:4px}.sidebar-scrollable-content::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}[data-theme=light] .sidebar-scrollable-content{scrollbar-color:#0000001a transparent}[data-theme=light] .sidebar-scrollable-content::-webkit-scrollbar-thumb{background:#0000001a}.sidebar-logo{border-bottom:1px solid var(--border);padding:22px 20px 18px}.sidebar-logo h1{letter-spacing:-.3px;background:linear-gradient(135deg, var(--accent-green), var(--accent-blue));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.15rem;font-weight:800}.sidebar-logo p{color:var(--text-muted);margin-top:2px;font-size:.72rem}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px 10px;display:flex}.nav-item{border-radius:var(--radius-sm);color:var(--text-secondary);border:1px solid #0000;align-items:center;gap:10px;padding:10px 12px;font-size:.88rem;font-weight:500;transition:all .15s;display:flex}.nav-item:hover{background:var(--bg-card);color:var(--text-primary)}.nav-item.active{background:var(--accent-green-dim);color:var(--accent-green);border-color:#3dffa026}.nav-item svg{flex-shrink:0}.nav-section-label{letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase;padding:14px 12px 6px;font-size:.68rem;font-weight:600}.status-badge{border:1px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:6px 14px;font-size:.8rem;font-weight:600;transition:all .3s;display:flex}.status-badge.online{background:var(--accent-green-dim);color:var(--accent-green);border-color:#3dffa033}.status-badge.offline{background:var(--accent-red-dim);color:var(--accent-red);border-color:#ff4d6d33}.status-badge.syncing{background:var(--accent-amber-dim);color:var(--accent-amber);border-color:#ffb83033}.status-dot{border-radius:50%;width:8px;height:8px;animation:2s infinite pulse}.online .status-dot{background:var(--accent-green)}.offline .status-dot{background:var(--accent-red);animation:none}.syncing .status-dot{background:var(--accent-amber)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:border-color .2s}.card:hover{border-color:#ffffff21}.card-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:28px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;gap:4px;padding:24px;transition:transform .2s,border-color .2s;display:flex;position:relative;overflow:hidden}.stat-card:hover{border-color:#ffffff26;transform:translateY(-2px)}.stat-icon-wrapper{opacity:.15;pointer-events:none;position:absolute;top:20px;right:20px;transform:scale(1.5)}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:700}.stat-value{margin:4px 0;font-size:2.25rem;font-weight:800;line-height:1.1}.stat-sub{color:var(--text-secondary);font-size:.78rem;font-weight:500}.page-header{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.page-header h2{font-size:1.5rem;font-weight:700}.page-header p{color:var(--text-secondary);margin-top:4px;font-size:.85rem}.btn{border-radius:var(--radius-sm);white-space:nowrap;border:1px solid #0000;align-items:center;gap:7px;padding:9px 18px;font-size:.875rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-primary{background:var(--accent-green);color:var(--btn-primary-text)}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn-outline{border-color:var(--border);color:var(--text-primary);background:0 0}.btn-outline:hover{background:var(--bg-card);border-color:#fff3}.btn-danger{background:var(--accent-red-dim);color:var(--accent-red);border-color:#ff4d6d40}.btn-danger:hover{background:#ff4d6d40}.btn-sm{padding:5px 12px;font-size:.8rem}.btn-icon{cursor:pointer;color:var(--text-muted);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:inline-flex}.btn-icon:hover{color:var(--text-primary);background:#ffffff14}.form-group{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.form-label{color:var(--text-secondary);font-size:.82rem;font-weight:600}.form-input,.form-select{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);background:#ffffff0d;outline:none;width:100%;padding:10px 14px;font-size:.9rem;transition:border-color .15s}.form-input:focus,.form-select:focus{border-color:var(--border-focus);background:#ffffff12}.form-select option{background:var(--modal-bg);color:var(--text-primary)}.form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}.table-wrapper{border-radius:var(--radius-md);border:1px solid var(--border);overflow-x:auto}table{border-collapse:collapse;width:100%}thead{background:#ffffff08}th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border);padding:14px 16px;font-size:.7rem;font-weight:700}td{color:var(--text-primary);border-bottom:1px solid #ffffff05;padding:14px 16px;font-size:.9rem}tbody tr{transition:background .1s}tbody tr:hover{background:#ffffff05}[data-theme=light] tbody tr:hover{background:#00000005}tbody tr:last-child td{border-bottom:none}.badge{letter-spacing:.03em;border-radius:999px;align-items:center;gap:4px;padding:3px 10px;font-size:.74rem;font-weight:600;display:inline-flex}.badge-personnel{color:var(--personnel-color);background:#4facfe1f}.badge-resident{color:var(--resident-color);background:#a855f71f}.badge-visiteur{color:var(--visiteur-color);background:#ffb8301f}.badge-asset{background:var(--accent-green-dim);color:var(--accent-green)}.badge-in{color:var(--accent-green);background:#3dffa01a}.badge-out{color:var(--accent-red);background:#ff4d6d1a}.badge-blacklist{color:var(--accent-red);background:#ff4d6d1f}.tabs{border-radius:var(--radius-md);background:#ffffff0a;gap:4px;margin-bottom:24px;padding:4px;display:flex}.tab{border-radius:var(--radius-sm);text-align:center;color:var(--text-secondary);background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px;font-size:.875rem;font-weight:600;transition:all .15s;display:flex}.tab:hover{color:var(--text-primary);background:#ffffff0a}.tab.active-tab{color:var(--tab-active-text);background:var(--accent-green)}.tab.tab-personnel.active-tab{background:var(--personnel-color)}.tab.tab-resident.active-tab{background:var(--resident-color)}.tab.tab-visiteur.active-tab{background:var(--visiteur-color)}.modal-overlay{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--modal-bg);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:520px;box-shadow:var(--shadow-lg);padding:28px;animation:.2s slideUp}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-header h3{font-size:1.1rem;font-weight:700}.modal-footer{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px;font-size:.9rem}.empty-state svg{opacity:.2;margin-bottom:12px}.error-msg{color:var(--accent-red);background:var(--accent-red-dim);border-radius:var(--radius-sm);margin-bottom:12px;padding:8px 12px;font-size:.82rem}.loading{color:var(--text-muted);text-align:center;padding:40px;font-size:.9rem}.filter-bar{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px;display:flex}.filter-bar .form-select{width:auto}.flex-end{justify-content:flex-end;display:flex}.gap-2{gap:8px}.login-page{background:radial-gradient(circle at top right, #4facfe0d, transparent 40%), radial-gradient(circle at bottom left, #3dffa00d, transparent 40%), var(--bg-base);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-container{width:100%;max-width:420px;animation:.5s cubic-bezier(.16,1,.3,1) slideUp}.login-header{text-align:center;margin-bottom:32px}.login-logo-wrapper{background:linear-gradient(135deg, var(--accent-blue), #00f2fe);color:#fff;border-radius:16px;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:20px;display:inline-flex;box-shadow:0 8px 16px #4facfe40}.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:40px}.login-title{letter-spacing:-.5px;color:var(--text-primary);margin-bottom:8px;font-size:1.75rem;font-weight:800}.login-subtitle{color:var(--text-secondary);font-size:.95rem;font-weight:500}.login-footer{text-align:center;color:var(--text-muted);margin-top:32px;font-size:.85rem}.login-footer a{color:var(--text-secondary);margin:0 8px;font-weight:600;transition:color .2s}.login-footer a:hover{color:var(--accent-blue)}.establishment-logo{object-fit:contain;filter:drop-shadow(0 4px 12px #0000001a);max-width:140px;max-height:64px;animation:.8s forwards fadeIn}.password-wrapper{position:relative}.password-toggle{color:var(--text-muted);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.password-toggle:hover{color:var(--text-primary)}.loader-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-input{height:48px;font-size:1rem}.login-button{background:var(--accent-blue);color:#fff;border-radius:var(--radius-sm);width:100%;height:48px;margin-top:8px;font-size:1rem;font-weight:700;transition:all .2s}.login-button:hover:not(:disabled){background:#3a8ded;transform:translateY(-1px);box-shadow:0 4px 12px #4facfe4d}.login-button:active{transform:translateY(0)}@media (width<=480px){.login-card{padding:32px 24px}}.lg-hidden{display:none!important}@media (width<=768px){.lg-hidden{display:flex!important}.main-area{width:100%;margin-left:0}.sidebar{box-shadow:var(--shadow-lg);background:var(--modal-bg);transition:transform .3s cubic-bezier(.4,0,.2,1);transform:translate(-100%)}.sidebar.open{transform:translate(0)}.mobile-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:90;background:#0009;animation:.3s forwards fadeIn;position:fixed;inset:0}.mobile-close-btn{color:var(--text-primary)}.page-content{padding:24px 16px}.topbar{padding:0 16px}.card-grid{grid-template-columns:1fr}}.topbar-user{border-left:1px solid var(--border);align-items:center;gap:12px;margin-left:8px;padding-left:16px;display:flex}.user-avatar{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));color:#fff;border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;font-size:.9rem;font-weight:700;display:flex;box-shadow:0 4px 12px #00000026}.user-details{flex-direction:column;display:flex}.user-name{color:var(--text-primary);font-size:.85rem;font-weight:600;line-height:1.2}.user-role{color:var(--text-secondary);font-size:.7rem;font-weight:500}.logout-btn-mini{color:var(--text-muted);border-radius:var(--radius-sm);margin-left:12px;padding:8px;transition:all .2s}.logout-btn-mini:hover{background:var(--accent-red-dim);color:var(--accent-red)}@media (width<=640px){.user-details{display:none}.topbar-user{border-left:none;padding-left:8px}}