.hs-configuration {
    --hs-surface: #fff;
    --hs-border: #d9dde3;
    --hs-divider: #f6f7f9;
    --hs-text: #1a2330;
    --hs-muted: #67707d;
    --hs-radius: 8px;
    --hs-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    min-width: 0;
    color: var(--hs-text);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}
.hs-card {
    min-width: 0;
    background: var(--hs-surface);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
    box-shadow: var(--hs-shadow);
    padding: .9rem 1.1rem;
    margin-bottom: .9rem;
}
.hs-title { font-size: .95rem; margin: 0 0 .5rem; }
.hs-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .9rem; margin: .4rem 0; font-size: .85rem; }
.hs-facts dt { color: var(--hs-muted); }
.hs-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.hs-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.hs-table th { text-align: left; color: var(--hs-muted); font-weight: 600; padding: .35rem .5rem; border-bottom: 1px solid var(--hs-border); }
.hs-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--hs-divider); vertical-align: top; }
.hs-table th, .hs-table td { overflow-wrap: anywhere; }
.hs-mono { font-family: Consolas, monospace; }
.hs-muted { color: var(--hs-muted); }
.hs-small { font-size: .8rem; }
@media (max-width: 640px) {
    .hs-card { padding: .75rem; }
    .hs-facts { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .hs-facts dd { margin-bottom: .5rem; }
    .hs-table { table-layout: fixed; }
    .hs-table th, .hs-table td { padding: .35rem .25rem; }
}
/* The view roots' tokens, defined once (2.5 R2). Each view root also carries hs-configuration for the shared tokens.
   A root that no rule reads a token under gains it without any computed value changing. */
.hs-department-editor, .hs-licence-data, .hs-observer-access {
    --hs-bg: #f6f7f9;
    --hs-list-surface: #e8f1fb;
    --hs-accent: #0f6cbd;
    --hs-ok: #107c41;
    --hs-ok-surface: #e6f4ea;
    --hs-warn: #9a6700;
    --hs-warn-surface: #fff8e6;
    --hs-error: #b42318;
    --hs-error-surface: #fdecea;
    --hs-error-border: #f2b8b5;
}
/* Department-configuration editor. */
.hs-subtitle { margin: .75rem 0 .25rem; }
.hs-danger { color: var(--hs-error); }
.hs-badge { border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: .15rem .6rem; text-transform: uppercase; }
.hs-badge-warn { background: var(--hs-warn-surface); color: var(--hs-warn); }
.hs-chips { list-style: none; margin: .2rem 0 .6rem; padding: 0; display: flex; gap: .35rem; flex-wrap: wrap; }
.hs-chip { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; border-radius: 999px; font-size: .75rem; padding: .1rem .55rem; background: var(--hs-bg); border: 1px solid var(--hs-border); overflow-wrap: anywhere; }
.hs-chip-dl { background: var(--hs-list-surface); }
.hs-chip-x { border: none; background: transparent; color: var(--hs-muted); cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 .1rem; }
.hs-chip-x:hover { color: var(--hs-error); }
.hs-inline-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .4rem 0; }
.hs-inline-form select { width: auto; min-width: 12rem; max-width: 100%; margin: 0; padding: .35rem .5rem; border: 1px solid var(--hs-border); border-radius: var(--hs-radius); background: var(--hs-surface); color: var(--hs-text); font: inherit; font-size: 16px; }
.hs-btn { border: 1px solid var(--hs-border); background: var(--hs-surface); color: var(--hs-text); border-radius: var(--hs-radius); padding: .45rem .9rem; font: inherit; font-size: .9rem; cursor: pointer; }
.hs-btn:hover { border-color: var(--hs-accent); }
.hs-btn-small { padding: .25rem .6rem; font-size: .8rem; }
.hs-btn[disabled] { opacity: .55; cursor: default; }
@media (max-width: 640px) {
    .hs-inline-form select { min-width: 0; flex: 1 1 100%; }
}
/* Licence requests and catalogue view (C2d R3). */
/* One error banner for the licence view and the Observer access view (2.5 R2). */
.hs-licence-error, .hs-observer-error { background: var(--hs-error-surface); border: 1px solid var(--hs-error-border); border-radius: var(--hs-radius); color: var(--hs-error); font-size: .9rem; margin: .5rem 0; padding: .6rem .9rem; }
.hs-licence-status { display: inline-block; border-radius: 999px; font-size: .75rem; padding: .1rem .55rem; }
.hs-licence-status-ok { background: var(--hs-ok-surface); color: var(--hs-ok); }
.hs-licence-status-warn { background: var(--hs-warn-surface); color: var(--hs-warn); }
.hs-licence-status-error { background: var(--hs-error-surface); color: var(--hs-error); }
.hs-licence-danger { color: var(--hs-error); }
.hs-licence-data .hs-inline-form input { width: auto; min-width: 10rem; max-width: 100%; margin: 0; padding: .35rem .5rem; border: 1px solid var(--hs-border); border-radius: var(--hs-radius); background: var(--hs-surface); color: var(--hs-text); font: inherit; font-size: 16px; }
@media (max-width: 640px) {
    .hs-licence-data .hs-inline-form input { min-width: 0; flex: 1 1 100%; }
}
/* Observer access view (C6 R3). The rules below are nm-helpdesk's app.css Observer rules moved with the hs- prefix; the
   tokens resolve to the values they had there. */
.hs-observer-notice { border-radius: var(--hs-radius); padding: .6rem .9rem; margin: .5rem 0; font-size: .9rem; }
.hs-observer-admin-toolbar { display: grid; gap: .9rem; }
.hs-observer-search { max-width: 32rem; }
.hs-observer-add { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; }
.hs-observer-add label { min-width: min(28rem, 100%); }
.hs-observer-admin-table-wrap { overflow-x: auto; padding: 0; }
.hs-observer-admin-table { margin: 0; }
.hs-observer-toggle-cell { width: 5.5rem; }
.hs-observer-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.hs-observer-toggle input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: inherit; z-index: 1;
}
.hs-observer-toggle-track {
    position: relative; width: 2.65rem; height: 1.45rem; border-radius: 999px;
    background: var(--hs-border); transition: background .15s ease;
}
.hs-observer-toggle-thumb {
    position: absolute; width: 1.05rem; height: 1.05rem; top: .2rem; left: .2rem;
    border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
    transition: transform .15s ease;
}
.hs-observer-toggle input:checked + .hs-observer-toggle-track { background: var(--hs-accent); }
.hs-observer-toggle input:checked + .hs-observer-toggle-track .hs-observer-toggle-thumb { transform: translateX(1.2rem); }
.hs-observer-toggle input:focus-visible + .hs-observer-toggle-track { outline: 3px solid var(--hs-accent); outline-offset: 2px; }
.hs-observer-toggle input:disabled + .hs-observer-toggle-track { opacity: .5; cursor: not-allowed; }
