/**
 * HA Sports — Royal Indigo Theme (single source of truth)
 * =======================================================
 * Kal color badalna ho? SIRF --has-indigo neeche change karo.
 * Dark, light, soft, row, sidebar, shadows — sab isi se derive hote hain.
 *
 * Example: --has-indigo: #6366f1;
 */
:root {
    --has-indigo: #5e52d9;

    /* Auto-derived shades — --has-indigo change = yeh khud update */
    --has-indigo-dark: color-mix(in srgb, var(--has-indigo) 78%, #000000);
    --has-indigo-light: color-mix(in srgb, var(--has-indigo) 68%, #ffffff);
    --has-indigo-soft: color-mix(in srgb, var(--has-indigo) 11%, #ffffff);
    --has-indigo-row: color-mix(in srgb, var(--has-indigo) 5.5%, #ffffff);

    /* Transparent tints (tables, borders, focus rings) */
    --has-indigo-a04: color-mix(in srgb, var(--has-indigo) 4%, transparent);
    --has-indigo-a08: color-mix(in srgb, var(--has-indigo) 8%, transparent);
    --has-indigo-a12: color-mix(in srgb, var(--has-indigo) 12%, transparent);
    --has-indigo-a14: color-mix(in srgb, var(--has-indigo) 14%, transparent);
    --has-indigo-a18: color-mix(in srgb, var(--has-indigo) 18%, transparent);
    --has-indigo-a22: color-mix(in srgb, var(--has-indigo) 22%, transparent);
    --has-indigo-a28: color-mix(in srgb, var(--has-indigo) 28%, transparent);
    --has-indigo-a35: color-mix(in srgb, var(--has-indigo) 35%, transparent);
    --has-indigo-a38: color-mix(in srgb, var(--has-indigo) 38%, transparent);
    --has-indigo-a42: color-mix(in srgb, var(--has-indigo) 42%, transparent);

    /* Light tint transparent (sidebar hover) */
    --has-indigo-light-a28: color-mix(in srgb, var(--has-indigo-light) 28%, transparent);
    --has-indigo-light-a42: color-mix(in srgb, var(--has-indigo-light) 42%, transparent);

    /* Legacy aliases — purani files compatibility */
    --has-teal: var(--has-indigo);
    --has-teal-dark: var(--has-indigo-dark);
    --has-teal-soft: var(--has-indigo-soft);
    --has-gradient: var(--has-indigo);
    --has-gradient-soft: var(--has-indigo-soft);
    --has-gradient-row: #ffffff;
    --has-accent-line: var(--has-indigo);

    /* Layout tokens */
    --has-text: #2d3748;
    --has-muted: #718096;
    --has-radius: 10px;
    --has-shadow: 0 4px 20px var(--has-indigo-a14);
    --has-checkbox-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2l3 3 6.2-6.5'/%3E%3C/svg%3E");

    /* Sidebar */
    --has-sidebar-main-text: #E6E6E6;
    --has-sidebar-hover: rgba(255, 255, 255, 0.08);
    --has-sidebar-hover-strong: var(--has-indigo-light-a42);
    --has-sidebar-hover-soft: var(--has-indigo-light-a28);
    --has-sidebar-parent-open-bg: rgba(255, 255, 255, 0.06);
    --has-sidebar-active-bg: var(--has-indigo);
    --has-sidebar-active-text: #ffffff;
    --has-sidebar-submenu-active-bg: var(--has-indigo);
    --has-sidebar-branch-parent-bg: rgba(255, 255, 255, 0.1);
    --has-sidebar-branch-rail: var(--has-indigo-a35);
    --has-sidebar-submenu-active-border: transparent;
    --has-sidebar-submenu-hover-bg: var(--has-indigo-light-a42);
    --has-sidebar-active: var(--has-indigo);
    --has-sidebar-brand-bg: #121a24;
    --has-sidebar-surface: linear-gradient(180deg, #162230 0%, #131b26 45%, #0f151d 100%);

    /* Dropdown chevron SVG (hex without #, URL-encoded) — --has-indigo badlo to yeh bhi sync karo */
    --has-indigo-svg: %235e52d9;
}

/* Night theme design system — scoped to body.dark-mode only */
body.dark-mode {
    --has-sidebar-main-text: #D7DEE8;
    --has-dark-page-bg: #1B2430;
    --has-dark-card-bg: #1F2B38;
    --has-dark-input-bg: #111827;
    --has-dark-accent: #5E52D9;
    --has-dark-text-primary: #F0F4F8;
    --has-dark-text-secondary: #DCE6F0;
    --has-dark-text-muted: #98A6B8;
    --has-dark-border: #2D3A49;
}

/* Bootstrap switch ON state — listings status toggles */
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
    background: var(--has-indigo) !important;
    color: #ffffff !important;
}

.bootstrap-switch.bootstrap-switch-on {
    border-color: var(--has-indigo-dark) !important;
}

/* Pagination — active page (listings) */
.page-item.active .page-link,
.pagination .page-item.active .page-link,
.dataTables_wrapper .page-item.active .page-link,
.datatable-pagination-stack .pagination .page-item.active .page-link {
    background-color: var(--has-indigo) !important;
    border-color: var(--has-indigo-dark) !important;
    color: #ffffff !important;
}

/* Primary buttons — Bootstrap / AdminLTE */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--has-indigo) !important;
    border-color: var(--has-indigo-dark) !important;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem var(--has-indigo-a22) !important;
}

.btn-outline-primary {
    color: var(--has-indigo) !important;
    border-color: var(--has-indigo) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--has-indigo) !important;
    border-color: var(--has-indigo-dark) !important;
    color: #ffffff !important;
}