/*
    Admin page-header actions: the shared look for the controls that sit to the right of an admin page title, taken
    from the Financial Intelligence header buttons (ai-assist.css .ai-action-btn): a flat 36px pill-rectangle, 12px
    radius, 1px hairline, page-colored face, brand-violet glyph, accent-soft fill on hover. No drop shadows.

    Consumers:
      - AdminDateRangePicker.razor   (Transactions, Accounts, Reports, Investments)  .admin-date-range-*
      - ManualTransactionButton.razor (Dashboard, Transactions)                      .mtx-launch   (manual-transaction.css)
      - RecurringShell.razor + area pages (Checkup launcher, Refresh)               .rc-launcher / .rc-ghost-btn (recurring-area.css)

    Tokens port the mobile theme keys: BasePageColor, BaseTextColor, DashboardMutedTextColor, PrimaryColor,
    DashboardAccentSoftColor, DashboardCardBorderColor. Dark mode follows data-bs-theme="dark" on <html>.
*/

:root {
    --ci-act-height: 36px;
    --ci-act-radius: 12px;
    --ci-act-font: "Poppins", var(--si-font-sans-serif, "Manrope"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ci-act-bg: #FFFFFF;
    --ci-act-border: hsl(calc(247.66deg + var(--ci-accent-shift, 0deg)) 100% 90.78%);
    --ci-act-text: #0B0F19;
    --ci-act-muted: #565973;
    --ci-act-accent: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --ci-act-accent-text: hsl(calc(247.74deg + var(--ci-accent-shift, 0deg)) 60.78% 50%);
    --ci-act-accent-soft: hsl(calc(246.92deg + var(--ci-accent-shift, 0deg)) 100% 94.9%);
    --ci-act-hover-border: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --ci-act-divider: hsl(calc(249.6deg + var(--ci-accent-shift, 0deg)) 75.76% 93.53%);
    --ci-act-danger: #DC2626;
    --ci-act-danger-soft: #FEE2E2;
    --ci-act-focus: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .35);
}

[data-bs-theme="dark"] {
    --ci-act-bg: #0B0F19;
    --ci-act-border: #2B3045;
    --ci-act-text: #D9DBE8;
    --ci-act-muted: #B4B7C9;
    --ci-act-accent: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --ci-act-accent-text: hsl(calc(248.15deg + var(--ci-accent-shift, 0deg)) 100% 84.12%);
    --ci-act-accent-soft: hsl(calc(250.71deg + var(--ci-accent-shift, 0deg)) 35% 15.69%);
    --ci-act-hover-border: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --ci-act-divider: #2B3045;
    --ci-act-danger: #F87171;
    --ci-act-danger-soft: rgba(248, 113, 113, .14);
    --ci-act-focus: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24% / .45);
}

/* Generic header action for Syncfusion buttons (Dashboard Refresh beside Manual Transaction). */
button.e-control.e-btn.e-lib.ci-act-btn,
button.e-control.e-btn.e-lib.ci-act-btn:focus {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: var(--ci-act-height);
    min-height: var(--ci-act-height);
    padding: 0 .9rem;
    border: 1px solid var(--ci-act-border) !important;
    border-radius: var(--ci-act-radius) !important;
    background: var(--ci-act-bg) !important;
    color: var(--ci-act-text) !important;
    font-family: var(--ci-act-font);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

button.e-control.e-btn.e-lib.ci-act-btn .e-btn-icon {
    margin: 0 !important;
    color: var(--ci-act-accent);
    font-size: .9rem;
}

button.e-control.e-btn.e-lib.ci-act-btn:not(:disabled):hover,
button.e-control.e-btn.e-lib.ci-act-btn:not(:disabled):focus-visible {
    outline: none;
    border-color: var(--ci-act-hover-border) !important;
    background: var(--ci-act-accent-soft) !important;
    color: var(--ci-act-text) !important;
    box-shadow: none !important;
}

button.e-control.e-btn.e-lib.ci-act-btn:not(:disabled):active {
    transform: scale(.97);
    box-shadow: none !important;
}

button.e-control.e-btn.e-lib.ci-act-btn:disabled {
    border-color: var(--ci-act-border) !important;
    background: var(--ci-act-bg) !important;
    color: var(--ci-act-muted) !important;
    opacity: .55;
}