:root{--surface: #f9f9f9;--surface-dim: #dadada;--surface-bright: #f9f9f9;--surface-container-lowest: #ffffff;--surface-container-low: #f3f3f3;--surface-container: #eeeeee;--surface-container-high: #e8e8e8;--surface-container-highest: #e2e2e2;--on-surface: #1a1c1c;--on-surface-variant: #464741;--inverse-surface: #2f3131;--inverse-on-surface: #f1f1f1;--outline: #777771;--outline-variant: #c7c7bf;--surface-tint: #5f5e5c;--primary: #1d1d1b;--on-primary: #ffffff;--primary-container: #1d1d1b;--on-primary-container: #868582;--inverse-primary: #c8c6c3;--secondary: #bb0013;--on-secondary: #ffffff;--secondary-container: #e41d23;--on-secondary-container: #fffbff;--tertiary: #005EB8;--on-tertiary: #ffffff;--tertiary-container: #001c3f;--on-tertiary-container: #4385e1;--error: #ba1a1a;--on-error: #ffffff;--error-container: #ffdad6;--on-error-container: #93000a;--steel-border: #D1D5DB;--slate-engineering: #4A4A4A;--surface-white: #FFFFFF;--font-headline: "Hanken Grotesk", sans-serif;--font-body: "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: .125rem;--radius-default: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-full: 9999px;--spacing-base: 4px;--spacing-gutter: 24px;--spacing-margin: 32px;--container-max: 1280px;--shadow-overlay: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .03);--shadow-ambient: 0 10px 15px -3px rgba(0,0,0,.04)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--surface);color:var(--on-surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-headline);color:var(--primary);font-weight:700;letter-spacing:-.01em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:14px;padding:10px 16px;border-radius:var(--radius-default);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent;outline:none;text-decoration:none}.btn-primary{background-color:var(--primary);color:var(--on-primary)}.btn-primary:hover{background-color:#333}.btn-secondary{background-color:var(--surface-white);color:var(--primary);border-color:var(--steel-border)}.btn-secondary:hover{border-color:var(--secondary);color:var(--secondary)}.btn-danger{background-color:var(--error);color:var(--on-error)}.btn-danger:hover{opacity:.9}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-family:var(--font-body);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--on-surface-variant)}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:12px;color:var(--on-surface-variant);display:flex;align-items:center;justify-content:center}.input-field{width:100%;padding:10px 12px 10px 40px;font-family:var(--font-body);font-size:14px;background-color:var(--surface-container-low);border:1px solid var(--steel-border);border-radius:var(--radius-default);color:var(--on-surface);transition:border-color .2s ease;outline:none}.input-field:focus{border-color:var(--tertiary)}.checkbox-container{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--on-surface-variant);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-container input{cursor:pointer}.card{background-color:var(--surface-white);border:1px solid var(--steel-border);border-radius:var(--radius-default);transition:border-bottom-color .2s ease}.card:hover{border-bottom-color:var(--secondary)}.custom-scrollbar::-webkit-scrollbar{width:5px;height:5px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--surface-container-low)}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--steel-border);border-radius:var(--radius-full)}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--surface-tint)}#root{min-height:100vh;display:flex;flex-direction:column}.login-page{position:relative;min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.login-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background-size:cover;background-position:center;transition:transform .2s ease-out;filter:brightness(.8)}.login-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(#00000040,#00000073);z-index:0}.login-grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;opacity:.05;pointer-events:none;background-image:linear-gradient(#ffffff 1px,transparent 1px),linear-gradient(90deg,#ffffff 1px,transparent 1px);background-size:40px 40px}.login-container{position:relative;z-index:2;width:100%;max-width:440px;padding:var(--spacing-gutter)}.login-card{background-color:var(--surface-white);border:1px solid var(--steel-border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-overlay),var(--shadow-ambient)}.login-btn{position:relative;width:100%;padding:16px;background-color:var(--primary);color:var(--on-primary);font-family:var(--font-headline);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;gap:12px;border:none;cursor:pointer;overflow:hidden;transition:transform .15s ease}.login-btn:active{transform:scale(.98)}.login-btn:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:0px;background-color:var(--secondary);transition:height .2s ease}.login-btn:hover:after{height:3px}.app-container{display:flex;flex-direction:column;min-height:100vh}.topbar{position:fixed;top:0;left:0;width:100%;height:64px;background-color:var(--surface-white);border-bottom:1px solid var(--steel-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-margin);z-index:40}.topbar-brand{font-family:var(--font-headline);font-size:20px;font-weight:700;color:var(--primary);text-decoration:none}.sidebar{position:fixed;left:0;top:64px;width:256px;height:calc(100vh - 64px);background-color:var(--surface-white);border-right:1px solid var(--steel-border);display:flex;flex-direction:column;z-index:30;transition:transform .3s ease;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0;margin-top:64px;padding:var(--spacing-margin);min-height:calc(100vh - 64px);background-color:var(--surface);transition:margin-left .3s ease}@media (min-width: 769px){.main-content.sidebar-open{margin-left:256px}}@media (max-width: 768px){.main-content{margin-left:0!important;padding:16px}}.sidebar-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--on-surface-variant);text-decoration:none;font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;border-right:4px solid transparent;transition:all .2s ease;background:transparent;border-top:none;border-left:none;border-bottom:none;width:100%;text-align:left;cursor:pointer}.sidebar-item:hover{background-color:var(--surface-container-low);color:var(--primary)}.sidebar-item.active{border-right-color:var(--secondary);background-color:var(--surface-container-low);color:var(--primary);font-weight:700}.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}@media (max-width: 1024px){.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{grid-column:span 12}}@media (max-width: 640px){.bento-grid{grid-template-columns:1fr;gap:16px}.col-12,.col-8,.col-6,.col-4,.col-3{grid-column:span 1}}.metric-card{padding:24px;display:flex;flex-direction:column;justify-content:space-between;height:100%}.metric-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;color:var(--on-surface-variant);letter-spacing:.05em;margin-bottom:8px}.metric-value{font-family:var(--font-headline);font-size:32px;font-weight:600;color:var(--primary)}.metric-footer{margin-top:16px;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700}.data-table-container{overflow-x:auto;width:100%}.data-table{width:100%;border-collapse:collapse;text-align:left}.data-table th{background-color:var(--surface-container-low);padding:8px 16px;font-family:var(--font-body);font-size:11px;font-weight:600;text-transform:uppercase;color:var(--on-surface-variant);border-bottom:1px solid var(--steel-border)}.data-table td{padding:8px 16px;font-size:14px;border-bottom:1px solid var(--steel-border)}.data-table tr:hover{background-color:#f3f3f380}.status-chip{display:inline-flex;padding:4px 8px;font-size:10px;font-weight:700;border-radius:var(--radius-sm);letter-spacing:.02em}.status-chip.operational{background-color:#def7ec;color:#03543f}.status-chip.maintenance{background-color:#fef08a;color:#713f12}.status-chip.critical{background-color:#fde8e8;color:#9b1c1c}.kpi-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}@media (max-width: 1024px){.kpi-cards-grid{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 640px){.kpi-cards-grid{grid-template-columns:1fr;gap:12px}}