/*
   Zajednički završni sloj za Dashboard2.
   Osnovni dashboard je nastao prije sistema tema i sadrži fiksne boje za
   pojedine površine, tekstove i statuse. Ovaj sloj ih veže za --bm-*
   promjenljive aktivne teme, dok zadržava oblik i raspored svake teme.
*/
html:root[data-theme] body .d2-page {
    --d2-theme-text: var(--bm-text-primary, var(--bm-text, currentColor));
    --d2-theme-secondary: var(--bm-text-secondary, var(--bm-text-muted, currentColor));
    --d2-theme-muted: var(--bm-text-muted, var(--bm-text-secondary, currentColor));
    --d2-theme-surface: var(--bm-surface, transparent);
    --d2-theme-raised: var(--bm-surface-raised, var(--bm-surface, transparent));
    --d2-theme-border: var(--bm-border, rgba(127, 127, 127, 0.22));
    --d2-theme-border-subtle: var(--bm-border-subtle, var(--bm-border, rgba(127, 127, 127, 0.16)));
    --d2-theme-accent: var(--bm-accent, currentColor);
    --d2-theme-accent-2: var(--bm-accent-2, var(--bm-accent, currentColor));
    --d2-theme-on-accent: var(--bm-bg, #ffffff);
    --d2-theme-shadow: var(--bm-shadow-panel, var(--bm-shadow-soft, none));
    --d2-theme-success: color-mix(in srgb, var(--d2-theme-accent-2) 72%, #0f9f6c);
    --d2-theme-warning: color-mix(in srgb, var(--d2-theme-accent-2) 72%, #b7791f);
    color: var(--d2-theme-text) !important;
}

html:root[data-theme] body .d2-page :is(.d2-hero, .d2-panel, .d2-kpi-card, .d2-quick-card) {
    border-color: var(--d2-theme-border) !important;
}

html:root[data-theme] body .d2-page .d2-hero {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--d2-theme-accent) 7%, var(--d2-theme-surface)),
            color-mix(in srgb, var(--d2-theme-accent-2) 7%, var(--d2-theme-surface))) !important;
    box-shadow: var(--d2-theme-shadow) !important;
}

html:root[data-theme] body .d2-page .d2-hero::after {
    border-color: color-mix(in srgb, var(--d2-theme-accent) 28%, transparent) !important;
}

html:root[data-theme] body .d2-page :is(
    .d2-hero h1,
    .d2-panel h2,
    .d2-kpi-value,
    .d2-kpi-dual-values strong,
    .d2-panel-total strong,
    .d2-contabo-summary strong,
    .d2-nefiscal-value,
    .d2-wg-stats strong,
    .d2-certificate-alert-head > strong,
    .d2-certificate-detail-row--head,
    .d2-modal-title,
    .d2-error-state h1
) {
    color: var(--d2-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:root[data-theme] body .d2-page :is(
    .d2-hero p,
    .d2-panel-heading p,
    .d2-panel-intro,
    .d2-kpi-label,
    .d2-kpi-meta,
    .d2-kpi-dual-values small,
    .d2-kpi-state-label,
    .d2-software-name,
    .d2-software-caption,
    .d2-recent-row small,
    .d2-recent-empty,
    .d2-wg-stats span,
    .d2-wg-health-label,
    .d2-wg-meta,
    .d2-contabo-summary small,
    .d2-contabo-row,
    .d2-contabo-name strong,
    .d2-contabo-name small,
    .d2-live-status small,
    .d2-certificate-alert-title,
    .d2-certificate-alert-row,
    .d2-certificate-alert-row > small,
    .d2-certificate-detail-row,
    .d2-certificate-empty,
    .d2-error-state p
) {
    color: var(--d2-theme-secondary) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:root[data-theme] body .d2-page :is(.d2-eyebrow, .d2-recent-heading, .d2-software-arrow, .d2-panel-link) {
    color: var(--d2-theme-accent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:root[data-theme] body .d2-page .d2-certificate-alert {
    color: var(--d2-theme-secondary) !important;
    background: var(--d2-theme-raised) !important;
    border-color: var(--d2-theme-border) !important;
}

html:root[data-theme] body .d2-page .d2-certificate-alert:hover,
html:root[data-theme] body .d2-page .d2-certificate-alert:focus-visible {
    background: color-mix(in srgb, var(--d2-theme-accent) 8%, var(--d2-theme-raised)) !important;
    border-color: var(--d2-theme-accent) !important;
    box-shadow: var(--d2-theme-shadow) !important;
}

html:root[data-theme] body .d2-page .d2-certificate-alert-icon {
    color: var(--d2-theme-on-accent) !important;
    background: var(--d2-theme-accent-2) !important;
}

html:root[data-theme] body .d2-page :is(.d2-certificate-alert-row, .d2-certificate-detail-row) {
    border-color: var(--d2-theme-border-subtle) !important;
}

html:root[data-theme] body .d2-page .d2-certificate-alert-more {
    color: var(--d2-theme-warning) !important;
}

html:root[data-theme] body .d2-page :is(.d2-panel, .d2-kpi-card) {
    background: var(--d2-theme-surface) !important;
    box-shadow: var(--d2-theme-shadow) !important;
}

html:root[data-theme] body .d2-page :is(.d2-panel, .d2-kpi-card, .d2-software-card, .d2-quick-card) {
    color: var(--d2-theme-text) !important;
}

html:root[data-theme] body .d2-page :is(.d2-kpi-card:hover, .d2-quick-card:hover) {
    border-color: var(--d2-theme-accent) !important;
    box-shadow: var(--d2-theme-shadow) !important;
}

html:root[data-theme] body .d2-page :is(.d2-contabo-kpi-row, .d2-recent-row, .d2-wg-stats div) {
    color: var(--d2-theme-text) !important;
    background: var(--d2-theme-raised) !important;
    border-color: var(--d2-theme-border) !important;
}

html:root[data-theme] body .d2-page :is(.d2-recent-row:hover, .d2-software-link:hover, .d2-quick-card:hover) {
    background: color-mix(in srgb, var(--d2-theme-accent) 8%, var(--d2-theme-raised)) !important;
}

html:root[data-theme] body .d2-page :is(.d2-kpi-recent, .d2-contabo-kpi-loading, .d2-contabo-row) {
    border-color: var(--d2-theme-border) !important;
}

html:root[data-theme] body .d2-page :is(
    .d2-kpi-state-track,
    .d2-nefiscal-bar,
    .d2-wg-health-track
) {
    background: color-mix(in srgb, var(--d2-theme-secondary) 20%, transparent) !important;
}

html:root[data-theme] body .d2-page :is(.d2-kpi-state-track span, .d2-nefiscal-bar span, .d2-wg-health-track span) {
    background: linear-gradient(90deg, var(--d2-theme-accent), var(--d2-theme-accent-2)) !important;
}

html:root[data-theme] body .d2-page :is(.d2-terminal-status--online, .d2-wg-online, .d2-contabo-summary .d2-contabo-running strong, .d2-status--ok, .d2-software-ok) {
    color: var(--d2-theme-success) !important;
}

html:root[data-theme] body .d2-page :is(.d2-terminal-status--offline, .d2-status--warning, .d2-contabo-warning, .d2-software-alert, .d2-alert-badge, .d2-nefiscal-footer-icon) {
    color: var(--d2-theme-warning) !important;
}

html:root[data-theme] body .d2-page :is(.d2-software-card, .d2-quick-card) {
    background: color-mix(in srgb, var(--d2-software-accent, var(--d2-theme-accent)) 5%, var(--d2-theme-raised)) !important;
}

html:root[data-theme] body .d2-page .d2-software-card {
    border-color: color-mix(in srgb, var(--d2-software-accent, var(--d2-theme-accent)) 34%, var(--d2-theme-border)) !important;
    box-shadow: var(--d2-theme-shadow) !important;
}

html:root[data-theme] body .d2-page .d2-software-card .d2-recent-row {
    background: color-mix(in srgb, var(--d2-software-accent, var(--d2-theme-accent)) 6%, var(--d2-theme-raised)) !important;
    border-color: color-mix(in srgb, var(--d2-software-accent, var(--d2-theme-accent)) 30%, var(--d2-theme-border)) !important;
}

html:root[data-theme] body .d2-page :is(.d2-software-alert, .d2-software-ok) {
    border-color: var(--d2-theme-border) !important;
    background: color-mix(in srgb, currentColor 10%, var(--d2-theme-raised)) !important;
}

html:root[data-theme] body .d2-page .d2-alert-badge,
html:root[data-theme] body .d2-page .d2-nefiscal-footer-icon,
html:root[data-theme] body .d2-page .d2-contabo-warning > span:first-child {
    background: color-mix(in srgb, currentColor 12%, var(--d2-theme-raised)) !important;
}

html:root[data-theme] body .d2-page .d2-quick-card {
    color: var(--d2-theme-secondary) !important;
    border-color: var(--d2-theme-border) !important;
}

html:root[data-theme] body .d2-page :is(.d2-quick-card strong, .d2-quick-card small, .d2-quick-arrow) {
    color: var(--d2-theme-text) !important;
}

html:root[data-theme] body .d2-page :is(.d2-quick-card small, .d2-quick-arrow) {
    color: var(--d2-theme-muted) !important;
}

html:root[data-theme] body .d2-page .d2-button--primary {
    color: var(--d2-theme-on-accent) !important;
    background: var(--d2-theme-accent) !important;
    border-color: var(--d2-theme-accent) !important;
}

html:root[data-theme] body .d2-page .d2-button--primary:hover:not(:disabled) {
    background: var(--d2-theme-accent-2) !important;
    border-color: var(--d2-theme-accent-2) !important;
}

html:root[data-theme] body .d2-page .d2-button--ghost {
    color: var(--d2-theme-text) !important;
    background: var(--d2-theme-raised) !important;
    border-color: var(--d2-theme-border) !important;
}

html:root[data-theme] body .d2-page .d2-button--ghost:hover:not(:disabled) {
    color: var(--d2-theme-accent) !important;
    background: color-mix(in srgb, var(--d2-theme-accent) 10%, var(--d2-theme-raised)) !important;
    border-color: var(--d2-theme-accent) !important;
}

html:root[data-theme] body .d2-page .d2-modal-overlay {
    background: color-mix(in srgb, var(--bm-bg, #182030) 76%, transparent) !important;
}

html:root[data-theme] body .d2-page .d2-modal {
    color: var(--d2-theme-text) !important;
    background: var(--d2-theme-surface) !important;
    border-color: var(--d2-theme-border) !important;
    box-shadow: var(--d2-theme-shadow) !important;
}

html:root[data-theme] body .d2-page :is(.d2-modal-header, .d2-modal-footer, .d2-certificate-detail-row--head) {
    background: var(--d2-theme-raised) !important;
    border-color: var(--d2-theme-border-subtle) !important;
}

html:root[data-theme] body .d2-page .d2-modal-close {
    color: var(--d2-theme-muted) !important;
}

html:root[data-theme] body .d2-page .d2-modal-close:hover,
html:root[data-theme] body .d2-page .d2-modal-close:focus-visible {
    color: var(--d2-theme-accent) !important;
    background: color-mix(in srgb, var(--d2-theme-accent) 10%, transparent) !important;
}

html:root[data-theme] body .d2-page :is(.d2-certificate-detail-table, .d2-certificate-detail-row) {
    border-color: var(--d2-theme-border) !important;
}

html:root[data-theme] body .d2-page :is(.d2-certificate-detail-row .is-expired, .d2-certificate-status.is-expired) {
    color: color-mix(in srgb, var(--d2-theme-accent) 72%, #c05d61) !important;
}

html:root[data-theme] body .d2-page :is(.d2-certificate-detail-row .is-expiring, .d2-certificate-status.is-expiring) {
    color: var(--d2-theme-warning) !important;
}

html:root[data-theme] body .d2-page .d2-error-icon {
    color: var(--d2-theme-on-accent) !important;
    background: var(--d2-theme-accent-2) !important;
}

/* Graphite + nema posebne dashboard override-e, pa njegove akcente vežemo
   za paletu teme kao i kod ostalih novih tema. */
html:root[data-theme="graphite-plus"] body .d2-page :is(
    .d2-kpi-card.d2-tone-blue .d2-kpi-icon,
    .d2-quick-icon.d2-tone-blue
) {
    color: var(--d2-theme-on-accent) !important;
    background: var(--d2-theme-accent) !important;
}

html:root[data-theme="graphite-plus"] body .d2-page :is(
    .d2-kpi-card.d2-tone-teal .d2-kpi-icon,
    .d2-quick-icon.d2-tone-teal
) {
    color: var(--d2-theme-on-accent) !important;
    background: var(--d2-theme-accent-2) !important;
}

html:root[data-theme="graphite-plus"] body .d2-page :is(
    .d2-kpi-card.d2-tone-violet .d2-kpi-icon,
    .d2-quick-icon.d2-tone-violet
) {
    color: var(--d2-theme-on-accent) !important;
    background: color-mix(in srgb, var(--d2-theme-accent) 70%, var(--d2-theme-accent-2)) !important;
}

html:root[data-theme="graphite-plus"] body .d2-page :is(
    .d2-kpi-card.d2-tone-amber .d2-kpi-icon,
    .d2-quick-icon.d2-tone-amber
) {
    color: var(--d2-theme-on-accent) !important;
    background: color-mix(in srgb, var(--d2-theme-accent-2) 72%, #c58a31) !important;
}

html:root[data-theme="graphite-plus"] body .d2-page .d2-software-card.d2-tone-blue {
    --d2-software-accent: var(--d2-theme-accent);
}

html:root[data-theme="graphite-plus"] body .d2-page .d2-software-card.d2-tone-teal {
    --d2-software-accent: var(--d2-theme-accent-2);
}

html:root[data-theme="graphite-plus"] body .d2-page .d2-software-card.d2-tone-violet {
    --d2-software-accent: color-mix(in srgb, var(--d2-theme-accent) 70%, var(--d2-theme-accent-2));
}

html:root[data-theme="graphite-plus"] body .d2-page .d2-software-card.d2-tone-amber {
    --d2-software-accent: color-mix(in srgb, var(--d2-theme-accent-2) 72%, #c58a31);
}