/*
 * smart-me Log Server - smart-me Design System (CI 2026, formerly "ZERO"), web portal flavour.
 * Only CI colours (sm-* / dash-* tokens) and CI fonts (Noto Sans, JetBrains Mono).
 * Dark mode: html[data-theme="dark"] (toggle in the header, stored in localStorage).
 */

/* ---- Fonts (self-hosted, files from the design system, SIL Open Font License) ---- */
@font-face { font-family: "Noto Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/NotoSans-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/NotoSans-500.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/NotoSans-600.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/NotoSans-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/JetBrainsMono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/JetBrainsMono-500.woff2") format("woff2"); }

/* ---- Tokens (values from the design system's tokens.json) ---- */
:root {
    --font-sans: "Noto Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --sm-blue: #2563eb;
    --sm-blue-hover: #1d4ed8;
    --sm-blue-text: #2563eb;
    --sm-green: #52ae32;
    --sm-on-blue: #ffffff;
    --sm-white: #ffffff;
    --sm-surface: #f1f2f4;
    --sm-surface-hover: #e3e5e9;
    --sm-text: #272727;
    --sm-text-2: #4e5259;
    --sm-text-3: #6f747b;
    --sm-focus-ring: 0 0 0 3px rgba(37,99,235,.15);
    --sm-live-glow: 0 0 8px #52ae32;

    --dash-bg: #f1f3f6;
    --dash-side: #ffffff;
    --dash-card: #ffffff;
    --dash-bd: #e9ecf2;
    --dash-tx: #15171c;
    --dash-mu: #6b7079;
    --dash-soft: #edf1f7;
    --dash-card-shadow: none;

    --sm-r-nav: 8px;
    --sm-r-sm: 10px;
    --sm-r-md: 12px;
    --sm-r-xl: 20px;

    --sm-gutter: 32px;
    --sm-ease-hover: ease;
    --sm-dur-hover: .18s;
    --sm-dur-theme: .3s;

    color-scheme: light;
}

html[data-theme="dark"] {
    --sm-white: #24272c;
    --sm-surface: #1a1c20;
    --sm-surface-hover: #2a2d33;
    --sm-text: #f2f3f5;
    --sm-text-2: #c4c8cf;
    --sm-text-3: #9aa0a8;

    --dash-bg: #0a0b0e;
    --dash-side: #0a0b0e;
    --dash-card: #07080a;
    --dash-bd: rgba(255,255,255,.07);
    --dash-tx: #f2f3f5;
    --dash-mu: #8a8f98;
    --dash-soft: #1d2027;
    --dash-card-shadow: 0 30px 70px -40px rgba(37,99,235,.7);

    color-scheme: dark;
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--dash-tx);
    background: var(--dash-bg);
    transition: background-color var(--sm-dur-theme) var(--sm-ease-hover), color var(--sm-dur-theme) var(--sm-ease-hover);
}

a { color: var(--sm-blue-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--sm-blue-hover); }

:focus-visible { outline: 3px solid var(--sm-blue); outline-offset: 2px; }

h1 {
    margin: 0 0 24px;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--dash-tx);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
h2 {
    margin: 40px 0 16px;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--dash-mu); }
.nowrap { white-space: nowrap; }
.small { font-size: 13px; line-height: 1.45; }
.error { color: var(--sm-text); font-weight: 600; }

/* Mono kicker above each page title (no square in front) */
.kicker {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sm-blue-text);
    overflow-wrap: anywhere;
}
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.kicker .sep { color: var(--dash-mu); }

/* ---- Header ---- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    min-height: 64px;
    padding: 10px var(--sm-gutter);
    background: var(--dash-side);
    border-bottom: 1px solid var(--dash-bd);
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--dash-tx); text-decoration: none; }
.brand:hover { color: var(--dash-tx); }
.brand img { display: block; width: 120px; height: auto; }
.brand .product { padding-left: 14px; border-left: 1px solid var(--dash-bd); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
html[data-theme="dark"] .brand img { filter: brightness(0) invert(1); }

.topbar .user { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.topbar .email { font-size: 13px; color: var(--dash-mu); overflow-wrap: anywhere; }

/* Theme toggle: half-filled circle + "Dark" / "Hell" */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--sm-r-nav);
    background: transparent;
    color: var(--sm-text-2);
    font: 500 14.5px/1.2 var(--font-sans);
    cursor: pointer;
    transition: background-color var(--sm-dur-hover) var(--sm-ease-hover);
}
.theme-toggle:hover { background: var(--dash-soft); color: var(--dash-tx); }
.theme-toggle .half {
    width: 14px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.theme-toggle .label-light { display: none; }
html[data-theme="dark"] .theme-toggle .label-dark { display: none; }
html[data-theme="dark"] .theme-toggle .label-light { display: inline; }

/* ---- Layout ---- */
.content { width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px var(--sm-gutter) 32px; flex: 1 0 auto; }

.footer {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px var(--sm-gutter) 32px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dash-mu);
}
.footer .sep { margin: 0 .6em; }

/* ---- Cards ---- */
.card {
    background: var(--dash-card);
    border: 1px solid var(--dash-bd);
    border-radius: var(--sm-r-xl);
    padding: 28px;
    box-shadow: var(--dash-card-shadow);
}
.card.narrow { max-width: 520px; margin: 48px auto; padding: 40px; }
.card.narrow .brand-logo { display: block; width: 120px; height: auto; margin-bottom: 32px; }
html[data-theme="dark"] .card.narrow .brand-logo { filter: brightness(0) invert(1); }
.card.narrow p { color: var(--sm-text-2); }
.card.narrow p:last-child { margin-bottom: 0; }

form.inline { display: inline; margin: 0; }

/* ---- Buttons: rounded rectangles, never pills, sentence case ---- */
button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--sm-r-sm);
    background: var(--sm-surface);
    color: var(--sm-text);
    font: 600 14.5px/1.2 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--sm-dur-hover) var(--sm-ease-hover), color var(--sm-dur-hover) var(--sm-ease-hover);
}
button:hover, .button:hover { background: var(--sm-surface-hover); color: var(--sm-text); }
/* On the grey page ground a grey button would vanish: white with hairline (like the "row" button) */
.content button:not(.primary), .content .button:not(.primary) { background: var(--dash-card); box-shadow: inset 0 0 0 1px var(--dash-bd); }
.content button:not(.primary):hover, .content .button:not(.primary):hover { background: var(--dash-soft); }
.button.primary, button.primary { min-height: 48px; padding: 14px 22px; border-radius: var(--sm-r-md); font-size: 15px; background: var(--sm-blue); color: var(--sm-on-blue); }
.button.primary:hover, button.primary:hover { background: var(--sm-blue-hover); color: var(--sm-on-blue); }
.button.sm, button.sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
button:focus-visible, .button:focus-visible { outline: 3px solid var(--sm-blue); outline-offset: 2px; box-shadow: var(--sm-focus-ring); }

/* Secondary text links end with " →" */
.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link .arrow { font-family: var(--font-mono); }

/* ---- Filter (field on the grey page ground: white field) ---- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filter input[type=search] {
    flex: 1 1 14rem;
    max-width: 26rem;
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid var(--dash-bd);
    border-radius: var(--sm-r-sm);
    background: var(--sm-white);
    color: var(--sm-text);
    font: 400 15px/1.2 var(--font-sans);
}
.filter input[type=search]::placeholder { color: var(--sm-text-3); }
.filter input[type=search]:focus { outline: none; border-color: var(--sm-blue); box-shadow: var(--sm-focus-ring); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; background: var(--dash-card); border: 1px solid var(--dash-bd); border-radius: var(--sm-r-xl); box-shadow: var(--dash-card-shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--dash-bd); white-space: nowrap; }
th {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dash-mu);
}
td { font-size: 14.5px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color var(--sm-dur-hover) var(--sm-ease-hover); }
tbody tr:hover { background: var(--dash-soft); }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-size: 13.5px; }

/* ---- Status: green LIVE dot (the only use of green) ---- */
.live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dash-mu);
    vertical-align: middle;
}
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sm-green); box-shadow: var(--sm-live-glow); }

/* ---- Device metadata ---- */
dl.meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 20px 24px;
    margin: 0;
    padding: 28px;
    background: var(--dash-card);
    border: 1px solid var(--dash-bd);
    border-radius: var(--sm-r-xl);
    box-shadow: var(--dash-card-shadow);
}
dl.meta div { min-width: 0; }
dl.meta dt {
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dash-mu);
}
dl.meta dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }

/* ---- Toolbars ---- */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin: 40px 0 16px; }
.section-head h2 { margin: 0; }
.section-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.toolbar .filter { flex: 1 1 20rem; margin-bottom: 0; }
.toolbar .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

.info { margin: 16px 0; font-size: 13px; color: var(--dash-mu); }

/* ---- Log viewer ---- */
pre.log {
    margin: 0 0 16px;
    padding: 20px 24px;
    max-width: 100%;
    overflow-x: auto;
    background: var(--dash-card);
    color: var(--dash-tx);
    border: 1px solid var(--dash-bd);
    border-radius: var(--sm-r-xl);
    box-shadow: var(--dash-card-shadow);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.6;
}
pre.log > span { display: block; min-height: 1.6em; white-space: pre; }
pre.log .t, pre.log .s { color: var(--dash-mu); }
pre.log .note { color: var(--sm-blue-text); font-weight: 500; }
pre.log .note .t { color: inherit; }

.page-end { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; font-size: 14px; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    :root { --sm-gutter: 20px; }
    body { font-size: 14.5px; }
    .content { padding-top: 24px; }
    .brand .product { display: none; }
    .topbar .email { display: none; }
    th, td { padding: 12px 14px; }
    pre.log { padding: 14px 16px; font-size: 11.5px; }
    .card, dl.meta { padding: 20px; }
    .card.narrow { margin: 24px auto; padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}