/* ===================================================================== KRIONIX THMS — design tokens Light theme is the default; [data-theme="dark"] on overrides. ===================================================================== */ :root { --bg: #F5F6F8; --surface: #ffffff; --surface-2: #f8fafc; --surface-hover: #f1f5f9; --border: #e2e8f0; --border-soft: #f1f5f9; --text: #1e293b; --text-soft: #475569; --text-muted: #94a3b8; --text-faint: #cbd5e1; --brand: #1560BD; --brand-dark: #124d99; --brand-soft-bg: #EFF6FF; --brand-glow: rgba(21, 96, 189, .18); --success: #16A34A; --success-bg: #ECFDF3; --warning: #D97706; --warning-bg: #FFFBEB; --danger: #DC2626; --danger-bg: #FEF2F2; --offline: #6B7280; --offline-bg: #F3F4F6; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --shadow-md: 0 4px 16px rgba(15, 23, 42, .08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, .14); --shadow-glow-brand: 0 0 0 3px var(--brand-glow); --gauge-track: #E5E7EB; --skeleton-base: #eef1f5; --skeleton-shine: #ffffff; --hero-grad: linear-gradient(120deg,#151233 0%,#241b52 55%,#3a1f66 100%); --login-grad: linear-gradient(135deg,#0f172a,#1e293b); --font-sans: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: 'JetBrains Mono', "Consolas", "Courier New", monospace; --ease: cubic-bezier(.4,0,.2,1); --ease-bounce: cubic-bezier(.34,1.56,.64,1); } :root[data-theme="dark"] { --bg: #0b1120; --surface: #111a2e; --surface-2: #0e1626; --surface-hover: #16213a; --border: #223049; --border-soft: #1a2438; --text: #e7ecf5; --text-soft: #aab6cc; --text-muted: #6f7f9c; --text-faint: #4b5878; --brand: #4d94ff; --brand-dark: #82b4ff; --brand-soft-bg: rgba(77, 148, 255, .12); --brand-glow: rgba(77, 148, 255, .28); --success: #34d399; --success-bg: rgba(52, 211, 153, .12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, .12); --danger: #f87171; --danger-bg: rgba(248, 113, 113, .14); --offline: #94a3b8; --offline-bg: rgba(148, 163, 184, .12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 20px rgba(0, 0, 0, .35); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5); --gauge-track: #223049; --skeleton-base: #16213a; --skeleton-shine: #223049; --hero-grad: linear-gradient(120deg,#0c0a22 0%,#191341 55%,#2a1449 100%); --login-grad: linear-gradient(135deg,#05070d,#0f172a); } /* ============ base ============ */ * { box-sizing: border-box; } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); transition: background-color .25s var(--ease), color .25s var(--ease); } .mono { font-family: var(--font-mono); } .muted { color: var(--text-muted); } a { color: var(--brand); text-decoration: none; transition: color .15s var(--ease); } a:hover { text-decoration: underline; } ::selection { background: var(--brand-glow); color: var(--text); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============ shared keyframes ============ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } @keyframes popIn { 0% { opacity: 0; transform: scale(.8); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } } @keyframes blink { 50% { opacity: .35; } } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); } 70% { box-shadow: 0 0 0 12px rgba(220,38,38,0); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } } @keyframes pulseSoft { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @keyframes shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes wf { 0%,100% { height: 4px; } 50% { height: 16px; } } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes drawIn { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } } @keyframes floatGlow { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(10px,-10px); } } .skeleton { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 37%, var(--skeleton-base) 63%); background-size: 400px 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; } /* ============ app shell: sidebar + content ============ */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 18px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: background-color .25s var(--ease), border-color .25s var(--ease); } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 18px 18px; border-bottom: 1px solid var(--border-soft); margin-bottom: 10px; } .sidebar-brand .logo { width: 42px; height: 42px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); } .sidebar-brand .logo img { width: 100%; height: 100%; object-fit: contain; } .sidebar-brand .brand-name { font-weight: 800; font-size: 15px; line-height: 1.1; color: var(--text); letter-spacing: .01em; } .sidebar-brand .brand-sub { font-size: 9px; color: var(--text-muted); letter-spacing: .06em; } .side-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text-soft); font-size: 13.5px; font-weight: 600; position: relative; transition: background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); } .nav-item i { width: 18px; text-align: center; color: var(--text-muted); font-size: 14px; transition: color .15s var(--ease); } .nav-item:hover { background: var(--surface-hover); text-decoration: none; transform: translateX(2px); } .nav-item.active { background: var(--brand-soft-bg); color: var(--brand); } .nav-item.active i { color: var(--brand); } .nav-item.active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 4px 4px 0; background: var(--brand); } .app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ============ top bar ============ */ .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 30; flex-wrap: wrap; transition: background-color .25s var(--ease), border-color .25s var(--ease); } .page-heading { font-size: 17px; font-weight: 800; letter-spacing: .01em; margin: 0; color: var(--text); } .topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-soft); flex-wrap: wrap; } .live-pill { display: flex; align-items: center; background: var(--success-bg); color: var(--success); padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: 12px; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; margin-right: 6px; animation: blink 2s infinite; box-shadow: 0 0 0 rgba(22,163,74,.5); } .bell-btn { color: var(--text-soft); font-size: 16px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: background-color .15s var(--ease), color .15s var(--ease); } .bell-btn:hover { background: var(--surface-hover); text-decoration: none; color: var(--brand); } .theme-toggle { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); } .theme-toggle:hover { transform: rotate(15deg) scale(1.06); border-color: var(--brand); color: var(--brand); } .theme-toggle i { position: absolute; transition: transform .35s var(--ease-bounce), opacity .25s var(--ease); font-size: 14px; } .theme-toggle .icon-moon { opacity: 0; transform: translateY(10px) rotate(-40deg); } .theme-toggle .icon-sun { opacity: 1; transform: translateY(0) rotate(0); } :root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: translateY(-10px) rotate(40deg); } :root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: translateY(0) rotate(0); } .user-chip { display: flex; align-items: center; gap: 8px; } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-hover); display: flex; align-items: center; justify-content: center; color: var(--text-soft); font-size: 12px; } .logout-btn { background: var(--surface-2); border: 1px solid transparent; padding: 6px 12px; border-radius: 6px; font-weight: 600; color: var(--text-soft); transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .logout-btn:hover { background: var(--danger-bg); color: var(--danger); text-decoration: none; } .page-wrap { max-width: 1600px; width: 100%; margin: 0 auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 16px; } .page-header { display: flex; justify-content: space-between; align-items: center; } .site-footer { text-align: center; padding: 18px; color: var(--text-muted); font-size: 12px; border-top: 1px solid var(--border); background: var(--surface); } .footer-logo { font-weight: 800; color: var(--brand); margin-right: 10px; } /* ============ generic card ============ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; min-width: 0; box-shadow: var(--shadow-sm); transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); animation: fadeInUp .35s var(--ease) both; } .card:hover { box-shadow: var(--shadow-md); } .card h2 { font-size: 12.5px; font-weight: 700; color: var(--text-soft); letter-spacing: .04em; margin: 0 0 10px; text-transform: uppercase; } /* ============ KPI row ============ */ .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } @media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } } .kpi { cursor: pointer; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); display: flex; flex-direction: column; justify-content: space-between; } .kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .kpi.active { border-color: var(--text-muted); box-shadow: var(--shadow-glow-brand); } .kpi-top { display: flex; justify-content: space-between; align-items: flex-start; } .kpi .label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; letter-spacing: .03em; } .kpi .value { font-size: 28px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; transition: color .2s var(--ease); } .kpi .sub { font-size: 11px; color: var(--text-muted); } .kpi-icon { font-size: 20px; transition: transform .25s var(--ease-bounce); } .kpi:hover .kpi-icon { transform: scale(1.15) rotate(-4deg); } /* ============ row layouts ============ */ .row-3col { display: grid; grid-template-columns: 1.5fr 1.3fr 1fr; gap: 14px; align-items: stretch; } .row-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: stretch; } .row-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; } @media (max-width: 1300px) { .row-3col, .row-2col, .row-4col { grid-template-columns: 1fr; } } .map-live-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(420px, 1.1fr); gap: 14px; align-items: stretch; height: 700px; } .map-live-layout .map-card, .live-gauges-card { height: 700px; } .live-gauges-card { overflow-y: auto; } .map-live-layout .gauge-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; justify-content: initial; } .map-live-layout .gauge { min-width: 0; padding-bottom: 4px; } .map-live-layout .gauge svg { width: 64px; height: auto; } .details-layout .detail-card, .details-layout .fault-card, .fleet-health-card { min-height: 230px; } @media (max-width: 1300px) { .map-live-layout { grid-template-columns: 1fr; height: auto; } .map-live-layout .map-card, .live-gauges-card { height: auto; } .map-live-layout #mapArea { height: 520px; flex: none; } .live-gauges-card { max-height: none; } .map-live-layout .gauge-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .map-live-layout .gauge-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============ map (Leaflet) ============ */ .map-card { display: flex; flex-direction: column; } .map-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .map-toolbar h2 { margin: 0; } .map-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .map-toolbar .filters button { font-size: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 999px; padding: 5px 12px; margin-left: 5px; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); } .map-toolbar .filters button:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand); } .map-toolbar .filters button.active { background: var(--text); color: var(--surface); border-color: var(--text); } .map-toolbar #mapLayerBar { padding-right: 12px; border-right: 1px solid var(--border); } .map-toolbar #mapLayerBar button:first-child { margin-left: 0; } /* ============ permanent marker label (name + health) ============ */ .tx-map-label { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; font-size: 10.5px; font-weight: 700; box-shadow: var(--shadow-sm); white-space: nowrap; } .tx-map-label b { font-variant-numeric: tabular-nums; margin-left: 4px; } .leaflet-tooltip.tx-map-label::before { display: none; } #mapArea { min-height: 0; border-radius: 10px; overflow: hidden; flex: 1; } /* Dark mode swaps to a dedicated dark basemap layer (see setMapLayer in dashboard.js) instead of CSS-inverting the tiles, so satellite/street views still look correct. */ .tx-marker-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .2s var(--ease); } .tx-marker-dot:hover { transform: scale(1.25); } .tx-marker-dot.critical { animation: pulseRing 1.6s infinite; } .leaflet-popup-content { font-size: 12.5px; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); } /* ============ embedded detail panel ============ */ .detail-card { display: flex; flex-direction: column; } .detail-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-faint); gap: 10px; padding: 30px 16px; } .detail-empty i { font-size: 34px; animation: pulseSoft 2.4s ease infinite; } .detail-empty p { font-size: 12.5px; color: var(--text-muted); max-width: 220px; } .detail-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .detail-head .tx-title { font-weight: 800; font-size: 15px; color: var(--text); } .detail-head .tx-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .detail-health-badge { width: 70px; height: 70px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; animation: popIn .35s var(--ease-bounce) both; box-shadow: var(--shadow-md); } .detail-health-badge .pct { font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .detail-health-badge .lbl { font-size: 8px; letter-spacing: .05em; margin-top: 3px; } .detail-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; margin-bottom: 12px; } .detail-spec-grid .k { color: var(--text-muted); } .detail-spec-grid .v { font-weight: 600; color: var(--text); } .detail-fault-box { border-radius: 10px; padding: 10px; margin-bottom: 12px; animation: fadeInUp .3s var(--ease) both; } .detail-fault-box .fault-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .detail-fault-box .fault-name { font-weight: 700; font-size: 13px; margin-top: 2px; } .detail-btn { width: 100%; background: var(--text); color: var(--surface); border: none; padding: 10px; border-radius: 9px; font-weight: 600; font-size: 12.5px; cursor: pointer; margin-top: auto; transition: background-color .15s var(--ease), transform .12s var(--ease); } .detail-btn:hover { background: var(--brand); transform: translateY(-1px); } .detail-btn:active { transform: translateY(0); } /* ============ fault list ============ */ .fault-card { display: flex; flex-direction: column; max-height: 540px; } #faultList { overflow-y: auto; flex: 1; margin: 0 -14px; } .fault-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent; cursor: pointer; transition: background-color .15s var(--ease), border-left-color .15s var(--ease); animation: fadeInUp .3s var(--ease) both; } .fault-row:hover { background: var(--surface-2); } .fault-row .id { font-weight: 700; font-size: 13px; color: var(--text); } .fault-row .fault-name { font-size: 11px; font-weight: 600; margin-left: 6px; } .fault-row .area { font-size: 11px; color: var(--text-muted); } /* ============ live parameter gauges ============ */ .gauge-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; } .gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 90px; animation: scaleIn .4s var(--ease-bounce) both; } .gauge .glabel { font-size: 10px; color: var(--text-muted); text-transform: uppercase; text-align: center; letter-spacing: .02em; } .gauge .gcaption { font-size: 9px; font-weight: 700; margin-top: 1px; } .gauge small { color: var(--text-muted); font-size: 9px; font-family: var(--font-sans); } .gauge.electrical-gauge { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 4px; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); } .gauge.electrical-gauge:hover { transform: translateY(-2px); border-color: var(--brand); } .gauge svg { overflow: visible; } .gauge svg line, .gauge svg path { transition: stroke .3s var(--ease); } .gauge .mono { font-variant-numeric: tabular-nums; } /* ============ latest electrical and complete reading ============ */ .latest-reading-card { padding: 16px; } .reading-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .reading-card-head h2 { margin-bottom: 4px; } .reading-card-head p { margin: 0; font-size: 11px; } .electrical-grid, .reading-groups { display: grid; grid-template-columns: repeat(5, minmax(145px, 1fr)); gap: 12px; } .reading-groups { grid-template-columns: repeat(3, minmax(190px, 1fr)); } .measurement-group { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 0; transition: border-color .2s var(--ease), transform .15s var(--ease); animation: fadeInUp .35s var(--ease) both; } .measurement-group:hover { border-color: var(--brand); transform: translateY(-2px); } .measurement-group h3 { margin: 0; padding: 8px 10px; background: var(--surface-2); color: var(--text-soft); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; } .measurement-list { padding: 4px 10px; } .measurement { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 11px; } .measurement:last-child { border-bottom: 0; } .measurement span { color: var(--text-soft); } .measurement b { color: var(--text); white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; } .measurement small { color: var(--text-muted); font-size: 9px; font-family: var(--font-sans); } .all-reading-heading { margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .raw-payload { margin-top: 12px; font-size: 12px; color: var(--text-soft); } .raw-payload summary { cursor: pointer; font-weight: 600; } .raw-payload pre { max-height: 260px; overflow: auto; margin: 8px 0 0; padding: 12px; border-radius: 8px; background: #0f172a; color: #cbd5e1; font-size: 11px; } @media (max-width: 1300px) { .electrical-grid { grid-template-columns: repeat(3, minmax(145px, 1fr)); } } @media (max-width: 800px) { .electrical-grid, .reading-groups { grid-template-columns: 1fr; } } /* ============ fleet health ============ */ .fleet-health-body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .fleet-status-list { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; } /* ============ hero voice announcer ============ */ .hero { border-radius: 18px; padding: 20px; color: #fff; position: relative; overflow: hidden; background: var(--hero-grad); background-size: 200% 200%; animation: gradientShift 12s ease infinite; box-shadow: var(--shadow-lg); } .hero::before { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.35), transparent 70%); top: -100px; right: -60px; animation: floatGlow 8s ease-in-out infinite; pointer-events: none; } .hero-inner { position: relative; display: flex; flex-wrap: wrap; gap: 20px; } .hero-left { display: flex; gap: 14px; width: 280px; flex-shrink: 0; } .hero-icon { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; transition: background .2s var(--ease), transform .2s var(--ease); } .hero-icon.speaking { background: #8b5cf6; transform: scale(1.08); } .hero-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; font-weight: 700; } .hero h2 { margin: 2px 0 4px; font-size: 18px; } .hero p { margin: 0; font-size: 12px; color: rgba(224,214,255,.75); line-height: 1.4; } .hero-right { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; } .hero-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hero-btn { display: flex; align-items: center; gap: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 9px; color: #fff; background: rgba(255,255,255,.1); transition: background-color .15s var(--ease), transform .15s var(--ease); } .hero-btn:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); } .hero-btn.on { background: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.25); } .hero-status { margin-left: auto; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.2); padding: 6px 10px; border-radius: 8px; font-size: 11px; } .waveform { display: flex; align-items: flex-end; gap: 3px; height: 18px; } .waveform span { width: 3px; border-radius: 2px; background: #a78bfa; height: 4px; } .waveform.active span { animation: wf .9s ease-in-out infinite; } .waveform.active span:nth-child(2) { animation-delay: .1s; } .waveform.active span:nth-child(3) { animation-delay: .2s; } .waveform.active span:nth-child(4) { animation-delay: .3s; } .waveform.active span:nth-child(5) { animation-delay: .4s; } .caption-box { background: rgba(0,0,0,.25); border-radius: 8px; padding: 9px 12px; font-size: 13px; font-style: italic; min-height: 20px; transition: background-color .2s var(--ease); } #voiceLog { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 100px; overflow-y: auto; } .log-entry { background: rgba(255,255,255,.06); border-radius: 6px; padding: 6px 8px; font-size: 11px; color: #ede9fe; animation: fadeInUp .3s var(--ease) both; } /* ============ recent alarms table ============ */ table.alarm-table, table.data-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--surface); } table.alarm-table td, table.data-table td { padding: 9px 6px; border-bottom: 1px solid var(--border-soft); color: var(--text); } table.data-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; } tr.alarm-row, tr.clickable { cursor: pointer; transition: background-color .15s var(--ease); } tr.alarm-row:hover, tr.clickable:hover { background: var(--surface-2); } table.data-table tbody tr, table.alarm-table tbody tr { animation: fadeIn .3s var(--ease) both; } .badge { padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge.healthy { background: var(--success-bg); color: var(--success); } .badge.warning { background: var(--warning-bg); color: var(--warning); } .badge.critical { background: var(--danger-bg); color: var(--danger); animation: pulseSoft 1.8s ease infinite; } .badge.offline { background: var(--offline-bg); color: var(--offline); } /* ============ vibration trend sparkline ============ */ #vibTrendChart svg { width: 100%; height: 150px; } #vibTrendChart .chart-line { animation: drawIn 1.1s var(--ease) both; } #vibTrendChart .chart-area { animation: fadeIn 1s var(--ease) both; } /* ============ event timeline ============ */ .event-timeline { display: flex; flex-direction: column; gap: 10px; max-height: 220px; overflow-y: auto; } .event-item { display: flex; gap: 8px; font-size: 12px; animation: fadeInUp .3s var(--ease) both; } .event-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 0 3px transparent; transition: box-shadow .2s var(--ease); } .event-item .event-msg { font-weight: 600; color: var(--text); } .event-item .event-time { color: var(--text-muted); font-size: 10.5px; } /* ============ alarm summary donut ============ */ .alarm-donut-wrap { display: flex; align-items: center; gap: 18px; justify-content: center; } .alarm-donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--text); } .alarm-donut-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; } .alarm-donut-wrap svg circle { transition: stroke-dasharray .9s var(--ease), stroke-dashoffset .9s var(--ease); } /* ============ forms ============ */ .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; max-width: 760px; box-shadow: var(--shadow-sm); animation: fadeInUp .3s var(--ease) both; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .form-grid .span2 { grid-column: span 2; } .form-grid label { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; } .form-grid input, .form-grid select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); font-family: var(--font-sans); } .form-grid input:focus, .form-grid select:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-glow-brand); } .form-grid input:disabled { background: var(--surface-2); color: var(--text-muted); } .btn-primary { background: var(--brand); color: #fff; border: none; padding: 10px 18px; border-radius: 9px; font-weight: 600; cursor: pointer; font-size: 13px; transition: background-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease); } .btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-danger { background: var(--surface); color: var(--danger); border: 1px solid #fca5a5; padding: 9px 16px; border-radius: 9px; font-weight: 600; cursor: pointer; font-size: 13px; transition: background-color .15s var(--ease), transform .12s var(--ease); } .btn-danger:hover { background: var(--danger-bg); transform: translateY(-1px); } .key-box { display: block; background: #0f172a; color: #a7f3d0; padding: 10px 14px; border-radius: 8px; margin-top: 6px; font-size: 13px; word-break: break-all; font-family: var(--font-mono); } .alert-box { padding: 10px 14px; border-radius: 9px; margin-bottom: 14px; font-size: 13px; background: var(--brand-soft-bg); color: var(--brand); animation: fadeInUp .3s var(--ease) both; } .alert-box.error { background: var(--danger-bg); color: var(--danger); } .alert-box.success { background: var(--success-bg); color: var(--success); } /* ============ login page ============ */ .login-body { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--login-grad); margin: 0; position: relative; overflow: hidden; font-family: var(--font-sans); } .login-bg-glow { position: absolute; width: 480px; height: 480px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--brand-glow), transparent 70%); top: -120px; left: -120px; animation: floatGlow 10s ease-in-out infinite; } .login-wrap { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 1; } .login-logo-mark { width: 128px; margin-bottom: 18px; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); animation: fadeInUp .5s var(--ease) both; } .login-logo-mark img { width: 100%; height: auto; display: block; border-radius: 14px; } .login-card { background: var(--surface); padding: 30px 32px 32px; border-radius: 16px; width: 320px; text-align: center; box-shadow: var(--shadow-lg); position: relative; animation: popIn .45s var(--ease-bounce) both; color: var(--text); } .login-card h1 { font-size: 19px; margin: 0 0 4px; color: var(--text); letter-spacing: .01em; } .login-footnote { margin: 18px 0 0; font-size: 11px; color: rgba(226,232,240,.55); letter-spacing: .03em; animation: fadeIn .6s var(--ease) both; } .login-card label { display: block; text-align: left; font-size: 12px; font-weight: 600; margin: 14px 0 4px; color: var(--text-soft); } .login-card input { width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface-2); color: var(--text); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); font-family: var(--font-sans); } .login-card input:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-glow-brand); } .login-card button { width: 100%; margin-top: 18px; background: var(--brand); color: #fff; border: none; padding: 11px; border-radius: 9px; font-weight: 700; cursor: pointer; font-size: 13px; transition: background-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease); } .login-card button:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .login-theme-toggle { position: fixed; top: 20px; right: 20px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #cbd5e1; z-index: 5; } .login-theme-toggle:hover { background: rgba(255,255,255,.16); } /* ============ reports ============ */ .report-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .report-filters .field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; } .report-filters select, .report-filters input { padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text); font-family: var(--font-sans); } .export-links a { display: inline-block; margin-right: 10px; background: var(--text); color: var(--surface); padding: 9px 15px; border-radius: 8px; font-size: 12px; font-weight: 600; transition: background-color .15s var(--ease), transform .12s var(--ease); } .export-links a:hover { background: var(--brand); transform: translateY(-1px); text-decoration: none; } /* ============ trends legend chips ============ */ .trend-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); cursor: pointer; transition: opacity .15s var(--ease), transform .15s var(--ease); } .legend-chip:hover { transform: translateY(-1px); } .legend-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color); display: inline-block; } .legend-chip.off { opacity: .35; } /* ============ generic status filter pill (Alarms page, etc.) ============ */ .pill-filter { margin-left: 8px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--text-soft); border: 1px solid var(--border); display: inline-block; transition: background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); } .pill-filter:hover { transform: translateY(-1px); text-decoration: none; border-color: var(--brand); color: var(--brand); } .pill-filter.active { background: var(--text); color: var(--surface); border-color: var(--text); } .pill-filter.active:hover { color: var(--surface); } /* ============ generic placeholder page ============ */ .placeholder-card { background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; padding: 50px 20px; text-align: center; color: var(--text-muted); animation: fadeIn .4s var(--ease) both; } .placeholder-card i { font-size: 32px; margin-bottom: 12px; display: block; animation: pulseSoft 2.4s ease infinite; } /* ============ voice announcer floating "speaking" card ============ */ @keyframes voiceToastIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes voiceToastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(16px) scale(.96); } } @keyframes voiceAvatarPulse { 0% { box-shadow: 0 0 0 0 rgba(139,92,246,.5); } 70% { box-shadow: 0 0 0 14px rgba(139,92,246,0); } 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); } } .voice-toast { position: fixed; right: 24px; bottom: 24px; z-index: 200; pointer-events: none; max-width: 360px; } .voice-toast.show .voice-toast-card { pointer-events: auto; animation: voiceToastIn .35s var(--ease-bounce) both; } .voice-toast-card { display: flex; gap: 12px; background: var(--hero-grad); background-size: 200% 200%; color: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.12); } .voice-toast-avatar { width: 38px; height: 38px; border-radius: 50%; background: #8b5cf6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; font-size: 14px; animation: voiceAvatarPulse 1.8s ease infinite; } .voice-toast-body { min-width: 0; } .voice-toast-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c4b5fd; } .voice-toast-text { font-size: 12.5px; line-height: 1.4; margin-top: 3px; color: #f1f5f9; } .voice-toast-actions { display: flex; gap: 8px; margin-top: 10px; } .voice-toast-btn { border: none; border-radius: 7px; padding: 6px 10px; font-size: 11px; font-weight: 600; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; transition: background-color .15s var(--ease), transform .12s var(--ease); display: inline-flex; align-items: center; gap: 5px; } .voice-toast-btn:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); } .voice-toast-btn.ack { background: #8b5cf6; } .voice-toast-btn.ack:hover { background: #7c3aed; } .voice-toast-btn:disabled { opacity: .6; cursor: default; transform: none; } /* ============ case management ============ */ .form-select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text); font-family: var(--font-sans); margin-bottom: 4px; } .case-status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; } .case-status-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .case-status-chip.status-open { background: var(--danger-bg); color: var(--danger); } .case-status-chip.status-investigating { background: var(--warning-bg); color: var(--warning); } .case-status-chip.status-resolved { background: var(--success-bg); color: var(--success); } .case-status-chip.status-closed { background: var(--offline-bg); color: var(--offline); } .case-timeline { display: flex; flex-direction: column; gap: 0; } .case-timeline-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); animation: fadeInUp .3s var(--ease) both; } .case-timeline-item:last-child { border-bottom: none; } .case-timeline-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-soft); font-size: 12px; flex-shrink: 0; border: 1px solid var(--border); } .case-timeline-icon.action-resolved { background: var(--success-bg); color: var(--success); border-color: transparent; } .case-timeline-icon.action-investigating { background: var(--warning-bg); color: var(--warning); border-color: transparent; } .case-timeline-icon.action-precaution { background: var(--brand-soft-bg); color: var(--brand); border-color: transparent; } .case-timeline-icon.action-acknowledged { background: var(--brand-soft-bg); color: var(--brand); border-color: transparent; } .case-timeline-icon.action-reopened { background: var(--danger-bg); color: var(--danger); border-color: transparent; } .case-timeline-body { flex: 1; min-width: 0; } .case-timeline-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; } .case-timeline-action { font-weight: 700; font-size: 12.5px; color: var(--text); } .case-timeline-note { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; line-height: 1.5; } /* ============ scenario chip (Settings > Demo Simulator) ============ */ .scenario-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); } .scenario-chip.state-healthy { color: var(--success); } .scenario-chip.state-warning_thermal, .scenario-chip.state-elevated_load, .scenario-chip.state-harmonic_spike { color: var(--warning); } .scenario-chip.state-critical_thermal, .scenario-chip.state-critical_vibration, .scenario-chip.state-critical_oil_leak, .scenario-chip.state-voltage_sag { color: var(--danger); } .scenario-chip.state-offline { color: var(--offline); } /* ============ scrollbar polish ============ */ * { scrollbar-width: thin; scrollbar-color: var(--text-faint) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 999px; } *::-webkit-scrollbar-track { background: transparent; }