/* ============================================================================
Handshake UI — design system (ElaadNL)
One stylesheet. No webfonts, no CDN. Link once per page:
Theme: set data-theme="auto|light|dark" on (JS in handshake-ui.js).
========================================================================== */
:root {
--hs-sans: -apple-system, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
--hs-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
--hs-bg: oklch(0.983 0.003 255);
--hs-surface: oklch(1 0 0);
--hs-surface-2: oklch(0.972 0.004 255);
--hs-hover: oklch(0.963 0.006 258);
--hs-border: oklch(0.922 0.005 258);
--hs-border-strong: oklch(0.862 0.007 258);
--hs-fg: oklch(0.26 0.013 262);
--hs-fg-2: oklch(0.41 0.012 262);
--hs-muted: oklch(0.56 0.011 262);
--hs-muted-2: oklch(0.74 0.008 262);
--hs-accent: oklch(0.56 0.12 233);
--hs-accent-hover: oklch(0.5 0.12 233);
--hs-accent-strong: oklch(0.46 0.115 235);
--hs-accent-soft: oklch(0.955 0.03 233);
--hs-on-accent: #fff;
--hs-success: oklch(0.62 0.14 152);
--hs-success-strong: oklch(0.46 0.12 155);
--hs-success-soft: oklch(0.955 0.04 158);
--hs-on-success: #fff;
--hs-warning: oklch(0.72 0.14 68);
--hs-warning-strong: oklch(0.5 0.1 62);
--hs-warning-soft: oklch(0.96 0.05 82);
--hs-warning-border: oklch(0.88 0.075 82);
--hs-danger: oklch(0.585 0.2 25);
--hs-danger-strong: oklch(0.5 0.19 25);
--hs-danger-soft: oklch(0.96 0.03 25);
--hs-danger-border: oklch(0.85 0.09 27);
--hs-info: oklch(0.55 0.15 281);
--hs-info-strong: oklch(0.47 0.16 281);
--hs-info-soft: oklch(0.955 0.035 285);
--hs-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
--hs-shadow-lg: 0 16px 40px -14px rgba(16, 24, 40, .28);
--hs-radius: 8px;
--hs-radius-lg: 11px;
}
/* dark, explicit */
[data-theme="dark"] {
--hs-bg: oklch(0.172 0.008 264);
--hs-surface: oklch(0.209 0.009 264);
--hs-surface-2: oklch(0.25 0.011 264);
--hs-hover: oklch(0.27 0.012 264);
--hs-border: oklch(0.3 0.012 264);
--hs-border-strong: oklch(0.38 0.014 264);
--hs-fg: oklch(0.95 0.005 262);
--hs-fg-2: oklch(0.79 0.008 262);
--hs-muted: oklch(0.63 0.01 262);
--hs-muted-2: oklch(0.5 0.01 262);
--hs-accent: oklch(0.74 0.115 233);
--hs-accent-hover: oklch(0.8 0.11 233);
--hs-accent-strong: oklch(0.84 0.09 235);
--hs-accent-soft: oklch(0.33 0.06 233);
--hs-on-accent: oklch(0.19 0.035 235);
--hs-success: oklch(0.72 0.15 152);
--hs-success-strong: oklch(0.84 0.13 158);
--hs-success-soft: oklch(0.32 0.06 160);
--hs-on-success: oklch(0.17 0.04 158);
--hs-warning: oklch(0.8 0.14 74);
--hs-warning-strong: oklch(0.88 0.12 82);
--hs-warning-soft: oklch(0.32 0.05 66);
--hs-warning-border: oklch(0.42 0.07 66);
--hs-danger: oklch(0.7 0.19 25);
--hs-danger-strong: oklch(0.82 0.14 25);
--hs-danger-soft: oklch(0.33 0.09 27);
--hs-danger-border: oklch(0.46 0.12 27);
--hs-info: oklch(0.74 0.13 283);
--hs-info-strong: oklch(0.85 0.1 283);
--hs-info-soft: oklch(0.31 0.06 283);
--hs-shadow: 0 1px 2px rgba(0, 0, 0, .35);
--hs-shadow-lg: 0 20px 44px -14px rgba(0, 0, 0, .62);
}
/* dark, following the OS when data-theme is unset ("auto") */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) {
--hs-bg: oklch(0.172 0.008 264);
--hs-surface: oklch(0.209 0.009 264);
--hs-surface-2: oklch(0.25 0.011 264);
--hs-hover: oklch(0.27 0.012 264);
--hs-border: oklch(0.3 0.012 264);
--hs-border-strong: oklch(0.38 0.014 264);
--hs-fg: oklch(0.95 0.005 262);
--hs-fg-2: oklch(0.79 0.008 262);
--hs-muted: oklch(0.63 0.01 262);
--hs-muted-2: oklch(0.5 0.01 262);
--hs-accent: oklch(0.74 0.115 233);
--hs-accent-hover: oklch(0.8 0.11 233);
--hs-accent-strong: oklch(0.84 0.09 235);
--hs-accent-soft: oklch(0.33 0.06 233);
--hs-on-accent: oklch(0.19 0.035 235);
--hs-success: oklch(0.72 0.15 152);
--hs-success-strong: oklch(0.84 0.13 158);
--hs-success-soft: oklch(0.32 0.06 160);
--hs-on-success: oklch(0.17 0.04 158);
--hs-warning: oklch(0.8 0.14 74);
--hs-warning-strong: oklch(0.88 0.12 82);
--hs-warning-soft: oklch(0.32 0.05 66);
--hs-warning-border: oklch(0.42 0.07 66);
--hs-danger: oklch(0.7 0.19 25);
--hs-danger-strong: oklch(0.82 0.14 25);
--hs-danger-soft: oklch(0.33 0.09 27);
--hs-danger-border: oklch(0.46 0.12 27);
--hs-info: oklch(0.74 0.13 283);
--hs-info-strong: oklch(0.85 0.1 283);
--hs-info-soft: oklch(0.31 0.06 283);
--hs-shadow: 0 1px 2px rgba(0, 0, 0, .35);
--hs-shadow-lg: 0 20px 44px -14px rgba(0, 0, 0, .62);
}
}
* {
box-sizing: border-box
}
[hidden] {
display: none !important
}
html,
body {
margin: 0;
height: 100%
}
body {
background: var(--hs-bg);
color: var(--hs-fg);
font-family: var(--hs-sans);
font-size: 13px;
line-height: 1.45;
-webkit-font-smoothing: antialiased
}
a {
color: var(--hs-accent-strong);
text-decoration: none
}
a:hover {
text-decoration: underline
}
code,
.hs-mono {
font-family: var(--hs-mono)
}
.hs-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none
}
.hs-icon svg {
width: 16px;
height: 16px;
stroke-width: 2
}
.hs-icon--sm svg {
width: 13px
}
.hs-icon--lg svg {
width: 19px
}
/* ---- App shell -------------------------------------------------------- */
.hs-app {
display: flex;
height: 100vh;
overflow: hidden
}
.hs-sidebar {
width: 236px;
flex: none;
background: var(--hs-surface);
border-right: 1px solid var(--hs-border);
display: flex;
flex-direction: column;
transition: width .18s ease;
z-index: 20
}
.hs-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0
}
.hs-topbar {
height: 52px;
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
border-bottom: 1px solid var(--hs-border);
background: var(--hs-surface)
}
.hs-content {
flex: 1;
overflow: auto
}
.hs-page {
padding: 20px 24px;
max-width: 1140px
}
/* Sidebar-less pages (logged-out home, error pages): center the page column
instead of pinning it to the left of a full-width content area. */
.hs-app:not(:has(> .hs-sidebar)) .hs-page {
margin-inline: auto
}
.hs-brand {
height: 52px;
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
border-bottom: 1px solid var(--hs-border)
}
.hs-brand__mark {
width: 26px;
height: 26px;
flex: none;
border-radius: 7px;
background: var(--hs-accent);
color: var(--hs-on-accent);
display: flex;
align-items: center;
justify-content: center;
font: 700 14px/1 var(--hs-mono)
}
.hs-brand__word {
font: 600 14.5px/1 var(--hs-sans);
color: var(--hs-fg);
letter-spacing: -.01em
}
.hs-nav {
flex: 1;
padding: 12px;
display: flex;
flex-direction: column;
gap: 2px;
overflow: auto
}
/* .hs-nav__label styles the uppercase section headers ("Workspace"/"Platform").
Distinct from .hs-navlabel — the nav-item text, a style-free hook toggled by
.hs-hide-collapsed; likewise is a bare hook. */
.hs-nav__label {
font: 600 10px/1 var(--hs-sans);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--hs-muted);
padding: 12px 10px 5px
}
.hs-navitem {
position: relative;
display: flex;
align-items: center;
gap: 10px;
height: 34px;
padding: 0 10px;
border-radius: 8px;
color: var(--hs-fg-2);
font: 500 13px/1 var(--hs-sans);
cursor: pointer;
text-decoration: none
}
.hs-navitem:hover {
background: var(--hs-hover);
color: var(--hs-fg);
text-decoration: none
}
.hs-navitem.is-active {
background: var(--hs-accent-soft);
color: var(--hs-accent-strong);
font-weight: 600
}
.hs-sidefoot {
padding: 10px 12px;
border-top: 1px solid var(--hs-border);
display: flex;
flex-direction: column;
gap: 4px
}
.hs-orgswitch__item {
width: 100%;
border: none;
background: none;
text-align: left
}
.hs-orgswitch__item--active {
font-weight: 600;
color: var(--hs-accent-strong)
}
.hs-backdrop {
display: none
}
/* collapsed rail (desktop) */
.hs-app[data-collapsed="true"] .hs-sidebar {
width: 64px
}
.hs-app[data-collapsed="true"] .hs-hide-collapsed {
display: none
}
.hs-app[data-collapsed="true"] .hs-navitem {
justify-content: center;
padding: 0
}
.hs-app[data-collapsed="true"] .hs-brand {
justify-content: center;
padding: 0
}
/* off-canvas drawer (mobile) */
@media(max-width:820px) {
.hs-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 236px;
transform: translateX(-100%);
transition: transform .2s ease;
box-shadow: var(--hs-shadow-lg)
}
.hs-app[data-collapsed="false"] .hs-sidebar {
transform: none
}
.hs-app[data-collapsed="false"] .hs-navitem {
justify-content: flex-start;
padding: 0 10px
}
.hs-app[data-collapsed="false"] .hs-hide-collapsed {
display: revert
}
.hs-app[data-collapsed="false"] .hs-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .42);
z-index: 15
}
}
/* ---- Buttons ---------------------------------------------------------- */
.hs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border-radius: 8px;
border: 1px solid transparent;
font: 600 12.5px/1 var(--hs-sans);
cursor: pointer;
white-space: nowrap;
transition: background .12s, border-color .12s;
color: var(--hs-fg);
text-decoration: none
}
.hs-btn--sm {
height: 28px;
padding: 0 10px;
font-size: 12px;
border-radius: 7px
}
.hs-btn--primary {
background: var(--hs-accent);
color: var(--hs-on-accent)
}
.hs-btn--primary:hover {
background: var(--hs-accent-hover)
}
.hs-btn--ghost {
background: var(--hs-surface);
border-color: var(--hs-border-strong);
color: var(--hs-fg)
}
.hs-btn--ghost:hover {
background: var(--hs-surface-2)
}
.hs-btn--success {
background: var(--hs-success);
color: var(--hs-on-success)
}
.hs-btn--danger {
background: transparent;
color: var(--hs-danger);
border-color: var(--hs-danger-border)
}
.hs-btn:disabled {
background: var(--hs-surface-2);
color: var(--hs-muted);
border-color: var(--hs-border);
cursor: not-allowed
}
.hs-iconbtn {
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid var(--hs-border);
background: var(--hs-surface);
color: var(--hs-fg-2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
flex: none
}
.hs-iconbtn:hover {
background: var(--hs-surface-2);
color: var(--hs-fg)
}
/* ---- Chips / tags / status ------------------------------------------- */
.hs-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 20px;
padding: 0 8px;
border-radius: 6px;
font: 600 11px/1 var(--hs-sans);
white-space: nowrap
}
.hs-chip--neutral {
background: var(--hs-surface-2);
color: var(--hs-fg-2);
border: 1px solid var(--hs-border)
}
.hs-chip--warn {
background: var(--hs-warning-soft);
color: var(--hs-warning-strong)
}
.hs-chip--info {
background: var(--hs-info-soft);
color: var(--hs-info-strong)
}
.hs-chip--success {
background: var(--hs-success-soft);
color: var(--hs-success-strong)
}
.hs-chip--accent {
background: var(--hs-accent-soft);
color: var(--hs-accent-strong)
}
.hs-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: var(--hs-surface-2);
color: var(--hs-fg-2);
border: 1px solid var(--hs-border);
font: 600 11px/1 var(--hs-mono)
}
.hs-dot {
width: 7px;
height: 7px;
border-radius: 999px;
display: inline-block;
flex: none
}
.hs-dot--ok {
background: var(--hs-success)
}
.hs-dot--off {
background: var(--hs-muted-2)
}
.hs-label {
font: 600 10px/1 var(--hs-sans);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--hs-muted)
}
/* ---- Cards / notes ---------------------------------------------------- */
.hs-card {
border: 1px solid var(--hs-border);
border-radius: var(--hs-radius-lg);
background: var(--hs-surface);
box-shadow: var(--hs-shadow)
}
.hs-card__head {
display: flex;
align-items: center;
gap: 9px;
padding: 11px 15px;
border-bottom: 1px solid var(--hs-border);
font: 600 13px/1 var(--hs-sans);
color: var(--hs-fg)
}
.hs-card__body {
padding: 14px 16px
}
.hs-note {
border-radius: var(--hs-radius);
padding: 10px 12px;
font: 400 12px/1.5 var(--hs-sans)
}
.hs-note--info {
background: var(--hs-info-soft);
color: var(--hs-info-strong)
}
.hs-note--warn {
background: var(--hs-warning-soft);
color: var(--hs-warning-strong);
border: 1px solid var(--hs-warning-border)
}
.hs-card--danger {
border-color: var(--hs-danger-border)
}
/* ---- Tables ----------------------------------------------------------- */
.hs-table {
width: 100%;
border-collapse: collapse
}
.hs-table th {
padding: 8px 14px;
text-align: left;
font: 600 10px/1 var(--hs-sans);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--hs-muted);
background: var(--hs-surface-2);
border-bottom: 1px solid var(--hs-border)
}
.hs-table td {
padding: 9px 14px;
border-top: 1px solid var(--hs-border);
font: 400 13px/1.3 var(--hs-sans);
color: var(--hs-fg-2);
vertical-align: middle
}
.hs-table tbody tr:hover td {
background: var(--hs-hover)
}
.hs-table--rows tbody tr {
cursor: pointer
}
/* ---- Forms ------------------------------------------------------------ */
.hs-input,
.hs-select select {
width: 100%;
height: 34px;
padding: 0 12px;
border-radius: 8px;
border: 1px solid var(--hs-border-strong);
background: var(--hs-surface);
color: var(--hs-fg);
font: 400 12.5px/1 var(--hs-sans);
outline: none
}
.hs-input:focus,
.hs-select select:focus {
border-color: var(--hs-accent);
box-shadow: 0 0 0 3px var(--hs-accent-soft)
}
.hs-avatar {
width: 30px;
height: 30px;
border-radius: 999px;
background: var(--hs-accent);
color: var(--hs-on-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font: 600 12px/1 var(--hs-sans);
flex: none
}
::-webkit-scrollbar {
width: 10px;
height: 10px
}
::-webkit-scrollbar-thumb {
background: var(--hs-border-strong);
border-radius: 999px;
border: 3px solid var(--hs-surface)
}
/* ---- Role toggles & badges (access-control assigns roles) ------------- */
.role-options {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
align-items: center
}
.role-tag {
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 9px;
border-radius: 7px;
border: 1px solid var(--hs-border-strong);
background: var(--hs-surface);
color: var(--hs-fg-2);
font: 600 11.5px/1 var(--hs-sans);
cursor: pointer;
user-select: none
}
.role-tag:hover {
background: var(--hs-surface-2)
}
.role-tag input {
appearance: none;
-webkit-appearance: none;
width: 13px;
height: 13px;
margin: 0;
border: 1px solid var(--hs-border-strong);
border-radius: 4px;
background: var(--hs-surface);
position: relative;
cursor: pointer;
flex: none
}
.role-tag input:checked {
background: var(--hs-accent);
border-color: var(--hs-accent)
}
.role-tag input:checked::after {
content: "";
position: absolute;
left: 3.5px;
top: 1px;
width: 3px;
height: 6px;
border: solid var(--hs-on-accent);
border-width: 0 2px 2px 0;
transform: rotate(45deg)
}
.role-tag:has(input:checked) {
background: var(--hs-accent-soft);
border-color: var(--hs-accent);
color: var(--hs-accent-strong)
}
.device-name {
color: var(--hs-fg);
font-weight: 600
}
.badge {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 8px;
border-radius: 6px;
font: 600 11px/1 var(--hs-sans);
background: var(--hs-surface-2);
color: var(--hs-muted);
border: 1px solid var(--hs-border)
}
.badge.warning {
background: var(--hs-warning-soft);
color: var(--hs-warning-strong);
border-color: var(--hs-warning-border)
}
.hs-chip.warning,
.status.warning {
background: var(--hs-danger-soft);
color: var(--hs-danger-strong)
}
td.empty,
.empty {
color: var(--hs-muted)
}
/* ---- Page chrome & layout helpers ------------------------------------- */
/* Reusable layout classes so pages compose without one-off inline styles. */
.hs-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px
}
.hs-h1 {
margin: 0 0 4px;
display: flex;
align-items: center;
gap: 9px;
font: 600 22px/1.2 var(--hs-sans);
color: var(--hs-fg)
}
.hs-h2 {
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
font: 600 15px/1 var(--hs-sans);
color: var(--hs-fg)
}
.hs-h3 {
margin: 16px 0 8px;
font: 600 13px/1 var(--hs-sans);
color: var(--hs-fg)
}
.hs-subtitle {
margin: 0;
color: var(--hs-muted)
}
.hs-muted {
color: var(--hs-muted)
}
.hs-muted-sm {
color: var(--hs-muted);
font-size: 12px
}
.hs-crumbs {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
font: 400 12px/1.4 var(--hs-sans);
color: var(--hs-muted)
}
.hs-crumbs__sep {
color: var(--hs-muted-2)
}
.hs-crumbs__here {
color: var(--hs-fg-2)
}
.hs-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap
}
.hs-row--top {
align-items: flex-start
}
.hs-split {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
.hs-stack {
display: flex;
flex-direction: column;
gap: 16px
}
.hs-spacer {
flex: 1
}
.hs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px
}
.hs-grid--kv {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px
}
.hs-card__body--split {
display: flex;
gap: 16px;
align-items: flex-start;
flex-wrap: wrap
}
/* text-in-field search: an .hs-icon absolutely placed inside an .hs-input */
.hs-search {
position: relative;
flex: 1;
min-width: 220px
}
.hs-search>.hs-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--hs-muted);
pointer-events: none
}
.hs-search>.hs-input {
padding-left: 32px
}
/* standalone-dashboard top bar (operator, access-control) */
.hs-appbar {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 22px;
border-bottom: 1px solid var(--hs-border);
background: var(--hs-surface)
}
.hs-appbar__title {
margin: 0;
font: 600 16px/1 var(--hs-sans);
color: var(--hs-fg)
}
.hs-appbar__main {
padding: 20px 22px;
max-width: 1060px;
margin: 0 auto
}
/* Content utilities — each equals the inline rule it replaces, so pages read
like the Bulma markup did (a class, not a wall of style="") without any
change in rendering. */
.hs-inline {
display: inline-flex;
align-items: center;
gap: 6px
}
/* icon + text on one line */
.hs-hint {
margin: 0;
font-size: 12px;
color: var(--hs-muted)
}
/* muted helper line under a field/heading */
.hs-right {
text-align: right
}
/* right-aligned table action cell */
.hs-grow {
flex: 1;
min-width: 240px
}
/* the wide primary column in a split row */
.hs-formrow {
display: flex;
gap: 8px;
align-items: flex-start;
flex-wrap: wrap
}
/* input + picker + button, wrapping */
.hs-summary {
cursor: pointer;
color: var(--hs-accent-strong)
}
/* a disclosure */
.hs-select--auto {
width: auto
}
/* select sized to content, not full width */
.hs-note--row {
display: flex;
align-items: center;
gap: 8px
}
/* a note laid out as icon + message */
.hs-card__body--stack {
display: flex;
flex-direction: column;
gap: 12px
}
/* card body as a vertical list */
.hs-card--sub {
background: var(--hs-surface-2)
}
/* nested/inset card (e.g. a pending CSR) */
.hs-chip--lg {
height: 24px;
font-size: 13px
}
/* chip enlarged to headline a short code */
.hs-mt-1 {
margin-top: 8px
}
/* small top gap */
.hs-mb-1 {
margin-bottom: 8px
}
/* small bottom gap (e.g. a dual-action app card) */