:root{--bg-dark: #09090b;--bg-card: #18181b;--bg-elevated: #27272a;--border-color: #27272a;--border-hover: #3f3f46;--text-main: #f4f4f5;--text-muted: #a1a1aa;--text-dim: #71717a;--accent-blue: #3b82f6;--accent-blue-hover: #2563eb;--accent-blue-bg: rgba(59, 130, 246, .12);--status-normal-bg: rgba(16, 185, 129, .12);--status-normal-text: #34d399;--status-warning-bg: rgba(245, 158, 11, .12);--status-warning-text: #fbbf24;--status-critical-bg: rgba(249, 115, 22, .15);--status-critical-text: #fb923c;--status-out-bg: rgba(239, 68, 68, .15);--status-out-text: #f87171;--font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, .5);--glass-bg: rgba(24, 24, 27, .85);--glass-border: rgba(255, 255, 255, .08)}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-family);-webkit-font-smoothing:antialiased;min-height:100vh;width:100%;overflow-x:hidden}.app-container{display:flex;min-height:100vh;width:100%;position:relative}.sidebar{width:260px;background-color:var(--bg-card);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:20px 16px;position:fixed;top:0;bottom:0;left:0;z-index:100;transition:transform .3s ease}.brand-header{display:flex;align-items:center;gap:12px;padding:8px 12px;margin-bottom:24px}.brand-logo{width:40px;height:40px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;letter-spacing:-.5px;box-shadow:0 0 15px #2563eb66}.brand-title{font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:-.3px}.brand-subtitle{font-size:.75rem;color:var(--text-muted)}.nav-list{list-style:none;display:flex;flex-direction:column;gap:6px;flex:1}.nav-btn{width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--text-muted);font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:left}.nav-btn:hover{background-color:var(--bg-elevated);color:var(--text-main)}.nav-btn.active{background-color:var(--accent-blue-bg);border-color:#3b82f64d;color:var(--accent-blue);font-weight:600}.user-profile-summary{display:flex;align-items:center;justify-content:space-between;padding:12px;background-color:var(--bg-elevated);border-radius:var(--radius-md);border:1px solid var(--border-color)}.user-info-name{font-size:.85rem;font-weight:600;color:var(--text-main)}.user-info-role{font-size:.72rem;color:var(--text-muted);text-transform:capitalize}.main-wrapper{flex:1;margin-left:260px;padding:24px 32px;min-height:100vh;max-width:calc(100vw - 260px);display:flex;flex-direction:column;gap:24px}.mobile-top-bar{display:none}.page-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--border-color)}.page-title{font-size:1.5rem;font-weight:700;letter-spacing:-.5px;color:#fff}.page-description{font-size:.85rem;color:var(--text-muted);margin-top:4px}.card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-subtle);max-width:100%;overflow:hidden}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;width:100%}.form-actions-row{grid-column:1 / -1;display:flex;gap:16px;align-items:flex-end;width:100%}.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;width:100%}.filter-item{flex:1;min-width:160px}.table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md);border:1px solid var(--border-color)}.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:.88rem;min-width:600px}.data-table th{background-color:var(--bg-elevated);color:var(--text-muted);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--border-color);white-space:nowrap}.data-table td{padding:14px 16px;border-bottom:1px solid var(--border-color);color:var(--text-main);vertical-align:middle;white-space:nowrap}.data-table tr:hover{background-color:#ffffff05}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;letter-spacing:.2px;white-space:nowrap}.badge-normal{background-color:var(--status-normal-bg);color:var(--status-normal-text)}.badge-warning{background-color:var(--status-warning-bg);color:var(--status-warning-text)}.badge-critical{background-color:var(--status-critical-bg);color:var(--status-critical-text)}.badge-out{background-color:var(--status-out-bg);color:var(--status-out-text)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border-radius:var(--radius-md);font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:1px solid transparent;white-space:nowrap}.btn-primary{background-color:var(--accent-blue);color:#fff}.btn-primary:hover{background-color:var(--accent-blue-hover)}.btn-secondary{background-color:var(--bg-elevated);color:var(--text-main);border-color:var(--border-color)}.btn-secondary:hover{background-color:var(--border-hover)}.btn-danger{background-color:#ef444433;color:#f87171;border-color:#ef44444d}.btn-danger:hover{background-color:#ef44444d}.input-field{width:100%;max-width:100%;background-color:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:10px 14px;color:var(--text-main);font-family:inherit;font-size:.88rem;transition:border-color .2s ease;text-overflow:ellipsis}select.input-field option{background-color:var(--bg-card);color:var(--text-main)}.input-field:focus{outline:none;border-color:var(--accent-blue)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.modal-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:500px;padding:24px;box-shadow:0 20px 40px #000c;max-height:90vh;overflow-y:auto}.desktop-view-only{display:block}.mobile-view-only{display:none!important}.mobile-cards-container{display:flex;flex-direction:column;gap:16px;width:100%}.mobile-item-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-subtle)}.mobile-item-header{display:flex;align-items:flex-start;gap:10px}.mobile-item-code{font-size:.78rem;font-weight:700;color:var(--accent-blue);background-color:var(--accent-blue-bg);border:1px solid rgba(59,130,246,.25);padding:3px 8px;border-radius:var(--radius-sm);white-space:nowrap}.mobile-item-name{font-size:.95rem;font-weight:700;color:#fff;line-height:1.3}.mobile-item-stats{display:flex;align-items:center;justify-content:space-between;background-color:var(--bg-elevated);padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--border-color)}.mobile-stat-col{display:flex;flex-direction:column;gap:2px}.mobile-label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}.mobile-val{font-size:.95rem;font-weight:700;color:var(--text-main)}.mobile-stepper-container{display:flex;flex-direction:column;gap:6px;margin-top:4px}.stepper-box{display:flex;align-items:center;gap:8px;width:100%}.btn-stepper{width:48px;height:48px;border-radius:var(--radius-md);background-color:var(--bg-elevated);border:1px solid var(--border-color);color:#fff;font-size:1.4rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.btn-stepper:active{background-color:var(--accent-blue);border-color:var(--accent-blue);transform:scale(.95)}.stepper-input{flex:1;height:48px;background-color:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-md);text-align:center;font-size:1.25rem;font-weight:800;color:#fff;font-family:inherit}.stepper-input:focus{outline:none;border-color:var(--accent-blue)}.mobile-accordion-list{display:flex;flex-direction:column;gap:16px;width:100%}.mobile-accordion-item{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;box-shadow:0 4px 12px #0006}.mobile-accordion-item.open{border-color:var(--accent-blue);box-shadow:0 0 16px #3b82f640}.mobile-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--bg-card);gap:12px}.mobile-accordion-header:active{background-color:var(--bg-elevated)}.mobile-accordion-title-box{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.mobile-accordion-badge{font-size:.82rem;font-weight:800;padding:5px 10px;border-radius:var(--radius-sm);white-space:nowrap}.mobile-accordion-item-name{font-size:.92rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-accordion-time{font-size:.75rem;color:var(--text-muted);white-space:nowrap}.mobile-accordion-body{padding:16px 18px;background-color:var(--bg-elevated);border-top:1px solid var(--border-color);display:flex;flex-direction:column;gap:12px;font-size:.88rem}.mobile-accordion-detail-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:10px}.mobile-accordion-detail-row:last-child{border-bottom:none;padding-bottom:0}.sidebar-overlay{display:none}@media (max-width: 768px){.desktop-view-only{display:none!important}.mobile-view-only{display:flex!important;flex-direction:column}.sidebar{transform:translate(-100%);box-shadow:10px 0 30px #000c}.sidebar.mobile-open{transform:translate(0)}.sidebar-overlay.mobile-open{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;z-index:99}.main-wrapper{margin-left:0;padding:76px 16px 16px;max-width:100vw;width:100%}.mobile-top-bar{display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;height:60px;background-color:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);padding:0 16px;z-index:98}.page-title{font-size:1.25rem}.form-grid{grid-template-columns:1fr}.form-actions-row{flex-direction:column;align-items:stretch;gap:12px}.form-actions-row button{width:100%}.filter-bar{flex-direction:column;align-items:stretch}.filter-item{width:100%;min-width:100%}.card{padding:16px}.session-header-card{flex-direction:column;align-items:stretch!important}.session-header-buttons{flex-direction:column;width:100%;gap:8px!important}.session-header-buttons button{width:100%;padding:12px!important}}