3579 lines
72 KiB
CSS
3579 lines
72 KiB
CSS
/*
|
||
* LASUCA Controls Plant Dashboard – 2025 refresh
|
||
*/
|
||
|
||
:root {
|
||
color-scheme: light;
|
||
--page-bg: #0f172a;
|
||
--page-bg-accent: #15213a;
|
||
--surface: #ffffff;
|
||
--surface-muted: #f8fafc;
|
||
--surface-sidebar: rgba(15, 23, 42, 0.75);
|
||
--surface-highlight: rgba(37, 99, 235, 0.08);
|
||
--border-strong: rgba(15, 23, 42, 0.18);
|
||
--border-subtle: rgba(15, 23, 42, 0.09);
|
||
--text-main: #0f172a;
|
||
--text-subtle: #475569;
|
||
--text-strong: #111827;
|
||
--text-inverse: #e2e8f0;
|
||
--sidebar-text: #e2e8f0;
|
||
--sidebar-muted: rgba(226, 232, 240, 0.7);
|
||
--header-text: #f8fafc;
|
||
--header-text-subtle: rgba(226, 232, 240, 0.78);
|
||
--accent: #38bdf8;
|
||
--accent-strong: #0ea5e9;
|
||
--accent-soft: rgba(14, 165, 233, 0.16);
|
||
--danger: #ef4444;
|
||
--success: #10b981;
|
||
--warning: #f97316;
|
||
--shadow-sm: 0 12px 30px -18px rgba(15, 23, 42, 0.6);
|
||
--shadow-lg: 0 24px 60px -25px rgba(15, 23, 42, 0.45);
|
||
--radius-lg: 12px;
|
||
--radius-md: 8px;
|
||
--radius-sm: 6px;
|
||
--transition: 160ms ease;
|
||
--font-family: "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
color-scheme: dark;
|
||
--page-bg: #020817;
|
||
--page-bg-accent: #030e29;
|
||
--surface: rgba(15, 23, 42, 0.75);
|
||
--surface-muted: rgba(15, 23, 42, 0.45);
|
||
--surface-sidebar: rgba(15, 23, 42, 0.85);boiler
|
||
--surface-highlight: rgba(56, 189, 248, 0.08);
|
||
--border-strong: rgba(148, 163, 184, 0.35);
|
||
--border-subtle: rgba(148, 163, 184, 0.18);
|
||
--text-main: #e2e8f0;
|
||
--text-subtle: #94a3b8;
|
||
--text-strong: #f8fafc;
|
||
--text-inverse: #0f172a;
|
||
--sidebar-text: #f8fafc;
|
||
--sidebar-muted: rgba(148, 163, 184, 0.85);
|
||
--header-text: #f8fafc;
|
||
--header-text-subtle: rgba(226, 232, 240, 0.8);
|
||
--accent: #38bdf8;
|
||
--accent-strong: #38bdf8;
|
||
--accent-soft: rgba(56, 189, 248, 0.25);
|
||
--shadow-sm: 0 16px 40px -22px rgba(15, 23, 42, 0.9);
|
||
--shadow-lg: 0 32px 76px -30px rgba(15, 23, 42, 0.95);
|
||
}
|
||
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
.button--full {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
html {
|
||
font-size: 16px;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-family);
|
||
color: var(--text-main);
|
||
background: linear-gradient(160deg, var(--page-bg) 0%, var(--page-bg-accent) 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
a {
|
||
color: var(--accent-strong);
|
||
text-decoration: none;
|
||
transition: color var(--transition), opacity var(--transition);
|
||
}
|
||
|
||
a:hover,
|
||
a:focus {
|
||
color: var(--accent);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
a:focus-visible,
|
||
button:focus-visible,
|
||
input:focus-visible {
|
||
outline: 3px solid var(--accent);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.app-shell {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.app-shell--no-sidebar .app-layout__inner {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.app-shell--no-sidebar .app-sidebar {
|
||
display: none;
|
||
}
|
||
|
||
.app-shell--no-sidebar [data-menu-toggle] {
|
||
display: none;
|
||
}
|
||
|
||
.app-header {
|
||
padding: 1.5rem 2rem;
|
||
background: linear-gradient(135deg, rgba(14, 116, 144, 0.25), rgba(56, 189, 248, 0.18));
|
||
color: var(--header-text);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
backdrop-filter: blur(28px);
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
transition: transform 0.24s ease;
|
||
will-change: transform;
|
||
}
|
||
|
||
.app-header--hidden {
|
||
transform: translateY(-100%);
|
||
}
|
||
|
||
.app-header__inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.branding {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.branding h1 {
|
||
margin: 0;
|
||
font-size: 1.9rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.boiler-panel__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.boiler-panel__toggle {
|
||
appearance: none;
|
||
border: 1px solid rgba(15, 118, 110, 0.35);
|
||
background: linear-gradient(135deg, rgba(15, 118, 110, 0.32), rgba(13, 148, 136, 0.18));
|
||
color: var(--text-strong);
|
||
font: inherit;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
cursor: pointer;
|
||
padding: 0.35rem 0.85rem;
|
||
border-radius: var(--radius-sm);
|
||
transition: background var(--transition), border-color var(--transition), color var(--transition);
|
||
}
|
||
|
||
[data-theme="dark"] .boiler-panel__toggle {
|
||
border-color: rgba(56, 189, 248, 0.45);
|
||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0.14));
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.boiler-panel__toggle:hover,
|
||
.boiler-panel__toggle:focus {
|
||
background: linear-gradient(135deg, rgba(15, 118, 110, 0.44), rgba(13, 148, 136, 0.26));
|
||
border-color: rgba(15, 118, 110, 0.55);
|
||
outline: none;
|
||
}
|
||
|
||
[data-theme="dark"] .boiler-panel__toggle:hover,
|
||
[data-theme="dark"] .boiler-panel__toggle:focus {
|
||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.42), rgba(56, 189, 248, 0.22));
|
||
border-color: rgba(56, 189, 248, 0.7);
|
||
}
|
||
|
||
.boiler-panel__title {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.boiler-panel__indicator {
|
||
width: 0.65rem;
|
||
height: 0.65rem;
|
||
border-right: 2px solid currentColor;
|
||
border-bottom: 2px solid currentColor;
|
||
transform: rotate(45deg);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.boiler-panel-table.is-collapsed .boiler-panel__indicator {
|
||
transform: rotate(-135deg);
|
||
}
|
||
|
||
.boiler-panel__summary {
|
||
margin-left: auto;
|
||
padding-left: 1.25rem;
|
||
font-size: 0.78rem;
|
||
opacity: 0.85;
|
||
white-space: nowrap;
|
||
display: inline-flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
text-align: right;
|
||
min-width: 12ch;
|
||
}
|
||
|
||
.boiler-panel-table.is-collapsed tr:nth-child(n + 2) {
|
||
display: none;
|
||
}
|
||
|
||
.branding p {
|
||
margin: 0;
|
||
font-size: 0.95rem;
|
||
color: var(--header-text-subtle);
|
||
}
|
||
|
||
.header-stats {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
margin-top: 0.5rem;
|
||
font-size: 0.85rem;
|
||
color: var(--header-text-subtle);
|
||
}
|
||
|
||
.header-stat {
|
||
display: inline-flex;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.header-stat strong {
|
||
color: var(--header-text);
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
[data-menu-toggle] {
|
||
display: none;
|
||
}
|
||
|
||
.app-layout {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
width: 100%;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.app-layout__inner {
|
||
width: 100%;
|
||
max-width: 1280px;
|
||
display: grid;
|
||
grid-template-columns: 260px minmax(0, 1fr);
|
||
gap: 1.75rem;
|
||
}
|
||
|
||
.app-sidebar {
|
||
position: sticky;
|
||
top: 6.5rem;
|
||
align-self: flex-start;
|
||
background: var(--surface-sidebar);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
color: var(--sidebar-text);
|
||
box-shadow: var(--shadow-sm);
|
||
backdrop-filter: blur(24px);
|
||
max-height: calc(100vh - 7.5rem);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar-meta {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
gap: 0.15rem;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: .25em 1.25rem;
|
||
margin: 0rem 2rem 1.25rem 2.7rem;
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(14, 116, 144, 0.14));
|
||
color: var(--sidebar-text);
|
||
}
|
||
|
||
.sidebar-meta__label {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
opacity: 0.82;
|
||
}
|
||
|
||
.sidebar-meta__value {
|
||
font-size: 2.25rem;
|
||
font-weight: 800;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.sidebar-heading {
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
margin-bottom: 1.25rem;
|
||
color: var(--sidebar-muted);
|
||
}
|
||
|
||
.nav-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.nav-link {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
padding: 0.75rem 1rem;
|
||
background: transparent;
|
||
color: inherit;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid transparent;
|
||
transition: background var(--transition), border-color var(--transition), transform var(--transition);
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background: var(--surface-highlight);
|
||
border-color: var(--border-subtle);
|
||
transform: translateX(2px);
|
||
}
|
||
|
||
.nav-link--active {
|
||
background: var(--accent-soft);
|
||
border-color: rgba(56, 189, 248, 0.6);
|
||
color: var(--text-strong);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.app-content {
|
||
background: transparent;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.75rem;
|
||
}
|
||
|
||
/* Grind target calculator */
|
||
.target-form {
|
||
margin-top: 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.target-grid {
|
||
display: grid;
|
||
gap: 1.15rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
}
|
||
|
||
.target-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
padding: 1.15rem;
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-subtle);
|
||
background: linear-gradient(140deg, var(--surface-muted) 0%, rgba(148, 163, 184, 0.08) 100%);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
|
||
}
|
||
|
||
.target-field:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(56, 189, 248, 0.5);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
[data-theme="dark"] .target-field {
|
||
background: linear-gradient(140deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.56) 100%);
|
||
border-color: rgba(148, 163, 184, 0.26);
|
||
}
|
||
|
||
[data-theme="dark"] .target-field:hover {
|
||
border-color: rgba(56, 189, 248, 0.6);
|
||
}
|
||
|
||
.target-label {
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.target-field input {
|
||
appearance: none;
|
||
width: 100%;
|
||
padding: 0.75rem 0.85rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface);
|
||
color: var(--text-main);
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.01em;
|
||
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
|
||
}
|
||
|
||
[data-theme="dark"] .target-field input {
|
||
background: rgba(15, 23, 42, 0.8);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.target-field input:focus {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||
outline: none;
|
||
}
|
||
|
||
.target-actions {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.target-results {
|
||
display: grid;
|
||
gap: 1rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
}
|
||
|
||
.target-result-card {
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-subtle);
|
||
background: linear-gradient(140deg, var(--surface-muted) 0%, rgba(148, 163, 184, 0.06) 100%);
|
||
padding: 1.25rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
color: var(--text-main);
|
||
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
|
||
}
|
||
|
||
.target-result-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: var(--shadow-lg);
|
||
border-color: rgba(56, 189, 248, 0.3);
|
||
}
|
||
|
||
[data-theme="dark"] .target-result-card {
|
||
background: linear-gradient(140deg, rgba(15, 23, 42, 0.76) 0%, rgba(15, 23, 42, 0.58) 100%);
|
||
border-color: rgba(148, 163, 184, 0.28);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.target-result-card--primary {
|
||
border-color: rgba(56, 189, 248, 0.65);
|
||
background: linear-gradient(140deg, rgba(56, 189, 248, 0.24) 0%, rgba(56, 189, 248, 0.1) 100%);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.target-result-card--delta {
|
||
border-color: rgba(249, 115, 22, 0.65);
|
||
background: linear-gradient(140deg, rgba(249, 115, 22, 0.24) 0%, rgba(249, 115, 22, 0.08) 100%);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.target-result-label {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.target-result-value {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.01em;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.target-result-card--primary .target-result-value,
|
||
.target-result-card--delta .target-result-value {
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.target-footnote {
|
||
margin-top: 1.5rem;
|
||
padding: 1.15rem 1.25rem;
|
||
border-radius: var(--radius-lg);
|
||
border: 1px dashed var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
[data-theme="dark"] .target-footnote {
|
||
background: rgba(15, 23, 42, 0.6);
|
||
border-color: rgba(148, 163, 184, 0.4);
|
||
color: rgba(226, 232, 240, 0.82);
|
||
}
|
||
|
||
/* Latency monitor */
|
||
.latency-table-wrapper {
|
||
overflow-x: auto;
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-subtle);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.latency-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: var(--surface);
|
||
}
|
||
|
||
.latency-table th,
|
||
.latency-table td {
|
||
padding: 0.85rem 1rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.latency-table thead {
|
||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(14, 116, 144, 0.12));
|
||
color: var(--text-strong);
|
||
text-transform: uppercase;
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.latency-table tbody tr:hover {
|
||
background: var(--surface-highlight);
|
||
}
|
||
|
||
.latency-table tbody tr:nth-child(even) {
|
||
background: rgba(148, 163, 184, 0.08);
|
||
}
|
||
|
||
[data-theme="dark"] .latency-table tbody tr:nth-child(even) {
|
||
background: rgba(148, 163, 184, 0.12);
|
||
}
|
||
|
||
.milling-alt-row {
|
||
background: rgba(148, 163, 184, 0.08);
|
||
}
|
||
|
||
[data-theme="dark"] .milling-alt-row {
|
||
background: rgba(148, 163, 184, 0.12);
|
||
}
|
||
|
||
.latency-link {
|
||
color: var(--accent-strong);
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: color var(--transition), text-decoration var(--transition);
|
||
}
|
||
|
||
.latency-link:hover,
|
||
.latency-link:focus {
|
||
color: var(--accent);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.status-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 999px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.status-pill--up {
|
||
background: rgba(16, 185, 129, 0.18);
|
||
color: #047857;
|
||
}
|
||
|
||
.status-pill--down {
|
||
background: rgba(239, 68, 68, 0.18);
|
||
color: #b91c1c;
|
||
}
|
||
|
||
.status-pill--unknown {
|
||
background: rgba(148, 163, 184, 0.2);
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.latency-footnote {
|
||
margin-top: 1.5rem;
|
||
font-size: 0.9rem;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.latency-table thead {
|
||
display: none;
|
||
}
|
||
|
||
.latency-table tbody tr {
|
||
display: grid;
|
||
gap: 0.5rem;
|
||
padding: 0.85rem 0.75rem;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.latency-table tbody td {
|
||
border: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.latency-table tbody td::before {
|
||
content: attr(data-label);
|
||
font-weight: 600;
|
||
color: var(--text-subtle);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
}
|
||
|
||
.data-panel {
|
||
position: relative;
|
||
background: var(--surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-strong);
|
||
padding: 1.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
min-height: 240px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.data-panel > * + * {
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.panel-loading,
|
||
.panel-error {
|
||
display: grid;
|
||
place-content: center;
|
||
text-align: center;
|
||
min-height: 180px;
|
||
gap: 0.75rem;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.panel-error {
|
||
color: var(--danger);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.spinner {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border-radius: 50%;
|
||
border: 3px solid rgba(148, 163, 184, 0.25);
|
||
border-top-color: var(--accent-strong);
|
||
animation: spin 900ms linear infinite;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.table-cluster {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1.25rem;
|
||
width: 100%;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.live-panel {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.live-panel table {
|
||
min-width: 100%;
|
||
}
|
||
|
||
[data-refresh-url] table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: var(--surface);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
border: 1px solid var(--border-subtle);
|
||
box-shadow: rgba(15, 23, 42, 0.08) 0 10px 24px -12px;
|
||
}
|
||
|
||
[data-refresh-url] table + table {
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
[data-refresh-url] table[class*="col-"] {
|
||
flex: 1 1 360px;
|
||
min-width: min(360px, 100%);
|
||
margin: 0;
|
||
}
|
||
|
||
[data-refresh-url] td,
|
||
[data-refresh-url] th {
|
||
padding: 0.75rem 1rem;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
vertical-align: middle;
|
||
color: var(--text-main);
|
||
}
|
||
|
||
[data-refresh-url] tr:last-child td,
|
||
[data-refresh-url] tr:last-child th {
|
||
border-bottom: none;
|
||
}
|
||
|
||
#title {
|
||
background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(13, 148, 136, 0.06));
|
||
color: var(--text-strong);
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
font-size: 0.86rem;
|
||
}
|
||
#datetime {
|
||
background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(13, 148, 136, 0.06));
|
||
color: var(--text-strong);
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
font-size: 0.89rem;
|
||
}
|
||
|
||
#vtitle {
|
||
color: var(--text-subtle);
|
||
font-weight: 600;
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
#sum-count,
|
||
#total-tons {
|
||
color: var(--text-strong);
|
||
font-weight: 700;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
#total-tons {
|
||
padding: 1rem;
|
||
border-radius: var(--radius-md);
|
||
background: var(--surface-highlight);
|
||
}
|
||
|
||
#gopen,
|
||
#dryerson {
|
||
background: rgba(16, 185, 129, 0.15);
|
||
color: var(--success);
|
||
font-weight: 700;
|
||
border-radius: var(--radius-sm);
|
||
text-align: center;
|
||
}
|
||
|
||
#gclose,
|
||
#dryersoff {
|
||
background: rgba(239, 68, 68, 0.12);
|
||
color: var(--danger);
|
||
font-weight: 700;
|
||
border-radius: var(--radius-sm);
|
||
text-align: center;
|
||
}
|
||
|
||
progress,
|
||
progress::-webkit-progress-bar,
|
||
progress::-webkit-progress-value,
|
||
progress::-moz-progress-bar {
|
||
border-radius: 999px;
|
||
}
|
||
|
||
progress {
|
||
width: 100%;
|
||
height: 1.15rem;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
background: rgba(148, 163, 184, 0.18);
|
||
border: 1px solid transparent;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
progress::-webkit-progress-bar {
|
||
background: rgba(148, 163, 184, 0.18);
|
||
}
|
||
|
||
progress::-webkit-progress-value {
|
||
background: linear-gradient(90deg, var(--accent-strong), var(--accent));
|
||
}
|
||
|
||
progress::-moz-progress-bar {
|
||
background: linear-gradient(90deg, var(--accent-strong), var(--accent));
|
||
}
|
||
|
||
progress::before {
|
||
content: attr(data-label);
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
color: var(--text-strong);
|
||
}
|
||
#progresstanks {
|
||
width: 100%;
|
||
height: 26px;
|
||
background-color: #64646400;
|
||
border-radius: 2px;
|
||
padding-left: 0px;
|
||
padding-right: 0px;
|
||
padding-top: 0px;
|
||
padding-bottom: 0px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
|
||
position:relative;
|
||
}
|
||
|
||
.listbg,
|
||
[data-refresh-url] td.listbg {
|
||
background: var(--surface-muted);
|
||
font-weight: 600;
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
.app-footer {
|
||
margin-top: auto;
|
||
padding: 1.5rem 2rem 2rem;
|
||
text-align: center;
|
||
color: var(--text-subtle);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.app-footer__inner {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 1rem 1.25rem;
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
background: rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
[data-back-to-top] {
|
||
position: fixed;
|
||
bottom: 1.5rem;
|
||
right: 1.5rem;
|
||
padding: 0.65rem 1rem;
|
||
border-radius: 999px;
|
||
background: var(--accent-strong);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: var(--shadow-sm);
|
||
opacity: 0;
|
||
transform: translateY(12px);
|
||
transition: opacity var(--transition), transform var(--transition);
|
||
z-index: 30;
|
||
}
|
||
|
||
[data-back-to-top].is-visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.theme-toggle {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
padding: 0.35rem 0.6rem;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--border-subtle);
|
||
background: rgba(15, 23, 42, 0.08);
|
||
color: var(--text-main);
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
transition: background var(--transition), border-color var(--transition);
|
||
}
|
||
|
||
.theme-toggle:hover {
|
||
background: var(--surface-highlight);
|
||
}
|
||
|
||
.theme-toggle input {
|
||
appearance: none;
|
||
width: 2.5rem;
|
||
height: 1.32rem;
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 999px;
|
||
background: rgba(148, 163, 184, 0.35);
|
||
position: relative;
|
||
transition: background var(--transition);
|
||
}
|
||
|
||
.theme-toggle input::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0.14rem;
|
||
left: 0.18rem;
|
||
width: 1rem;
|
||
height: 1rem;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
|
||
transition: transform var(--transition);
|
||
}
|
||
|
||
.theme-toggle input:checked {
|
||
background: var(--accent-strong);
|
||
}
|
||
|
||
.theme-toggle input:checked::after {
|
||
transform: translateX(1.16rem);
|
||
}
|
||
|
||
.theme-toggle span {
|
||
font-weight: 600;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.table-scroll {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.table-scroll table {
|
||
min-width: 720px;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
background: var(--surface-highlight);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.status-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
padding: 0.35rem 0.75rem;
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
background: rgba(56, 189, 248, 0.18);
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
.status-pill--warning {
|
||
background: rgba(249, 115, 22, 0.18);
|
||
color: var(--warning);
|
||
}
|
||
|
||
.status-pill--danger {
|
||
background: rgba(239, 68, 68, 0.16);
|
||
color: var(--danger);
|
||
}
|
||
|
||
.table-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.6rem 1rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--accent-strong);
|
||
background: var(--accent-strong);
|
||
color: white;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform var(--transition), box-shadow var(--transition);
|
||
}
|
||
|
||
.button:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.button--ghost {
|
||
background: transparent;
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
.button--ghost:hover {
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.button--success {
|
||
background: var(--success);
|
||
border-color: var(--success);
|
||
color: #fff;
|
||
}
|
||
|
||
.button--success:hover {
|
||
background: #0b9b73;
|
||
border-color: #0b9b73;
|
||
}
|
||
|
||
.button--danger {
|
||
background: var(--danger);
|
||
border-color: var(--danger);
|
||
color: #fff;
|
||
}
|
||
|
||
.button--danger:hover {
|
||
background: #d93b3b;
|
||
border-color: #d93b3b;
|
||
}
|
||
|
||
.panel-intro {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.4rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.panel-intro h2 {
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.panel-intro p {
|
||
margin: 0;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.search-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.search-type-tabs {
|
||
display: flex;
|
||
align-items: stretch;
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
background: var(--surface-muted);
|
||
overflow: hidden;
|
||
width: fit-content;
|
||
}
|
||
|
||
.search-type-tabs .tab {
|
||
flex: 1;
|
||
padding: 0.65rem 1.25rem;
|
||
text-align: center;
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
color: var(--text-subtle);
|
||
transition: background var(--transition), color var(--transition);
|
||
}
|
||
|
||
.search-type-tabs .tab + .tab {
|
||
border-left: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.search-type-tabs .tab:hover {
|
||
background: var(--surface-highlight);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.search-type-tabs .tab.active {
|
||
background: var(--accent-soft);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.search-option {
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.search-option.active {
|
||
display: flex;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.form-row label {
|
||
flex: 0 0 160px;
|
||
font-weight: 600;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.form-row input,
|
||
.form-row select {
|
||
flex: 1 1 240px;
|
||
padding: 0.75rem 0.85rem;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
color: var(--text-main);
|
||
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
|
||
}
|
||
|
||
.form-row input:focus,
|
||
.form-row select:focus {
|
||
outline: none;
|
||
border-color: var(--accent-strong);
|
||
background: var(--surface);
|
||
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
|
||
}
|
||
|
||
.form-row.checkbox {
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.form-row.checkbox label {
|
||
flex: 0 1 auto;
|
||
margin: 0;
|
||
}
|
||
|
||
.form-row.checkbox input[type="checkbox"] {
|
||
width: 1.1rem;
|
||
height: 1.1rem;
|
||
accent-color: var(--accent-strong);
|
||
}
|
||
|
||
.form-row--actions {
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.form-row--actions .button,
|
||
.form-row--actions a.button {
|
||
min-width: 140px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.help-text {
|
||
font-size: 0.8rem;
|
||
color: var(--text-subtle);
|
||
padding-left: calc(160px + 1rem);
|
||
}
|
||
|
||
.autocomplete-container {
|
||
position: relative;
|
||
flex: 1 1 240px;
|
||
}
|
||
|
||
.autocomplete-suggestions {
|
||
display: none;
|
||
position: absolute;
|
||
top: calc(100% + 2px);
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-sm);
|
||
box-shadow: var(--shadow-sm);
|
||
max-height: 220px;
|
||
overflow-y: auto;
|
||
z-index: 60;
|
||
}
|
||
|
||
.autocomplete-suggestion {
|
||
padding: 0.6rem 0.85rem;
|
||
cursor: pointer;
|
||
color: var(--text-main);
|
||
transition: background var(--transition), color var(--transition);
|
||
}
|
||
|
||
.autocomplete-suggestion:hover,
|
||
.autocomplete-suggestion.active {
|
||
background: var(--surface-highlight);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.results-info {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
padding: 1.25rem 1.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.results-count {
|
||
font-weight: 600;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.notice {
|
||
padding: 0.75rem 1rem;
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.notice--warning {
|
||
background: rgba(250, 204, 21, 0.18);
|
||
color: var(--warning);
|
||
border: 1px solid rgba(250, 204, 21, 0.35);
|
||
}
|
||
|
||
.stats-panel {
|
||
display: grid;
|
||
gap: 1rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
}
|
||
|
||
.stat-box {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
padding: 1.25rem;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
color: var(--accent-strong);
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.chart-container {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chart-container header {
|
||
padding: 1.25rem 1.5rem;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
}
|
||
|
||
.chart-container header h3 {
|
||
margin: 0;
|
||
font-size: 1.15rem;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.chart-wrapper {
|
||
position: relative;
|
||
min-height: 360px;
|
||
padding: 1.25rem 1.5rem 1.5rem;
|
||
}
|
||
|
||
.export-buttons {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
padding: 1rem 1.5rem 0;
|
||
}
|
||
|
||
.export-buttons .button {
|
||
padding: 0.55rem 0.9rem;
|
||
}
|
||
|
||
.trend-controls {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
padding: 1rem 1.5rem 1.5rem;
|
||
background: var(--surface-muted);
|
||
border-top: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.trend-controls label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-weight: 500;
|
||
color: var(--text-main);
|
||
}
|
||
|
||
.trend-controls input[type="checkbox"] {
|
||
accent-color: var(--accent-strong);
|
||
}
|
||
|
||
.search-results {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.search-results table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.search-results th,
|
||
.search-results td {
|
||
padding: 0.75rem 1rem;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.search-results th {
|
||
background: var(--surface-muted);
|
||
color: var(--text-strong);
|
||
font-weight: 600;
|
||
text-align: left;
|
||
}
|
||
|
||
.search-results tr:nth-child(even) td {
|
||
background: rgba(56, 189, 248, 0.06);
|
||
}
|
||
|
||
.search-results tr:hover td {
|
||
background: var(--surface-highlight);
|
||
}
|
||
|
||
.no-results {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-sm);
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.no-results h3 {
|
||
margin: 0 0 0.75rem;
|
||
color: var(--danger);
|
||
}
|
||
|
||
.loading-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(15, 23, 42, 0.65);
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
|
||
.loading-card {
|
||
background: var(--surface);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-subtle);
|
||
padding: 2rem;
|
||
max-width: 360px;
|
||
width: calc(100% - 2rem);
|
||
box-shadow: var(--shadow-lg);
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
border-radius: 50%;
|
||
border: 4px solid rgba(148, 163, 184, 0.25);
|
||
border-top-color: var(--accent-strong);
|
||
animation: spin 900ms linear infinite;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
.loading-subtext {
|
||
font-size: 0.9rem;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.loading-progress {
|
||
width: 100%;
|
||
height: 0.5rem;
|
||
background: var(--surface-muted);
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.loading-progress span {
|
||
display: block;
|
||
height: 100%;
|
||
width: 0;
|
||
background: linear-gradient(90deg, var(--accent-strong), var(--accent));
|
||
transition: width 220ms ease;
|
||
}
|
||
|
||
.search-status {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: 1.25rem;
|
||
transform: translateX(-50%);
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
padding: 0.6rem 1rem;
|
||
box-shadow: var(--shadow-sm);
|
||
display: none;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
z-index: 900;
|
||
}
|
||
|
||
.search-status .mini-spinner {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(148, 163, 184, 0.4);
|
||
border-top-color: var(--accent-strong);
|
||
animation: spin 900ms linear infinite;
|
||
}
|
||
|
||
.search-status .status-text {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.card-grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
}
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
transition: transform var(--transition), box-shadow var(--transition);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.card__badge {
|
||
position: absolute;
|
||
top: 1.25rem;
|
||
right: 1.25rem;
|
||
background: rgba(249, 115, 22, 0.18);
|
||
color: var(--warning);
|
||
border-radius: 999px;
|
||
padding: 0.35rem 0.75rem;
|
||
font-size: 0.7rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.card__icon {
|
||
font-size: 2.25rem;
|
||
}
|
||
|
||
.card__title {
|
||
margin: 0;
|
||
font-size: 1.35rem;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.card__body {
|
||
color: var(--text-subtle);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.card__list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.card__list li {
|
||
position: relative;
|
||
padding-left: 1.2rem;
|
||
color: var(--text-main);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.card__list li::before {
|
||
content: "✓";
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--success);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.card__actions {
|
||
margin-top: auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.login-body {
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
padding: 2.5rem 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: radial-gradient(circle at top, rgba(56, 189, 248, 0.08), transparent 55%),
|
||
radial-gradient(circle at bottom, rgba(15, 23, 42, 0.08), transparent 50%),
|
||
var(--background);
|
||
color: var(--text-main);
|
||
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
}
|
||
|
||
.login-actions {
|
||
position: fixed;
|
||
top: 1.5rem;
|
||
right: 1.75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.65rem;
|
||
}
|
||
|
||
.login-card {
|
||
width: min(420px, 100%);
|
||
background: var(--surface);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid var(--border-subtle);
|
||
padding: 2.4rem 2.75rem 2.8rem;
|
||
box-shadow: 0 30px 80px -40px rgba(15, 23, 42, 0.45);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.75rem;
|
||
}
|
||
|
||
.login-card__badge {
|
||
display: inline-flex;
|
||
align-self: flex-start;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
padding: 0.4rem 0.75rem;
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
background: rgba(56, 189, 248, 0.15);
|
||
color: var(--accent-strong);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.login-card__badge::before {
|
||
content: "●";
|
||
font-size: 0.6rem;
|
||
}
|
||
|
||
.login-card__header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.55rem;
|
||
}
|
||
|
||
.login-card__title {
|
||
margin: 0;
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--text-strong);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.login-card__subtitle {
|
||
margin: 0;
|
||
color: var(--text-subtle);
|
||
line-height: 1.55;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.login-card__alert {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
align-items: start;
|
||
gap: 0.55rem;
|
||
padding: 0.85rem 1rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid rgba(239, 68, 68, 0.35);
|
||
background: rgba(239, 68, 68, 0.12);
|
||
color: var(--danger);
|
||
font-weight: 600;
|
||
box-shadow: var(--shadow-xs);
|
||
}
|
||
|
||
.login-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.1rem;
|
||
}
|
||
|
||
.login-form__field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.login-form__field label {
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-weight: 700;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.login-form__field input {
|
||
appearance: none;
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
padding: 0.8rem 0.95rem;
|
||
background: var(--surface-muted);
|
||
color: var(--text-main);
|
||
font-size: 1rem;
|
||
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
|
||
}
|
||
|
||
.login-form__field input:focus {
|
||
outline: none;
|
||
border-color: var(--accent-strong);
|
||
background: var(--surface);
|
||
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
|
||
}
|
||
|
||
.login-card__footer {
|
||
margin: 0;
|
||
color: var(--text-muted);
|
||
font-size: 0.85rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-card .button {
|
||
margin-top: 0.35rem;
|
||
box-shadow: 0 12px 30px -16px rgba(56, 189, 248, 0.65);
|
||
}
|
||
|
||
.login-card .button:hover,
|
||
.login-card .button:focus-visible {
|
||
box-shadow: 0 12px 40px -12px rgba(56, 189, 248, 0.75);
|
||
}
|
||
|
||
.login-card .button:focus-visible {
|
||
outline: 3px solid rgba(56, 189, 248, 0.45);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.login-card .button:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
.callout {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.25rem 1.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
color: var(--text-main);
|
||
}
|
||
|
||
.callout--muted {
|
||
background: var(--surface-muted);
|
||
}
|
||
|
||
.trend-panel__header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.trend-panel__header h2 {
|
||
margin: 0;
|
||
font-size: 1.55rem;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.trend-panel__header p {
|
||
margin: 0.35rem 0 0;
|
||
color: var(--text-subtle);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.trend-status {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.45rem 1rem;
|
||
border-radius: 999px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
font-size: 0.6rem;
|
||
}
|
||
|
||
.trend-status--running {
|
||
background: rgba(16, 185, 129, 0.18);
|
||
color: var(--success);
|
||
|
||
.personal-dashboard-panel__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.personal-dashboard-panel__actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.personal-dashboard__status {
|
||
margin-top: 1rem;
|
||
padding: 0.75rem 1rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px dashed var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
color: var(--text-subtle);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.personal-dashboard__status--loading {
|
||
border-color: rgba(56, 189, 248, 0.3);
|
||
background: rgba(56, 189, 248, 0.12);
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
.personal-dashboard__status--error {
|
||
border-color: rgba(239, 68, 68, 0.4);
|
||
background: rgba(239, 68, 68, 0.18);
|
||
color: var(--danger);
|
||
}
|
||
|
||
.personal-dashboard__status--empty {
|
||
border-color: rgba(147, 197, 253, 0.35);
|
||
background: rgba(59, 130, 246, 0.08);
|
||
color: rgba(37, 99, 235, 0.88);
|
||
}
|
||
|
||
.personal-dashboard__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 1.25rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.personal-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: var(--shadow-sm);
|
||
padding: 1.25rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.personal-card__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.personal-card__title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.personal-card__tag {
|
||
font-weight: 700;
|
||
font-size: 1.15rem;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.personal-card__subtitle {
|
||
color: var(--text-subtle);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.personal-card__swatch {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||
background: var(--personal-series-color, #38bdf8);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.personal-card__meta {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
gap: 0.4rem 0.8rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.personal-card__meta dt {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.personal-card__meta dd {
|
||
margin: 0;
|
||
font-weight: 600;
|
||
color: var(--text-main);
|
||
}
|
||
|
||
.personal-card__actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.personal-card__details {
|
||
font-size: 0.8rem;
|
||
color: var(--text-subtle);
|
||
}
|
||
border: 1px solid rgba(16, 185, 129, 0.45);
|
||
}
|
||
|
||
.trend-status--stopped {
|
||
background: rgba(239, 68, 68, 0.18);
|
||
color: var(--danger);
|
||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||
}
|
||
|
||
.trend-control-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 1.15rem 1.5rem;
|
||
margin-bottom: 1.75rem;
|
||
}
|
||
|
||
.trend-control {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.55rem;
|
||
}
|
||
|
||
.trend-control label {
|
||
font-weight: 600;
|
||
color: var(--text-subtle);
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.trend-control select,
|
||
.trend-control input[type="number"],
|
||
.trend-control input[type="text"] {
|
||
padding: 0.65rem 0.8rem;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
color: var(--text-main);
|
||
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
|
||
}
|
||
|
||
.trend-control select:focus,
|
||
.trend-control input[type="number"]:focus,
|
||
.trend-control input[type="text"]:focus {
|
||
outline: none;
|
||
border-color: var(--accent-strong);
|
||
background: var(--surface);
|
||
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
|
||
}
|
||
|
||
.trend-control select:disabled {
|
||
opacity: 0.65;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.trend-control__actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.trend-control__actions .button {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.time-window-display {
|
||
padding: 0.65rem 0.8rem;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px dashed var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
color: var(--text-main);
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
|
||
.trend-connection {
|
||
margin-bottom: 1.75rem;
|
||
padding: 0.9rem 1.1rem;
|
||
border-radius: var(--radius-md);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.trend-connection--connected {
|
||
background: rgba(16, 185, 129, 0.18);
|
||
color: var(--success);
|
||
border: 1px solid rgba(16, 185, 129, 0.4);
|
||
}
|
||
|
||
.trend-connection--disconnected {
|
||
background: rgba(239, 68, 68, 0.18);
|
||
color: var(--danger);
|
||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||
}
|
||
|
||
.trend-stat-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 1rem;
|
||
margin-bottom: 1.75rem;
|
||
}
|
||
|
||
.trend-stat-grid--compact {
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
}
|
||
|
||
.trend-stat {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
padding: 1rem;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.trend-stat__value {
|
||
display: block;
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: var(--accent-strong);
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
|
||
.trend-stat__value--secondary {
|
||
color: var(--success);
|
||
}
|
||
|
||
.trend-stat__label {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.trend-stat--series1 .trend-stat__value {
|
||
color: #3498db;
|
||
}
|
||
|
||
.trend-stat--series1 .trend-stat__label {
|
||
color: rgba(52, 152, 219, 0.82);
|
||
}
|
||
|
||
.trend-stat--series2 .trend-stat__value {
|
||
color: #27ae60;
|
||
}
|
||
|
||
.trend-stat--series2 .trend-stat__label {
|
||
color: rgba(39, 174, 96, 0.82);
|
||
}
|
||
|
||
.trend-stat--series3 .trend-stat__value {
|
||
color: #f39c12;
|
||
}
|
||
|
||
.trend-stat--series3 .trend-stat__label {
|
||
color: rgba(243, 156, 18, 0.85);
|
||
}
|
||
|
||
.trend-stat--series4 .trend-stat__value {
|
||
color: #e74c3c;
|
||
}
|
||
|
||
.trend-stat--series4 .trend-stat__label {
|
||
color: rgba(231, 76, 60, 0.84);
|
||
}
|
||
|
||
.trend-stat--series5 .trend-stat__value {
|
||
color: #9b59b6;
|
||
}
|
||
|
||
.trend-stat--series5 .trend-stat__label {
|
||
color: rgba(155, 89, 182, 0.84);
|
||
}
|
||
|
||
.trend-chart {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.25rem;
|
||
box-shadow: var(--shadow-sm);
|
||
min-height: 420px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.trend-chart canvas {
|
||
width: 100% !important;
|
||
height: 420px !important;
|
||
}
|
||
|
||
.trend-chart--compact {
|
||
min-height: 280px;
|
||
}
|
||
|
||
.trend-chart--compact canvas {
|
||
height: 300px !important;
|
||
}
|
||
|
||
.trend-global-controls {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1rem 1.25rem;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.trend-global-controls .trend-control {
|
||
flex: 1 1 220px;
|
||
max-width: 280px;
|
||
}
|
||
|
||
.trend-global-controls .trend-control select {
|
||
width: 100%;
|
||
}
|
||
|
||
.trend-global-controls .trend-control label {
|
||
margin-bottom: 0.15rem;
|
||
}
|
||
|
||
.trend-global-controls .trend-control:last-child {
|
||
max-width: none;
|
||
}
|
||
|
||
.trend-global-controls .trend-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.multi-trend-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.multi-trend-grid--single-column {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.multi-trend-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.multi-trend-card__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.multi-trend-card__title {
|
||
margin: 0;
|
||
font-size: 1.15rem;
|
||
font-weight: 600;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.multi-trend-card__controls {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.multi-trend-card__controls .trend-control {
|
||
flex: 1 1 180px;
|
||
max-width: 220px;
|
||
}
|
||
|
||
.multi-trend-card__controls .trend-control select {
|
||
width: 100%;
|
||
}
|
||
|
||
.multi-trend-card__controls .trend-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.6rem;
|
||
}
|
||
|
||
.multi-trend-card__controls .button {
|
||
min-width: 80px;
|
||
}
|
||
|
||
.sortable-chosen {
|
||
box-shadow: var(--shadow-md);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.sortable-ghost {
|
||
opacity: 0.55;
|
||
}
|
||
|
||
/* Tag control interface */
|
||
.control-app {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.control-app__header {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.control-app__header h2 {
|
||
margin: 0;
|
||
font-size: 1.35rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.control-app__header p {
|
||
margin: 0.25rem 0 0;
|
||
color: var(--text-subtle);
|
||
max-width: 48ch;
|
||
}
|
||
|
||
.control-app__selector {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
min-width: 220px;
|
||
}
|
||
|
||
.control-app__selector label {
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.control-app__selector-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 0.75rem 1rem;
|
||
}
|
||
|
||
.control-app__selector-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.control-app select,
|
||
.control-app input[type="number"] {
|
||
width: 100%;
|
||
padding: 0.65rem 0.75rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
color: var(--text-main);
|
||
font-size: 0.95rem;
|
||
transition: border-color var(--transition), box-shadow var(--transition);
|
||
}
|
||
|
||
.control-app select[data-filter-empty="true"] {
|
||
border-color: rgba(249, 115, 22, 0.45);
|
||
background: rgba(249, 115, 22, 0.08);
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.control-app select:focus,
|
||
.control-app input[type="number"]:focus {
|
||
border-color: var(--accent-strong);
|
||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
|
||
outline: none;
|
||
}
|
||
|
||
.control-app__body {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
|
||
gap: 1.75rem;
|
||
}
|
||
|
||
.control-app__primary {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
background: var(--surface-muted);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-subtle);
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.control-app__value {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.control-app__value-label {
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.control-app__value-reading {
|
||
font-size: clamp(2.2rem, 4vw, 2.9rem);
|
||
font-weight: 700;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.control-app__value-pending {
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
.control-app__timestamp {
|
||
font-size: 0.85rem;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.control-app__controls {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.control-app__numeric,
|
||
.control-app__boolean {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.control-app__boolean-actions {
|
||
display: inline-flex;
|
||
gap: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.control-app__controls-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.control-app__step {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.control-app__step-actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.control-app__set {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.control-app__set-input {
|
||
max-width: 160px;
|
||
}
|
||
|
||
.control-app__controls-row--aux {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.control-app__hint {
|
||
font-size: 0.85rem;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.button--toggle-active {
|
||
box-shadow: 0 0 0 2px var(--accent-soft);
|
||
}
|
||
|
||
.control-app__aside {
|
||
background: var(--surface-muted);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-subtle);
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.control-app__aside h3 {
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.control-app__aside ul {
|
||
margin: 0;
|
||
padding-left: 1.1rem;
|
||
color: var(--text-subtle);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.control-app__status {
|
||
font-size: 0.95rem;
|
||
padding: 0.9rem 1.1rem;
|
||
border-radius: var(--radius-md);
|
||
background: var(--surface-muted);
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.control-app__status[data-status-type="error"] {
|
||
color: var(--danger);
|
||
border-color: rgba(239, 68, 68, 0.35);
|
||
background: rgba(239, 68, 68, 0.08);
|
||
}
|
||
|
||
.control-app__status[data-status-type="success"] {
|
||
color: var(--success);
|
||
border-color: rgba(16, 185, 129, 0.35);
|
||
background: rgba(16, 185, 129, 0.08);
|
||
}
|
||
|
||
.control-app__status[data-status-type="warning"] {
|
||
color: var(--warning);
|
||
border-color: rgba(249, 115, 22, 0.35);
|
||
background: rgba(249, 115, 22, 0.1);
|
||
}
|
||
|
||
.control-app__status[data-status-type="info"] {
|
||
color: var(--text-subtle);
|
||
border-style: dashed;
|
||
background: var(--surface-muted);
|
||
}
|
||
|
||
/* Pivot analysis */
|
||
.pivot-app {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.75rem;
|
||
}
|
||
|
||
.pivot-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(15, 23, 42, 0.55);
|
||
backdrop-filter: blur(6px);
|
||
z-index: 40;
|
||
}
|
||
|
||
.pivot-overlay__spinner {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
border-radius: 50%;
|
||
border: 4px solid rgba(148, 163, 184, 0.35);
|
||
border-top-color: var(--accent-strong);
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
.pivot-config {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.pivot-config__grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
}
|
||
|
||
.pivot-config__section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.pivot-config__title {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.pivot-config__hint {
|
||
margin: 0;
|
||
color: var(--text-subtle);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.pivot-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.pivot-field__label {
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.pivot-input,
|
||
.pivot-select {
|
||
width: 100%;
|
||
padding: 0.65rem 0.75rem;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface);
|
||
color: var(--text-main);
|
||
font: inherit;
|
||
transition: border-color var(--transition),
|
||
box-shadow var(--transition);
|
||
}
|
||
|
||
.pivot-input:focus,
|
||
.pivot-select:focus {
|
||
border-color: var(--accent-strong);
|
||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||
outline: none;
|
||
}
|
||
|
||
.pivot-tag-selector {
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
padding: 1rem;
|
||
background: var(--surface-muted);
|
||
max-height: 18rem;
|
||
overflow: auto;
|
||
}
|
||
|
||
.pivot-placeholder {
|
||
margin: 0;
|
||
color: var(--text-subtle);
|
||
font-style: italic;
|
||
text-align: center;
|
||
padding: 0.75rem 0;
|
||
}
|
||
|
||
.pivot-tag-selector__grid {
|
||
display: grid;
|
||
gap: 0.35rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
}
|
||
|
||
.pivot-tag-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.35rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
transition: background var(--transition),
|
||
color var(--transition);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pivot-tag-item:hover,
|
||
.pivot-tag-item:focus-within {
|
||
background: var(--surface-highlight);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.pivot-tag-item input {
|
||
accent-color: var(--accent-strong);
|
||
}
|
||
|
||
.pivot-config__actions {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.pivot-quick-range {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.pivot-quick-range__label {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.pivot-quick-range__buttons {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.pivot-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.pivot-status {
|
||
min-height: 1.5rem;
|
||
}
|
||
|
||
.status-message {
|
||
padding: 0.75rem 1rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
color: var(--text-main);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-message--success {
|
||
border-color: rgba(16, 185, 129, 0.35);
|
||
background: rgba(16, 185, 129, 0.18);
|
||
color: var(--success);
|
||
}
|
||
|
||
.status-message--error {
|
||
border-color: rgba(239, 68, 68, 0.45);
|
||
background: rgba(239, 68, 68, 0.18);
|
||
color: var(--danger);
|
||
}
|
||
|
||
.status-message--info {
|
||
border-color: rgba(59, 130, 246, 0.35);
|
||
background: rgba(59, 130, 246, 0.18);
|
||
color: var(--accent-strong);
|
||
}
|
||
|
||
.pivot-results {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.pivot-results__grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||
}
|
||
|
||
.pivot-results__panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.pivot-results__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.pivot-results__header h3 {
|
||
margin: 0;
|
||
}
|
||
|
||
.pivot-results__header p {
|
||
margin: 0.25rem 0 0;
|
||
color: var(--text-subtle);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.pivot-results__control {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
min-width: 160px;
|
||
}
|
||
|
||
.pivot-chart__wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 420px;
|
||
}
|
||
|
||
.pivot-table__wrapper {
|
||
overflow: auto;
|
||
max-height: 420px;
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.pivot-table {
|
||
width: 100%;
|
||
min-width: 640px;
|
||
border-collapse: collapse;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.pivot-table th,
|
||
.pivot-table td {
|
||
padding: 0.6rem 0.75rem;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
text-align: left;
|
||
}
|
||
|
||
.pivot-table th {
|
||
position: sticky;
|
||
top: 0;
|
||
background: var(--surface-muted);
|
||
font-weight: 600;
|
||
z-index: 1;
|
||
}
|
||
|
||
.pivot-table .numeric-cell {
|
||
text-align: right;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.pivot-table .null-cell {
|
||
text-align: center;
|
||
color: var(--text-subtle);
|
||
font-style: italic;
|
||
}
|
||
|
||
.pivot-table tr:nth-child(even) td {
|
||
background: rgba(15, 23, 42, 0.03);
|
||
}
|
||
|
||
.pivot-debug {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.pivot-debug__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.pivot-debug__subtitle {
|
||
margin: 0;
|
||
color: var(--text-subtle);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.pivot-debug__content {
|
||
margin: 0;
|
||
padding: 1rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
max-height: 320px;
|
||
overflow: auto;
|
||
font-family: 'Consolas', 'Courier New', monospace;
|
||
font-size: 0.85rem;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* Cohort comparison */
|
||
.cohort-app {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.75rem;
|
||
}
|
||
|
||
.cohort-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(15, 23, 42, 0.55);
|
||
backdrop-filter: blur(6px);
|
||
z-index: 40;
|
||
}
|
||
|
||
.cohort-overlay__spinner {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
border-radius: 50%;
|
||
border: 4px solid rgba(148, 163, 184, 0.35);
|
||
border-top-color: var(--accent-strong);
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
.cohort-config {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.cohort-config__grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
}
|
||
|
||
.cohort-config__section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.cohort-config__title {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cohort-config__hint {
|
||
margin: 0;
|
||
color: var(--text-subtle);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.cohort-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.cohort-field__label {
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.cohort-select {
|
||
width: 100%;
|
||
padding: 0.65rem 0.75rem;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface);
|
||
color: var(--text-main);
|
||
font: inherit;
|
||
transition: border-color var(--transition),
|
||
box-shadow var(--transition);
|
||
}
|
||
|
||
.cohort-select:focus {
|
||
border-color: var(--accent-strong);
|
||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||
outline: none;
|
||
}
|
||
|
||
.cohort-checkboxes {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.cohort-checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.35rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
transition: background var(--transition),
|
||
color var(--transition);
|
||
}
|
||
|
||
.cohort-checkbox:hover,
|
||
.cohort-checkbox:focus-within {
|
||
background: var(--surface-highlight);
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.cohort-checkbox input {
|
||
accent-color: var(--accent-strong);
|
||
}
|
||
|
||
.cohort-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.cohort-status {
|
||
min-height: 1.5rem;
|
||
}
|
||
|
||
.cohort-results {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.cohort-results__grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||
}
|
||
|
||
.cohort-results__panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.cohort-results__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.cohort-results__header h3 {
|
||
margin: 0;
|
||
}
|
||
|
||
.cohort-results__header p {
|
||
margin: 0.25rem 0 0;
|
||
color: var(--text-subtle);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.cohort-results__controls {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.cohort-chart__wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 420px;
|
||
}
|
||
|
||
.cohort-table__wrapper {
|
||
overflow: auto;
|
||
max-height: 420px;
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.cohort-table {
|
||
width: 100%;
|
||
min-width: 640px;
|
||
border-collapse: collapse;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.cohort-table th,
|
||
.cohort-table td {
|
||
padding: 0.6rem 0.75rem;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
text-align: left;
|
||
}
|
||
|
||
.cohort-table th {
|
||
position: sticky;
|
||
top: 0;
|
||
background: var(--surface-muted);
|
||
font-weight: 600;
|
||
z-index: 1;
|
||
}
|
||
|
||
.cohort-table .numeric-cell {
|
||
text-align: right;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.cohort-table .null-cell {
|
||
text-align: center;
|
||
color: var(--text-subtle);
|
||
font-style: italic;
|
||
}
|
||
|
||
.cohort-table tr:nth-child(even) td {
|
||
background: rgba(15, 23, 42, 0.03);
|
||
}
|
||
|
||
.cohort-summary {
|
||
display: grid;
|
||
gap: 1rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
}
|
||
|
||
.cohort-summary__card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.cohort-summary__header h4 {
|
||
margin: 0;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.cohort-summary__header p {
|
||
margin: 0;
|
||
color: var(--text-subtle);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.cohort-summary__metrics {
|
||
display: grid;
|
||
gap: 0.35rem 0.75rem;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
margin: 0;
|
||
}
|
||
|
||
.cohort-summary__metrics dt {
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.cohort-summary__metrics dd {
|
||
margin: 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cohort-summary__empty {
|
||
margin: 0;
|
||
color: var(--text-subtle);
|
||
font-style: italic;
|
||
}
|
||
|
||
.cohort-summary__warnings {
|
||
margin: 0;
|
||
padding-left: 1.1rem;
|
||
color: var(--warning);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.cohort-messages {
|
||
margin-top: 1rem;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.cohort-messages__list {
|
||
margin: 0;
|
||
padding-left: 1.1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.cohort-debug {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.cohort-debug__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.cohort-debug__content {
|
||
margin: 0;
|
||
padding: 1rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
max-height: 320px;
|
||
overflow: auto;
|
||
font-family: 'Consolas', 'Courier New', monospace;
|
||
font-size: 0.85rem;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* Tag health audit */
|
||
.tag-health-app {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.75rem;
|
||
}
|
||
|
||
.tag-health-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(15, 23, 42, 0.55);
|
||
backdrop-filter: blur(6px);
|
||
z-index: 48;
|
||
}
|
||
|
||
.tag-health-overlay__spinner {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
border-radius: 50%;
|
||
border: 4px solid rgba(148, 163, 184, 0.35);
|
||
border-top-color: var(--accent-strong);
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
.tag-health-controls {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.tag-health-controls__grid {
|
||
display: grid;
|
||
gap: 1.25rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
}
|
||
|
||
.tag-health-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.tag-health-field__label {
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.tag-health-select,
|
||
.tag-health-input {
|
||
width: 100%;
|
||
padding: 0.65rem 0.75rem;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface);
|
||
color: var(--text-main);
|
||
font: inherit;
|
||
transition: border-color var(--transition), box-shadow var(--transition);
|
||
}
|
||
|
||
.tag-health-select:focus,
|
||
.tag-health-input:focus {
|
||
border-color: var(--accent-strong);
|
||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||
outline: none;
|
||
}
|
||
|
||
.tag-health-help {
|
||
margin: 0;
|
||
color: var(--text-subtle);
|
||
font-size: 0.8rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.tag-health-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.tag-health-status {
|
||
min-height: 1.5rem;
|
||
}
|
||
|
||
.tag-health-summary {
|
||
display: grid;
|
||
gap: 1.25rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
}
|
||
|
||
.tag-health-card {
|
||
padding: 1.1rem 1.25rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.tag-health-card--healthy {
|
||
border-color: rgba(16, 185, 129, 0.35);
|
||
background: rgba(16, 185, 129, 0.08);
|
||
}
|
||
|
||
.tag-health-card--warning {
|
||
border-color: rgba(249, 115, 22, 0.35);
|
||
background: rgba(249, 115, 22, 0.08);
|
||
}
|
||
|
||
.tag-health-card--offline {
|
||
border-color: rgba(239, 68, 68, 0.35);
|
||
background: rgba(239, 68, 68, 0.08);
|
||
}
|
||
|
||
.tag-health-card h4 {
|
||
margin: 0;
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.tag-health-card__value {
|
||
margin: 0;
|
||
font-size: 1.8rem;
|
||
font-weight: 700;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.tag-health-table-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.tag-health-table__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.tag-health-table__header h3 {
|
||
margin: 0;
|
||
}
|
||
|
||
.tag-health-table__header p {
|
||
margin: 0.3rem 0 0;
|
||
color: var(--text-subtle);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.tag-health-status-filter {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.tag-health-status-filter label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.tag-health-status-filter input[type="checkbox"] {
|
||
accent-color: var(--accent-strong);
|
||
}
|
||
|
||
.tag-health-status-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.2rem 0.55rem;
|
||
border-radius: 999px;
|
||
font-weight: 600;
|
||
font-size: 0.78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
.tag-health-status-chip--healthy {
|
||
background: rgba(16, 185, 129, 0.12);
|
||
color: rgba(16, 185, 129, 0.95);
|
||
}
|
||
|
||
.tag-health-status-chip--warning {
|
||
background: rgba(249, 115, 22, 0.12);
|
||
color: rgba(249, 115, 22, 0.95);
|
||
}
|
||
|
||
.tag-health-status-chip--offline {
|
||
background: rgba(239, 68, 68, 0.12);
|
||
color: rgba(239, 68, 68, 0.95);
|
||
}
|
||
|
||
.tag-health-table__wrapper {
|
||
overflow: auto;
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.tag-health-table {
|
||
width: 100%;
|
||
min-width: 840px;
|
||
border-collapse: collapse;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.tag-health-table th,
|
||
.tag-health-table td {
|
||
padding: 0.65rem 0.75rem;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.tag-health-table th {
|
||
position: sticky;
|
||
top: 0;
|
||
background: var(--surface-muted);
|
||
font-weight: 600;
|
||
z-index: 1;
|
||
}
|
||
|
||
.tag-health-table td:nth-child(5),
|
||
.tag-health-table td:nth-child(6),
|
||
.tag-health-table td:nth-child(7) {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.tag-health-table tr:nth-child(even) td {
|
||
background: rgba(15, 23, 42, 0.03);
|
||
}
|
||
|
||
.tag-health-table tr[data-status="warning"] td {
|
||
background: rgba(249, 115, 22, 0.08);
|
||
}
|
||
|
||
.tag-health-table tr[data-status="offline"] td {
|
||
background: rgba(239, 68, 68, 0.08);
|
||
}
|
||
|
||
.tag-health-status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.25rem 0.65rem;
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.tag-health-status-badge--healthy {
|
||
background: rgba(16, 185, 129, 0.2);
|
||
color: rgba(16, 185, 129, 0.95);
|
||
}
|
||
|
||
.tag-health-status-badge--warning {
|
||
background: rgba(249, 115, 22, 0.2);
|
||
color: rgba(249, 115, 22, 0.95);
|
||
}
|
||
|
||
.tag-health-status-badge--offline {
|
||
background: rgba(239, 68, 68, 0.2);
|
||
color: rgba(239, 68, 68, 0.95);
|
||
}
|
||
|
||
.tag-health-debug {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.tag-health-debug__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.tag-health-debug__content {
|
||
margin: 0;
|
||
padding: 1rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
max-height: 320px;
|
||
overflow: auto;
|
||
font-family: 'Consolas', 'Courier New', monospace;
|
||
font-size: 0.85rem;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.is-hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.pivot-config__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.pivot-results__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.pivot-chart__wrapper {
|
||
height: 320px;
|
||
}
|
||
|
||
.cohort-config__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.cohort-results__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.cohort-chart__wrapper {
|
||
height: 320px;
|
||
}
|
||
|
||
.tag-health-controls__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.tag-health-summary {
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
}
|
||
|
||
.tag-health-table__header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.pivot-actions {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.pivot-results__control {
|
||
width: 100%;
|
||
}
|
||
|
||
.cohort-actions {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.cohort-results__controls {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.tag-health-actions {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.control-app__body {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.control-app__aside {
|
||
order: -1;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.multi-trend-grid {
|
||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||
}
|
||
.app-layout__inner {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.app-sidebar {
|
||
position: fixed;
|
||
inset: 0 auto 0 0;
|
||
width: 280px;
|
||
max-width: 85vw;
|
||
transform: translateX(-310px);
|
||
transition: transform var(--transition);
|
||
z-index: 40;
|
||
}
|
||
|
||
.app-sidebar.is-open {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
[data-menu-toggle] {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 2.75rem;
|
||
height: 2.75rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid rgba(248, 250, 252, 0.45);
|
||
background: rgba(255, 255, 255, 0.12);
|
||
color: var(--header-text);
|
||
cursor: pointer;
|
||
transition: background var(--transition), border-color var(--transition);
|
||
}
|
||
|
||
[data-menu-toggle]:hover {
|
||
background: rgba(255, 255, 255, 0.18);
|
||
border-color: rgba(248, 250, 252, 0.65);
|
||
}
|
||
|
||
.app-layout {
|
||
padding: 1.5rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.app-header {
|
||
padding: 1.1rem 1.5rem;
|
||
}
|
||
|
||
.app-header__inner {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.header-actions {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.app-layout {
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.data-panel {
|
||
padding: 1.2rem;
|
||
}
|
||
|
||
[data-refresh-url] td,
|
||
[data-refresh-url] th {
|
||
padding: 0.65rem 0.8rem;
|
||
}
|
||
|
||
#sum-count {
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
|
||
progress::before {
|
||
font-size: 0.72rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.login-body {
|
||
padding: 1.5rem 1.1rem;
|
||
}
|
||
|
||
.login-card {
|
||
padding: 2rem 1.75rem 2.2rem;
|
||
border-radius: var(--radius-lg);
|
||
gap: 1.4rem;
|
||
}
|
||
|
||
.login-card__title {
|
||
font-size: 1.7rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.app-layout {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.data-panel {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.theme-toggle span {
|
||
display: none;
|
||
}
|
||
|
||
[data-back-to-top] {
|
||
bottom: 1rem;
|
||
right: 1rem;
|
||
}
|
||
}
|