/* Semantic action colors also apply to dialogs attached outside the page root. */
body button[data-portal-action] {
    --portal-action-color: #8edaff;
    --portal-action-background: #132c40;
    --portal-action-border: #39728f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px !important;
    padding: 8px 14px !important;
    border: 1px solid var(--portal-action-border) !important;
    border-radius: 6px !important;
    background: var(--portal-action-background) !important;
    color: var(--portal-action-color) !important;
    font: inherit;
    font-size: var(--font-size-base) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    cursor: pointer;
    text-decoration: none;
}
body button[data-portal-action="refresh"] {
    --portal-action-color: #f3ce50;
    --portal-action-background: #2b281a;
    --portal-action-border: #77642c;
}
body button[data-portal-action="refresh"]::before {
    content: "↻";
    flex: 0 0 auto;
    font-size: 1.15em;
    line-height: 1;
}
body :is(dialog:not([open]), [hidden]) button[data-portal-action="refresh"]::before { content: none; }
body button[data-portal-action="delete"] {
    --portal-action-color: #ff9da5;
    --portal-action-background: #421e29;
    --portal-action-border: #a74f5d;
}
body button[data-portal-action="close"] {
    --portal-action-color: #ff9da5;
    --portal-action-background: #18212e;
    --portal-action-border: #6b414e;
}
body button[data-portal-action]:hover:not(:disabled) {
    filter: brightness(1.18);
    transform: none;
}
body button[data-portal-action]:focus-visible {
    outline: 2px solid var(--portal-action-color);
    outline-offset: 3px;
}
body button[data-portal-action]:disabled {
    opacity: .5;
    cursor: default;
    filter: none;
}
.dashboard-refresh[data-portal-action] .dashboard-refresh-icon { display: none; }

/* Only compact information in the page heading uses the shared green badge. */
body .portal-info {
    --portal-state-color: #42ddb0;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 38px !important;
    max-width: 100%;
    margin: 0;
    padding: 8px 12px !important;
    border: 1px solid color-mix(in srgb, var(--portal-state-color) 42%, #223247) !important;
    border-radius: 6px !important;
    background: color-mix(in srgb, var(--portal-state-color) 8%, #0c1620) !important;
    color: var(--portal-state-color) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left;
}
body .portal-info.is-error { --portal-state-color: #ff9da5; }
body .portal-info > .portal-page-state__dot,
body .portal-info > i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    margin: 0;
    border-radius: 50%;
    background: var(--portal-state-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--portal-state-color) 35%, transparent);
}
body .portal-page-intro > .portal-info,
body .season-compass-hero > .portal-info { margin-left: auto; }
body .portal-page-tools { align-items: center; gap: 10px; }
body #planning-reload,
body #loot-catalog-reload { margin-left: auto; }
body :is(.wishlist-admin-actions, .officer-file-actions, .loot-history-admin__actions)
    > [data-portal-action="refresh"] { order: 2; }

body .portal-dialog .portal-dialog-heading {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
    min-width: 0;
    margin: 0 0 18px;
}
body .portal-dialog-heading > :not(.portal-dialog-close) { min-width: 0; }
body .portal-dialog .portal-dialog-heading h2,
body .portal-dialog .portal-dialog-heading h3 { margin-top: 0; overflow-wrap: anywhere; }
body button.portal-dialog-close[data-portal-action="close"] {
    position: static !important;
    flex: 0 0 auto;
    align-self: flex-start;
    width: auto !important;
    height: auto !important;
    min-width: 98px;
    min-height: 40px !important;
    margin: 0 0 0 auto;
    padding: 9px 15px !important;
    border-radius: 6px 22px 6px 6px !important;
    font-size: var(--font-size-base) !important;
}
body .portal-dialog-close-secondary { display: none !important; }

/* Keep tools at the right edge of their own section, not a different data scope. */
body :is(.wishlist-library-page-head, .wishlist-admin-heading, .officer-section-heading,
    .officer-season-progress__heading, .roster-admin__heading, .raid-roster-panel__heading,
    .characters-heading, .officer-sheets__heading, .storage-report__heading,
    .reroll-admin__heading, .loot-history-admin__heading, .feedback-heading) {
    gap: 14px;
}
body :is(.wishlist-library-page-actions, .guild-overview-head__actions, .wishlist-admin-actions,
    .roster-admin__heading-tools, .raid-roster-panel__tools, .officer-file-actions,
    .loot-history-admin__actions, .loot-bridge-devices__heading) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
body .officer-log-heading--tools { justify-content: flex-end; }
@media (max-width: 700px) {
    body .portal-page-intro > .portal-info,
    body .season-compass-hero > .portal-info { margin-left: 0; }
    body .portal-page-tools { justify-content: flex-start; }
    body .portal-dialog .portal-dialog-heading { gap: 10px; }
    body button.portal-dialog-close[data-portal-action="close"] {
        min-width: 88px;
        padding-inline: 11px !important;
    }
}