/* Sandia Desert IT -- Client Portal
Hand-written CSS, no framework. Light theme lives on bare :root; dark theme overrides
the same custom properties via [data-theme="dark"] on , with a prefers-color-scheme
fallback for the moment before js/theme.js has set an explicit attribute. */
:root {
--bg: #f6f8f7;
--surface: #ffffff;
--surface-alt: #f1f5f3;
--text: #1a2420;
--text-muted: #5b6b64;
--border: #dde5e1;
--accent: #16a34a;
--accent-hover: #15803d;
--accent-soft: #e8f7ee;
--danger: #dc2626;
--danger-soft: #fdecec;
--online: #22c55e;
--offline: #94a3b8;
--shadow: 0 1px 2px rgba(16, 24, 20, 0.06), 0 1px 8px rgba(16, 24, 20, 0.04);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #101512;
--surface: #1a211d;
--surface-alt: #202823;
--text: #e7ede9;
--text-muted: #9aa8a1;
--border: #2b342e;
--accent: #22c55e;
--accent-hover: #34d16d;
--accent-soft: #16341f;
--danger: #f87171;
--danger-soft: #3a1d1d;
--online: #34d16d;
--offline: #64748b;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.3);
color-scheme: dark;
}
}
html[data-theme="dark"] {
--bg: #101512;
--surface: #1a211d;
--surface-alt: #202823;
--text: #e7ede9;
--text-muted: #9aa8a1;
--border: #2b342e;
--accent: #22c55e;
--accent-hover: #34d16d;
--accent-soft: #16341f;
--danger: #f87171;
--danger-soft: #3a1d1d;
--online: #34d16d;
--offline: #64748b;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.3);
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
height: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#app {
height: 100vh;
}
button {
font-family: inherit;
cursor: pointer;
}
/* ---------- App shell ---------- */
.app-shell {
display: flex;
height: 100vh;
overflow: hidden;
}
.sidebar {
width: 260px;
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.sidebar-header {
border-bottom: 1px solid var(--border);
padding: 0.75rem 1rem;
}
/* The ![]()
carries explicit width/height attributes (3:1); `height: auto` keeps that
ratio while the width tracks the sidebar, so layout never depends on the SVG's own
intrinsic size. object-fit is a no-op when the box already matches the ratio. */
.sidebar-logo {
display: block;
width: 100%;
max-width: 240px;
height: auto;
aspect-ratio: 3 / 1;
object-fit: contain;
margin: 0 auto;
}
.sidebar-nav {
padding: 0.5rem 0 1rem;
flex: 1;
}
/* Leaves are elements; groups are /. Depth classes
(nav-depth-0/1/2) control indentation so three levels stay readable. */
.nav-item,
.nav-group-summary {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.55rem 1rem 0.55rem calc(1rem - 3px);
border: none;
background: none;
color: var(--text);
text-align: left;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
border-left: 3px solid transparent;
cursor: pointer;
user-select: none;
}
.nav-item:hover,
.nav-group-summary:hover {
background: var(--surface-alt);
}
.nav-item:focus-visible,
.nav-group-summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.nav-item.is-active {
background: var(--accent-soft);
color: var(--accent);
border-left-color: var(--accent);
font-weight: 600;
}
.nav-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-icon {
font-size: 1rem;
width: 1.25rem;
text-align: center;
flex-shrink: 0;
}
.nav-badge {
flex-shrink: 0;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0 0.4rem;
line-height: 1.4;
}
.nav-item.is-active .nav-badge {
color: var(--accent);
border-color: var(--accent);
}
.nav-group-summary {
list-style: none;
font-weight: 600;
}
.nav-group-summary::-webkit-details-marker { display: none; }
.nav-group-summary::marker { content: ''; }
.nav-chevron {
flex-shrink: 0;
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(-45deg);
transition: transform 0.15s ease;
margin-right: 0.15rem;
}
.nav-group[open] > .nav-group-summary .nav-chevron {
transform: rotate(45deg);
}
.nav-group.has-active > .nav-group-summary {
color: var(--accent);
}
.nav-group.has-active > .nav-group-summary .nav-chevron {
border-color: var(--accent);
}
.nav-sublist {
display: flex;
flex-direction: column;
}
/* Depth 1: children of a top-level group. Depth 2: children of a nested subgroup. */
.nav-depth-1.nav-item,
.nav-depth-1 > .nav-group-summary {
padding-left: calc(2.4rem - 3px);
font-size: 0.85rem;
font-weight: 400;
}
.nav-depth-1 > .nav-group-summary {
font-weight: 500;
color: var(--text-muted);
}
.nav-depth-1.has-active > .nav-group-summary {
color: var(--accent);
}
.nav-depth-2.nav-item {
padding-left: calc(3.4rem - 3px);
font-size: 0.82rem;
font-weight: 400;
}
.nav-depth-1.nav-group > .nav-sublist {
border-left: 1px solid var(--border);
margin-left: 2.55rem;
}
.nav-depth-1.nav-group > .nav-sublist .nav-depth-2.nav-item {
padding-left: 0.75rem;
border-left-width: 0;
margin-left: -1px;
box-shadow: none;
}
.nav-depth-1.nav-group > .nav-sublist .nav-depth-2.nav-item.is-active {
box-shadow: inset 2px 0 0 var(--accent);
}
/* ---------- Main column / topbar ---------- */
.main-col {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.topbar {
min-height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 1.25rem;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.topbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.topbar-right {
display: flex;
align-items: center;
gap: 0.6rem;
flex-shrink: 0;
}
.topbar-heading {
min-width: 0;
line-height: 1.2;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.72rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.breadcrumb-sep {
opacity: 0.6;
}
.topbar-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-toggle {
display: none; /* shown only in the narrow-screen drawer layout, see Responsive */
}
.menu-bars,
.menu-bars::before,
.menu-bars::after {
display: block;
width: 16px;
height: 2px;
background: currentColor;
border-radius: 1px;
content: '';
position: relative;
}
.menu-bars::before { position: absolute; top: -5px; }
.menu-bars::after { position: absolute; top: 5px; }
.topbar-org {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.2rem 0.6rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-alt);
max-width: 320px;
}
.topbar-org:empty {
display: none;
}
.org-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
white-space: nowrap;
}
.org-name {
font-weight: 600;
color: var(--text);
font-size: 0.85rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.org-switcher {
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 6px;
padding: 0.3rem 0.5rem;
font-size: 0.85rem;
font-weight: 600;
max-width: 220px;
}
.icon-btn {
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 6px;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.icon-btn:hover {
background: var(--surface-alt);
}
.topbar-account {
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: 34px;
padding: 0 0.6rem 0 0.25rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: inherit;
text-decoration: none;
max-width: 260px;
}
.topbar-account:hover {
background: var(--surface-alt);
}
.topbar-account.is-active {
border-color: var(--accent);
}
.topbar-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
flex-shrink: 0;
}
.topbar-user-name {
font-size: 0.8rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-backdrop {
display: none;
}
.content {
flex: 1;
overflow-y: auto;
background: var(--bg);
}
/* ---------- Page content ---------- */
.page {
padding: 2rem;
max-width: 1100px;
}
.page-title {
margin: 0 0 0.25rem;
font-size: 1.5rem;
font-weight: 600;
}
.page-subtitle {
margin: 0 0 1.5rem;
color: var(--text-muted);
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow);
}
/* ---------- Coming Soon (the one shared placeholder component, js/comingSoon.js) ---------- */
.coming-soon-card {
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.6rem;
border-style: dashed;
max-width: 640px;
}
.coming-soon-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent);
border-radius: 999px;
padding: 0.2rem 0.7rem;
}
.coming-soon-title {
margin: 0.25rem 0 0;
font-size: 1.15rem;
font-weight: 600;
}
.coming-soon-disclaimer {
margin: 0;
color: var(--text);
max-width: 34rem;
}
.coming-soon-description {
margin: 0;
color: var(--text-muted);
font-size: 0.9rem;
max-width: 34rem;
}
/* ---------- Detail view (js/detail.js) ---------- */
.detail-header {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
}
.detail-header .page-title {
margin-bottom: 0.15rem;
}
.detail-header .page-subtitle {
margin-bottom: 0;
}
.btn-back {
flex-shrink: 0;
margin-top: 0.3rem;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 6px;
padding: 0.35rem 0.7rem;
font-size: 0.85rem;
font-weight: 500;
}
.btn-back:hover {
background: var(--surface-alt);
}
.detail-sections {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1rem;
align-items: start;
}
.detail-section {
padding: 1.1rem 1.25rem;
}
.detail-section-heading {
margin: 0 0 0.75rem;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.detail-grid {
display: grid;
grid-template-columns: minmax(110px, max-content) 1fr;
gap: 0.45rem 1.25rem;
margin: 0;
font-size: 0.88rem;
}
.detail-grid dt {
color: var(--text-muted);
font-weight: 500;
}
.detail-grid dd {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
.detail-empty {
color: var(--text-muted);
}
.detail-section-empty {
margin: 0;
color: var(--text-muted);
font-size: 0.88rem;
}
.detail-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
background: var(--surface-alt);
border-radius: 4px;
padding: 0.05rem 0.35rem;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.chip {
display: inline-block;
font-size: 0.78rem;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.1rem 0.55rem;
}
.chip-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
border-radius: 4px;
}
/* ---------- Small shared bits ---------- */
.badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
border-radius: 999px;
padding: 0.1rem 0.55rem;
background: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text-muted);
}
.badge-accent {
color: var(--accent);
background: var(--accent-soft);
border-color: var(--accent);
}
.summary-line {
margin: -0.75rem 0 1rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.row-link {
color: var(--accent);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.row-link:hover {
text-decoration: underline;
}
.error-text {
color: var(--danger);
background: var(--danger-soft);
border-radius: 8px;
padding: 0.6rem 0.9rem;
margin-bottom: 1rem;
}
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.tile-card {
padding: 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
}
.tile-icon {
font-size: 1.5rem;
}
.tile-title {
margin: 0;
font-weight: 600;
}
.tile-meta {
margin: 0.15rem 0 0;
font-size: 0.8rem;
color: var(--text-muted);
}
.stat-tile {
padding: 1.25rem 1.5rem;
}
.stat-tile.is-placeholder {
opacity: 0.7;
}
.stat-label {
margin: 0 0 0.35rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.stat-value {
margin: 0;
font-size: 1.75rem;
font-weight: 700;
}
.chart-card {
padding: 1.25rem;
margin-bottom: 1.5rem;
max-width: 420px;
}
/* ---------- Tables ---------- */
.table-wrap {
overflow-x: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow);
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.data-table th {
text-align: left;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.data-table td {
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--border);
}
.data-row {
cursor: pointer;
}
.data-row:hover {
background: var(--surface-alt);
}
.data-row.is-expanded {
background: var(--accent-soft);
}
.data-row.is-highlighted td:first-child {
box-shadow: inset 3px 0 0 var(--accent);
}
.data-row-detail td {
background: var(--surface-alt);
}
.row-detail-list {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.35rem 1.5rem;
margin: 0.25rem 0;
}
.row-detail-list dt {
color: var(--text-muted);
font-weight: 600;
}
.row-detail-list dd {
margin: 0;
}
.table-empty {
color: var(--text-muted);
padding: 1.5rem;
text-align: center;
}
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 0.4rem;
vertical-align: middle;
}
.status-dot.is-online { background: var(--online); }
.status-dot.is-offline { background: var(--offline); }
/* ---------- Account page ---------- */
.divide-list .divide-row {
display: flex;
justify-content: space-between;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid var(--border);
}
.divide-list .divide-row:last-child {
border-bottom: none;
}
.divide-row span {
color: var(--text-muted);
}
/* ---------- Buttons ---------- */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem 1rem;
border: none;
border-radius: 8px;
background: var(--accent);
color: #fff;
font-weight: 600;
font-size: 0.9rem;
}
.btn-primary:hover {
background: var(--accent-hover);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ---------- Login screen ---------- */
.login-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
padding: 1.5rem;
}
.login-card {
width: 100%;
max-width: 380px;
background: var(--surface);
border: 1px solid var(--border);
border-top: 4px solid var(--accent);
border-radius: 12px;
box-shadow: var(--shadow);
padding: 2rem;
text-align: center;
}
.login-logo-slot {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
/* Same approach as .sidebar-logo: explicit 3:1 ![]()
attributes, width-driven sizing. */
.login-logo {
display: block;
width: 100%;
max-width: 300px;
height: auto;
aspect-ratio: 3 / 1;
object-fit: contain;
}
.login-card h1 {
margin: 0 0 0.35rem;
font-size: 1.4rem;
}
.login-subtitle {
color: var(--text-muted);
margin: 0 0 1.5rem;
}
.alert {
border-radius: 8px;
padding: 0.7rem 0.9rem;
margin-bottom: 1.25rem;
font-size: 0.85rem;
text-align: left;
}
.alert-error {
background: var(--danger-soft);
color: var(--danger);
}
.alert-reference {
display: inline-block;
margin-top: 0.35rem;
font-size: 0.75rem;
opacity: 0.8;
font-family: monospace;
}
.loading-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
gap: 0.75rem;
flex-direction: column;
}
.spinner {
width: 28px;
height: 28px;
border-radius: 50%;
border: 3px solid var(--border);
border-top-color: var(--accent);
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ---------- Responsive ---------- */
@media (max-width: 720px) {
/* Sidebar becomes an off-canvas drawer toggled from the topbar menu button. */
.app-shell {
position: relative;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 260px;
max-width: 85vw;
z-index: 30;
transform: translateX(-100%);
transition: transform 0.2s ease;
box-shadow: none;
}
.app-shell.nav-open .sidebar {
transform: translateX(0);
box-shadow: var(--shadow);
}
.sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.4);
}
.sidebar-backdrop[hidden] {
display: none;
}
.sidebar-toggle {
display: inline-flex;
}
.topbar {
padding: 0 0.75rem;
gap: 0.5rem;
}
.topbar-user-name,
.org-label {
display: none;
}
.topbar-account {
padding-right: 0.25rem;
}
.page {
padding: 1.25rem;
}
.detail-sections {
grid-template-columns: 1fr;
}
}