/* ======================================================
   SYNCFUSION OVERRIDES — targeted fixes for the
   Syncfusion Bootstrap5 theme. Load after the theme so
   these rules win without requiring extra specificity.
   ====================================================== */

/* Custom Syncfusion icon font */
@font-face {
    font-family: 'Default';
    font-weight: normal;
    font-style: normal;
}

[class^="sf-icon-"],
[class*=" sf-icon-"] {
    font-family: 'Default' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sf-icon-shopping-cart_01-:before {
    content: "\e710";
}

.sf-icon-check:before {
    content: "\e715";
}

/* Stepper background — ID selector beats Syncfusion's class selectors */
#linear-stepper {
    background: var(--primary-bg-color);
    border-radius: var(--radius-md);
    width: 100%;
}

/* Syncfusion uses box-shadow: 0 0 0 Npx #fff as a "gap ring" around step circles.
   On a white page this is invisible; on our colored background it shows as a white halo.
   Mirrors the exact Syncfusion selectors + !important so load order wins. */
.e-stepper .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
.e-stepper .e-step-container:not(.e-step-focus).e-step-completed .e-step,
.e-stepper.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
    box-shadow: 0 0 0 8px var(--primary-bg-color) !important;
}

.e-stepper:not(.e-steps-focus) .e-step-selected .e-step {
    box-shadow: 0 0 0 2px var(--primary-bg-color), 0 0 0 4px #0d6efd, 0 0 0 8px var(--primary-bg-color) !important;
}

/* SfDataForm (#MyForm) — ID selector beats Syncfusion's class selectors */
#MyForm {
    background: var(--primary-bg-color);
    border-radius: var(--radius-md);
    padding: 15px;
    border: 1px solid var(--color-border);
}

/* ListView template — Syncfusion uses .e-listview .e-list-template (two-class specificity) */
.e-list-template {
    background: var(--primary-bg-color) !important;
    border-radius: var(--radius-md);
    padding: 10px;
}

/* Card backgrounds inside .clickable-card — same specificity as Syncfusion, wins by load order */
.clickable-card .e-card-header,
.clickable-card .e-card-content {
    background: var(--primary-bg-color);
}

/* .e-card:hover sets background-color:#fff; preserve our background and add lift effect */
.e-card.clickable-card:hover {
    background-color: var(--primary-bg-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* .e-list-item.e-active sets color:#fff on the ancestor, which inherits into card
   template content. Setting color directly on card elements beats CSS inheritance. */
.e-listview .e-list-item .clickable-card,
.e-listview .e-list-item .e-card-header,
.e-listview .e-list-item .e-card-content,
.e-listview .e-list-item .e-card-footer {
    color: var(--color-text);
}

.e-listview .e-list-item .card-title-link {
    color: var(--color-primary);
}

.e-listview .e-list-item .card-title-link:hover {
    color: var(--color-primary-dark);
}

.e-listview .e-list-header {
    font-size: var(--text-lg);
}

/* Syncfusion numeric/date inputs — force full width */
.sf-numerictextbox,
.sf-daterangepicker,
.clickable-card .sf-datepicker,
.clickable-card .sf-numerictextbox {
    width: 100% !important;
    background: var(--primary-bg-color) !important;
}

/* Daterangepicker mobile: collapse to single-month view */
@media (max-width: 768px) {
    body .e-daterangepicker.e-popup {
        width: 90% !important;
        max-width: 340px !important;
        max-height: 90vh !important;
        box-sizing: border-box;
        overflow-y: auto !important;
        overflow-x: hidden;
        top: 5% !important;
        left: 5% !important;
        right: 5% !important;
        margin: auto !important;
    }

    body .e-daterangepicker .e-right-container {
        display: none !important;
    }

    body .e-daterangepicker .e-left-container,
    body .e-daterangepicker .e-left-container .e-calendar {
        width: 100% !important;
    }

    body .e-daterangepicker .e-footer {
        position: sticky;
        bottom: 0;
        background-color: var(--color-surface);
        z-index: 10;
        padding: var(--space-2) 0;
    }

    body .e-daterangepicker .e-calendar {
        max-width: 100%;
        box-sizing: border-box;
    }

    body .e-dropdownbase {
        display: block;
        height: 100% !important;
        min-height: 36px;
        position: relative;
        width: 100%;
        margin-left: var(--space-4);
        max-width: 100% !important;
        max-height: 100% !important;
    }
}

/* Toast (ShowMessageComponent) — icon alignment and severity colors */
.bootstrap5 .e-toast-icon.e-laura.e-icons,
.bootstrap5-dark .e-toast-icon.e-laura.e-icons {
    margin-top: 13px;
    margin-right: 14px;
}

.bootstrap5 .e-toast-container .e-toast .e-toast-icon,
.bootstrap5-dark .e-toast-container .e-toast .e-toast-icon {
    position: relative;
}

.bootstrap5 .e-toast-container .e-toast .e-toast-message,
.bootstrap5-dark .e-toast-container .e-toast .e-toast-message {
    padding-left: 10px;
}

.bootstrap5 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-title:first-child,
.bootstrap5-dark .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-title:first-child {
    padding-left: 12px;
}

.toast-neutral {
    background-color: var(--color-surface-alt) !important;
    color: #212529 !important;
    border: 1px solid var(--color-border);
}

.e-toast .e-toast-icon {
    font-size: 24px !important;
}

.icon-error .e-toast-icon {
    color: #dc3545 !important;
}

.icon-warning .e-toast-icon {
    color: #ffc107 !important;
}

.icon-success .e-toast-icon {
    color: #198754 !important;
}

.icon-info .e-toast-icon {
    color: #0dcaf0 !important;
}