/* Application styles — token-driven only (WebUI.md §2). */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-sans);
    font-size: var(--font-size);
    background: var(--color-bg);
    color: var(--color-text);
}

a { color: var(--color-primary); text-decoration: none; }

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
}

.app-loading { padding: var(--space-6); color: var(--color-text-muted); }
.pad { padding: var(--space-5); }
.muted { color: var(--color-text-muted); }

/* ---- Shell + tab bar (WebUI.md §7) ---- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }

.tabbar {
    display: flex;
    align-items: stretch;
    height: var(--tabbar-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--elevation-1);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tabs { display: flex; align-items: stretch; }
/* The left tabs take the remaining width and CLIP any overflow, so a long label (e.g. Access
   Control) can never paint over the logo at tight widths; below the breakpoint labels collapse to
   icons (§7) and everything fits comfortably. */
.tabs-left { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.tabs-right { flex: 0 0 auto; }

/* Dead-centre logo mode — toggled by window.mohlinkTabbar only when a clear gap remains between the
   tabs and the centred logo (so it reads as a logo, not a tab). Equal 1fr side columns put the logo
   at the true bar centre; tabs sit left, hamburger right. */
.tabbar.centered { display: grid; grid-template-columns: 1fr auto 1fr; }
.tabbar.centered .tabs-left { justify-self: start; }
.tabbar.centered .tabs-right { justify-self: end; }

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    color: var(--color-text);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border-left: 0; border-right: 0; border-top: 0;
    font: inherit;
}
.tab:hover { background: var(--color-surface-2); }
.tab.active { border-bottom-color: var(--color-primary); color: var(--color-primary); }
.tab.tab-disabled { color: var(--color-disabled); cursor: default; }
.tab.tab-disabled:hover { background: none; }
.tab-icon { padding: 0 var(--space-3); }

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-text);
}

.menu { position: relative; display: inline-flex; }
.menu-dropdown {
    position: absolute;
    right: 0;
    top: var(--tabbar-height);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    box-shadow: var(--elevation-1);
    min-width: 180px;
    padding: var(--space-1);
    z-index: 20;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    background: none;
    border: 0;
    border-radius: var(--radius-1);
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.menu-item:hover { background: var(--color-surface-2); }

.content { flex: 1 1 auto; }

/* Responsive: collapse left tab labels to icon-only when narrow (WebUI.md §7). The breakpoint is set
   so the six labels only show when they fit alongside the logo + hamburger, avoiding a band where the
   last label would be clipped. */
@media (max-width: 960px) {
    .tabs-left .tab-label { display: none; }
    .logo-text { display: none; }
}

/* ---- Feature view chrome ---- */
.view { display: flex; flex-direction: column; }
.titlebar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.titlebar h1 { font-size: 18px; margin: 0; }

/* ---- Forms ---- */
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { color: var(--color-text-muted); font-size: 13px; }
.input {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}
.input:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }
.input[readonly] { background: var(--color-surface-2); cursor: default; }
.input[readonly]:focus { outline: none; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
}
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.saved { margin-left: var(--space-3); color: var(--color-alarm-clear); }

/* ---- Login (WebUI.md §6) ---- */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    padding: var(--space-4);
}
.login-card {
    width: 360px;
    max-width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    box-shadow: var(--elevation-1);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 20px;
    font-weight: 600;
}
.login-logo .material-symbols-outlined { font-size: 32px; color: var(--color-primary); }
.login-title { font-size: 16px; margin: 0; text-align: center; color: var(--color-text-muted); font-weight: 500; }
.login-card .field { margin-bottom: var(--space-2); }
.login-submit { justify-content: center; }
.login-error {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
}
.login-prefs {
    display: flex;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}
.login-prefs label { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; font-size: 12px; color: var(--color-text-muted); }
.login-version { margin-top: var(--space-3); text-align: center; font-size: 11px; color: var(--color-text-muted); }

/* ---- Feature layout: group pane + main view (WebUI.md §8.1) ---- */
.feature { display: flex; align-items: stretch; min-height: calc(100vh - var(--tabbar-height)); }
.feature-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pad-sm { padding: var(--space-2) var(--space-5); }

.grouppane {
    flex: 0 0 auto;
    width: 240px;
    min-width: 160px;
    max-width: 480px;
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
    resize: horizontal;
    overflow: auto;
}
.grouppane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.grouppane-title { font-weight: 600; font-size: 13px; color: var(--color-text-muted); }
.grouptree { list-style: none; margin: 0; padding: var(--space-1); }
.groupnode {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-1);
    cursor: pointer;
}
.groupnode:hover { background: var(--color-surface-2); }
.groupnode.selected { background: color-mix(in srgb, var(--color-primary) 16%, transparent); }
.groupnode-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groupnode-edit { opacity: 0; color: var(--color-text-muted); font-size: 18px; }
.groupnode:hover .groupnode-edit { opacity: 1; }

/* ---- Toolbar (WebUI.md §8.2) ---- */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.toolbar-spacer { flex: 1 1 auto; }
.filter-box { min-width: 200px; }
.titlebar .friendly-toggle { margin-left: auto; font-size: 12px; color: var(--color-text-muted); }

/* ---- Editable label (WebUI.md §8.4) ---- */
.editable { display: inline-flex; align-items: center; gap: var(--space-1); }
.editable.editing {
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-1);
    padding: 2px var(--space-2);
}
.editable-value.empty { color: var(--color-text-muted); font-style: italic; }
.editable-input { border: 0; outline: none; background: transparent; color: var(--color-text); font: inherit; }
.editable-input.invalid { color: var(--color-danger); }
.editable-icon { cursor: pointer; color: var(--color-text-muted); font-size: 18px; }
.editable-icon:hover { color: var(--color-primary); }
.editable-icon.disabled { opacity: 0.4; cursor: default; }
.editable-error { color: var(--color-danger); font-size: 12px; margin-left: var(--space-2); }

/* ---- List view + grid (WebUI.md §8.3) ---- */
.listview { flex: 1 1 auto; display: flex; flex-direction: column; }
.grid { width: 100%; border-collapse: collapse; }
.grid thead th {
    text-align: left;
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.grid tbody td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); }
.grid tbody tr:hover { background: var(--color-surface-2); }
.grid-empty { text-align: center; padding: var(--space-6); }
.link-name { background: none; border: 0; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; }
.link-name:hover { text-decoration: underline; }

/* ---- Pagination bar (WebUI.md §8.3) ---- */
.pagebar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}
.iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: var(--radius-1);
    color: var(--color-text);
    cursor: pointer;
    padding: var(--space-1);
}
.iconbtn:hover:not(:disabled) { background: var(--color-surface-2); }
.iconbtn:disabled { color: var(--color-disabled); cursor: default; }
.pagebar-pos { display: inline-flex; align-items: center; gap: var(--space-2); }
.pagebar-input { width: 48px; text-align: center; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-1); background: var(--color-surface); color: var(--color-text); font: inherit; }
.pagebar-size { padding: 2px var(--space-2); }
.pagebar-export { position: relative; margin-left: auto; }
.export-menu { top: auto; bottom: 36px; right: 0; min-width: 120px; }

/* ---- Editor view (WebUI.md §8.5) ---- */
.editorview { flex: 1 1 auto; display: flex; flex-direction: column; }
.editor-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.editor-name { flex: 1 1 auto; display: flex; justify-content: center; font-size: 16px; font-weight: 600; }
.editor-bar-spacer { flex: 0 0 36px; }
.editor-body { flex: 1 1 auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); overflow: auto; }
.editor-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; }
.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.editor-section { display: flex; flex-direction: column; gap: var(--space-3); }
.editor-section h3 { margin: 0; font-size: 14px; }
.section-head { display: flex; align-items: center; justify-content: space-between; }
.section-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ---- Alarm state pills + commands (WebUI.md §9.2) ---- */
.alarm-state-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.state-pill { display: inline-block; padding: 2px var(--space-3); border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; }
.state-active { background: var(--color-alarm-active); }
.state-ack { background: var(--color-alarm-ack); color: #1b1f24; }
.state-clear { background: var(--color-alarm-clear); }
.state-unknown { background: var(--color-disabled); }

/* ---- Condition lines + Condition String (WebUI.md §4) ---- */
.cond-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cond-line { border: 1px solid var(--color-border); border-radius: var(--radius-1); }
.cond-line-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); }
.cond-line-name { display: flex; align-items: center; gap: var(--space-2); background: none; border: 0; font: inherit; color: var(--color-text); cursor: pointer; text-align: left; flex: 1 1 auto; min-width: 0; }
.cond-panel { padding: var(--space-3); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-surface-2); }
.cond-panel-foot { display: flex; justify-content: flex-end; }
.cond-params { font-family: monospace; }
.cond-hint {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-1);
    font-size: 13px;
    color: var(--color-text);
}
.cond-hint .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }

.cond-string { display: flex; flex-direction: column; gap: var(--space-2); }
.cond-input { font-family: monospace; resize: vertical; }
.cond-preview { font-family: monospace; padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius-1); white-space: pre-wrap; word-break: break-word; min-height: 1.6em; }
.cond-empty { color: var(--color-text-muted); font-style: italic; }
.cond-kw { color: var(--color-primary); font-weight: 600; }
.cond-paren { color: var(--color-text-muted); }
.cond-op { color: var(--color-alarm-clear); }
.cond-unknown { color: var(--color-danger); text-decoration: underline wavy; }

/* ---- Modal dialog (WebUI.md §8.5) ---- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: var(--space-4);
}
.modal {
    width: 460px;
    max-width: 100%;
    max-height: 90vh;
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    box-shadow: var(--elevation-1);
}
.modal-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.modal-title { flex: 1 1 auto; text-align: center; font-size: 15px; margin: 0; }
.modal-commit { color: var(--color-primary); }
.modal-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ---- Users feature (WebUI.md §9.5) ---- */
.row-actions { display: flex; gap: var(--space-1); justify-content: flex-end; }
.addrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
}
.addrow .input { flex: 1 1 auto; min-width: 0; }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }

/* Permission-editing control (WebUI.md §8.1) */
.perm-editor { display: flex; flex-direction: column; gap: var(--space-2); }
.perm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.perm-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 12px;
}
.perm-revoke { cursor: pointer; font-size: 16px; color: var(--color-text-muted); }
.perm-revoke:hover { color: var(--color-danger); }
.perm-add { display: flex; gap: var(--space-2); align-items: center; }
.perm-add .input { flex: 1 1 auto; }

/* Dual-list-box member editor (WebUI.md §8.1) */
.duallist { display: flex; align-items: stretch; gap: var(--space-3); }
.duallist-col { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.duallist-col label { font-size: 12px; color: var(--color-text-muted); }
.duallist-box {
    min-height: 140px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    padding: var(--space-1);
}
.duallist-actions { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); }

/* ---- Sensors + simulators (WebUI.md §9.1) ---- */
.telemetry-box {
    margin: 0;
    padding: var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow: auto;
}
.sparkline { display: inline-block; vertical-align: middle; }
.cond-line-head .sparkline { margin-left: auto; flex: 0 0 auto; }
.sim-preview { display: flex; align-items: center; gap: var(--space-2); }
.sim-enabled { align-self: end; }
.sim-badge { font-size: 18px; color: var(--color-text-muted); margin-right: var(--space-1); }

.seg { display: inline-flex; gap: var(--space-4); }

.uvar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.uvar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
}
.uvar-name { flex: 1 1 auto; min-width: 0; }
.uvar-control { display: inline-flex; align-items: center; gap: var(--space-2); }
.uvar-num { width: 120px; }

/* ---- Path browser (WebUI.md §8.6) ---- */
.input-with-button { display: flex; align-items: center; gap: var(--space-1); }
.input-with-button .input { flex: 1 1 auto; min-width: 0; }
.pathtree {
    list-style: none;
    margin: 0;
    padding: var(--space-1);
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
}
.pathnode { display: flex; align-items: center; gap: var(--space-1); padding: 1px 0; }
.pathnode-toggle { cursor: pointer; color: var(--color-text-muted); font-size: 18px; }
.pathnode-leaf { color: var(--color-text-muted); width: 18px; text-align: center; font-size: 10px; }
.pathnode-name {
    background: none;
    border: 0;
    padding: 2px var(--space-2);
    border-radius: var(--radius-1);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    white-space: nowrap;
}
.pathnode-name:hover { background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--color-primary); }
/* A non-pickable branch label (leaves-only mode): muted, expands on click, no pick highlight. */
.pathnode-branch { color: var(--color-text-muted); }
.pathnode-branch:hover { background: var(--color-surface-2); color: var(--color-text); }

/* Blazor's default error toast. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #ffe9a8;
    color: #3a2f00;
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

/* Access Control (§9.6) */
.mono { font-family: var(--font-mono, ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace); font-size: 13px; }
.acl-kind { font-size: 18px; vertical-align: middle; margin-right: var(--space-2); color: var(--color-text-muted); }
.acl-effect {
    display: inline-block;
    padding: 2px var(--space-3);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border: none;
}
button.acl-effect { cursor: pointer; }
.acl-allow { background: var(--color-alarm-clear); }
.acl-deny { background: var(--color-alarm-active); }
.acl-field-row { display: flex; gap: var(--space-2); }
.acl-field-row .input { flex: 1 1 auto; min-width: 0; }

/* Log / history views (§9.3, §9.4, §9.7) */
.timerange { display: flex; gap: var(--space-3); align-items: flex-end; }
.timerange-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.logbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.richlist { list-style: none; margin: 0; padding: 0; }
.richrow {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.richrow-main { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.richrow-title { font-weight: 600; }
.richrow-badge {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--color-disabled);
}
.richrow-badge.badge-on { background: var(--color-alarm-active); }
.richrow-badge.badge-off { background: var(--color-alarm-clear); }
/* Tenant label on a collated cross-tenant row (DesignChange-Cross-Tenant-Collated-Views.md §6). */
.richrow-badge.badge-tenant { background: var(--color-accent, #4a6); }
.richrow-sub { font-size: 12px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.richrow-sep { opacity: 0.5; }
.richrow-comment { font-style: italic; }
.richrow-clickable { cursor: pointer; }
.richrow-clickable:hover { background: var(--color-surface-2); }

/* Notifications + External Groups (§9.8) */
.richrow-unread { background: var(--color-surface-alt, rgba(127,127,127,0.08)); }
.richrow-unread .richrow-title { font-weight: 700; }
.notif-icon { font-size: 20px; color: var(--color-text-muted); }
.eg-page { display: flex; flex-direction: column; gap: var(--space-6); max-width: 900px; }
.eg-section { display: flex; flex-direction: column; gap: var(--space-3); }
.eg-section h2 { font-size: 15px; margin: 0; }
.eg-preview {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 6px);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}