/*
 * DistributorFlow application theme.
 * Change the palette here; application pages and Bootstrap classes use these tokens.
 * --df-primary controls the brand. Supported browsers derive its shades below.
 */
:root {
    --df-primary: #008e70;
    --df-on-primary: #ffffff;
    --df-surface: #ffffff;
    --df-text: #334155;
    --df-muted: #64748b;
    --df-success: #168452;
    --df-danger: #dc3545;
    --df-warning: #d99208;
    --df-info: #19768a;
    --df-secondary: #607569;
    --df-success-soft: #eaf7ee;
    --df-danger-soft: #fff1f2;
    --df-warning-soft: #fff8e9;
    --df-info-soft: #eef8fa;
    --df-info-light: #7abfcf;
    --df-warning-ink: #80561c;
    --df-danger-ink: #a12633;
    --df-warning-border: #ecd3a0;
    --df-danger-border: #f0bfc5;

    /* Fallback shades for browsers without color-mix(). */
    --df-primary-hover: #00785e;
    --df-primary-active: #00634e;
    --df-primary-dark: #075443;
    --df-primary-soft: #e9f5ee;
    --df-primary-tint: #f5fbf7;
    --df-primary-mint: #d8eee1;
    --df-primary-border: #b8d8c6;
    --df-primary-light: #8dcbb4;
    --df-map-pin-pending: #9fceb9;
    --df-map-pin-border: #7eaf98;
    --df-focus-ring: rgba(0, 142, 112, .16);
    --df-border: #dce7e1;
    --df-surface-muted: #f7faf8;
    --df-page-background: #f5f8f6;
    --df-heading: var(--df-primary-dark);
    --df-header-background: var(--df-primary-soft);
    --df-header-color: var(--df-heading);
    --df-footer-background: var(--df-surface-muted);
    --df-footer-color: var(--df-text);
    --df-table-header-background: var(--df-primary);
    --df-table-header-color: var(--df-on-primary);
    --df-table-header-border: var(--df-primary-dark);
    --df-table-stripe: var(--df-primary-tint);
    --df-table-hover: var(--df-primary-soft);

    /* Bootstrap 4, newer Bootstrap utilities, and existing Create Order styles. */
    --primary: var(--df-primary);
    --success: var(--df-success);
    --danger: var(--df-danger);
    --warning: var(--df-warning);
    --info: var(--df-info);
    --secondary: var(--df-secondary);
    --bs-primary: var(--df-primary);
    --bs-link-color: var(--df-primary);
    --bs-link-hover-color: var(--df-primary-hover);
    --bs-body-color: var(--df-text);
    --bs-border-color: var(--df-border);
    --create-order-green: var(--df-primary);
    --create-order-ink: var(--df-primary-dark);
    --create-order-mint: var(--df-primary-mint);
    --create-order-tint: var(--df-primary-tint);
    --create-order-border: var(--df-primary-border);
    --create-order-focus: var(--df-focus-ring);
}

@supports (color: color-mix(in srgb, black, white)) {
    :root {
        --df-primary-hover: color-mix(in srgb, var(--df-primary) 85%, black);
        --df-primary-active: color-mix(in srgb, var(--df-primary) 70%, black);
        --df-primary-dark: color-mix(in srgb, var(--df-primary) 52%, #0e1512);
        --df-primary-soft: color-mix(in srgb, var(--df-primary) 7%, var(--df-surface));
        --df-primary-tint: color-mix(in srgb, var(--df-primary) 3%, var(--df-surface));
        --df-primary-mint: color-mix(in srgb, var(--df-primary) 14%, #fafff5);
        --df-primary-border: color-mix(in srgb, var(--df-primary) 24%, #f2efe3);
        --df-primary-light: color-mix(in srgb, var(--df-primary) 45%, #fffff6);
        --df-map-pin-pending: color-mix(in srgb, var(--df-primary) 36%, #f9f2e2);
        --df-map-pin-border: color-mix(in srgb, var(--df-primary) 46%, #e9cbba);
        --df-focus-ring: color-mix(in srgb, var(--df-primary) 16%, transparent);
        --df-border: color-mix(in srgb, var(--df-primary) 12%, #f5f4ef);
        --df-surface-muted: color-mix(in srgb, var(--df-primary) 2%, var(--df-surface));
        --df-page-background: color-mix(in srgb, var(--df-primary) 3%, #fafbf9);
        --df-success-soft: color-mix(in srgb, var(--df-success) 7%, var(--df-surface));
        --df-danger-soft: color-mix(in srgb, var(--df-danger) 7%, var(--df-surface));
        --df-warning-soft: color-mix(in srgb, var(--df-warning) 8%, var(--df-surface));
        --df-info-soft: color-mix(in srgb, var(--df-info) 7%, var(--df-surface));
        --df-info-light: color-mix(in srgb, var(--df-info) 45%, var(--df-surface));
        --df-warning-ink: color-mix(in srgb, var(--df-warning) 55%, #201a0d);
        --df-danger-ink: color-mix(in srgb, var(--df-danger) 65%, #240a10);
        --df-warning-border: color-mix(in srgb, var(--df-warning) 30%, var(--df-surface));
        --df-danger-border: color-mix(in srgb, var(--df-danger) 30%, var(--df-surface));
    }
}

/* App scope also covers dialogs moved to <body> by third-party controls. */
body.df-theme { color: var(--df-text); background-color: var(--df-page-background); }
body.df-theme .df-app-shell .df-app-main { background: var(--df-page-background); }
body.df-theme a { color: var(--df-primary); }
body.df-theme a:hover { color: var(--df-primary-hover); }
body.df-theme :is(h1, h2, h3, h4, h5, h6) { color: var(--df-heading); }
body.df-theme :is(.bg-primary, .bg-c-blue, .bg-c-green, .bg-success, .bg-danger, .bg-info, .bg-warning, .modal-header[style*="background"], .card-header[style*="background"]) :is(h1, h2, h3, h4, h5, h6),
body.df-theme .order-card :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* Bootstrap-compatible actions: existing markup automatically uses the palette. */
body.df-theme :is(.btn-primary, .btn-grd-primary, .btn-info, .btn-grd-info) {
    color: var(--df-on-primary) !important;
    border-color: var(--df-primary) !important;
    background: var(--df-primary) !important;
    background-image: none !important;
}
body.df-theme :is(.btn-primary, .btn-grd-primary, .btn-info, .btn-grd-info):is(:hover, :focus) {
    color: var(--df-on-primary) !important;
    border-color: var(--df-primary-hover) !important;
    background: var(--df-primary-hover) !important;
}
body.df-theme :is(.btn-primary, .btn-grd-primary, .btn-info, .btn-grd-info):is(:active, .active),
body.df-theme .show > .btn-primary.dropdown-toggle {
    border-color: var(--df-primary-active) !important;
    background: var(--df-primary-active) !important;
}
body.df-theme :is(.btn-primary, .btn-grd-primary, .btn-info, .btn-grd-info):is(:disabled, .disabled) {
    color: var(--df-on-primary) !important;
    border-color: var(--df-primary) !important;
    background: var(--df-primary) !important;
}
body.df-theme :is(.btn-outline-primary, .btn-outline-info) {
    color: var(--df-primary) !important;
    border-color: var(--df-primary-border) !important;
    background: transparent !important;
}
body.df-theme :is(.btn-outline-primary, .btn-outline-info):is(:hover, :focus, :active, .active) {
    color: var(--df-on-primary) !important;
    border-color: var(--df-primary) !important;
    background: var(--df-primary) !important;
}
body.df-theme :is(.btn-outline-primary, .btn-outline-info):is(:disabled, .disabled) {
    color: var(--df-primary) !important;
    border-color: var(--df-primary-border) !important;
    background: transparent !important;
}
body.df-theme .btn-dark { background: var(--df-primary-dark) !important; border-color: var(--df-primary-dark) !important; color: var(--df-on-primary) !important; }
body.df-theme .btn-dark:not(:disabled):not(.disabled):is(:hover, :focus) { background: var(--df-primary) !important; border-color: var(--df-primary) !important; }
body.df-theme .btn-light { background: var(--df-primary-tint); border-color: var(--df-primary-border); color: var(--df-primary-dark); }
body.df-theme .btn-light:not(:disabled):not(.disabled):is(:hover, :focus) { background: var(--df-primary-mint); border-color: var(--df-primary-light); color: var(--df-primary-dark); }
body.df-theme :is(.sweet-alert button.confirm, .swal2-confirm, .wizard > .actions a) { background: var(--df-primary) !important; border-color: var(--df-primary) !important; color: var(--df-on-primary) !important; }
body.df-theme .btn-primary.btn-mat::before { background: var(--df-primary-active); }
body.df-theme .btn-link { color: var(--df-primary); }
body.df-theme :is(.btn-primary, .btn-info) .text-primary { color: inherit !important; }
body.df-theme :is(.btn-primary, .btn-outline-primary, .btn-info, .btn-outline-info, .btn-grd-primary):focus {
    box-shadow: 0 0 0 .2rem var(--df-focus-ring) !important;
}
body.df-theme :is(.text-primary, .text-c-blue, .text-blue, .btn-link) { color: var(--df-primary) !important; }
body.df-theme :is(.bg-primary, .bg-c-blue, .bg-primary-color, .label-primary, .badge-primary) {
    background: var(--df-primary) !important;
    color: var(--df-on-primary) !important;
}
body.df-theme .border-primary { border-color: var(--df-primary) !important; }
body.df-theme .bg-light { background-color: var(--df-surface-muted) !important; }
body.df-theme .text-muted { color: var(--df-muted) !important; }
body.df-theme .alert-primary { background: var(--df-primary-soft); border-color: var(--df-primary-border); color: var(--df-primary-dark); }
body.df-theme :is(.btn-success, .btn-grd-success) { background: var(--df-success) !important; border-color: var(--df-success) !important; color: var(--df-on-primary) !important; }
body.df-theme :is(.btn-danger, .btn-grd-danger) { background: var(--df-danger) !important; border-color: var(--df-danger) !important; color: var(--df-on-primary) !important; }
body.df-theme :is(.btn-warning, .btn-grd-warning) { background: var(--df-warning) !important; border-color: var(--df-warning) !important; color: #1f241f !important; }
body.df-theme .btn-secondary { background: var(--df-secondary) !important; border-color: var(--df-secondary) !important; color: var(--df-on-primary) !important; }
body.df-theme :is(.btn-success, .btn-grd-success, .btn-danger, .btn-grd-danger, .btn-warning, .btn-grd-warning, .btn-secondary):not(:disabled):not(.disabled):is(:hover, :focus) { filter: brightness(.92); }
body.df-theme :is(.text-success, .text-c-green) { color: var(--df-success) !important; }
body.df-theme :is(.text-danger, .text-c-pink) { color: var(--df-danger) !important; }
body.df-theme :is(.text-warning, .text-c-yellow) { color: var(--df-warning) !important; }
body.df-theme .text-info { color: var(--df-info) !important; }
body.df-theme :is(.bg-success, .label-success, .badge-success) { background-color: var(--df-success) !important; color: var(--df-on-primary) !important; }
body.df-theme :is(.bg-danger, .label-danger, .badge-danger) { background-color: var(--df-danger) !important; color: var(--df-on-primary) !important; }
body.df-theme :is(.bg-warning, .label-warning, .badge-warning) { background-color: var(--df-warning) !important; color: #1f241f !important; }
body.df-theme :is(.bg-info, .label-info, .badge-info) { background-color: var(--df-info) !important; color: var(--df-on-primary) !important; }
body.df-theme .btn-outline-success { color: var(--df-success); border-color: var(--df-success); }
body.df-theme .btn-outline-success:not(:disabled):not(.disabled):is(:hover, :focus, .active) { color: var(--df-on-primary); background: var(--df-success); }
body.df-theme .btn-outline-danger { color: var(--df-danger); border-color: var(--df-danger); }
body.df-theme .btn-outline-danger:not(:disabled):not(.disabled):is(:hover, :focus, .active) { color: var(--df-on-primary); background: var(--df-danger); }
body.df-theme .btn-outline-warning { color: var(--df-warning); border-color: var(--df-warning); }
body.df-theme .btn-outline-warning:not(:disabled):not(.disabled):is(:hover, :focus, .active) { color: #1f241f; background: var(--df-warning); }

/* Shared headers, panels, and table surfaces; spacing and mobile layouts stay local. */
body.df-theme :is(.record-page-header[data-record-page-header], .order-page-header, .commerce-hero) {
    background: linear-gradient(120deg, var(--df-header-background), var(--df-surface-muted) 70%, var(--df-primary-tint));
    border-color: var(--df-primary-border);
    color: var(--df-header-color);
}
body.df-theme .card { background-color: var(--df-surface); border-color: var(--df-border); }
body.df-theme .card-header,
body.df-theme .modal-header { background-color: var(--df-header-background); border-color: var(--df-border); }
body.df-theme .card-footer,
body.df-theme .modal-footer { background-color: var(--df-footer-background); border-color: var(--df-border); color: var(--df-footer-color); }
body.df-theme .app-site-footer { background: var(--df-footer-background) !important; border-color: var(--df-border) !important; color: var(--df-footer-color); }
body.df-theme .app-site-footer a { color: var(--df-primary) !important; }
body.df-theme .df-app-main table.table thead th {
    background: var(--df-table-header-background) !important;
    color: var(--df-table-header-color) !important;
    border-bottom-color: var(--df-table-header-border) !important;
}
body.df-theme .df-app-main table.table thead th :is(.text-primary, .text-c-blue, .text-blue) { color: var(--df-table-header-color) !important; }
body.df-theme .df-app-main table.table { color: var(--df-text); border-color: var(--df-border); }
body.df-theme .df-app-main table.table :is(td, th) { border-color: var(--df-border); }
body.df-theme .df-app-main .table-striped tbody tr:nth-of-type(odd) { background-color: var(--df-table-stripe); }
body.df-theme .df-app-main .table-hover tbody tr:hover { background-color: var(--df-table-hover); }
body.df-theme .df-app-main table.table tfoot,
body.df-theme .df-app-main table.table tfoot td { background-color: var(--df-footer-background); color: var(--df-footer-color); }

/* Native controls and plugins follow the same focus/selection colors. */
body.df-theme :is(.form-control, .custom-select, .input-group-text) { border-color: var(--df-border); }
body.df-theme :is(.form-control, .custom-select):not(.is-invalid):focus,
body.df-theme .select2-container--default.select2-container--focus .select2-selection,
body.df-theme .select2-container--open .select2-selection {
    border-color: var(--df-primary-light) !important;
    box-shadow: 0 0 0 .2rem var(--df-focus-ring) !important;
}
body.df-theme :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--df-primary); }
body.df-theme .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--df-primary); border-color: var(--df-primary); }
body.df-theme .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem var(--df-focus-ring); }
body.df-theme .select2-container--default .select2-results__option--highlighted[aria-selected],
body.df-theme .chosen-container .chosen-results li.highlighted,
body.df-theme .ui-autocomplete .ui-state-active { background: var(--df-primary) !important; color: var(--df-on-primary) !important; border-color: var(--df-primary); }
body.df-theme :is(.page-link, .pagination li a) { color: var(--df-primary); border-color: var(--df-border); }
body.df-theme .page-link:hover { color: var(--df-primary-dark); background: var(--df-primary-soft); border-color: var(--df-primary-border); }
body.df-theme .page-item.active .page-link,
body.df-theme .pagination > .active > :is(a, span) { color: var(--df-on-primary) !important; background: var(--df-primary) !important; border-color: var(--df-primary) !important; }
body.df-theme :is(.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active, .list-group-item.active) { color: var(--df-on-primary); background-color: var(--df-primary); border-color: var(--df-primary); }
body.df-theme .nav-tabs .nav-link.active { color: var(--df-primary); border-bottom-color: var(--df-primary); }
body.df-theme .progress-bar:not(.bg-danger):not(.bg-warning):not(.bg-success):not(.bg-info) { background-color: var(--df-primary); }