/*
 * K2S shared action-button palette.
 * Loaded last so module-local legacy colors cannot reintroduce dark action buttons.
 */
body.app-shell {
    --system-button-blue: #0284c7;
    --system-button-blue-hover: #0369a1;
    --system-button-blue-active: #075985;
    --system-button-blue-border: #38bdf8;
    --system-button-shadow: none;
    --system-button-danger: #dc2626;
    --system-button-danger-hover: #b91c1c;
}

body.app-shell .page-content :is(
    button,
    input[type="button"],
    input[type="submit"],
    a.btn,
    a[class$="-btn"],
    a[class*="-btn "]
):not(:where(.btn-close, .btn-link, .logout-btn, [class*="danger"], [class*="delete"], [class*="map-"], [class*="layer-"], [class*="toggle"], [class*="icon"], [class*="leaflet-"], [class*="longdo-"], [class*="gm-"])),
body.app-shell .page-content :is(
    .report-btn,
    .report-date-preset-btn,
    .report-export-btn,
    .save-btn,
    .action-button,
    .btn-action,
    .action-btn:not(.action-delete),
    .add-btn,
    .filter-btn,
    .page-btn,
    .btn-pg
):not(:where([class*="danger"], [class*="delete"], .logout-btn)) {
    background: var(--system-button-blue) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--system-button-blue-border) !important;
    box-shadow: var(--system-button-shadow) !important;
    transform: none !important;
}

/* High-specificity legacy controls that previously forced their own dark/gray palette. */
body.app-shell .page-content .report-btn.success,
body.app-shell .page-content .report-btn.secondary,
body.app-shell .page-content .btn-secondary,
body.app-shell .page-content .btn-outline-secondary,
body.app-shell .page-content .status-date-btn,
body.app-shell .page-content #vehicle-list-collapse-toggle {
    background: var(--system-button-blue) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--system-button-blue-border) !important;
    box-shadow: var(--system-button-shadow) !important;
    transform: none !important;
}

body.app-shell:not(.dark-mode).report-surface .page-content :is(.report-btn.secondary, .btn-secondary, .btn-outline-secondary) {
    background: var(--system-button-blue) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--system-button-blue-border) !important;
}

body.app-shell .page-content #searchForm :is(.report-btn.success, .status-date-btn),
body.app-shell .page-content #searchForm :is(.report-btn.success, .status-date-btn) i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.app-shell .page-content :is(
    button,
    input[type="button"],
    input[type="submit"],
    a.btn,
    a[class$="-btn"],
    a[class*="-btn "],
    .report-btn,
    .report-date-preset-btn,
    .report-export-btn,
    .save-btn,
    .action-button,
    .btn-action,
    .action-btn,
    .add-btn,
    .filter-btn,
    .page-btn,
    .btn-pg
):not(:where(.btn-close, .btn-link, .logout-btn, [class*="danger"], [class*="delete"], [class*="map-"], [class*="layer-"], [class*="toggle"], [class*="icon"], [class*="leaflet-"], [class*="longdo-"], [class*="gm-"])):hover {
    background: var(--system-button-blue-hover) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #7dd3fc !important;
    box-shadow: var(--system-button-shadow) !important;
    transform: none !important;
}

body.app-shell .page-content :is(
    .report-date-preset-btn.active,
    .filter-btn.active,
    .page-btn.active,
    .btn-pg.active,
    button.active:not([class*="map-"]):not([class*="layer-"])
) {
    background: var(--system-button-blue-active) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #bae6fd !important;
    box-shadow: var(--system-button-shadow) !important;
    transform: none !important;
}

body.app-shell .page-content :is(
    button,
    input[type="button"],
    input[type="submit"],
    a.btn,
    a[class$="-btn"],
    a[class*="-btn "],
    .action-btn,
    .btn-action
):is([class*="danger"], [class*="delete"], .btn-danger) {
    background: var(--system-button-danger) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #ef4444 !important;
    box-shadow: var(--system-button-shadow) !important;
    transform: none !important;
}

body.app-shell .page-content button:disabled,
body.app-shell .page-content button[disabled],
body.app-shell .page-content :is(
    button:disabled,
    button[disabled],
    input:disabled,
    input[disabled],
    .btn.disabled,
    .page-btn.disabled,
    .btn-pg.disabled
) {
    background: #cbd5e1 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.72;
    cursor: not-allowed !important;
}

/* Every visible page button stays flat, including map toggles and modal controls. */
body.app-shell .page-content :is(
    button,
    input[type="button"],
    input[type="submit"],
    a.btn
) {
    box-shadow: none !important;
    transform: none !important;
}

body.app-shell .page-content :is(
    button,
    input[type="button"],
    input[type="submit"],
    a.btn,
    a[class$="-btn"],
    a[class*="-btn "]
):focus-visible {
    outline: 3px solid rgba(56, 189, 248, 0.34) !important;
    outline-offset: 2px;
}