/* RadTools design system — base components (2026-09-16).
   Source of truth: the "Дизайн-система RadTools" canvas (Основи / Елементи керування / Шаблони).
   Loaded after styles.css, so it can use every --rt-* token defined there.

   Rules the classes encode:
   - four button variants, not 115 one-off classes; one primary per block;
     danger only for irreversible actions, always behind a confirmation;
   - 40px controls in forms and dialogs, 32px (--sm) in tables and toolbars;
   - a status is always text + colour, so it reads without colour too;
   - the display face (Unbounded) is for the page title only.

   Pages move onto these one at a time (worklist, viewer, report editor first).
   Nothing here restyles existing markup except the Font Awesome replacement at the end. */

/* ── Chip tints (theme-dependent) ─────────────────────────────────────────── */
:root,
html[data-theme="light"] {
    --rt-chip-info-bg:      #ebf3fc;  --rt-chip-info-fg:      #0969da;
    --rt-chip-attention-bg: #faf1eb;  --rt-chip-attention-fg: #953800;  --rt-chip-attention-dot: #bc4c00;
    --rt-chip-success-bg:   #edf5ef;  --rt-chip-success-fg:   #1a7f37;
    --rt-chip-ai-bg:        #f5f1fc;  --rt-chip-ai-fg:        #8250df;
    --rt-chip-warning-bg:   #f7f3eb;  --rt-chip-warning-fg:   #7d4e00;
    --rt-chip-neutral-bg:   #f0f1f1;  --rt-chip-neutral-fg:   #424a53;
    --rt-chip-danger-bg:    #fbedee;  --rt-chip-danger-fg:    #cf222e;
    --rt-focus-ring:        rgba(9, 105, 218, .30);
}

html[data-theme="dark"] {
    --rt-chip-info-bg:      #18273a;  --rt-chip-info-fg:      #58a6ff;
    --rt-chip-attention-bg: #2f231d;  --rt-chip-attention-fg: #f0883e;  --rt-chip-attention-dot: #f0883e;
    --rt-chip-success-bg:   #142a20;  --rt-chip-success-fg:   #3fb950;
    --rt-chip-ai-bg:        #241f39;  --rt-chip-ai-fg:        #a371f7;
    --rt-chip-warning-bg:   #2b2519;  --rt-chip-warning-fg:   #d29922;
    --rt-chip-neutral-bg:   #22272e;  --rt-chip-neutral-fg:   #c9d1d9;
    --rt-chip-danger-bg:    #2d1a1d;  --rt-chip-danger-fg:    #f85149;
    --rt-focus-ring:        rgba(56, 139, 253, .45);
}

/* ── Typography helpers ───────────────────────────────────────────────────── */
.rt-page-title {
    margin: 0;
    font-family: var(--rt-font-display);
    font-size: 1.625rem;          /* 26px */
    font-weight: 500;
    line-height: 1.2;
    color: var(--rt-text-primary);
}

.rt-section-title {
    margin: 0;
    font-family: var(--rt-font-ui);
    font-size: 1.25rem;           /* 20px */
    font-weight: 600;
    line-height: 1.3;
    color: var(--rt-text-primary);
}

.rt-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rt-text-muted);
}

.rt-mono {
    font-family: var(--rt-font-mono);
    font-variant-numeric: tabular-nums;
}

.rt-hint {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--rt-text-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.rt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rt-space-2);
    height: var(--rt-control-h);
    padding: 0 var(--rt-space-4);
    border: 1px solid var(--rt-border-default);
    border-radius: var(--rt-radius-control);
    background: var(--rt-bg-subtle);
    color: var(--rt-text-primary);
    font: 500 0.875rem/1 var(--rt-font-ui);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.rt-btn:hover {
    background: var(--rt-bg-emphasis);
    color: var(--rt-text-primary);
    text-decoration: none;
}

.rt-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rt-focus-ring);
}

.rt-btn:disabled,
.rt-btn[aria-disabled="true"] {
    background: var(--rt-bg-emphasis);
    border-color: var(--rt-bg-emphasis);
    color: var(--rt-text-disabled);
    cursor: not-allowed;
    box-shadow: none;
}

.rt-btn svg,
.rt-btn i {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    flex-shrink: 0;
}

.rt-btn--primary {
    background: var(--rt-accent-fill);
    border-color: var(--rt-accent-fill);
    color: var(--rt-on-accent);
}

.rt-btn--primary:hover {
    background: var(--rt-accent-fill-hover);
    border-color: var(--rt-accent-fill-hover);
    color: var(--rt-on-accent);
}

.rt-btn--danger {
    background: var(--rt-danger-fill);
    border-color: var(--rt-danger-fill);
    color: #ffffff;
}

.rt-btn--danger:hover {
    filter: brightness(.92);
    color: #ffffff;
}

.rt-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--rt-accent-link);
}

.rt-btn--ghost:hover {
    background: var(--rt-bg-subtle);
    color: var(--rt-accent-link-hover);
}

.rt-btn--sm {
    height: var(--rt-control-h-sm);
    padding: 0 var(--rt-space-3);
    font-size: 0.8125rem;
}

.rt-btn--icon {
    width: var(--rt-control-h);
    padding: 0;
    color: var(--rt-text-secondary);
}

.rt-btn--icon.rt-btn--sm {
    width: var(--rt-control-h-sm);
}

/* ── Fields ───────────────────────────────────────────────────────────────── */
.rt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rt-field__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rt-text-secondary);
}

.rt-input,
.rt-select,
.rt-textarea {
    width: 100%;
    height: var(--rt-control-h);
    padding: 0 var(--rt-space-3);
    border: 1px solid var(--rt-border-strong);
    border-radius: var(--rt-radius-control);
    background: var(--rt-bg-input);
    color: var(--rt-text-primary);
    font: 400 0.875rem/1.4 var(--rt-font-ui);
    transition: border-color .15s, box-shadow .15s;
}

.rt-textarea {
    height: auto;
    min-height: 6rem;
    padding: var(--rt-space-2) var(--rt-space-3);
    resize: vertical;
}

.rt-select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236e7681' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
}

.rt-input::placeholder,
.rt-textarea::placeholder {
    color: var(--rt-text-muted);
}

.rt-input:focus,
.rt-select:focus,
.rt-textarea:focus {
    outline: none;
    border-color: var(--rt-border-focus);
    box-shadow: 0 0 0 1px var(--rt-border-focus), 0 0 0 4px var(--rt-focus-ring);
}

.rt-input:disabled,
.rt-select:disabled,
.rt-textarea:disabled {
    background: var(--rt-bg-subtle);
    color: var(--rt-text-disabled);
    cursor: not-allowed;
}

.rt-input--sm,
.rt-select--sm {
    height: var(--rt-control-h-sm);
    font-size: 0.8125rem;
}

.rt-field--error .rt-input,
.rt-field--error .rt-select,
.rt-field--error .rt-textarea,
.rt-input[aria-invalid="true"] {
    border-color: var(--rt-danger);
}

.rt-field__error {
    font-size: 0.75rem;
    color: var(--rt-danger);
}

/* ── Status chips, filters, modality badges ──────────────────────────────── */
.rt-chip {
    --chip-bg: var(--rt-chip-neutral-bg);
    --chip-fg: var(--rt-chip-neutral-fg);
    --chip-dot: var(--chip-fg);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--rt-radius-pill);
    background: var(--chip-bg);
    color: var(--chip-fg);
    font: 600 0.75rem/1 var(--rt-font-ui);
    white-space: nowrap;
}

/* Optional leading dot: <span class="rt-chip rt-chip--success rt-chip--dot">Готово</span> */
.rt-chip--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--rt-radius-pill);
    background: var(--chip-dot);
    flex-shrink: 0;
}

.rt-chip--info      { --chip-bg: var(--rt-chip-info-bg);      --chip-fg: var(--rt-chip-info-fg); }
.rt-chip--attention { --chip-bg: var(--rt-chip-attention-bg); --chip-fg: var(--rt-chip-attention-fg); --chip-dot: var(--rt-chip-attention-dot); }
.rt-chip--success   { --chip-bg: var(--rt-chip-success-bg);   --chip-fg: var(--rt-chip-success-fg); }
.rt-chip--ai        { --chip-bg: var(--rt-chip-ai-bg);        --chip-fg: var(--rt-chip-ai-fg); }
.rt-chip--warning   { --chip-bg: var(--rt-chip-warning-bg);   --chip-fg: var(--rt-chip-warning-fg); }
.rt-chip--neutral   { --chip-bg: var(--rt-chip-neutral-bg);   --chip-fg: var(--rt-chip-neutral-fg); }
.rt-chip--danger    { --chip-bg: var(--rt-chip-danger-bg);    --chip-fg: var(--rt-chip-danger-fg); }
.rt-chip--urgent    { --chip-bg: var(--rt-danger-fill);       --chip-fg: #ffffff; }
.rt-chip--outline   { --chip-bg: transparent; box-shadow: inset 0 0 0 1px var(--rt-border-default); }
.rt-chip--cancelled { text-decoration: line-through; }

/* Filter pill: a <button> that toggles; aria-pressed carries the state. */
.rt-filter {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--rt-border-default);
    border-radius: var(--rt-radius-pill);
    background: transparent;
    color: var(--rt-text-secondary);
    font: 600 0.75rem/1 var(--rt-font-ui);
    white-space: nowrap;
    cursor: pointer;
}

.rt-filter:hover {
    background: var(--rt-bg-subtle);
}

.rt-filter[aria-pressed="true"],
.rt-filter.is-active {
    border-color: var(--rt-accent-fill);
    background: var(--rt-chip-info-bg);
    color: var(--rt-chip-info-fg);
}

.rt-filter:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rt-focus-ring);
}

/* DICOM modality code (CT, MR, CR…): Latin codes in badges; КТ/МРТ in running text. */
.rt-modality {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--rt-radius-control);
    background: var(--rt-bg-subtle);
    box-shadow: inset 0 0 0 1px var(--rt-border-default);
    color: var(--rt-text-secondary);
    font: 400 0.6875rem/1.4 var(--rt-font-brand);
    letter-spacing: .06em;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.rt-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--rt-border-default);
    border-radius: var(--rt-radius-card);
    background: var(--rt-bg-default);
    color: var(--rt-text-primary);
}

.rt-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rt-space-3);
}

.rt-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--rt-radius-control);
    background: var(--rt-chip-info-bg);
    color: var(--rt-chip-info-fg);
    flex-shrink: 0;
}

.rt-card__title {
    margin: 0;
    font-size: 1.0625rem;         /* 17px */
    font-weight: 600;
    line-height: 1.3;
    color: var(--rt-text-primary);
}

.rt-card__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rt-text-secondary);
}

/* Actions sit on the card's bottom edge whatever the text length, so a row of
   cards keeps its buttons aligned. */
.rt-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rt-space-3);
    margin-top: auto;
    padding-top: var(--rt-space-3);
    border-top: 1px solid var(--rt-border-soft);
    font-size: 0.875rem;
}

/* ── Empty and error states ───────────────────────────────────────────────── */
.rt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 32px;
    border: 1px solid var(--rt-border-default);
    border-radius: var(--rt-radius-card);
    background: var(--rt-bg-default);
    text-align: center;
}

.rt-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--rt-radius-card);
    background: var(--rt-bg-subtle);
    color: var(--rt-text-muted);
    font-size: 1.5rem;
}

.rt-empty__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--rt-text-primary);
}

.rt-empty__text {
    max-width: 380px;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rt-text-secondary);
}

.rt-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.rt-empty--error .rt-empty__icon {
    background: var(--rt-chip-danger-bg);
    color: var(--rt-chip-danger-fg);
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.rt-form {
    display: flex;
    flex-direction: column;
    gap: var(--rt-space-4);
    margin: 0;
}

.rt-btn--block {
    width: 100%;
}

/* Input with an attached icon button (show password, clear, pick date). */
.rt-input-group {
    display: flex;
    min-width: 0;
}

.rt-input-group > .rt-input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.rt-input-group > .rt-input:focus {
    position: relative;
    z-index: 1;
}

.rt-input-group > .rt-btn {
    margin-left: -1px;
    border-color: var(--rt-border-strong);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.rt-input-group > .rt-btn[aria-pressed="true"] {
    background: var(--rt-bg-emphasis);
    color: var(--rt-text-primary);
}

/* ── Narrow form page: one card in the middle (password, confirmation codes) ── */
.rt-narrow {
    display: flex;
    justify-content: center;
    padding: var(--rt-space-7) var(--rt-space-4);
}

.rt-narrow > .rt-card {
    width: 100%;
    max-width: 440px;
    gap: var(--rt-space-5);
    padding: var(--rt-space-6);
    box-shadow: var(--rt-shadow-card);
}

.rt-narrow .rt-page-title {
    font-size: 1.375rem;          /* 22px: the title of a small card, not of a page */
}

.rt-card__lede {
    margin: calc(var(--rt-space-2) * -1) 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rt-text-muted);
}

@media (max-width: 480px) {
    .rt-narrow { padding: var(--rt-space-5) var(--rt-space-4); }
    .rt-narrow > .rt-card { padding: var(--rt-space-5); }
}

/* ── Font Awesome replacement ─────────────────────────────────────────────────
   The whole 104 KB Font Awesome stylesheet (plus its webfonts) was loaded on every
   page for three icons: brain, eye, eye-slash. These are our own line drawings under
   the same class names, so templates, innerHTML strings and the password-visibility
   toggle (static/js/auth/password_visibility.js swaps fa-eye ↔ fa-eye-slash) keep
   working unchanged. The icon takes the text colour and scales with font-size. */
.fa-solid.fa-brain,
.fa-solid.fa-eye,
.fa-solid.fa-eye-slash {
    display: inline-block;
    width: 1.25em;
    height: 1em;
    font-style: normal;
    line-height: 1;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--rt-icon) center / contain no-repeat;
            mask: var(--rt-icon) center / contain no-repeat;
}

.fa-solid.fa-brain {
    --rt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.2 5.2A3 3 0 0 0 6 6.6a3.1 3.1 0 0 0-2.4 4.1A3.2 3.2 0 0 0 4.8 16a3.2 3.2 0 0 0 3.6 3.2 2.6 2.6 0 0 0 2.8-1.1z'/%3E%3Cpath d='M12.8 5.2A3 3 0 0 1 18 6.6a3.1 3.1 0 0 1 2.4 4.1A3.2 3.2 0 0 1 19.2 16a3.2 3.2 0 0 1-3.6 3.2 2.6 2.6 0 0 1-2.8-1.1z'/%3E%3Cpath d='M6 6.6c.2 1 .9 1.8 1.9 2.1M18 6.6c-.2 1-.9 1.8-1.9 2.1M3.6 10.7c.9.4 2 .4 2.9-.1M20.4 10.7c-.9.4-2 .4-2.9-.1M4.8 16c.9-.8 1.3-1.9 1.1-3M19.2 16c-.9-.8-1.3-1.9-1.1-3M8.4 19.2c0-1.2.6-2.2 1.6-2.8M15.6 19.2c0-1.2-.6-2.2-1.6-2.8'/%3E%3C/svg%3E");
}

.fa-solid.fa-eye {
    --rt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.6 5 12 5s10.2 7 10.2 7-3.8 7-10.2 7S1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}

.fa-solid.fa-eye-slash {
    --rt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 5.2A10 10 0 0 1 12 5c6.4 0 10.2 7 10.2 7a17 17 0 0 1-2.6 3.4M6.4 6.5C3.4 8.4 1.8 12 1.8 12S5.6 19 12 19a9.6 9.6 0 0 0 5.5-1.6'/%3E%3Cpath d='M9.9 9.8a3.2 3.2 0 0 0 4.4 4.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}