:root { color-scheme: dark; }
.device-filters { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
#page-devices .device-filters .search-input { flex:1 1 260px; min-width:0; }
#page-devices .device-filters .filter-select { flex:0 1 180px; min-width:140px; }
.device-list-hint { margin:0 0 12px; font-size:12px; color:var(--fg2); }
#devicesTable { max-height:70vh; }
#devicesTable:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.device-identity { display:flex; align-items:flex-start; flex-direction:column; gap:8px; margin-bottom:8px; }
.device-hostname { font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.device-identity .badge-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:2px 8px; border-radius:999px; }
.device-owner { font-size:12px; font-weight:600; color:#bfdbfe; overflow-wrap:anywhere; margin-bottom:4px; }
.device-meta, .device-id { color:var(--fg2); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.device-id { font-family:monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px; }
.device-ip { font-size:12px; font-weight:600; overflow-wrap:anywhere; margin-bottom:8px; }
.device-ip-secondary { font-variant-numeric:tabular-nums; }
.device-network-hint { display:inline-block; font-size:11px; color:#93c5fd; margin-top:8px; }
.device-resource { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px; margin-top:10px; font-size:11px; font-variant-numeric:tabular-nums; }
.device-resource meter { grid-column:1 / -1; width:100%; height:8px; }
.device-resource meter::-webkit-meter-bar { background:var(--bg3); border:0; border-radius:4px; }
.device-resource meter::-webkit-meter-optimum-value { background:var(--green); }
.device-resource meter::-webkit-meter-suboptimum-value { background:#fbbf24; }
.device-resource meter::-webkit-meter-even-less-good-value { background:var(--red); }
.device-version { font-size:12px; }
.device-update { font-size:11px; font-weight:600; margin:4px 0 12px; }
.device-os { display:flex; align-items:center; gap:4px; font-size:11px; margin-bottom:6px; }
.device-actions { display:flex; flex-direction:column; gap:6px; }
.device-actions .btn { justify-content:center; text-decoration:none; white-space:nowrap; font-size:11px; padding:6px 8px; }
.device-actions svg { width:13px; height:13px; flex-shrink:0; }
.remote-workspace .sidebar { display:none; }
.remote-navigation { display:flex; flex-wrap:wrap; gap:8px; }
.remote-workspace .main { margin-left:0; width:100%; padding:24px; }
body { line-height: 1.5; }
.header { flex-wrap: wrap; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.header h2 { font-size: 24px; letter-spacing: -.5px; }
.sidebar-section-title { color: var(--fg2); }
.chart-card, .stat-card, .user-profile { border-radius: 12px; box-shadow: var(--shadow-sm); }
.chart-card { padding: 20px; }
.chart-title { color: var(--fg); margin-bottom: 18px; }
.toolbar { gap: 12px; }
.search-input { flex: 1 1 240px; min-width: 0; max-width: 100%; }
.btn { min-height: 36px; line-height: 1.4; }
.btn-sm { min-height: 30px; }
.btn-primary { background: #2563eb; }
.btn-warning { background: #92400e; }
.btn-danger { background: #b91c1c; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; }
.form-group input:not([type=checkbox]):not([type=radio]), .form-group select, .form-group textarea { min-height: 40px; border: 1px solid #526078; border-radius: 8px; background: var(--bg); color: var(--fg); padding: 9px 12px; font-size: 14px; max-width: 100%; }
.form-group select, .form-group textarea { width: 100%; }
.modal { padding: 28px; scrollbar-gutter: stable; overscroll-behavior: contain; }
.modal h3 { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.modal p { line-height: 1.6; }
.modal-actions { padding-top: 16px; border-top: 1px solid var(--border); gap: 10px; }
.detail-item { padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; min-width: 0; overflow-wrap: anywhere; }
.table-wrap, #devicesTable, #assetsTable, #recentDevices { max-width: 100%; overflow-x: auto; }
.modal table, .page table { width: 100%; border-collapse: collapse; font-size: 13px; }
.modal th, .page th { padding: 12px 14px; text-align: left; color: var(--fg2); background: var(--bg3); }
.modal td, .page td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.badge-status { white-space: nowrap; }
.badge-status .status-dot { margin-right: 0; flex-shrink: 0; }
.tab-nav { padding: 5px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; }
.pagination { flex-wrap: wrap; padding: 12px 0; }
.empty-state { border: 1px dashed #526078; border-radius: 12px; margin: 16px 0; background: var(--bg2); }
.remote-toolbar { padding: 16px; gap: 12px; }
.toast { max-width: min(440px, calc(100vw - 32px)); overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .sidebar { display: flex; position: static; width: 100%; height: auto; max-height: 240px; }
  .app { flex-direction: column; }
  .main { width: 100%; margin-left: 0; padding: 16px; }
  .modal { width: 96%; padding: 18px; max-height: 90dvh; }
  .endpoint-apps-grid { grid-template-columns: minmax(0, 1fr); }
  .endpoint-app-card .app-header { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.eyebrow { display:block; color:#8da5c9; font-size:10px; font-weight:700; letter-spacing:1.8px; margin-bottom:10px; }
.page-heading { border:0; padding:6px 0 4px; margin-bottom:28px; }
.page-heading h2 { font-size:30px; font-weight:650; letter-spacing:-1px; }
.page-heading p { color:var(--fg2); font-size:14px; margin-top:8px; max-width:660px; }
.main { padding:32px; }
.nav-item { background:transparent; border-top:0; border-right:0; border-bottom:0; text-align:left; font-family:inherit; flex-shrink:0; width:calc(100% - 20px); }
.nav-item:focus-visible { outline:2px solid #93c5fd; outline-offset:-2px; }
.sidebar { background:#0e1522; }
.sidebar-logo h1 { color:#dbeafe; letter-spacing:-.4px; }
.sidebar-logo small { display:block; margin-top:8px; }
.user-profile { background:rgba(148,163,184,.05); }
.stats-grid { gap:16px; }
.stat-card { padding:22px; position:relative; overflow:hidden; }
.stat-card:before { content:''; display:block; width:28px; height:3px; border-radius:2px; background:#60a5fa; margin-bottom:18px; }
.stat-card .value { margin-top:10px; font-size:34px; }
.charts-grid { gap:20px; }
.chart-title { text-transform:none; font-size:14px; letter-spacing:0; }
.chart-card { border-radius:14px; }
.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:end; margin:30px 0 16px; }
.section-heading h3 { font-size:18px; }
.section-hint { color:var(--fg2); font-size:12px; }
.page > .toolbar { padding:16px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; }
.branch-header-banner { background:var(--bg2); border-left:3px solid #60a5fa; padding:24px; }
.branch-header-banner h3 { font-size:25px; letter-spacing:-.5px; }
.branch-header-actions { max-width:560px; }
.asset-record { border:1px solid var(--border); box-shadow:none; }
.asset-record-head, .asset-record-footer { padding:18px; }
#assetsTable, #recentDevices, #devicesTable { border:1px solid var(--border); border-radius:12px; background:var(--bg2); }
.device-table { border:0; table-layout:fixed; min-width:960px; overflow:visible; }
.device-table td { line-height:1.5; vertical-align:top; padding:16px 12px; }
.device-table th { white-space:nowrap; font-size:10px; padding:14px 12px; position:sticky; top:0; z-index:1; }
#devicesTable .device-table th:nth-child(1) { width:22%; }
#devicesTable .device-table th:nth-child(2) { width:16%; }
#devicesTable .device-table th:nth-child(3) { width:15%; }
#devicesTable .device-table th:nth-child(4) { width:17%; }
#devicesTable .device-table th:nth-child(5) { width:15%; }
#devicesTable .device-table th:nth-child(6) { width:15%; }
.inventory-table { table-layout:auto; min-width:1400px; }
.inventory-table th, .inventory-table td { min-width:120px; max-width:300px; overflow-wrap:anywhere; }
.inventory-table td { padding:12px; }
.inventory-table td:nth-child(8) { min-width:240px; }
#assetsTable { max-height:70vh; overflow:auto; }
.sort-heading { display:inline-flex; align-items:center; gap:8px; padding:4px 0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.sort-heading:hover { color:var(--accent); }
.sort-heading:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.list-sort-bar { overflow-x:auto; margin:12px 0; }
.list-sort-bar table { border-collapse:collapse; width:100%; min-width:560px; }
.list-sort-bar th { text-align:left; padding:10px; background:var(--bg2); }
.pagination { gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin:12px 0; }
.pagination:empty { display:none; }
.page-info { color:var(--fg2); font-size:13px; }
.page-btn { min-height:34px; padding:6px 14px; }
.page-btn:disabled { opacity:.45; cursor:not-allowed; }
.device-table .device-actions-cell { position:sticky; right:0; background:var(--bg2); box-shadow:-1px 0 var(--border); }
.device-table th.device-actions-cell { background:var(--bg3); z-index:2; }
.device-table tr:hover td.device-actions-cell { background:var(--bg2); }
#page-remote .remote-toolbar { border-radius:12px; border-top:3px solid #60a5fa; }
.remote-container { border:1px solid var(--border); min-height:440px; }
.remote-container .empty-state { border:0; background:transparent; max-width:420px; }
.modal-overlay { padding:16px; }
.modal { border-radius:16px; max-height:calc(100dvh - 32px); }
.modal > h3 { font-size:21px; letter-spacing:-.6px; margin-bottom:24px; }
.modal > h3:before { content:''; display:block; width:26px; height:3px; background:#60a5fa; border-radius:2px; margin-bottom:14px; }
.modal .form-group label { color:#c4cfdf; }
.modal-actions { margin-top:24px; }
.modal > .toolbar, .modal > .detail-grid { margin-bottom:20px; }
.modal :is(.table-wrap, [id$='Table']) { max-width:100%; overflow-x:auto; }
.modal .empty-state { padding:28px 16px; }
#usersModal .modal, #editUserModal .modal, #branchesModal .modal, #rolesModal .modal, #securityLogsModal .modal { border-top:3px solid #60a5fa; }
#mfaModal .modal, #changePasswordModal .modal, #changeUsernameModal .modal { border-top:3px solid #34d399; }
#verificationModal .modal, #manualAssetModal .modal, #handoverModal .modal, #relocateModal .modal, #serviceModal .modal { border-top:3px solid #a78bfa; }
#usersModal .users-modal { width:100%; max-width:1120px; min-width:0; }
#editUserModal .users-modal-edit { width:100%; max-width:640px; min-width:0; }
.users-modal-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.users-modal-heading h3 { margin:0; padding:0; border:0; }
.users-subtitle { font-size:12px; color:var(--fg2); margin:0 0 14px 0; line-height:1.5; }
.users-card { background:var(--bg3); padding:14px 16px; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:16px; }
.vpn-master-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr); gap:20px; align-items:start; }
.vpn-master-layout > * { min-width:0; }
.vpn-master-layout h3 { margin:0 0 12px; font-size:16px; overflow-wrap:anywhere; }
.vpn-master-notice { border-left:3px solid var(--accent); }
.vpn-master-notice p { margin:6px 0; }
.vpn-master-notice small { color:var(--fg2); }
.vpn-master-list .toolbar { margin:12px 0; flex-wrap:wrap; }
.vpn-master-list .search-input { min-width:0; flex:1 1 180px; }
.vpn-master-table { overflow:auto; margin:12px 0; border:1px solid var(--border); border-radius:8px; }
.vpn-master-table .device-table { min-width:440px; width:100%; margin:0; }
.vpn-master-table td { white-space:normal; overflow-wrap:anywhere; }
.vpn-master-table td small { display:block; color:var(--fg2); margin-top:5px; }
.vpn-master-table td .btn { margin:2px; }
.vpn-master-selected { background:rgba(79,140,255,.08); }
.vpn-session-detail { display:block; color:var(--fg2); font-size:11px; margin-top:2px; max-width:260px; white-space:normal; }
#vpnLANStatus { white-space:pre-line; }
.vpn-master-actions { display:flex; gap:8px; flex-wrap:wrap; }
.vpn-master-table:focus-visible, #vpnMasterSelectedName:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:1100px) { .vpn-master-layout { grid-template-columns:minmax(0,1fr); } }
.users-card-title { font-size:13px; font-weight:600; margin:0 0 10px 0; }
.users-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.users-form-grid .form-group { min-width:0; margin-bottom:0; }
.users-select-multiple { width:100%; padding:8px; border-radius:6px; background:var(--bg2); color:var(--fg); border:1px solid var(--border); font-size:12px; }
.users-help-text { color:var(--fg2); font-size:11px; margin-top:4px; display:block; }
.users-muted-note { font-weight:400; color:var(--fg2); }
.users-actions-bar { display:flex; justify-content:flex-end; margin-top:12px; }
.users-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.users-section-header h4 { margin:0; font-size:13px; font-weight:600; }
.users-count-badge { font-size:11px; color:var(--fg2); background:var(--bg3); padding:2px 8px; border-radius:10px; border:1px solid var(--border); }
#usersTableContainer { max-height:46vh; overflow:auto; border:1px solid var(--border); border-radius:8px; }
#usersTableContainer:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#usersTableContainer .device-table { min-width:720px; table-layout:fixed; border:0; border-radius:0; overflow:visible; box-shadow:none; }
#usersTableContainer th { position:sticky; top:0; z-index:1; }
#usersTableContainer th:nth-child(1) { width:24%; }
#usersTableContainer th:nth-child(2) { width:16%; }
#usersTableContainer th:nth-child(3) { width:25%; }
#usersTableContainer th:nth-child(4) { width:35%; }
#usersTableContainer td { white-space:normal; overflow-wrap:anywhere; vertical-align:middle; padding:8px 12px; }
#usersTableContainer .user-cell-meta { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
#usersTableContainer .user-self-pill { font-size:10px; padding:1px 6px; border-radius:4px; background:rgba(79,140,255,0.15); color:var(--accent); font-weight:600; }
#usersTableContainer .user-badge { display:inline-flex; padding:4px 8px; border-radius:6px; font-size:11px; line-height:1.4; font-weight:500; }
#usersTableContainer .user-action-group { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
#usersTableContainer .user-action-group .btn { margin:0; }
@media (max-width:600px) {
  #usersModal .users-modal, #editUserModal .users-modal-edit { padding:16px; }
  .users-form-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1000px) { .main { padding:24px; } }
@media (max-width:768px) {
  .login-container { padding:16px; }
  .login-box { max-width:100%; }
  .sidebar { max-height:210px; }
  .main { padding:16px; }
  .page-heading h2 { font-size:25px; }
  .section-heading { align-items:start; flex-direction:column; gap:4px; }
  .stat-card { padding:16px; }
  .stat-card .value { font-size:28px; }
  .modal-overlay { padding:8px; }
  .modal { width:100%; max-height:calc(100dvh - 16px); }
  .remote-toolbar > select { max-width:100%; min-width:0 !important; }
}