:root {
    --primary: #34C759 !important;
    --font-sans: 'Inter', sans-serif !important;
    --default-font-family: 'Inter', sans-serif !important;
}

.dark {
    --primary: #34C759 !important;
}

/* Optional: if you want to override the tailwind primary color variable directly for components that use it */
@layer theme {
    :root {
        --color-primary: #34C759 !important;
    }
}

#content {
    background-color: #f3f7fa;
}




.channel-stats-bg {
    background-image: url(../media/images/2600x1600/bg-3.png);
}

.\[background-position\:-2rem_-2rem\] {
    background-position: -2rem -2rem;
}

.bg-\[length\:85\%\] {
    background-size: 85%;
}

.rtl\:[background-position\:-4rem_-4rem] {
    background-position: -4rem -4rem;
}

.text-foreground {
    color: var(--foreground);
}

.fill-green-50 {
    fill: var(--color-green-50)
}

.fill-green-100 {
    fill: var(--color-green-100)
}

.fill-muted\/30 {
    fill: var(--muted)
}

@supports (color: color-mix(in lab, red, red)) {
    .fill-muted\/30 {
        fill: color-mix(in oklab, var(--muted)30%, transparent)
    }
}

.fill-primary\/5 {
    fill: var(--primary)
}

@supports (color: color-mix(in lab, red, red)) {
    .fill-primary\/5 {
        fill: color-mix(in oklab, var(--primary)5%, transparent)
    }
}

.fill-violet-50 {
    fill: var(--color-violet-50)
}

.fill-violet-100 {
    fill: var(--color-violet-100)
}

.fill-yellow-100 {
    fill: var(--color-yellow-100)
}

.text-violet-600 {
    color: var(--color-violet-600)
}

.stroke-border {
    stroke: var(--border)
}

.stroke-destructive\/10 {
    stroke: var(--destructive)
}

@supports (color: color-mix(in lab, red, red)) {
    .stroke-destructive\/10 {
        stroke: color-mix(in oklab, var(--destructive)10%, transparent)
    }
}

.stroke-green-200 {
    stroke: var(--color-green-200)
}

.stroke-input {
    stroke: var(--input)
}

.stroke-primary\/10 {
    stroke: var(--primary)
}

@supports (color: color-mix(in lab, red, red)) {
    .stroke-primary\/10 {
        stroke: color-mix(in oklab, var(--primary)10%, transparent)
    }
}

.stroke-violet-100 {
    stroke: var(--color-violet-100)
}

.stroke-violet-200 {
    stroke: var(--color-violet-200)
}

.stroke-yellow-100 {
    stroke: var(--color-yellow-100)
}

.stroke-yellow-200 {
    stroke: var(--color-yellow-200)
}



.fill-blue\/5 {
    fill: var(--blue)
}

@supports (color: color-mix(in lab, red, red)) {
    .fill-blue\/5 {
        fill: color-mix(in oklab, var(--blue)5%, transparent)
    }
}

.fill-blue-50 {
    fill: var(--color-blue-50)
}

.fill-blue-100 {
    fill: var(--color-blue-100)
}

.fill-blue-200 {
    fill: var(--color-blue-200)
}

.stroke-blue-50 {
    stroke: var(--color-blue-50)
}

.stroke-blue-100 {
    stroke: var(--color-blue-100)
}

.stroke-blue-200 {
    stroke: var(--color-blue-200)
}

.stroke-blue-50 {
    stroke: var(--color-blue-50)
}


.donations-chart-select {
    border: 1px solid oklch(94% 0.004 286.32) !important;
    padding: 0.5rem !important;
}

.kt-badge {
    height: calc(var(--spacing) * 6);
    min-width: calc(var(--spacing) * 6);
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(var(--radius) - 2px);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    padding-inline: .45rem;
}

.kt-badge.kt-badge-primary {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-100);
    background-color: var(--color-blue-50);
    color: var(--color-blue-700)
}

.kt-badge-outline {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--muted);
    color: var(--secondary-foreground)
}

.kt-badge-outline.kt-badge-approved {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-100);
    background-color: var(--color-green-50);
    color: var(--color-green-700)
}

.kt-badge-outline.kt-badge-pending {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-100);
    background-color: var(--color-yellow-50);
    color: var(--color-yellow-700)
}


.kt-badge-outline.kt-badge-rejected {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-100);
    background-color: var(--color-red-50);
    color: var(--color-red-700)
}

textarea {
    min-height: 10rem !important;
}

.direction-ltr {
    direction: ltr !important;
}

.kt-progress-success {
    .kt-progress-indicator {
        background-color: oklch(0.75 0.15 56.35);
    }
}

.direction-rtl {
    direction: rtl !important;
}

.direction-ltr {
    direction: ltr !important;
}

.kt-badge-outline.kt-badge-payment-method-cmi {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-violet-100);
    background-color: var(--color-violet-50);
    color: var(--color-violet-700)
}

.kt-badge-outline.kt-badge-payment-method-bank {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-100);
    background-color: var(--color-blue-50);
    color: var(--color-blue-700)
}

#editor {
    min-height: 150px;
}

.ql-editor {
    min-height: 150px;
}

.export-btn:hover {
    background-color: var(--color-green-50);
    color: var(--color-green-700);
    border-color: var(--color-green-100);
}

.export-btn {
    background-color: var(--color-green-100);
    color: var(--color-green-700);
    border-color: var(--color-green-100);
}

.export-pdf-btn:hover {
    background-color: var(--color-red-50);
    color: var(--color-red-700);
    border-color: var(--color-red-100);
}

.export-pdf-btn {
    background-color: var(--color-red-100);
    color: var(--color-red-700);
    border-color: var(--color-red-100);
}

.kt-badge-warning {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-yellow-100);
    background-color: var(--color-yellow-50);
    color: var(--color-yellow-700)
}

.kt-badge-success {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-100);
    background-color: var(--color-green-50);
    color: var(--color-green-700)
}

.kt-badge-primary {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-blue-100);
    background-color: var(--color-blue-50);
    color: var(--color-blue-700)
}

.kt-badge-destructive {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-100);
    background-color: var(--color-red-50);
    color: var(--color-red-700)
}

.kt-badge-info {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-violet-100);
    background-color: var(--color-violet-50);
    color: var(--color-violet-700)
}

/* Extended Spacing Utilities (7 & 8) */
/* Padding */
.p-7 { padding: 1.75rem !important; }
.pt-7 { padding-top: 1.75rem !important; }
.pb-7 { padding-bottom: 1.75rem !important; }
.pl-7 { padding-left: 1.75rem !important; }
.pr-7 { padding-right: 1.75rem !important; }
.ps-7 { padding-inline-start: 1.75rem !important; }
.pe-7 { padding-inline-end: 1.75rem !important; }
.px-7 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
.py-7 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }

.p-8 { padding: 2rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.pl-8 { padding-left: 2rem !important; }
.pr-8 { padding-right: 2rem !important; }
.ps-8 { padding-inline-start: 2rem !important; }
.pe-8 { padding-inline-end: 2rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* Margin */
.m-7 { margin: 1.75rem !important; }
.mt-7 { margin-top: 1.75rem !important; }
.mb-7 { margin-bottom: 1.75rem !important; }
.ml-7 { margin-left: 1.75rem !important; }
.mr-7 { margin-right: 1.75rem !important; }
.ms-7 { margin-inline-start: 1.75rem !important; }
.me-7 { margin-inline-end: 1.75rem !important; }
.mx-7 { margin-left: 1.75rem !important; margin-right: 1.75rem !important; }
.my-7 { margin-top: 1.75rem !important; margin-bottom: 1.75rem !important; }

.m-8 { margin: 2rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.ml-8 { margin-left: 2rem !important; }
.mr-8 { margin-right: 2rem !important; }
.ms-8 { margin-inline-start: 2rem !important; }
.me-8 { margin-inline-end: 2rem !important; }
.mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; }
.my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }

/* Gap */
.gap-7 { gap: 1.75rem !important; }
.gap-x-7 { column-gap: 1.75rem !important; }
.gap-y-7 { row-gap: 1.75rem !important; }

.gap-8 { gap: 2rem !important; }
.gap-x-8 { column-gap: 2rem !important; }
.gap-y-8 { row-gap: 2rem !important; }

/* Insets */
.top-7 { top: 1.75rem !important; }
.bottom-7 { bottom: 1.75rem !important; }
.left-7 { left: 1.75rem !important; }
.right-7 { right: 1.75rem !important; }
.start-7 { inset-inline-start: 1.75rem !important; }
.end-7 { inset-inline-end: 1.75rem !important; }

.top-8 { top: 2rem !important; }
.bottom-8 { bottom: 2rem !important; }
.left-8 { left: 2rem !important; }
.right-8 { right: 2rem !important; }
.start-8 { inset-inline-start: 2rem !important; }
.end-8 { inset-inline-end: 2rem !important; }