/* Shared application primitives. Keep domain-specific layouts out of this file. */

/* ---------- Controls ---------- */

body.app-shell :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea,
    [contenteditable="true"]
) {
    min-height: var(--ui-control-height);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-text) 3%, transparent);
    transition:
        border-color var(--ui-duration-fast) ease-out,
        background-color var(--ui-duration-fast) ease-out,
        box-shadow var(--ui-duration-fast) ease-out;
}

body.app-shell :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea,
    [contenteditable="true"]
):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ui-action) 48%, var(--ui-border));
}

body.app-shell :where(input, textarea)::placeholder {
    color: var(--ui-text-faint);
    opacity: 1;
}

body.app-shell :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--ui-action);
}

body.app-shell input[type="file"]::file-selector-button {
    min-height: 2.25rem;
    margin-inline-end: 0.7rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.35rem 0.7rem;
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    font-weight: 650;
    cursor: pointer;
}

body.app-shell :where(label, legend) {
    color: var(--ui-text);
}

/* ---------- Buttons and links ---------- */

body.app-shell :where(button, [role="button"], a) {
    transition:
        color var(--ui-duration-fast) ease-out,
        border-color var(--ui-duration-fast) ease-out,
        background-color var(--ui-duration-fast) ease-out,
        opacity var(--ui-duration-fast) ease-out,
        translate var(--ui-duration-fast) var(--ui-ease);
}

body.app-shell :where(button, [role="button"]):active:not(:disabled) {
    translate: 0 1px;
}

body.app-shell :where(
    .btn-theme,
    [data-role="primary-create"],
    .bg-blue-600,
    .bg-indigo-600
) {
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius-sm) !important;
    background-color: var(--ui-action) !important;
    background-image: none !important;
    color: var(--ui-on-action) !important;
    box-shadow: none !important;
    font-weight: 700;
}

body.app-shell :where(
    .btn-theme,
    [data-role="primary-create"],
    .bg-blue-600,
    .bg-indigo-600
):hover:not(:disabled) {
    background-color: var(--ui-action-hover) !important;
}

body.app-shell :where(.bg-green-600, .bg-emerald-600, .bg-teal-600) {
    border-color: transparent !important;
    box-shadow: none !important;
}

body.app-shell :where(.bg-red-500, .bg-red-600, .bg-rose-600) {
    box-shadow: none !important;
}

body.app-shell :where(.bg-gray-200, .bg-gray-300):is(button, [role="button"]) {
    border: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

body.app-shell :where(.bg-gray-200, .bg-gray-300):is(button, [role="button"]):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ui-action) 50%, var(--ui-border)) !important;
    background: color-mix(in srgb, var(--ui-surface-muted) 84%, var(--ui-action) 16%) !important;
}

body.app-shell :where(.text-blue-600, .text-blue-700, .text-indigo-600, .text-teal-600) {
    color: var(--ui-action) !important;
}

body.app-shell :where(a, button).text-blue-600:hover,
body.app-shell :where(a, button).text-blue-700:hover {
    color: var(--ui-action-hover) !important;
}

/* ---------- Surfaces ---------- */

body.app-shell :is(.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) {
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-panel) !important;
}

body.app-shell .view > :where(.bg-white, form.bg-white),
body.app-shell #dashboard-main-card,
body.app-shell :where(.delivery-create-panel, .delivery-detail-panel) {
    border: 1px solid var(--ui-border);
}

body.app-shell .view :where(.bg-white, .bg-gray-50) :where(.bg-white, .bg-gray-50):not(button) {
    box-shadow: none !important;
}

body.app-shell :where(hr, .divide-y > :not([hidden]) ~ :not([hidden])) {
    border-color: var(--ui-border-soft) !important;
}

/* ---------- Tables and data lists ---------- */

body.app-shell .view :where(.overflow-x-auto, .table-scroll-container) {
    scrollbar-gutter: stable;
}

body.app-shell table {
    border-color: var(--ui-border-soft);
    color: var(--ui-text);
}

body.app-shell table :where(th, td) {
    border-color: var(--ui-border-soft) !important;
}

body.app-shell table th {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text-muted) !important;
    font-family: var(--ui-font-label);
    font-size: var(--ui-text-xs);
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.35;
    text-transform: none;
}

body.app-shell table tbody {
    background: var(--ui-surface) !important;
}

body.app-shell table tbody tr {
    background: transparent;
    transition: background-color var(--ui-duration-fast) ease-out;
}

body.app-shell table tbody tr:hover {
    background: color-mix(in srgb, var(--ui-action) 7%, var(--ui-surface)) !important;
}

body.app-shell table tbody tr[aria-selected="true"],
body.app-shell table tbody tr.selected,
body.app-shell table tbody tr.bg-blue-50 {
    background: color-mix(in srgb, var(--ui-action) 13%, var(--ui-surface)) !important;
}

body.app-shell :where(.sortable, [data-sort-key]) {
    cursor: pointer;
}

body.app-shell :where(.sortable, [data-sort-key]):hover {
    color: var(--ui-action) !important;
}

/* ---------- Status feedback ---------- */

body.app-shell :where(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100) {
    background: var(--ui-success-soft) !important;
}

body.app-shell :where(.text-green-600, .text-green-700, .text-green-800, .text-emerald-600, .text-emerald-700, .text-emerald-800) {
    color: var(--ui-success) !important;
}

body.app-shell :where(.border-green-200, .border-green-300, .border-emerald-200, .border-emerald-300) {
    border-color: color-mix(in srgb, var(--ui-success) 38%, transparent) !important;
}

body.app-shell :where(.bg-yellow-50, .bg-yellow-100, .bg-amber-50, .bg-amber-100, .bg-orange-50, .bg-orange-100) {
    background: var(--ui-warning-soft) !important;
}

body.app-shell :where(.text-yellow-600, .text-yellow-700, .text-yellow-800, .text-amber-600, .text-amber-700, .text-amber-800, .text-orange-600, .text-orange-700, .text-orange-800) {
    color: var(--ui-warning) !important;
}

body.app-shell :where(.border-yellow-200, .border-yellow-300, .border-amber-200, .border-amber-300, .border-orange-200) {
    border-color: color-mix(in srgb, var(--ui-warning) 40%, transparent) !important;
}

body.app-shell :where(.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100) {
    background: var(--ui-danger-soft) !important;
}

body.app-shell :where(.text-red-600, .text-red-700, .text-red-800, .text-rose-600, .text-rose-700, .text-rose-800) {
    color: var(--ui-danger) !important;
}

body.app-shell :where(.border-red-200, .border-red-300, .border-red-400, .border-rose-200, .border-rose-300) {
    border-color: color-mix(in srgb, var(--ui-danger) 42%, transparent) !important;
}

body.app-shell :where(.bg-blue-50, .bg-blue-100, .bg-cyan-50, .bg-cyan-100) {
    background: var(--ui-info-soft) !important;
}

body.app-shell :where(.border-blue-200, .border-blue-300, .border-cyan-200, .border-cyan-300) {
    border-color: color-mix(in srgb, var(--ui-info) 38%, transparent) !important;
}

body.app-shell :where(
    [class*="rounded-full"][class*="text-xs"],
    .delivery-status,
    .status-badge,
    .badge
) {
    border: 1px solid currentColor;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: none !important;
    font-family: var(--ui-font-label);
    font-weight: 700;
    letter-spacing: 0.015em;
}

/* ---------- Navigation, tabs and menus ---------- */

body.app-shell :where(.tab-button, [role="tab"], nav button) {
    box-shadow: none;
}

body.app-shell :where(.tab-button.active, [role="tab"][aria-selected="true"]) {
    border-color: var(--ui-action) !important;
    color: var(--ui-action) !important;
}

body.app-shell :where(
    #settings-dropdown,
    #notification-dropdown,
    .dropdown-menu,
    .dropdown-flyout,
    [data-dropdown]
) {
    border: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-float) !important;
}

body.app-shell :where(#settings-dropdown, #notification-dropdown, .dropdown-menu, .dropdown-flyout) button:hover {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

/* ---------- App header ---------- */

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-4);
    min-height: 4rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: 0.65rem 0.75rem;
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent) !important;
    box-shadow: var(--ui-shadow-panel);
}

.app-brand-lockup {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: 0.7rem;
    border: 0;
    padding: 0.25rem 0.35rem;
    background: transparent;
    color: var(--ui-text);
    text-align: left;
}

.app-brand-mark {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-action);
    color: var(--ui-on-action);
    font-family: var(--ui-font-label);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.app-brand-copy {
    display: grid;
    gap: 0.05rem;
    line-height: 1.15;
}

.app-brand-copy strong {
    color: var(--ui-text);
    font-size: 0.95rem;
    font-weight: 800;
}

.app-brand-copy small {
    color: var(--ui-text-muted);
    font-family: var(--ui-font-label);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-topbar-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
}

.app-topbar .theme-switcher {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    border-inline-start: 1px solid var(--ui-border-soft);
    padding-inline-start: 0.75rem;
    color: var(--ui-text-muted);
}

.app-topbar .theme-switcher::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.25rem);
    right: 0.6rem;
    width: 0.38rem;
    height: 0.38rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    pointer-events: none;
    transform: rotate(45deg);
}

.app-topbar #theme-select {
    width: clamp(3.5rem, 5vw, 5rem);
    min-height: 2.25rem;
    padding: 0 1.35rem 0 0.45rem;
    appearance: none;
    background-image: none !important;
    font-size: 0.78rem;
}

.app-topbar .view-switch-btn:not([aria-label]),
.app-topbar #settings-btn,
.app-topbar #logout-btn {
    min-height: 2rem;
    border: 0;
    border-radius: var(--ui-radius-sm);
    padding: 0.3rem 0.5rem;
    text-decoration: none;
}

.app-topbar .view-switch-btn:not([aria-label]):hover,
.app-topbar #settings-btn:hover {
    background: var(--ui-surface-muted);
}

.app-topbar #logout-btn {
    color: var(--ui-danger) !important;
}

/* Operational toolbar geometry is shared across tones; palette and hierarchy
   are split below so light themes retain their original, lighter controls. */
body.app-shell .dashboard-command-bar .header-toolbar button,
body.app-shell .app-topbar .app-topbar-actions > button,
body.app-shell .app-topbar .app-topbar-actions #settings-menu > #settings-btn,
body.app-shell .app-topbar .app-topbar-actions #notification-bell-container > #notification-bell {
    border-radius: var(--ui-radius-xs) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    text-decoration: none !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

/* Dark themes keep the high-contrast deep surface requested for dense work. */
body.app-shell[data-theme-tone="dark"] .dashboard-command-bar .header-toolbar button,
body.app-shell[data-theme-tone="dark"] .app-topbar .app-topbar-actions > button,
body.app-shell[data-theme-tone="dark"] .app-topbar .app-topbar-actions #settings-menu > #settings-btn,
body.app-shell[data-theme-tone="dark"] .app-topbar .app-topbar-actions #notification-bell-container > #notification-bell {
    border: 1px solid var(--ui-toolbar-border) !important;
    background: var(--ui-toolbar-bg) !important;
    color: var(--ui-toolbar-fg) !important;
}

body.app-shell[data-theme-tone="dark"] .dashboard-command-bar .header-toolbar button:hover:not(:disabled),
body.app-shell[data-theme-tone="dark"] .app-topbar .app-topbar-actions > button:hover:not(:disabled),
body.app-shell[data-theme-tone="dark"] .app-topbar .app-topbar-actions #settings-menu > #settings-btn:hover:not(:disabled),
body.app-shell[data-theme-tone="dark"] .app-topbar .app-topbar-actions #notification-bell-container > #notification-bell:hover:not(:disabled) {
    border-color: var(--ui-toolbar-border) !important;
    background: var(--ui-toolbar-bg-hover) !important;
    color: var(--ui-toolbar-fg) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Light dashboard actions return to the pre-redesign theme-accent buttons.
   Foreground comes from the original button role, including Sand's deliberate
   amber/dark exception, instead of being recalculated from the accent. */
body.app-shell[data-theme-tone="light"] .dashboard-command-bar .header-toolbar button {
    border: 1px solid transparent !important;
    background: var(--ui-action) !important;
}

body.app-shell[data-theme-tone="light"] .dashboard-command-bar .header-toolbar button:hover:not(:disabled) {
    border-color: transparent !important;
    background: var(--ui-action-hover) !important;
}

body.app-shell[data-theme-tone="light"] .dashboard-command-bar .header-toolbar .btn-theme {
    border-radius: var(--ui-radius-sm) !important;
}

body.app-shell[data-theme-tone="light"] .dashboard-command-bar .header-toolbar [data-action="search-dashboard"] {
    border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0 !important;
}

/* Zelda's canvas is dark, but its operational surface is the original light
   parchment. Restore the visible green/gold controls from that light style
   without re-enabling the legacy glow and pulse effects. */
body.app-shell[data-theme="zelda"][data-theme-tone="light"] .dashboard-command-bar .header-toolbar .btn-theme {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover-color)) !important;
    color: var(--btn-fg, #fff) !important;
    box-shadow: var(--ui-shadow-panel) !important;
}

body.app-shell[data-theme="zelda"][data-theme-tone="light"] .dashboard-command-bar .header-toolbar .btn-theme:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-hover-color), var(--accent-color)) !important;
    color: var(--btn-fg, #fff) !important;
    box-shadow: var(--ui-shadow-panel) !important;
}

body.app-shell[data-theme="zelda"][data-theme-tone="light"] .dashboard-command-bar .header-toolbar [data-action="search-dashboard"] {
    background: linear-gradient(45deg, var(--accent-color), var(--secondary-gold)) !important;
    color: var(--btn-fg, #fff) !important;
    box-shadow: var(--ui-shadow-panel) !important;
}

body.app-shell[data-theme="zelda"][data-theme-tone="light"] .dashboard-command-bar .header-toolbar [data-action="search-dashboard"]:hover:not(:disabled) {
    background: linear-gradient(45deg, var(--accent-hover-color), var(--secondary-gold)) !important;
    color: var(--btn-fg, #fff) !important;
}

/* Light app navigation mirrors the original hierarchy: links stay quiet,
   while announcement, cart and notification retain their distinct roles. */
body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions > .view-switch-btn:not([aria-label]),
body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions #settings-menu > #settings-btn {
    border: 0 !important;
    background: transparent !important;
    color: var(--ui-action-text) !important;
}

body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions > .view-switch-btn:not([aria-label]):hover,
body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions #settings-menu > #settings-btn:hover {
    background: transparent !important;
    color: var(--ui-action-text) !important;
    text-decoration: underline !important;
}

body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions > #logout-btn {
    border: 0 !important;
    background: transparent !important;
    color: var(--ui-danger) !important;
}

body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions > #logout-btn:hover {
    background: transparent !important;
    color: var(--ui-danger) !important;
    text-decoration: underline !important;
}

body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions > .view-switch-btn[data-view="cart"] {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-pill) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text-muted) !important;
}

body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions > .view-switch-btn[data-view="cart"]:hover {
    border-color: var(--ui-action-text) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text-muted) !important;
}

body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions > #header-announcement-btn {
    border: 1px solid color-mix(in srgb, var(--ui-border) 55%, var(--ui-info) 45%) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-info-soft) !important;
    color: var(--ui-info) !important;
}

body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions > #header-announcement-btn:hover {
    border-color: var(--ui-info) !important;
    background: var(--ui-info-soft) !important;
    color: var(--ui-info) !important;
}

body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions #notification-bell-container > #notification-bell {
    border: 0 !important;
    background: transparent !important;
    color: var(--ui-text-muted) !important;
}

body.app-shell[data-theme-tone="light"] .app-topbar .app-topbar-actions #notification-bell-container > #notification-bell:hover {
    background: transparent !important;
    color: var(--ui-text-muted) !important;
}

body.app-shell .app-topbar .app-topbar-actions #notification-bell-container > #notification-bell {
    display: inline-grid;
    min-width: 2rem;
    min-height: 2rem;
    place-items: center;
    padding: 0.25rem !important;
}

body.app-shell .dashboard-command-bar .header-toolbar .btn-theme::before,
body.app-shell .dashboard-command-bar .header-toolbar .btn-theme::after,
body.app-shell .app-topbar .app-topbar-actions > button::before,
body.app-shell .app-topbar .app-topbar-actions > button::after,
body.app-shell .app-topbar .app-topbar-actions #settings-menu > #settings-btn::before,
body.app-shell .app-topbar .app-topbar-actions #settings-menu > #settings-btn::after {
    content: none !important;
    animation: none !important;
}

/* ---------- Dialogs ---------- */

body.app-shell :where(
    #modal-container,
    #invoice-allocation-mode-modal,
    #invoice-distribution-modal,
    #budget-allocation-modal
) {
    background: var(--ui-overlay) !important;
}

body.app-shell #modal-content,
body.app-shell :where(
    #invoice-allocation-mode-modal,
    #invoice-distribution-modal,
    #budget-allocation-modal
) > .bg-white {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-float) !important;
}

body.app-shell #modal-content {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

body.app-shell :where(.close-btn, [data-action^="close-"]) {
    border-radius: var(--ui-radius-sm);
}

/* ---------- Notifications and empty states ---------- */

#notification-container {
    position: fixed;
    inset: 1rem 1rem auto auto;
    z-index: 12000;
    display: grid;
    width: min(25rem, calc(100vw - 2rem));
    gap: 0.6rem;
    pointer-events: none;
}

#notification-container > * {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-float) !important;
    pointer-events: auto;
}

body.app-shell :where(
    .empty-state,
    .delivery-empty-state,
    [data-empty-state]
) {
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: var(--ui-space-6);
    background: var(--ui-surface-muted);
    color: var(--ui-text-muted);
}

/* ---------- Loading ---------- */

body.app-shell .app-loading-view {
    gap: 1rem;
    background: var(--ui-canvas) !important;
    color: var(--ui-text);
}

body.app-shell .spinner-container {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

body.app-shell .spinner-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-action) !important;
    box-shadow: none !important;
}

.app-loading-label {
    margin: 0;
    color: var(--ui-text-muted);
    font-family: var(--ui-font-label);
    font-size: var(--ui-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* ---------- Floating tools ---------- */

body.app-shell .floating-toolbar {
    border: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-float) !important;
}

body.app-shell .floating-toolbar .toolbar-handle {
    background: transparent !important;
    color: var(--ui-text-muted) !important;
    box-shadow: none !important;
}

body.app-shell .floating-toolbar .toolbar-handle:hover {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

body.app-shell .floating-toolbar button {
    color: var(--ui-text) !important;
}

body.app-shell .floating-toolbar button:hover {
    background: var(--ui-surface-muted) !important;
}

/* The management rail further normalizes its content buttons into one neutral
   surface and one text hierarchy, without per-tool rainbow colors. */
body.app-shell #floating-management-stack .floating-toolbar {
    border-color: var(--ui-border) !important;
    border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0 !important;
    background: var(--ui-surface-raised) !important;
    box-shadow: var(--ui-shadow-panel) !important;
}

body.app-shell #floating-management-stack .floating-toolbar .toolbar-handle {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text-muted) !important;
    box-shadow: none !important;
}

body.app-shell #floating-management-stack .floating-toolbar .toolbar-handle:hover {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-action) !important;
}

body.app-shell #floating-management-stack .toolbar-content {
    gap: 0.25rem;
    padding: 0.5rem;
}

body.app-shell #floating-management-stack .toolbar-content button {
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius-xs) !important;
    padding: 0.45rem 0.65rem !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    text-align: start;
    font-size: var(--ui-text-sm) !important;
    font-weight: 600 !important;
}

body.app-shell #floating-management-stack .toolbar-content button:hover:not(:disabled) {
    border-color: var(--ui-border-soft) !important;
    background: var(--ui-surface-muted) !important;
    color: var(--ui-action) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

body.app-shell #floating-management-stack .toolbar-content button::before,
body.app-shell #floating-management-stack .toolbar-content button::after {
    content: none !important;
    animation: none !important;
}

/* ---------- Rich editor ---------- */

body.app-shell .announcement-rich-toolbar,
body.app-shell .announcement-rich-editor-body {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
}

body.app-shell .announcement-rich-toolbar :where(.ann-rt-btn, .ann-rt-select, .ann-rt-color) {
    border-color: var(--ui-border);
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

body.app-shell .announcement-rich-toolbar .ann-rt-btn:hover {
    background: color-mix(in srgb, var(--ui-action) 10%, var(--ui-surface-muted));
}