/* ══════════════════════════════════════════════════════════════════
   1. FONT SETUP (Poppins)
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --tblr-font-sans-serif: 'Poppins', sans-serif !important;
}

body {
    font-family: 'Poppins', sans-serif !important;
}


/* ══════════════════════════════════════════════════════════════════
   2. COLOR PALETTE OVERRIDE  —  #0054a6 → #530372 (Purple)
   ══════════════════════════════════════════════════════════════════
   Primary:        #530372  (83, 3, 114)
   Darken:         #4a0266  (~10% darker — hover / active)
   Light (lt):     #ede5f0  (badges, bg-subtle)
   Text emphasis:  #21012d  (dark text on light bg)
   BG subtle:      #e5d9e9  (alert / card backgrounds)
   Border subtle:  #c2a6cd  (subtle borders)

   Hover / Active Strategy:
   btn-primary hover/active → rgba(83,3,114,0.80)
   80% opacity = premium "dim" feel — standard Tabler approach
   ══════════════════════════════════════════════════════════════════ */

/* ── 2.1 Light Mode Variables ───────────────────────────────────── */
:root,
:host,
[data-bs-theme=light] {
    --tblr-primary: #530372 !important;
    --tblr-primary-rgb: 83, 3, 114 !important;
    --tblr-primary-fg: var(--tblr-light) !important;
    --tblr-primary-darken: #4a0266 !important;
    --tblr-primary-lt: #ede5f0 !important;
    --tblr-primary-lt-rgb: 237, 229, 240 !important;
    --tblr-primary-text-emphasis: #21012d !important;
    --tblr-primary-bg-subtle: #e5d9e9 !important;
    --tblr-primary-border-subtle: #c2a6cd !important;

    --tblr-link-color: #530372 !important;
    --tblr-link-color-rgb: 83, 3, 114 !important;
    --tblr-link-hover-color: #42025b !important;
    --tblr-link-hover-color-rgb: 66, 2, 91 !important;

    --tblr-focus-ring-color: rgba(83, 3, 114, 0.25) !important;

    /* Tabler brand alias */
    --tblr-tabler: #530372 !important;
    --tblr-tabler-rgb: 83, 3, 114 !important;
    --tblr-tabler-darken: #4a0266 !important;
    --tblr-tabler-lt: #ede5f0 !important;
}

/* ── 2.2 Dark Mode Variables ────────────────────────────────────── */
[data-bs-theme=dark] {
    --tblr-primary: #530372 !important;
    --tblr-primary-rgb: 83, 3, 114 !important;
    --tblr-primary-fg: var(--tblr-light) !important;
    --tblr-primary-darken: #4a0266 !important;
    --tblr-primary-lt: #ede5f0 !important;
    --tblr-primary-lt-rgb: 237, 229, 240 !important;
    --tblr-primary-text-emphasis: #a981b8 !important;
    --tblr-primary-bg-subtle: #0c0011 !important;
    --tblr-primary-border-subtle: #21012d !important;

    --tblr-link-color: #a074b1 !important;
    --tblr-link-color-rgb: 160, 116, 177 !important;
    --tblr-link-hover-color: #ba9ac6 !important;
    --tblr-link-hover-color-rgb: 186, 154, 198 !important;

    --tblr-tabler: #530372 !important;
    --tblr-tabler-rgb: 83, 3, 114 !important;
    --tblr-tabler-darken: #4a0266 !important;
    --tblr-tabler-lt: #ede5f0 !important;
}

/* ── 2.3 Hardcoded Hex Overrides ────────────────────────────────────
   tabler.css uses raw #0054a6 hex in some selectors instead of CSS
   variables — un sab ko yahan override kiya gaya hai.
   ──────────────────────────────────────────────────────────────── */
.btn-link {
    color: #530372 !important;
}

.btn-link:hover,
.btn-link:focus-visible {
    color: #42025b !important;
}

.text-primary-emphasis {
    color: #21012d !important;
}

.status-primary {
    --tblr-status-color: #530372 !important;
}

.status-blue {
    --tblr-status-color: #530372 !important;
}

.toast-primary {
    --tblr-toast-color: #530372 !important;
}

.border-primary {
    border-color: #530372 !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. FORM INPUTS — Focus States & Number Spinners
   ══════════════════════════════════════════════════════════════════ */

/* ── 3.1 Focus border/shadow color (input, select, textarea) ───── */
input:focus {
    outline: none !important;
    border-color: #530372 !important;
    box-shadow: none !important;
}

select:focus {
    outline: none !important;
    border-color: #530372 !important;
    box-shadow: none !important;
}

textarea:focus {
    outline: none !important;
    border-color: #530372 !important;
    box-shadow: none !important;
}

/* ── 3.2 Input Group (flat variant) focus state ─────────────────── */
.input-group-flat:focus-within,
.input-group-flat .form-control:focus {
    --tblr-input-focus-border-color: #530372 !important;
    --tblr-primary: #530372;               /* agar box-shadow isi se ban rha ho */
    --tblr-input-btn-focus-color: rgba(83, 3, 114, .25) !important;

    outline: none !important;
    box-shadow: none !important;
    border-color: #530372 !important;
}

/* ── 3.3 Readonly / Disabled cursor ─────────────────────────────── */
input[readonly],
textarea[readonly],
select[disabled] {
    cursor: not-allowed !important;
}

/* ── 3.4 Number input — hide spinner arrows ─────────────────────── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}


/* ══════════════════════════════════════════════════════════════════
   4. TABLE HEADER STYLING
   ══════════════════════════════════════════════════════════════════ */
thead th {
    font-weight: 500 !important;
    font-size: 13px !important;
    color: #FFFFFF !important;
    background-color: #530372 !important;
}


/* ══════════════════════════════════════════════════════════════════
   5. MODAL STYLING
   ══════════════════════════════════════════════════════════════════ */
.modal-header {
    background-color: var(--tblr-primary) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--tblr-primary-darken) !important;
}

.modal-header .modal-title {
    color: #fff !important;
}

/* Bootstrap close (X) button — white icon on purple header */
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 1 !important;
}

.modal-header .btn-close:hover {
    opacity: .8 !important;
}


/* ══════════════════════════════════════════════════════════════════
   6. ACCORDION — Active Chevron Icon Color
   (URL-encoded SVG fill, %23 = #)
   ══════════════════════════════════════════════════════════════════ */
.accordion-button:not(.collapsed) {
    color: #530372 !important;
    --tblr-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23530372'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

[data-bs-theme=dark] .accordion-button:not(.collapsed) {
    --tblr-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a981b8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}


/* ══════════════════════════════════════════════════════════════════
   7. SIDEBAR / VERTICAL NAVBAR
   ══════════════════════════════════════════════════════════════════ */

/* ── 7.1 Active nav-link left border accent ─────────────────────── */
.navbar-vertical .navbar-nav .nav-link.active,
.nav-vertical .nav-link.active {
    border-left-color: #530372 !important;
}

/* ── 7.2 Remove default left active border (::after pseudo) ────── */
.navbar-vertical .nav-item.active::after,
.navbar-expand .nav-item.active::after,
.navbar-expand-sm .nav-item.active::after,
.navbar-expand-md .nav-item.active::after,
.navbar-expand-lg .nav-item.active::after,
.navbar-expand-xl .nav-item.active::after,
.navbar-expand-xxl .nav-item.active::after {
    display: none !important;
    content: none !important;
}

/* ── 7.3 Active link / icon / title color ───────────────────────── */
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active {
    color: var(--tblr-primary) !important;
    background: transparent !important;
}

.navbar-vertical .nav-item.active > .nav-link svg,
.navbar-vertical .nav-item.active > .nav-link .icon {
    color: var(--tblr-primary) !important;
    stroke: currentColor !important;
}

.navbar-vertical .nav-item.active > .nav-link .nav-link-title {
    color: var(--tblr-primary) !important;
}

/* ── 7.4 Nav-link hover state ────────────────────────────────────── */
.navbar-vertical .nav-link:hover {
    color: var(--tblr-primary) !important;
}

.navbar-vertical .nav-link:hover svg {
    color: var(--tblr-primary) !important;
    stroke: currentColor !important;
}

/* ── 7.5 Sidebar dropdown item hover ────────────────────────────── */
.navbar-vertical .dropdown-item:hover,
.navbar-vertical .dropdown-item:focus {
    color: var(--tblr-primary) !important;
}

.navbar-vertical .dropdown-item:hover {
    color: var(--tblr-primary) !important;
    background: transparent !important;
}