/* ═══════════════════════════════════════════════════════════════════════════
   HILFEDIENST — Patient website — style.css
   File: public/assets/css/style.css
   Shared components for every patient page. Loaded globally by
   layout/master_redesigned after patient-layout.css (uses its --pt-* vars).
   Never re-link it in a page; page-only CSS goes in @push('styles').

   INDEX — use only these classes
   ── PAGE ────────── hd-page-header  hd-page-header-text  hd-title  hd-subtitle
                      hd-page-actions  hd-block  hd-footer-row
   ── CARDS ───────── hd-card  hd-card-header  hd-card-header-icon  hd-card-title
                      hd-card-body  hd-card-footer
   ── BUTTONS ─────── hd-btn + -primary | -outline | -danger | -success | -info
                              | -amber | -gray | -sm | -block
   ── ROW ACTIONS ─── hd-actions  hd-act + hd-act-view | hd-act-edit | hd-act-delete
   ── BADGES ──────── hd-badge + -primary | -green | -red | -orange | -blue | -gray
   ── TABLES ──────── hd-table  hd-table-scroll  th-actions  td-actions-cell
                      hd-nowrap  hd-empty
                      hd-table-stack (rows → cards on phones; td needs data-title)
   ── FORMS ───────── hd-form-grid  hd-form-group  hd-form-label  hd-required
                      hd-input  hd-select  hd-field-error
                      hd-check  hd-check-box  hd-check-text  (checkbox + radio)
   ── TABS ────────── hd-tab-bar  hd-tab  hd-tab-body  hd-pane
   ── INFO / KV ───── hd-info-card  hd-info-card-title  hd-kv  hd-kv-label  hd-kv-val
   ── ALERTS ──────── hd-alert + -success | -error | -info | -warning
   ── STATUS DOT ──── hd-dot-status (+ inline background for data-driven colours)
   ── MODAL ───────── hd-modal-overlay  hd-modal (-sm | -lg)  hd-modal-head
                      hd-modal-title  hd-modal-title-icon  hd-modal-close
                      hd-modal-body  hd-modal-foot  hd-modal-stacked
                      JS: hdModal.open(id) / hdModal.close(id)
                          [data-hd-close] on any button closes its modal
                          data-static on the overlay = no outside-click / Esc close
   ── CONFIRM ─────── hd-confirm-overlay … built by JS: hdConfirm({...}) → Promise
   ── TOAST ───────── hd-toast + -success | -error   JS: showToast(msg, type)
   ── PRINT ───────── print-hide
   ═══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   1. PAGE HEADER + SPACING
   (.hd-header is the layout's top bar — page headers use .hd-page-header)
────────────────────────────────────────────────────────────────── */
.hd-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 20px;
}
.hd-page-header-text { min-width: 0; }
.hd-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--pt-text);
    margin: 4px 0 0;
    line-height: 1.2;
}
.hd-subtitle {
    font-size: 12px;
    color: var(--pt-text-sub);
    margin: 4px 0 0;
}
.hd-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.hd-block      { margin-top: 20px; }
.hd-footer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }


/* ──────────────────────────────────────────────────────────────────
   2. CARD
────────────────────────────────────────────────────────────────── */
.hd-card {
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-xs);
    overflow: hidden;
    margin-bottom: 20px;
}
.hd-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--pt-border);
}
.hd-card-header-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--pt-primary-lt);
    color: var(--pt-primary);
}
.hd-card-header-icon svg { stroke: currentColor; }
.hd-card-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--pt-text);
    margin: 0;
}
.hd-card-body { padding: 20px; }
.hd-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--pt-border);
}


/* ──────────────────────────────────────────────────────────────────
   3. BUTTONS
────────────────────────────────────────────────────────────────── */
.hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--pt-radius);
    border: 1.5px solid transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    color: var(--pt-text);
    transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.hd-btn:hover { text-decoration: none; }
.hd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pt-primary-lt); }
.hd-btn:disabled,
.hd-btn.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.hd-btn svg { stroke: currentColor; flex-shrink: 0; }

.hd-btn-primary { background: var(--pt-primary); border-color: var(--pt-primary); color: #fff; box-shadow: 0 2px 6px rgba(var(--pt-primary-rgb), .3); }
.hd-btn-primary:hover { background: var(--pt-primary-dk); border-color: var(--pt-primary-dk); color: #fff; }

.hd-btn-outline { background: transparent; border-color: var(--pt-border); color: var(--pt-text-sub); }
.hd-btn-outline:hover { background: var(--pt-hover); color: var(--pt-text); }

.hd-btn-danger { background: var(--pt-danger); border-color: var(--pt-danger); color: #fff; }
.hd-btn-danger:hover { background: var(--pt-danger-dk); border-color: var(--pt-danger-dk); color: #fff; }

.hd-btn-success { background: var(--pt-success); border-color: var(--pt-success); color: #fff; }
.hd-btn-success:hover { filter: brightness(.93); color: #fff; }

.hd-btn-info { background: var(--pt-primary-lt); border-color: transparent; color: var(--pt-primary); }
.hd-btn-info:hover { background: rgba(var(--pt-primary-rgb), .2); color: var(--pt-primary-dk); }

.hd-btn-amber { background: var(--pt-warning); border-color: var(--pt-warning); color: #fff; }
.hd-btn-amber:hover { filter: brightness(.93); color: #fff; }

.hd-btn-gray { background: var(--pt-gray-lt); border-color: transparent; color: var(--pt-text-sub); }
.hd-btn-gray:hover { background: rgba(138, 141, 147, .24); color: var(--pt-text); }

.hd-btn-sm    { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
.hd-btn-block { display: flex; width: 100%; }


/* ──────────────────────────────────────────────────────────────────
   4. ROW ACTIONS (icon buttons in tables)
────────────────────────────────────────────────────────────────── */
.hd-actions { display: flex; align-items: center; gap: 6px; }

.hd-act {
    width: 30px; height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    background: transparent;
    text-decoration: none;
    transition: background .14s, color .14s, border-color .14s;
}
.hd-act svg { display: block; stroke: currentColor; }

.hd-act-view   { background: var(--pt-primary-lt); color: var(--pt-primary); }
.hd-act-view:hover   { background: var(--pt-primary); color: #fff; }
.hd-act-edit   { background: var(--pt-info-lt); color: var(--pt-info); }
.hd-act-edit:hover   { background: var(--pt-info); color: #fff; }
.hd-act-delete { background: var(--pt-danger-lt); color: var(--pt-danger); }
.hd-act-delete:hover { background: var(--pt-danger); color: #fff; }


/* ──────────────────────────────────────────────────────────────────
   5. BADGES
────────────────────────────────────────────────────────────────── */
.hd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.hd-badge-primary { background: var(--pt-primary-lt); color: var(--pt-primary); }
.hd-badge-green   { background: var(--pt-success-lt); color: #3f9600; }
.hd-badge-red     { background: var(--pt-danger-lt);  color: #d63a3f; }
.hd-badge-orange  { background: var(--pt-warning-lt); color: #b07c00; }
.hd-badge-blue    { background: var(--pt-info-lt);    color: #0a8ac9; }
.hd-badge-gray    { background: var(--pt-gray-lt);    color: var(--pt-text-sub); }


/* ──────────────────────────────────────────────────────────────────
   6. TABLES
────────────────────────────────────────────────────────────────── */
.hd-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

.hd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hd-table th {
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    white-space: nowrap;
    color: var(--pt-text-sub);
    background: #fafafc;
    border-bottom: 2px solid var(--pt-border);
}
.hd-table td {
    padding: 11px 14px;
    vertical-align: middle;
    color: var(--pt-text);
    border-bottom: 1px solid var(--pt-border);
}
.hd-table tbody tr { transition: background .12s; }
.hd-table tbody tr:hover { background: #fafafc; }
.hd-table tbody tr:last-child td { border-bottom: none; }

.hd-table a:not(.hd-btn):not(.hd-act) { color: var(--pt-primary); font-weight: 500; }
.hd-table a:not(.hd-btn):not(.hd-act):hover { text-decoration: underline; }

.th-actions      { width: 1%; text-align: right; }
.td-actions-cell { white-space: nowrap; }
.td-actions-cell .hd-actions { justify-content: flex-end; }
.hd-nowrap       { white-space: nowrap; }

.hd-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--pt-text-muted);
    font-size: 13px;
}

/* hd-table-stack — on phones each row becomes a small card.
   Every <td> needs data-title="Spaltenname" (shown as the label). */
@media (max-width: 767.98px) {
    .hd-table-stack thead { display: none; }
    .hd-table-stack,
    .hd-table-stack tbody,
    .hd-table-stack tr,
    .hd-table-stack td { display: block; width: 100%; }
    .hd-table-stack tbody tr {
        padding: 6px 0;
        border-bottom: 1px solid var(--pt-border);
    }
    .hd-table-stack tbody tr:last-child { border-bottom: none; }
    .hd-table-stack td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 16px;
        border-bottom: none;
        text-align: right;
    }
    .hd-table-stack td::before {
        content: attr(data-title);
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--pt-text-sub);
        text-align: left;
    }
    .hd-table-stack td.hd-empty { display: block; text-align: center; }
    .hd-table-stack td.hd-empty::before { content: none; }
}


/* ──────────────────────────────────────────────────────────────────
   7. FORMS
────────────────────────────────────────────────────────────────── */
.hd-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 640px) { .hd-form-grid { grid-template-columns: 1fr; } }

.hd-form-group { margin-bottom: 16px; }
.hd-form-grid .hd-form-group { margin-bottom: 0; }

.hd-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pt-text-sub);
}
.hd-required { color: var(--pt-danger); }

.hd-input,
.hd-select {
    display: block;
    width: 100%;
    padding: 10px 13px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pt-text);
    background: var(--pt-input-bg);
    border: 1.5px solid var(--pt-border);
    border-radius: var(--pt-radius);
    outline: none;
    transition: border-color .14s, box-shadow .14s;
}
.hd-input:focus,
.hd-select:focus {
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 3px var(--pt-primary-lt);
}
.hd-input::placeholder { color: var(--pt-text-muted); }
.hd-input:disabled,
.hd-select:disabled { background: var(--pt-bg); color: var(--pt-text-muted); cursor: not-allowed; }
textarea.hd-input { min-height: 100px; resize: vertical; }

.hd-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236d6777' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 14px;
}

.hd-input.is-invalid,
.hd-select.is-invalid { border-color: var(--pt-danger); }
.hd-field-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--pt-danger);
}

/* custom checkbox / radio
   <label class="hd-check"><input type="checkbox"><span class="hd-check-box"></span><span class="hd-check-text">Text</span></label> */
.hd-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--pt-text);
}
.hd-check input[type="checkbox"],
.hd-check input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.hd-check-box {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1.5px solid #cfcdd3;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s;
}
.hd-check-box::after {
    content: "";
    width: 5px; height: 9px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s;
}
.hd-check input:checked + .hd-check-box { background: var(--pt-primary); border-color: var(--pt-primary); }
.hd-check input:checked + .hd-check-box::after { transform: rotate(45deg) scale(1); }
.hd-check input:focus-visible + .hd-check-box { box-shadow: 0 0 0 3px var(--pt-primary-lt); }
.hd-check-text { font-weight: 500; }

.hd-check input[type="radio"] + .hd-check-box { border-radius: 50%; }
.hd-check input[type="radio"] + .hd-check-box::after {
    width: 8px; height: 8px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
}
.hd-check input[type="radio"]:checked + .hd-check-box::after { transform: scale(1); }


/* ──────────────────────────────────────────────────────────────────
   8. TABS
   <div class="hd-tab-bar"><button class="hd-tab active" data-pane="a">…</button></div>
   <div class="hd-pane active" id="a">…</div>
────────────────────────────────────────────────────────────────── */
.hd-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--pt-border);
}
.hd-card > .hd-tab-bar { padding: 0 20px; }

.hd-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--pt-text-sub);
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color .14s, border-color .14s;
}
.hd-tab:hover:not(.active) { color: var(--pt-text); }
.hd-tab.active { color: var(--pt-primary); border-bottom-color: var(--pt-primary); }
.hd-tab svg { stroke: currentColor; flex-shrink: 0; }

.hd-tab-body { padding: 20px; }
.hd-pane        { display: none; }
.hd-pane.active { display: block; }


/* ──────────────────────────────────────────────────────────────────
   9. INFO CARD + LABEL/VALUE ROWS
────────────────────────────────────────────────────────────────── */
.hd-info-card { padding: 16px 20px; }
.hd-info-card-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pt-text);
}
.hd-kv {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--pt-border);
}
.hd-kv:last-child { border-bottom: none; }
.hd-kv-label { flex: 1 1 auto; min-width: 0; color: var(--pt-text-sub); }
.hd-kv-val   { flex: 0 1 auto; text-align: right; font-weight: 500; color: var(--pt-text); overflow-wrap: anywhere; }


/* ──────────────────────────────────────────────────────────────────
   10. ALERTS (inline messages, e.g. session flash)
────────────────────────────────────────────────────────────────── */
.hd-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: var(--pt-radius);
    font-size: 13px;
    line-height: 1.5;
}
.hd-alert svg { stroke: currentColor; flex-shrink: 0; margin-top: 2px; }
.hd-alert-success { background: var(--pt-success-lt); color: #3f9600; }
.hd-alert-error   { background: var(--pt-danger-lt);  color: #d63a3f; }
.hd-alert-info    { background: var(--pt-info-lt);    color: #0a8ac9; }
.hd-alert-warning { background: var(--pt-warning-lt); color: #b07c00; }


/* status dot — colour comes from data, set it inline:
   <span class="hd-dot-status" style="background:{{ $color }}"></span> */
.hd-dot-status {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}


/* ──────────────────────────────────────────────────────────────────
   11. MODAL
   Shown by .open on the overlay — never set display:none inline.
────────────────────────────────────────────────────────────────── */
body.hd-modal-open { overflow: hidden; }

.hd-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    z-index: 1060;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 16, 30, .5);
}
.hd-modal-overlay.open { display: flex; animation: hdFade .2s ease; }
.hd-modal-overlay.hd-modal-stacked { z-index: 1070; }

.hd-modal {
    width: 520px;
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--pt-card);
    border-radius: 16px;
    box-shadow: var(--pt-shadow-lg);
    overflow: hidden;
    animation: hdSlide .26s cubic-bezier(.34, 1.26, .64, 1);
}
.hd-modal-sm { width: 400px; }
.hd-modal-lg { width: 760px; }
.hd-modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.hd-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--pt-border);
    flex-shrink: 0;
}
.hd-modal-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--pt-text);
}
.hd-modal-title-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--pt-primary-lt);
    color: var(--pt-primary);
}
.hd-modal-title-icon svg { stroke: currentColor; }
.hd-modal-close {
    width: 30px; height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--pt-border);
    background: transparent;
    color: var(--pt-text-sub);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .13s, color .13s;
}
.hd-modal-close:hover { background: var(--pt-hover); color: var(--pt-text); }
.hd-modal-close svg { stroke: currentColor; display: block; }

.hd-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.hd-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--pt-border);
    flex-shrink: 0;
}

@keyframes hdFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hdSlide {
    from { opacity: 0; transform: scale(.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}


/* ──────────────────────────────────────────────────────────────────
   12. CONFIRM DIALOG (markup built by hdConfirm())
────────────────────────────────────────────────────────────────── */
.hd-confirm-overlay {
    display: none;
    position: fixed; inset: 0;
    z-index: 1080;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 16, 30, .5);
}
.hd-confirm-overlay.open { display: flex; animation: hdFade .2s ease; }
.hd-confirm-modal {
    width: 400px;
    max-width: 100%;
    background: var(--pt-card);
    border-radius: 16px;
    box-shadow: var(--pt-shadow-lg);
    overflow: hidden;
    animation: hdSlide .26s cubic-bezier(.34, 1.26, .64, 1);
}
.hd-confirm-body { padding: 28px 24px 20px; text-align: center; }
.hd-confirm-icon {
    width: 54px; height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pt-primary-lt);
    color: var(--pt-primary);
}
.hd-confirm-icon.is-danger { background: var(--pt-danger-lt); color: var(--pt-danger); }
.hd-confirm-icon svg { stroke: currentColor; }
.hd-confirm-title { margin-bottom: 8px; font-size: 16px; font-weight: 700; color: var(--pt-text); }
.hd-confirm-text  { font-size: 13px; color: var(--pt-text-sub); line-height: 1.6; overflow-wrap: anywhere; }
.hd-confirm-foot {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--pt-border);
}
.hd-confirm-foot .hd-btn { flex: 1; }


/* ──────────────────────────────────────────────────────────────────
   13. TOAST (built by showToast())
────────────────────────────────────────────────────────────────── */
.hd-toast-wrap {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}
.hd-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    padding: 11px 18px;
    border-radius: var(--pt-radius);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: #2f2b3d;
    box-shadow: var(--pt-shadow-md);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s, transform .22s;
}
.hd-toast.show { opacity: 1; transform: translateY(0); }
.hd-toast svg  { stroke: currentColor; flex-shrink: 0; }
.hd-toast-success { background: var(--pt-success); }
.hd-toast-error   { background: var(--pt-danger); }

@media (max-width: 575.98px) {
    .hd-toast-wrap { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
    .hd-toast { max-width: none; }
}


/* ──────────────────────────────────────────────────────────────────
   14. PRINT
────────────────────────────────────────────────────────────────── */
@media print {
    .print-hide,
    .hd-modal-overlay,
    .hd-confirm-overlay,
    .hd-toast-wrap { display: none !important; }
    /* cards may run across pages (a long card would otherwise jump to page 2
       and leave page 1 empty); only small units are kept together */
    .hd-card { box-shadow: none; break-inside: auto; overflow: visible; }
    .hd-table tr,
    .hd-kv,
    .hd-alert { break-inside: avoid; }
    .hd-card-header,
    h1, h2, h3, h4, h5, h6 { break-after: avoid; }
}