/* Icon-only actions share one stroke and a glyph scaled to the existing button. */
:root {
    --ratio-action-icon-stroke: 1.5;
    --ratio-action-icon-standard: 24px;
    --ratio-action-icon-touch: 26px;
    --ratio-action-icon-small: 22px;
    --ratio-action-icon-dialog: 20px;
    --ratio-action-icon-compact: 18px;
    --ratio-action-icon-mini: 16px;
}

/* Trash actions stay visually quiet until hover or keyboard focus signals danger. */
.trash-icon-part {
    fill: none !important;
    stroke: var(--muted) !important;
    stroke-width: var(--ratio-action-icon-stroke) !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .14s ease;
}

:is(button, a.button, summary[role="button"]):not(:disabled):is(:hover, :focus-visible) .trash-icon-part {
    stroke: var(--danger) !important;
}

:is(button, a.button, summary[role="button"]):disabled .trash-icon-part,
:is(button, a.button, summary[role="button"])[aria-disabled="true"] .trash-icon-part {
    stroke: #98a4ae !important;
}

/* Trash actions use a flat surface in every state. */
:is(button, a.button, summary[role="button"]):has(.trash-icon-part),
:is(button, a.button, summary[role="button"]):has(.trash-icon-part):is(:hover, :focus-visible, :active) {
    box-shadow: none !important;
}

/* Legacy danger icon buttons adopt the same calm default without changing their geometry. */
.icon-button-danger:has(.trash-icon-part) {
    border-color: var(--interface-border) !important;
    background: #fff !important;
    color: var(--muted) !important;
}

.icon-button-danger:has(.trash-icon-part):not(:disabled):is(:hover, :focus-visible) {
    border-color: #d8a5a5 !important;
    background: #fff7f7 !important;
    color: var(--danger) !important;
}

:is(
    .editor-topbar-action,
    .topbar-back-action,
    .mobile-menu-button,
    .preview-icon-button,
    .document-topbar-action,
    .document-topbar-icon-action,
    .section-collapse-toggle,
    .record-preview-close,
    .planning-map-refresh,
    .icon-button-danger,
    .employee-draft-delete-action,
    .certificate-download-button,
    .certificate-settings-button,
    .overlay-close,
    .feedback-report-close,
    .dashboard-action-settings,
    .dashboard-widget-remove,
    .dashboard-widget-drag,
    .dashboard-settings-close,
    .panel-collapse-button,
    .role-edit-button,
    .project-contact-remove,
    .relation-branch-delete-action,
    .company-topbar-delete,
    .searchable-combobox-clear,
    .address-autocomplete-clear
) > svg {
    flex: 0 0 var(--ratio-action-icon-size);
    width: var(--ratio-action-icon-size) !important;
    height: var(--ratio-action-icon-size) !important;
    stroke-width: var(--ratio-action-icon-stroke) !important;
}

/* Explicit shape widths in older SVGs must not make one action appear heavier. */
:is(
    .editor-topbar-action,
    .topbar-back-action,
    .mobile-menu-button,
    .preview-icon-button,
    .document-topbar-action,
    .document-topbar-icon-action,
    .section-collapse-toggle,
    .record-preview-close,
    .planning-map-refresh,
    .icon-button-danger,
    .employee-draft-delete-action,
    .certificate-download-button,
    .certificate-settings-button,
    .overlay-close,
    .feedback-report-close,
    .dashboard-action-settings,
    .dashboard-widget-remove,
    .dashboard-widget-drag,
    .dashboard-settings-close,
    .panel-collapse-button,
    .role-edit-button,
    .project-contact-remove,
    .relation-branch-delete-action,
    .company-topbar-delete,
    .searchable-combobox-clear,
    .address-autocomplete-clear
) > svg :is(path, circle, rect, line, polyline, polygon, ellipse) {
    stroke-width: var(--ratio-action-icon-stroke) !important;
}

/* A 40px action uses a 24px symbol; smaller actions keep the same visual ratio. */
:is(
    .editor-topbar-action,
    .topbar-back-action,
    .preview-icon-button,
    .document-topbar-action,
    .document-topbar-icon-action,
    .section-collapse-toggle,
    .record-preview-close,
    .planning-map-refresh,
    .employee-draft-delete-action,
    .relation-branch-delete-action,
    .company-topbar-delete
) { --ratio-action-icon-size: var(--ratio-action-icon-standard); }

.mobile-menu-button { --ratio-action-icon-size: var(--ratio-action-icon-touch); }
:is(.icon-button-danger, .certificate-download-button, .certificate-settings-button, .feedback-report-close) { --ratio-action-icon-size: var(--ratio-action-icon-small); }
:is(.overlay-close, .dashboard-action-settings, .dashboard-widget-remove, .dashboard-widget-drag, .dashboard-settings-close, .project-contact-remove) { --ratio-action-icon-size: var(--ratio-action-icon-dialog); }
:is(.compact-icon-action, .searchable-combobox-clear, .address-autocomplete-clear, .role-edit-button) { --ratio-action-icon-size: var(--ratio-action-icon-compact); }
.panel-collapse-button { --ratio-action-icon-size: var(--ratio-action-icon-mini); }

/* Toolbars, editors, and feature buttons retain their local size but not a heavier pen. */
:is(button, a.button, summary[role="button"]) svg,
:is(button, a.button, summary[role="button"]) svg :is(path, circle, rect, line, polyline, polygon, ellipse) {
    stroke-width: var(--ratio-action-icon-stroke) !important;
}

/* Labelled actions and navigation keep their smaller symbols but use the same line weight. */
:is(
    .document-menu-action,
    .navigation-link,
    .segmented-navigation > button,
    .segmented-navigation > a,
    .page-help-trigger,
    .feedback-report-trigger,
    .sidebar-link,
    .sidebar-group-button,
    .sidebar-ria,
    .dashboard-settings-button,
    .personnel-report-button,
    .staff-map-select,
    .print-margin-reset,
    .data-exchange-help-trigger,
    .personal-menu-summary-link,
    .information-tooltip-trigger,
    .ledger-topbar-action,
    [data-open-delivery-preview],
    [data-print-delivery-preview],
    [data-download-delivery-preview],
    .button:has(> .editor-action-icon)
) svg,
:is(
    .document-menu-action,
    .navigation-link,
    .segmented-navigation > button,
    .segmented-navigation > a,
    .page-help-trigger,
    .feedback-report-trigger,
    .sidebar-link,
    .sidebar-group-button,
    .sidebar-ria,
    .dashboard-settings-button,
    .personnel-report-button,
    .staff-map-select,
    .print-margin-reset,
    .data-exchange-help-trigger,
    .personal-menu-summary-link,
    .information-tooltip-trigger,
    .ledger-topbar-action,
    [data-open-delivery-preview],
    [data-print-delivery-preview],
    [data-download-delivery-preview],
    .button:has(> .editor-action-icon)
) svg :is(path, circle, rect, line, polyline, polygon, ellipse) {
    stroke-width: var(--ratio-action-icon-stroke) !important;
}

/* Touch layouts retain the 44px target and the approved 26px inset symbol. */
@media (max-width: 760px) {
    :is(
        .editor-topbar-action,
        .topbar-back-action,
        .preview-icon-button,
        .document-topbar-action,
        .document-topbar-icon-action,
        .section-collapse-toggle,
        .record-preview-close,
        .planning-map-refresh,
        .employee-draft-delete-action,
        .relation-branch-delete-action,
        .company-topbar-delete
    ) { --ratio-action-icon-size: var(--ratio-action-icon-touch); }
    .editor-action-icon { width: var(--ratio-action-icon-touch); height: var(--ratio-action-icon-touch); }
    .ledger-topbar-action .ledger-topbar-icon { width: var(--ratio-action-icon-touch); height: var(--ratio-action-icon-touch); }
    .dashboard-settings-button > svg { width: var(--ratio-action-icon-touch); height: var(--ratio-action-icon-touch); }

    /* Commercial document actions retain their existing responsive contract. */
    .topbar:has(.document-topbar-actions) { flex-wrap: wrap; row-gap: 8px; }
    .topbar:has(.document-topbar-actions) .topbar-left { flex: 1 1 100%; }
    .topbar:has(.document-topbar-actions) .topbar-actions { width: 100%; justify-content: flex-end; }
    .topbar:has(.document-topbar-actions) .document-topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* Compact record headers never move primary actions away from Menu, Back and the title. */
@media (min-width: 761px) { .responsive-topbar-action { width: auto; } }
@media (max-width: 760px) {
    .topbar--compact-actions { flex-wrap: nowrap; }
    .topbar--compact-actions .topbar-left { gap: 10px; }
    .topbar--compact-actions .page-title { font-size: 18px; }
    .topbar--compact-actions .topbar-actions { flex-wrap: nowrap; }
    .topbar--compact-actions .responsive-topbar-action { flex: 0 0 44px; }
}
/* Very narrow phones trade decorative spacing and heading size for readable record context. */
@media (max-width: 480px) {
    .topbar--compact-actions { padding-inline: 12px; gap: 8px; }
    .topbar--compact-actions .topbar-left { gap: 6px; }
}
@media (max-width: 360px) { .topbar--compact-actions .page-title { font-size: 16px; } }