/* KurbanPro Premium Theme: Deep Laurel, Warm Champagne, Porcelain */
:root {
    --kp-ink: #1c211b;
    --kp-ink-2: #30372d;
    --kp-sidebar: #111810;
    --kp-sidebar-2: #1b2518;
    --kp-surface: #f5f3ed;
    --kp-surface-2: #ece8dd;
    --kp-panel: #fffdf8;
    --kp-panel-soft: #f0eadc;
    --kp-border: #ded7c6;
    --kp-border-strong: #c7b99e;
    --kp-muted: #756f62;
    --kp-muted-strong: #575041;
    --kp-brand: #2f5d46;
    --kp-brand-2: #244837;
    --kp-accent: #b9965b;
    --kp-accent-2: #8c6d3f;
    --kp-success: #2f7d52;
    --kp-info: #3b7275;
    --kp-warning: #b37a2c;
    --kp-danger: #b24a3e;
    --kp-shadow: 0 14px 34px rgba(28, 33, 27, 0.08);
    --kp-shadow-soft: 0 8px 22px rgba(28, 33, 27, 0.06);

    --bs-body-bg: var(--kp-surface);
    --bs-body-color: var(--kp-ink);
    --bs-card-bg: var(--kp-panel);
    --bs-border-color: var(--kp-border);
    --bs-primary: var(--kp-brand);
    --bs-success: var(--kp-success);
    --bs-info: var(--kp-info);
    --bs-warning: var(--kp-warning);
    --bs-danger: var(--kp-danger);
    --bs-secondary: var(--kp-muted-strong);
    --bs-link-color: var(--kp-brand);
    --bs-link-hover-color: var(--kp-brand-2);
}

body {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)),
        var(--kp-surface) !important;
    color: var(--kp-ink);
}

body.dark-theme {
    --kp-ink: #f5efe3;
    --kp-ink-2: #d6cbb6;
    --kp-sidebar: #0b110c;
    --kp-sidebar-2: #151d14;
    --kp-surface: #10150f;
    --kp-surface-2: #171e15;
    --kp-panel: #151c14;
    --kp-panel-soft: #1d271b;
    --kp-border: #2f3a2b;
    --kp-border-strong: #59614d;
    --kp-muted: #a9a18f;
    --kp-muted-strong: #d2c6ad;
    --kp-brand: #7fa17a;
    --kp-brand-2: #a5bd96;
    --kp-accent: #d1ad68;
    --kp-accent-2: #e5c783;
    --kp-success: #6aa16f;
    --kp-info: #6c9da0;
    --kp-warning: #d1a052;
    --kp-danger: #d07866;
    --kp-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
    --kp-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.24);

    --bs-body-bg: var(--kp-surface);
    --bs-body-color: var(--kp-ink);
    --bs-card-bg: var(--kp-panel);
    --bs-border-color: var(--kp-border);
    --bs-primary: var(--kp-brand);
    --bs-success: var(--kp-success);
    --bs-info: var(--kp-info);
    --bs-warning: var(--kp-warning);
    --bs-danger: var(--kp-danger);
    --bs-secondary: var(--kp-muted);
    --bs-link-color: var(--kp-accent);
    --bs-link-hover-color: var(--kp-accent-2);
}

.text-primary { color: var(--kp-brand) !important; }
.text-success { color: var(--kp-success) !important; }
.text-info { color: var(--kp-info) !important; }
.text-warning { color: var(--kp-warning) !important; }
.text-danger { color: var(--kp-danger) !important; }
.text-muted { color: var(--kp-muted) !important; }
.bg-primary { background-color: var(--kp-brand) !important; }
.bg-success { background-color: var(--kp-success) !important; }
.bg-info { background-color: var(--kp-info) !important; }
.bg-warning { background-color: var(--kp-warning) !important; }
.bg-danger { background-color: var(--kp-danger) !important; }
.border-primary { border-color: color-mix(in srgb, var(--kp-brand) 52%, transparent) !important; }
.border-success { border-color: color-mix(in srgb, var(--kp-success) 52%, transparent) !important; }
.border-warning { border-color: color-mix(in srgb, var(--kp-warning) 52%, transparent) !important; }
.border-danger { border-color: color-mix(in srgb, var(--kp-danger) 52%, transparent) !important; }

.btn-primary {
    background: var(--kp-brand) !important;
    border-color: var(--kp-brand) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--kp-brand) 24%, transparent);
}

.btn-primary:hover {
    background: var(--kp-brand-2) !important;
    border-color: var(--kp-brand-2) !important;
}

.btn-warning {
    background: var(--kp-warning) !important;
    border-color: var(--kp-warning) !important;
}

.btn-danger {
    background: var(--kp-danger) !important;
    border-color: var(--kp-danger) !important;
}

.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:active:focus {
    border-color: var(--kp-accent) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--kp-accent) 22%, transparent) !important;
}

.bg-primary-subtle {
    background-color: color-mix(in srgb, var(--kp-brand) 14%, transparent) !important;
}

.bg-success-subtle {
    background-color: color-mix(in srgb, var(--kp-success) 14%, transparent) !important;
}

.bg-warning-subtle {
    background-color: color-mix(in srgb, var(--kp-warning) 18%, transparent) !important;
}

.bg-danger-subtle {
    background-color: color-mix(in srgb, var(--kp-danger) 14%, transparent) !important;
}

.text-primary.bg-primary-subtle,
.bg-primary-subtle.text-primary { color: var(--kp-brand) !important; }
.text-success.bg-success-subtle,
.bg-success-subtle.text-success { color: var(--kp-success) !important; }
.text-warning.bg-warning-subtle,
.bg-warning-subtle.text-warning { color: var(--kp-warning) !important; }
.text-danger.bg-danger-subtle,
.bg-danger-subtle.text-danger { color: var(--kp-danger) !important; }

:root {
    --rz-primary: var(--kp-brand);
    --rz-primary-light: color-mix(in srgb, var(--kp-brand) 78%, white);
    --rz-primary-lighter: color-mix(in srgb, var(--kp-brand) 14%, transparent);
    --rz-primary-dark: var(--kp-brand-2);
    --rz-secondary: var(--kp-accent);
    --rz-info: var(--kp-info);
    --rz-success: var(--kp-success);
    --rz-warning: var(--kp-warning);
    --rz-danger: var(--kp-danger);
    --rz-text-color: var(--kp-ink);
    --rz-text-secondary-color: var(--kp-muted-strong);
    --rz-text-tertiary-color: var(--kp-muted);
    --rz-body-background-color: var(--kp-surface);
    --rz-base-background-color: var(--kp-panel);
    --rz-panel-background-color: var(--kp-panel);
    --rz-card-background-color: var(--kp-panel);
    --rz-border-color: var(--kp-border);
    --rz-border-200: var(--kp-border);
    --rz-link-color: var(--kp-brand);
}

.kpi-card.primary .kpi-icon,
.bb-kpi-card:nth-child(1) .bb-kpi-icon-wrap,
.idx-icon-blue,
.idx-icon-indigo,
.bb-header-icon,
.bb-order-badge {
    background: color-mix(in srgb, var(--kp-brand) 12%, transparent) !important;
    color: var(--kp-brand) !important;
    border-color: color-mix(in srgb, var(--kp-brand) 20%, transparent) !important;
}

.kpi-card.success .kpi-icon,
.bb-kpi-card:nth-child(2) .bb-kpi-icon-wrap,
.bb-kpi-card:nth-child(5) .bb-kpi-icon-wrap,
.idx-icon-green {
    background: color-mix(in srgb, var(--kp-success) 12%, transparent) !important;
    color: var(--kp-success) !important;
}

.bb-tag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 25px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bb-tag-badge-available {
    color: #224f3b !important;
    background: color-mix(in srgb, var(--kp-success) 14%, white) !important;
    border: 1px solid color-mix(in srgb, var(--kp-success) 28%, transparent) !important;
}

.bb-tag-badge-sold {
    color: #8c2f2f !important;
    background: color-mix(in srgb, var(--kp-danger) 12%, white) !important;
    border: 1px solid color-mix(in srgb, var(--kp-danger) 26%, transparent) !important;
}

.kp-field-input {
    width: 100%;
    min-height: 38px;
    border-radius: 8px !important;
    border: 1px solid var(--kp-border) !important;
    background: var(--kp-panel) !important;
    color: var(--kp-ink) !important;
    padding: 9px 12px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    box-shadow: inset 0 1px 2px rgba(20, 26, 20, 0.04) !important;
}

.kp-field-input:hover {
    border-color: color-mix(in srgb, var(--kp-brand) 34%, var(--kp-border)) !important;
}

.kp-field-input:focus {
    border-color: var(--kp-brand) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-brand) 18%, transparent) !important;
}

.kp-field-input::placeholder {
    color: var(--kp-muted) !important;
    opacity: 1 !important;
}

.kp-field-input.uppercase-input {
    text-transform: uppercase !important;
}

.kpi-card.warning .kpi-icon,
.bb-kpi-card:nth-child(3) .bb-kpi-icon-wrap,
.idx-icon-amber,
.idx-icon-orange {
    background: color-mix(in srgb, var(--kp-warning) 14%, transparent) !important;
    color: var(--kp-warning) !important;
}

.kpi-card.info .kpi-icon,
.bb-kpi-card:nth-child(4) .bb-kpi-icon-wrap,
.idx-icon-teal,
.idx-icon-purple {
    background: color-mix(in srgb, var(--kp-info) 12%, transparent) !important;
    color: var(--kp-info) !important;
}

.bb-kpi-card:nth-child(6) .bb-kpi-icon-wrap,
.idx-icon-rose {
    background: color-mix(in srgb, var(--kp-danger) 12%, transparent) !important;
    color: var(--kp-danger) !important;
}

.bb-kpi-icon-wrap .material-icons {
    color: currentColor !important;
}

.kpi-card.primary .kpi-value,
.bb-kpi-card:nth-child(1) .bb-kpi-value,
.idx-val-blue,
.idx-val-indigo,
.idx-val-teal,
.idx-val-purple,
.bb-title {
    color: var(--kp-brand) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.kpi-card.success .kpi-value,
.bb-kpi-card:nth-child(2) .bb-kpi-value,
.bb-kpi-card:nth-child(5) .bb-kpi-value,
.idx-val-green {
    color: var(--kp-success) !important;
}

.kpi-card.warning .kpi-value,
.bb-kpi-card:nth-child(3) .bb-kpi-value,
.idx-val-amber,
.idx-val-orange {
    color: var(--kp-warning) !important;
}

.bb-kpi-card:nth-child(4) .bb-kpi-value {
    color: var(--kp-info) !important;
}

.bb-kpi-card:nth-child(6) .bb-kpi-value,
.idx-val-rose,
.danger-text {
    color: var(--kp-danger) !important;
}

.bb-title:focus,
.bb-title:focus-visible {
    outline: none !important;
}

.idx-kpi-blue,
.idx-kpi-indigo,
.idx-kpi-purple,
.idx-kpi-teal,
.idx-kpi-green,
.idx-kpi-amber,
.idx-kpi-rose,
.idx-kpi-orange,
.bb-kpi-card,
.bb-grid-card,
.section-card,
.kpi-card,
.tile,
.panel,
.stat,
.mini-kpi {
    background: var(--kp-panel) !important;
    border-color: var(--kp-border) !important;
    box-shadow: var(--kp-shadow-soft) !important;
}

.idx-kpi-label,
.bb-kpi-label,
.kpi-label,
.t-caption,
.mini-kpi-cap,
.pay-time,
.pay-sub,
.muted,
.gr-sub {
    color: var(--kp-muted) !important;
}

.bb-add-btn,
.btn-gradient,
.btn-primary {
    background: var(--kp-brand) !important;
    border-color: var(--kp-brand) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--kp-brand) 24%, transparent) !important;
}

.bb-add-btn:hover,
.btn-gradient:hover {
    background: var(--kp-brand-2) !important;
    border-color: var(--kp-brand-2) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--kp-brand) 28%, transparent) !important;
}

.bb-price-summary,
.kb-receipt-options,
.amount-box {
    background: var(--kp-panel-soft) !important;
    border-color: color-mix(in srgb, var(--kp-accent) 28%, var(--kp-border)) !important;
}

.bb-price-divider {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kp-accent) 45%, transparent), transparent) !important;
}

.e-contextmenu-wrapper .e-menu-item:hover {
    background-color: color-mix(in srgb, var(--kp-brand) 10%, transparent) !important;
    color: var(--kp-brand) !important;
}

.e-contextmenu-wrapper .e-menu-item .e-menu-icon {
    color: var(--kp-brand) !important;
}

.bb-header-icon .material-icons,
.text-gradient,
.text-indigo {
    color: var(--kp-brand) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.mobile-selected-animal-actions,
.mobile-share-actions,
.mobile-payment-actions {
    display: none;
}

@media (max-width: 768px) {
    .mobile-selected-animal-actions {
        position: fixed;
        right: 12px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        left: 12px;
        z-index: 996;
        display: block;
        padding: 10px;
        border: 1px solid color-mix(in srgb, var(--kp-border) 86%, transparent);
        border-radius: 8px;
        background: color-mix(in srgb, var(--kp-panel) 95%, transparent);
        box-shadow: 0 18px 36px rgba(22, 26, 18, 0.2);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    body.dark-theme .mobile-selected-animal-actions {
        background: color-mix(in srgb, var(--kp-panel) 91%, transparent);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
    }

    .mobile-selected-animal-summary {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
        color: var(--kp-ink);
        font-size: 0.78rem;
        font-weight: 800;
    }

    .mobile-selected-animal-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-selected-animal-meta {
        flex: 0 0 auto;
        color: var(--kp-muted);
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .mobile-selected-animal-buttons {
        display: grid;
        grid-template-columns: 1.25fr 1fr 1fr;
        gap: 8px;
    }

    .mobile-action-button,
    .mobile-inline-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 40px;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: 8px;
        font-size: 0.78rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    .mobile-action-button .material-icons,
    .mobile-inline-action .material-icons {
        font-size: 18px;
        line-height: 1;
    }

    .mobile-action-button.primary,
    .mobile-inline-action.primary {
        background: var(--kp-brand);
        color: #fff;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--kp-brand) 22%, transparent);
    }

    .mobile-action-button.secondary,
    .mobile-inline-action.secondary {
        border-color: var(--kp-border);
        background: var(--kp-panel-soft);
        color: var(--kp-ink);
    }

    .mobile-inline-action.danger {
        border-color: color-mix(in srgb, var(--kp-danger) 22%, transparent);
        background: color-mix(in srgb, var(--kp-danger) 9%, transparent);
        color: var(--kp-danger);
    }

    .mobile-action-button:disabled,
    .mobile-inline-action:disabled {
        cursor: not-allowed;
        opacity: 0.52;
        box-shadow: none;
    }

    .mobile-share-actions,
    .mobile-payment-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 7px;
    }

    .mobile-share-actions .mobile-inline-action,
    .mobile-payment-actions .mobile-inline-action {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 0.72rem;
    }

    .bb-detail-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }

    .bb-detail-table th:nth-child(n+6),
    .bb-detail-table td:nth-child(n+6) {
        display: none !important;
    }

    .bb-detail-table th:nth-child(1),
    .bb-detail-table td:nth-child(1) {
        width: 34px !important;
    }

    .bb-detail-table th:nth-child(2),
    .bb-detail-table td:nth-child(2) {
        width: 38px !important;
    }

    .bb-detail-table th:nth-child(3),
    .bb-detail-table td:nth-child(3) {
        width: 56px !important;
    }

    .bb-detail-table th:nth-child(4),
    .bb-detail-table td:nth-child(4) {
        width: 74px !important;
    }

    .bb-detail-table th:nth-child(5),
    .bb-detail-table td:nth-child(5) {
        width: auto !important;
        white-space: normal !important;
    }

    .bb-detail-table td:nth-child(5) {
        min-width: 118px;
        overflow-wrap: anywhere;
    }

    .bb-grid-card .table-responsive:has(.bb-detail-table) {
        overflow-x: hidden;
    }
}

body.dark-theme .idx-kpi,
body.dark-theme .idx-kpi-blue,
body.dark-theme .idx-kpi-green,
body.dark-theme .idx-kpi-indigo,
body.dark-theme .idx-kpi-amber,
body.dark-theme .idx-kpi-teal,
body.dark-theme .idx-kpi-purple,
body.dark-theme .idx-kpi-rose,
body.dark-theme .idx-kpi-orange,
body.dark-theme .bb-kpi-card,
body.dark-theme .bb-grid-card,
body.dark-theme .section-card,
body.dark-theme .kpi-card,
body.dark-theme .tile,
body.dark-theme .panel,
body.dark-theme .stat,
body.dark-theme .mini-kpi {
    background: var(--kp-panel) !important;
    border-color: var(--kp-border) !important;
    box-shadow: var(--kp-shadow-soft) !important;
}

body.dark-theme .idx-kpi-blue .idx-kpi-label,
body.dark-theme .idx-kpi-green .idx-kpi-label,
body.dark-theme .idx-kpi-indigo .idx-kpi-label,
body.dark-theme .idx-kpi-amber .idx-kpi-label,
body.dark-theme .idx-kpi-teal .idx-kpi-label,
body.dark-theme .idx-kpi-purple .idx-kpi-label,
body.dark-theme .idx-kpi-rose .idx-kpi-label,
body.dark-theme .idx-kpi-orange .idx-kpi-label {
    color: var(--kp-muted-strong) !important;
}