/* PlugPoint operator console — themed to match RICTO (FitBase glassmorphism). Tokens lifted from RICTO's design system: teal accent, Inter, translucent blurred surfaces, pill badges. Class names match the Rust views. */ :root { /* RICTO canonical tokens (index.css) */ --bg: #e4e6ee; --bg-2: rgba(255, 255, 255, 0.55); --bg-3: rgba(255, 255, 255, 0.35); --bg-4: rgba(255, 255, 255, 0.20); --nav-bg: rgba(255, 255, 255, 0.40); --nav-border: rgba(0, 0, 0, 0.06); --nav-hover: rgba(255, 255, 255, 0.60); --nav-text: #1a1a2e; --nav-text-2: #3d3d5c; --nav-text-3: #8888a0; --text-1: #1a1a2e; --text-2: #3d3d5c; --text-3: #7a7a96; --text-4: #a0a0b8; --border: rgba(0, 0, 0, 0.08); --border-hi: rgba(0, 0, 0, 0.12); --hairline: rgba(0, 0, 0, 0.04); --accent: #008eb4; --accent-text: #ffffff; --accent-bg: rgba(0, 142, 180, 0.10); --accent-hover: #007a9a; --c-green: #26bf94; --c-green-bg: rgba(38, 191, 148, 0.10); --c-red: #e6533c; --c-red-bg: rgba(230, 83, 60, 0.10); --c-amber: #e8956a; --c-amber-bg: rgba(232, 149, 106, 0.10); --c-blue: #49b6f5; --c-blue-bg: rgba(73, 182, 245, 0.10); --glass-blur: blur(40px); --glass-blur-sm: blur(20px); --glass-border: rgba(255, 255, 255, 0.30); --shadow: 0 8px 32px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12); --radius: 16px; --radius-sm: 12px; --radius-lg: 24px; --radius-xl: 28px; --pill: 999px; --sidebar-width: 68px; /* legacy aliases used by component classes */ --surface: var(--bg-2); --surface-2: var(--bg-3); --surface-3: var(--bg-4); --green: var(--c-green); --green-bg: var(--c-green-bg); --red: var(--c-red); --red-bg: var(--c-red-bg); --amber: var(--c-amber); --amber-bg: var(--c-amber-bg); } /* RICTO dark mode — toggled by adding .dark to . */ .dark { --bg: #0d0d11; --bg-2: rgba(255, 255, 255, 0.06); --bg-3: rgba(255, 255, 255, 0.09); --bg-4: rgba(255, 255, 255, 0.04); --nav-bg: rgba(255, 255, 255, 0.06); --nav-border: rgba(255, 255, 255, 0.08); --nav-hover: rgba(255, 255, 255, 0.10); --nav-text: rgba(255, 255, 255, 0.92); --nav-text-2: rgba(255, 255, 255, 0.60); --nav-text-3: rgba(255, 255, 255, 0.35); --text-1: rgba(255, 255, 255, 0.92); --text-2: rgba(255, 255, 255, 0.65); --text-3: rgba(255, 255, 255, 0.40); --text-4: rgba(255, 255, 255, 0.22); --border: rgba(255, 255, 255, 0.08); --border-hi: rgba(255, 255, 255, 0.12); --hairline: rgba(255, 255, 255, 0.04); --accent: #00b4e6; --accent-bg: rgba(0, 180, 230, 0.12); --accent-hover: #00cfff; --c-green: #34d399; --c-green-bg: rgba(52, 211, 153, 0.12); --c-red: #f87171; --c-red-bg: rgba(248, 113, 113, 0.12); --c-amber: #fbbf24; --c-amber-bg: rgba(251, 191, 36, 0.12); --c-blue: #60a5fa; --c-blue-bg: rgba(96, 165, 250, 0.12); --glass-border: rgba(255, 255, 255, 0.10); --shadow: 0 8px 32px rgba(0, 0, 0, 0.30); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40); } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-1); font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; background: var(--bg); min-height: 100vh; transition: background .25s ease, color .25s ease; } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; } /* ---- App shell (RICTO MainLayout) ---- */ .topbar { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 24px; margin-left: var(--sidebar-width); border-bottom: 1px solid var(--hairline); } .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--text-2); } .brand b { color: var(--accent); } .brand-logo { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; } .user-chip { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 12.5px; } .icon-btn { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; border-radius: 10px; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .icon-btn:hover { background: var(--nav-hover); color: var(--text-1); } .role-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--pill); font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--accent-bg); color: var(--accent); text-transform: capitalize; } /* Vision Pro pill sidebar: 52px icon rail, expands on hover. */ .vision-sidebar { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); width: 52px; max-height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden; z-index: 100; display: flex; flex-direction: column; align-items: center; padding: 8px; gap: 2px; background: var(--nav-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); scrollbar-width: none; } .vision-sidebar::-webkit-scrollbar { display: none; } .vision-sidebar:hover { width: 220px; } .vision-sidebar .nav-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; transition: opacity 0.2s ease 0.05s, width 0.3s ease; } .vision-sidebar:hover .nav-label { opacity: 1; width: auto; margin-left: 12px; } .sidebar-logo { width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; margin-bottom: 6px; } .nav-item { display: flex; align-items: center; width: 100%; border: none; background: transparent; cursor: pointer; text-align: left; padding: 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--nav-text-2); transition: all 0.2s ease; gap: 0; } .nav-item svg { flex-shrink: 0; } .nav-item:hover { background: var(--nav-hover); color: var(--nav-text); } .nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; } .nav-divider { width: 24px; height: 1px; background: var(--border); margin: 6px auto; flex-shrink: 0; } .nav-divider.push { margin-top: auto; } .content { margin-left: var(--sidebar-width); min-width: 0; padding: 24px; padding-bottom: 50px; animation: page-fade-in 0.3s ease-out; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ---- Card / section ---- */ .card { background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 18px; } .section-head { margin: 0 0 16px; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: #fff; border: 1px solid var(--accent); padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,142,180,.28); transition: background .14s, box-shadow .14s, transform .06s; } .btn:hover { background: var(--accent-hover); box-shadow: 0 6px 18px rgba(0,142,180,.38); } .btn:active { transform: scale(.97); } .btn.success { background: var(--green); border-color: var(--green); box-shadow: 0 4px 14px rgba(38,191,148,.28); } .btn.danger { background: var(--red); border-color: var(--red); box-shadow: 0 4px 14px rgba(230,83,60,.28); } .btn.muted, .btn.ghost { background: var(--surface-2); color: var(--text-2); border-color: var(--glass-border); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); box-shadow: none; } .btn.muted:hover, .btn.ghost:hover { background: var(--surface-3); border-color: var(--border-hi); color: var(--text-1); } .btn.sm { padding: 5px 11px; font-size: 12px; border-radius: 9px; box-shadow: none; } /* ---- Inputs ---- */ .input, input, select { font: inherit; color: var(--text-1); padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); outline: none; transition: border-color .14s, box-shadow .14s; } .input::placeholder, input::placeholder { color: var(--text-4); } .input:focus, input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); } .toolbar.top { margin: 0 0 16px; padding: 0; border-top: none; } .toolbar .sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; } /* ---- Tables ---- */ .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .table thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; } .table tbody td { padding: 12px; border-bottom: 1px solid var(--hairline); color: var(--text-2); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover td { background: var(--surface-3); } .table td.num { text-align: right; font-variant-numeric: tabular-nums; } .table .mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-3); } .table .actions { text-align: right; white-space: nowrap; } .table .actions .btn { margin-left: 6px; } /* Plain lists not yet upgraded to tables: clean divided rows. */ .card ul { list-style: none; margin: 6px 0 0; padding: 0; } .card ul li { padding: 11px 2px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-2); } .card ul li:last-child { border-bottom: none; } .card h4, .modal-body h4 { margin: 18px 0 4px; font-size: 12.5px; color: var(--text-3); font-weight: 600; } .modal-body h4 { margin: 6px 0 0; } /* ---- Status badges ---- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--pill); font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--text-3); text-transform: capitalize; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.ok { background: var(--green-bg); color: var(--green); } .badge.warn { background: var(--amber-bg); color: var(--amber); } .badge.bad { background: var(--red-bg); color: var(--red); } .badge.no-dot::before { display: none; } /* ---- Stat grid ---- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .stat { background: var(--surface-2); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 18px; transition: transform .25s, box-shadow .25s; } .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .stat .num { font-size: 30px; font-weight: 700; letter-spacing: -.02em; } .stat .label { color: var(--text-3); font-size: 12.5px; margin-top: 2px; } /* ---- Result / summary panels ---- */ .panel { background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 14px; } .panel .row { display: flex; gap: 18px; flex-wrap: wrap; } .panel b { color: var(--text-1); } /* ---- Messages + empty ---- */ .msg { font-size: 13px; margin: 8px 0 0; } .msg.ok { color: var(--green); } .msg.err { color: var(--red); } .empty { color: var(--text-3); padding: 22px 4px; font-size: 13px; text-align: center; } /* ---- Login ---- */ .login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } .login-card { width: 100%; max-width: 390px; padding: 34px; background: rgba(255,255,255,.6); backdrop-filter: blur(50px) saturate(1.6); -webkit-backdrop-filter: blur(50px) saturate(1.6); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .login-card h1 { margin: 0 0 4px; font-size: 23px; } .login-card h1 b { color: var(--accent); } .login-card .sub { color: var(--text-3); margin: 0 0 20px; font-size: 13px; } .login-card input { display: block; width: 100%; margin: 10px 0; } .login-card .btn { width: 100%; padding: 12px; margin-top: 6px; } /* ---- Tabs ---- */ .tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-3); border-radius: var(--radius-sm); margin-bottom: 18px; } .tab { flex: 1; border: none; background: transparent; cursor: pointer; padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text-3); transition: background .14s, color .14s; } .tab:hover { color: var(--text-1); } .tab.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,142,180,.3); } /* ---- Live monitoring ---- */ .live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .05em; } .live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(38,191,148,.5); } 70% { box-shadow: 0 0 0 7px rgba(38,191,148,0); } 100% { box-shadow: 0 0 0 0 rgba(38,191,148,0); } } .charger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-top: 4px; } .charger-grid.wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .ct-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .charger-tile { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--surface-2); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); } .ct-serial { font-size: 13px; color: var(--text-1); font-weight: 600; } /* ---- Role dashboards (RICTO parity) ---- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 4px; } .kpi { --kpi-accent: var(--accent); background: var(--surface-2); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; transition: transform .25s, box-shadow .25s; } .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .kpi.teal { --kpi-accent: var(--accent); } .kpi.blue { --kpi-accent: #49b6f5; } .kpi.green { --kpi-accent: var(--green); } .kpi.amber { --kpi-accent: var(--amber); } .kpi.red { --kpi-accent: var(--red); } .kpi.purple { --kpi-accent: #8b5cf6; } .kpi-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-3); } .kpi-dot { width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--kpi-accent) 14%, transparent); position: relative; flex-shrink: 0; } .kpi-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--kpi-accent); } .kpi-value { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--text-1); line-height: 1.1; } .kpi-sub { font-size: 11px; color: var(--text-4); } .alert-banner { background: var(--amber-bg); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px; } .alert-title { font-size: 13px; font-weight: 700; color: var(--text-1); display: block; margin-bottom: 8px; } .alert-items { display: flex; gap: 26px; flex-wrap: wrap; } .alert-item b { font-size: 19px; font-weight: 700; color: var(--amber); display: block; line-height: 1.1; } .alert-item span { font-size: 11.5px; color: var(--text-3); } .station-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 6px; } .station-card { background: var(--surface-2); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .sc-name { font-size: 14px; font-weight: 700; color: var(--text-1); } .sc-loc { font-size: 11px; color: var(--text-4); } .sc-conn { display: flex; gap: 14px; font-size: 11.5px; } .ok-text { color: var(--green); } .blue-text { color: #2f86c0; } .bad-text { color: var(--red); } .sc-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid var(--hairline); } .sc-stats b { display: block; font-size: 14px; font-weight: 700; color: var(--text-1); } .sc-stats span { font-size: 10px; color: var(--text-4); } .live-session-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .live-session-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--glass-border); border-left: 3px solid #49b6f5; border-radius: var(--radius-sm); padding: 11px 14px; } .lsc-main { flex: 1; min-width: 0; } .lsc-title { font-size: 13px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 7px; } .lsc-dot { width: 7px; height: 7px; border-radius: 50%; background: #49b6f5; animation: lsc-pulse 1.6s infinite; flex-shrink: 0; } @keyframes lsc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } .lsc-plate { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 7px; border-radius: 5px; background: rgba(73, 182, 245, 0.12); color: #2f86c0; } .lsc-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; } .lsc-soc-track { height: 4px; border-radius: 999px; background: var(--surface-3, rgba(128,128,128,0.15)); margin-top: 7px; overflow: hidden; } .lsc-soc-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #49b6f5, #2f86c0); transition: width 0.6s ease; } .lsc-right { text-align: right; flex-shrink: 0; } .lsc-energy { font-size: 14px; font-weight: 700; color: #2f86c0; } .trend { display: flex; align-items: flex-end; gap: 6px; height: 160px; background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 16px 16px 8px; margin-top: 6px; } .trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .trend-bar { width: 100%; max-width: 42px; background: var(--accent); opacity: .85; border-radius: 4px 4px 0 0; transition: opacity .15s; } .trend-col:hover .trend-bar { opacity: 1; } .trend-label { font-size: 9.5px; color: var(--text-4); } .shift-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--glass-border); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 14px; } .shift-strip.open { border-left-color: var(--green); } .shift-info { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; } .shift-actions { display: flex; align-items: center; gap: 8px; } .ct-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* ---- Connector sub-tiles (RICTO ConnectorCard) ---- */ .conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .conn-tile { background: var(--surface-3); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; } .conn-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .conn-name { font-size: 12px; font-weight: 600; color: var(--text-1); } .conn-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding-top: 6px; border-top: 1px solid var(--hairline); } .conn-metrics span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); } .conn-metrics b { font-size: 11.5px; color: var(--text-1); } .conn-badges { display: inline-flex; gap: 5px; flex-wrap: wrap; } .empty-inline { color: var(--text-4); } .settings-form { display: flex; flex-direction: column; gap: 10px; max-width: 340px; } .settings-form .btn { align-self: flex-start; } /* ---- Station map ---- */ .station-map { height: 320px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); margin-bottom: 16px; z-index: 1; overflow: hidden; } /* ---- Toasts ---- */ .toast-stack { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 400px; } .toast { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border: 1px solid var(--glass-border); border-left-width: 3px; border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-lg); animation: toast-slide-in .3s ease-out; } @keyframes toast-slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } .toast.success { border-left-color: var(--c-green); } .toast.error { border-left-color: var(--c-red); } .toast.warning { border-left-color: var(--c-amber); } .toast.info { border-left-color: var(--c-blue); } .toast.success .toast-icon { color: var(--c-green); } .toast.error .toast-icon { color: var(--c-red); } .toast.warning .toast-icon { color: var(--c-amber); } .toast.info .toast-icon { color: var(--c-blue); } .toast-icon { flex-shrink: 0; margin-top: 1px; } .toast-body { flex: 1; min-width: 0; } .toast-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .toast-msg { font-size: 12px; color: var(--text-3); margin-top: 1px; } .toast-x { border: none; background: transparent; cursor: pointer; color: var(--text-4); padding: 2px; border-radius: 6px; display: inline-flex; flex-shrink: 0; } .toast-x:hover { color: var(--text-1); } /* ---- Modal ---- */ .modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; } .modal-panel { background: var(--bg); border: 1px solid var(--glass-border); border-radius: 16px; width: min(460px, 92%); max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .dark .modal-panel { background: #17171d; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--hairline); } .modal-title { font-size: 15px; font-weight: 700; color: var(--text-1); } .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } .modal-note { background: var(--accent-bg); color: var(--accent); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; } .modal-note.plain { background: var(--surface-3); color: var(--text-2); } .confirm-text { font-size: 13px; color: var(--text-2); margin: 0; } /* ---- Empty state + spinner ---- */ .empty-state { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; gap: 4px; text-align: center; } .empty-state .empty-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 8px; background: var(--surface-3); color: var(--text-4); display: flex; align-items: center; justify-content: center; } .empty-state .empty-title { font-size: 14px; font-weight: 600; color: var(--text-2); } .empty-state .empty-sub { font-size: 12px; color: var(--text-4); } .spinner-wrap { display: flex; justify-content: center; padding: 60px 0; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--accent-bg); border-top-color: var(--accent); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Page header ---- */ .page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .ph-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; } .ph-titles { display: flex; flex-direction: column; } .ph-title-row { display: flex; align-items: center; gap: 8px; } .ph-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-1); } .ph-count { display: inline-flex; padding: 2px 9px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-3); font-size: 11.5px; font-weight: 600; } .ph-sub { font-size: 12px; color: var(--text-4); } .ph-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* ---- KPI icon tile (replaces dot) ---- */ .kpi-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: color-mix(in srgb, var(--kpi-accent) 14%, transparent); color: var(--kpi-accent); display: flex; align-items: center; justify-content: center; } /* ---- Toolbar row / search ---- */ .page-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } .page-toolbar .push-right { margin-left: auto; display: flex; gap: 8px; } .search-wrap { position: relative; flex: 1 1 200px; max-width: 300px; } .search-wrap.full { max-width: none; } .search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-4); pointer-events: none; } .search-wrap .input { width: 100%; padding-left: 2.5rem; } /* ---- Segmented toggle ---- */ .seg { display: inline-flex; background: var(--surface-3); border-radius: 10px; padding: 3px; gap: 2px; } .seg-btn { border: none; background: transparent; cursor: pointer; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; transition: background .14s, color .14s; } .seg-btn:hover { color: var(--text-1); } .seg-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,142,180,.3); } /* ---- Step wizard ---- */ .wizard { max-width: 680px; } .steps { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; } .step { display: flex; align-items: center; gap: 8px; } .step-circle { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-4); font-size: 12px; font-weight: 700; } .step.on .step-circle { background: var(--accent); color: #fff; } .step-label { font-size: 12px; font-weight: 600; color: var(--text-4); white-space: nowrap; } .step.on .step-label { color: var(--text-1); } .step-line { flex: 1; height: 2px; min-width: 12px; background: var(--border); border-radius: 2px; } .step-line.on { background: var(--accent); } @media (max-width: 640px) { .step-label { display: none; } } .wizard-foot { display: flex; justify-content: space-between; margin-top: 20px; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ---- Selection cards (wizard chargers / payment) ---- */ .select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .select-card { text-align: left; cursor: pointer; font: inherit; background: var(--surface-3); border: 2px solid transparent; border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); transition: border-color .14s, background .14s; } .select-card:hover { background: var(--surface-2); } .select-card.selected { border-color: var(--accent); background: var(--surface-2); } .select-card.disabled { opacity: .4; cursor: not-allowed; } .select-card .sel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .select-card .sel-title { font-weight: 600; color: var(--text-1); font-size: 13px; } .select-card .sel-sub { font-size: 11.5px; color: var(--text-4); } .pay-card { padding: 22px; align-items: flex-start; } .pay-card .pay-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--surface-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; } .pay-card.selected .pay-icon { background: var(--accent-bg); color: var(--accent); } .conn-pick { display: flex; gap: 6px; flex-wrap: wrap; } .conn-pick-btn { border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); } .conn-pick-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .review-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 12px 14px; } .review-row .rr-label { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; } .review-row b { color: var(--text-1); font-size: 13px; } .field-note { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; } /* ---- Inline glass form ---- */ .glass-form { background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; } .glass-form .gf-head { display: flex; justify-content: space-between; align-items: center; } .glass-form .gf-title { font-size: 13px; font-weight: 700; color: var(--text-1); } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 5px; } .field label { font-size: 11px; font-weight: 600; color: var(--text-2); } .field .input, .field input, .field select { width: 100%; } .input-icon-wrap { position: relative; } .input-icon-wrap > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-4); pointer-events: none; } .input-icon-wrap .input, .input-icon-wrap input { width: 100%; padding-left: 2.5rem; } .input-icon-wrap .eye-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: var(--text-4); padding: 4px; border-radius: 6px; display: inline-flex; } .input-icon-wrap .eye-btn:hover { color: var(--text-1); } /* ---- Charger cards ---- */ .charger-card { background: var(--surface-2); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .charger-card .cc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cc-tile { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; } .cc-id { display: flex; flex-direction: column; min-width: 0; } .cc-serial { font-size: 14px; font-weight: 700; color: var(--text-1); } .cc-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); flex-wrap: wrap; } .cc-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .btn.amber { background: var(--amber); border-color: var(--amber); box-shadow: 0 4px 14px rgba(232,149,106,.28); } .conn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface-3); border: 1px solid var(--hairline); border-left: 3px solid var(--text-4); border-radius: 10px; padding: 9px 12px; } .conn-row.ok { border-left-color: var(--c-green); } .conn-row.blue { border-left-color: var(--c-blue); } .conn-row.warn { border-left-color: var(--c-amber); } .conn-row.bad { border-left-color: var(--c-red); } .conn-row .cr-port { font-size: 12px; font-weight: 600; color: var(--text-1); } .conn-row .cr-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); } .conn-row .cr-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .conn-row .cr-metrics { margin-left: auto; display: flex; gap: 14px; font-size: 11.5px; color: var(--text-3); } .conn-row .cr-metrics b { color: var(--text-1); } .cr-vin-start { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .cr-vin-start .input { width: 200px; padding: 5px 9px; font-size: 12px; } /* ---- Sortable table headers / row tint ---- */ th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--text-1); } tr.row-active td { background: var(--c-blue-bg); } .status-pill-btn { border: none; background: transparent; padding: 0; cursor: pointer; font: inherit; } .pos { color: var(--c-green); } .neg { color: var(--c-red); } /* ---- Pricing hero ---- */ .hero-price { background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 24px; text-align: center; margin-bottom: 16px; } .hero-price .hp-label { font-size: 12px; font-weight: 500; color: var(--text-3); } .hero-price .hp-value { font-size: 36px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; } .hero-price .hp-sub { font-size: 11px; color: var(--text-4); } .accent-text { color: var(--accent); font-weight: 600; } /* ---- Report bar chart ---- */ .bars { display: flex; align-items: flex-end; gap: 3px; height: 200px; background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 16px 16px 6px; margin: 6px 0 16px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; position: relative; } .bar-fill { width: 100%; max-width: 40px; background: var(--accent); opacity: .8; border-radius: 4px 4px 0 0; transition: opacity .15s; min-height: 2px; } .bar-col:hover .bar-fill { opacity: 1; } .bar-tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--text-1); color: var(--bg); font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; } .bar-col:hover .bar-tip { opacity: 1; } .bar-label { font-size: 9px; color: var(--text-4); } /* ---- Login (RICTO parity) ---- */ .login-column { width: 100%; max-width: 448px; } .login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; text-align: center; } .login-logo-tile { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 14px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(0,142,180,.35); } .login-brand h1 { margin: 0; font-size: 24px; color: var(--text-1); } .login-brand .sub { color: var(--text-3); font-size: 13.5px; margin: 4px 0 0; } .login-card form, .login-fields { display: flex; flex-direction: column; gap: 16px; } .login-fields input { margin: 0; } .login-error { display: flex; align-items: center; gap: 8px; background: var(--c-red-bg); color: var(--c-red); border-radius: 10px; padding: 10px 12px; font-size: 12px; font-weight: 500; margin-bottom: 16px; } .login-footer { text-align: center; font-size: 12px; color: var(--text-4); margin-top: 24px; } /* ---- Back link / drill-down ---- */ .link-back { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 14px; } .detail-head { margin-bottom: 14px; } .detail-head .dh-plate { font-size: 18px; font-weight: 700; color: var(--text-1); } .detail-head .dh-sub { font-size: 13px; color: var(--text-3); } .station-map.tall { height: 500px; margin-bottom: 0; } /* ---- Stations list + station detail (RICTO StationsPageNew parity) ---- */ .row-click { cursor: pointer; } .table th.center, .table td.center { text-align: center; } .cell-strong { font-weight: 600; color: var(--text-1); } .cell-faint { color: var(--text-4); } .st-name { font-weight: 700; color: var(--text-1); } .st-code { font-size: 10px; color: var(--text-4); margin-left: 6px; } .status-dot-8 { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-4); } .status-dot-8.green { background: var(--c-green); } .status-dot-8.blue { background: var(--c-blue); } .status-dot-8.red { background: var(--c-red); } .status-dot-8.grey { background: var(--text-4); } .modal-panel.modal-wide { width: min(960px, 92vw); max-height: 90vh; } .modal-section-title { margin: 18px 0 10px; font-size: 13px; font-weight: 700; color: var(--text-2); } .modal-form-footer { margin-top: 10px; align-items: end; } .modal-form-actions .form-row { gap: 8px; } tr.row-selected td { background: rgba(73, 182, 245, 0.08); } .row-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .row-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 14px; } .ri-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .ri-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; } .ri-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .modal-head.sd-head { align-items: flex-start; } .sd-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sd-name { font-size: 18px; font-weight: 700; color: var(--text-1); } .sd-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); } .sd-gps { font-size: 11px; color: var(--text-4); } .sd-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sd-subtitle { font-size: 14px; font-weight: 600; color: var(--text-1); } .bay-list { display: flex; flex-direction: column; gap: 14px; } .bay-card { border: 1px solid var(--glass-border); border-radius: 14px; overflow: hidden; } .bay-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #fff; } .bay-titles { display: flex; flex-direction: column; min-width: 0; } .bay-label { font-size: 14px; font-weight: 700; } .bay-sub { font-size: 11px; color: rgba(255,255,255,.75); } .bay-add-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; padding: 6px 11px; border-radius: 9px; background: rgba(255,255,255,.18); color: #fff; font-size: 11px; font-weight: 600; transition: background .14s; } .bay-add-btn:hover { background: rgba(255,255,255,.3); } .bay-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; } .bay-body .glass-form { margin-bottom: 0; } .setup-charger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 760px) { .setup-charger-grid { grid-template-columns: 1fr; } } .setup-charger-card { background: var(--surface-3); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .scc-head { display: flex; align-items: center; gap: 10px; } .scc-chip { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .scc-id { display: flex; flex-direction: column; min-width: 0; } .scc-serial { font-size: 13px; font-weight: 700; color: var(--text-1); } .scc-model { font-size: 11px; color: var(--text-4); } .scc-status { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); } .port-list { display: flex; flex-direction: column; gap: 6px; } .port-row { border: 1px solid var(--hairline); border-left: 3px solid var(--text-4); border-radius: 9px; padding: 8px 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 5px; } .port-row.green { background: var(--c-green-bg); border-left-color: var(--c-green); } .port-row.amber { background: var(--c-amber-bg); border-left-color: var(--c-amber); } .port-row.red { background: var(--c-red-bg); border-left-color: var(--c-red); } .port-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-3); } .port-name { font-size: 12px; font-weight: 600; color: var(--text-1); } .port-kw { font-size: 11px; color: var(--text-3); } .port-status-pill { padding: 2px 8px; border-radius: var(--pill); background: var(--surface-3); font-size: 10.5px; font-weight: 600; color: var(--text-2); text-transform: capitalize; } .type-pill { padding: 2px 8px; border-radius: var(--pill); font-size: 10px; font-weight: 700; letter-spacing: .03em; background: var(--accent-bg); color: var(--accent); } .port-live { display: flex; align-items: center; gap: 10px; padding-left: 24px; font-size: 11.5px; font-weight: 600; color: var(--c-green); } .ports-empty { font-size: 12px; color: var(--text-4); text-align: center; padding: 8px 0; } .add-port-btn { width: 100%; border: none; cursor: pointer; padding: 8px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; transition: opacity .14s; } .add-port-btn:hover { opacity: .8; } .add-port-btn:disabled { opacity: .5; cursor: not-allowed; } .port-add-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kw-input { width: 80px; } .dashed-empty { border: 1px dashed var(--border-hi); border-radius: 12px; padding: 18px; text-align: center; font-size: 12px; color: var(--text-4); } .unassigned-note { font-size: 11px; color: var(--text-4); } .cr-kw { font-size: 11px; color: var(--text-3); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 8px; } .sidebar::-webkit-scrollbar { width: 0; } /* ---- Sessions table (RICTO parity) ---- */ .table-scroll { overflow-x: auto; } .sessions-table { min-width: 1600px; font-size: 11px; } .sessions-table thead th, .sessions-table tbody td { padding: 8px 10px; } .sessions-table .mono { font-size: 11px; } .sessions-table th.num { text-align: right; } .sessions-table td.nowrap { white-space: nowrap; } .sessions-table .vehicle-cell { font-weight: 600; color: var(--text-1); white-space: nowrap; } .sessions-table .amount-cell { font-weight: 700; color: var(--text-1); } .sessions-table .ongoing { color: var(--c-blue); font-weight: 700; } .pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-blue); margin-right: 6px; animation: pulse 1.5s infinite; } .page-toolbar .date-input { width: 140px; flex: 0 0 auto; } .page-toolbar .status-select { width: 160px; flex: 0 0 auto; } .page-toolbar .toolbar-label { font-size: 12px; color: var(--text-3); } .pagination-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px; color: var(--text-3); } .pagination-bar .pg-btns { display: flex; gap: 6px; } /* ---- Start Charging shift gate ---- */ .shift-gate { display: flex; justify-content: center; padding: 48px 16px; } .shift-gate-card { background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .shift-gate-icon { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 6px; background: var(--amber-bg); color: var(--amber); display: flex; align-items: center; justify-content: center; } .shift-gate-title { font-size: 18px; font-weight: 700; color: var(--text-1); } .shift-gate-text { font-size: 13px; color: var(--text-3); } .shift-gate-actions { display: flex; gap: 8px; margin-top: 10px; } /* ---- Charger events severity filter ---- */ .events-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .events-toolbar .toolbar-label { font-size: 12px; font-weight: 600; color: var(--text-3); } .sev-pill { border: 2px solid transparent; background: var(--surface-3); cursor: pointer; padding: 3px 10px; border-radius: var(--pill); font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: capitalize; transition: border-color .14s; } .sev-pill.red { background: var(--c-red-bg); color: var(--c-red); } .sev-pill.amber { background: var(--c-amber-bg); color: var(--c-amber); } .sev-pill.blue { background: var(--c-blue-bg); color: var(--c-blue); } .sev-pill.active { border-color: currentColor; } .events-count { margin-left: auto; font-size: 12px; color: var(--text-4); } /* ---- Cash book / vehicle sessions cells ---- */ .cash-amount { font-weight: 700; } .cell-medium { font-weight: 500; color: var(--text-1); } /* ---- Shift reconciliation modal + loyalty tiers ---- */ .info-banner { display: flex; align-items: flex-start; gap: 10px; background: var(--c-blue-bg); border: 1px solid color-mix(in srgb, var(--c-blue) 30%, transparent); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-2); } .info-banner svg { color: var(--c-blue); flex-shrink: 0; margin-top: 1px; } .modal-note.warn { display: flex; align-items: flex-start; gap: 10px; background: var(--amber-bg); color: var(--amber); } .modal-note.warn svg { flex-shrink: 0; margin-top: 1px; } .icon-btn.blue { color: var(--c-blue); } .icon-btn.red { color: var(--c-red); } .tier-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-1); } .tier-name svg { color: var(--accent); } /* ---- Staff / customers role & category pills, expandable detail rows ---- */ .role-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; } .role-pill.accent { background: var(--accent-bg); color: var(--accent); } .role-pill.blue { background: var(--c-blue-bg); color: var(--c-blue); } .role-pill.green { background: var(--c-green-bg); color: var(--c-green); } .role-pill.purple { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; } .detail-row td { background: var(--surface-3); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 4px 2px; } .detail-cell label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); } .detail-cell span { font-size: 12.5px; color: var(--text-1); font-weight: 600; } /* ---- Section sub-headers (TOU, finalization history, reports) ---- */ .section-subhead { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; } .section-subhead .ss-title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-1); } .section-subhead .push-right { margin-left: auto; } /* ---- Pricing: current active rate + TOU ---- */ .rate-card { text-align: center; padding: 18px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); margin-bottom: 14px; } .rate-card.tou { border: 2px solid var(--accent); } .rate-card .rc-label { font-size: 12px; font-weight: 500; color: var(--text-3); } .rate-card .rc-value { font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; } .rate-card .rc-sub { font-size: 12px; color: var(--text-3); } .rate-card .rc-sub.tou { color: var(--accent); font-weight: 600; } .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .empty-note { background: var(--surface-3); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; text-align: center; font-size: 12.5px; color: var(--text-3); } /* ---- Packages: sold packages progress + sell modal summary ---- */ .mini-progress { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; vertical-align: middle; margin-right: 8px; } .mini-progress i { display: block; height: 100%; background: var(--c-green); border-radius: 3px; } .mini-progress.bad i { background: var(--c-red); } .summary-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--surface-3); border-radius: 10px; padding: 12px 14px; text-align: center; } .summary-3 b { display: block; font-size: 14px; font-weight: 700; color: var(--text-1); } .summary-3 span { font-size: 10px; color: var(--text-4); text-transform: uppercase; letter-spacing: .04em; } .hr { height: 1px; background: var(--hairline); margin: 4px 0; } /* ---- Finalization history table ---- */ .table-scroll { overflow-x: auto; } .table.wide-900 { min-width: 900px; } .cell-ico { display: inline-flex; vertical-align: -2px; margin-right: 5px; } .cell-ico.blue { color: var(--c-blue); } .cell-ico.green { color: var(--c-green); } .cell-12 { font-size: 12px; color: var(--text-3); } /* ---- Reports: shift recon totals, energy bars, sustainability ---- */ .total-row td { border-top: 2px solid var(--border); font-weight: 700; color: var(--text-1); } .bars.blue .bar-fill { background: var(--c-blue); } .sus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 6px 0 4px; } .sus-kpi { border: 1px solid color-mix(in srgb, var(--c-green) 35%, transparent); background: var(--c-green-bg); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; } .sus-kpi .sk-icon { width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--c-green) 16%, transparent); color: var(--c-green); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .sus-kpi .sk-label { font-size: 12px; font-weight: 600; color: var(--text-2); } .sus-kpi .sk-value { font-size: 24px; font-weight: 700; color: var(--c-green); letter-spacing: -.02em; } .sus-kpi .sk-sub { font-size: 11px; color: var(--text-3); } .calc-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); padding: 4px 0; } .calc-row svg { color: var(--c-green); flex-shrink: 0; } .setup-info { display: flex; flex-direction: column; gap: 10px; } .setup-row { display: flex; align-items: baseline; gap: 10px; } .setup-label { width: 90px; flex-shrink: 0; font-size: 12px; color: var(--muted, #7b8794); } .setup-value { font-size: 13px; word-break: break-all; user-select: all; } .setup-secret { color: var(--accent, #008eb4); font-weight: 700; }