/**
 * ==========================================================================
 * Hiba School Central Design System Tokens & Component Classes
 * Single Source of Truth (SSOT)
 * ==========================================================================
 */

/* ── Local Noto Nastaliq Urdu (Optimized WOFF2 Web Font, All Weights) ── */
@font-face {
    font-family: 'Noto Nastaliq Urdu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Noto Nastaliq Urdu'),
         url('/fonts/noto-nastaliq-urdu/noto-nastaliq-urdu-arabic.woff2') format('woff2'),
         url('../fonts/noto-nastaliq-urdu/noto-nastaliq-urdu-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'Noto Nastaliq Urdu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Noto Nastaliq Urdu Medium'), local('Noto Nastaliq Urdu'),
         url('/fonts/noto-nastaliq-urdu/noto-nastaliq-urdu-arabic.woff2') format('woff2'),
         url('../fonts/noto-nastaliq-urdu/noto-nastaliq-urdu-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'Noto Nastaliq Urdu';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Noto Nastaliq Urdu SemiBold'), local('Noto Nastaliq Urdu'),
         url('/fonts/noto-nastaliq-urdu/noto-nastaliq-urdu-arabic.woff2') format('woff2'),
         url('../fonts/noto-nastaliq-urdu/noto-nastaliq-urdu-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'Noto Nastaliq Urdu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Noto Nastaliq Urdu Bold'), local('Noto Nastaliq Urdu'),
         url('/fonts/noto-nastaliq-urdu/noto-nastaliq-urdu-arabic.woff2') format('woff2'),
         url('../fonts/noto-nastaliq-urdu/noto-nastaliq-urdu-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
                        /* ── 1. Brand / Primary Colors (Single Point of Control) ── */
                        --theme-primary: #1e40af;
                        /* Exact Royal Blue from brand image (RGB: 30, 64, 175) */
                        --theme-primary-hover: #1e3a8a;
                        --theme-primary-active: #172554;
                        --theme-primary-subtle: #eff4ff;
                        /* Soft tinted background */
                        --theme-primary-text: #ffffff;
                        --theme-primary-glow: rgba(30, 64, 175, 0.25);

                        /* ── 2. Secondary & Neutral ── */
                        --theme-secondary-bg: #ffffff;
                        --theme-secondary-border: #e2e8f0;
                        /* Slate-200 */
                        --theme-secondary-text: #475569;
                        /* Slate-600 */
                        --theme-secondary-hover-bg: #f8fafc;
                        --theme-secondary-hover-text: #1e293b;

                        /* ── 3. Semantic Status Colors (Paces Soft Style) ── */
                        --theme-success: #059669;
                        /* Emerald */
                        --theme-success-hover: #047857;
                        --theme-success-subtle: #ecfdf5;

                        --theme-warning: #d97706;
                        /* Amber */
                        --theme-warning-hover: #b45309;
                        --theme-warning-subtle: #fffbeb;

                        --theme-danger: #e11d48;
                        /* Rose */
                        --theme-danger-hover: #be123c;
                        --theme-danger-subtle: #fff1f2;
                        --theme-danger-text: #ffffff;

                        --theme-info: #0284c7;
                        /* Sky */
                        --theme-info-hover: #0369a1;
                        --theme-info-subtle: #f0f9ff;

                        /* ── 4. Forms & Controls ── */
                        --theme-input-bg: #f8fafc;
                        --theme-input-border: #e2e8f0;
                        --theme-input-focus-border: var(--theme-primary);
                        --theme-input-focus-ring: var(--theme-primary-glow);
                        --theme-input-radius: 0.5rem;
                        /* 8px (rounded-lg) */

                        /* ── 5. Cards & Containers ── */
                        --theme-card-bg: #ffffff;
                        --theme-card-border: #e2e8f0;
                        --theme-card-radius: 0.75rem;
                        /* 12px (rounded-xl) */
                        --theme-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);

                        /* ── 6. DataTables & Tables (Paces Aesthetics) ── */
                        --theme-table-header-bg: #f8fafc;
                        --theme-table-header-text: #64748b;
                        --theme-table-header-border: #e2e8f0;
                        --theme-table-row-hover: #f8fafc;
                        --theme-table-row-border: #f1f5f9;
                    }

                    /* ==========================================================================
 * Standardized Component Classes
 * ========================================================================== */

                    /* ── Primary Button ── */
                    .btn-theme-primary {
                        background-color: var(--theme-primary) !important;
                        color: var(--theme-primary-text) !important;
                        border: 1px solid transparent !important;
                        border-radius: var(--theme-input-radius) !important;
                        padding: 0.45rem 0.9rem !important;
                        font-size: 0.8125rem !important;
                        font-weight: 600 !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        gap: 0.4rem !important;
                        transition: all 0.15s ease-in-out !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                        cursor: pointer !important;
                        text-decoration: none !important;
                        line-height: 1.25rem !important;
                        height: 38px !important;
                        min-height: 38px !important;
                        box-sizing: border-box !important;
                    }

                    .btn-theme-primary:hover {
                        background-color: var(--theme-primary-hover) !important;
                        box-shadow: 0 4px 6px -1px var(--theme-primary-glow) !important;
                    }

                    .btn-theme-primary:focus {
                        outline: none !important;
                        box-shadow: 0 0 0 3px var(--theme-primary-glow) !important;
                    }

                    .btn-theme-primary:active {
                        background-color: var(--theme-primary-active) !important;
                    }

                    /* ── Secondary Button ── */
                    .btn-theme-secondary {
                        background-color: var(--theme-secondary-bg) !important;
                        color: var(--theme-secondary-text) !important;
                        border: 1px solid var(--theme-secondary-border) !important;
                        border-radius: var(--theme-input-radius) !important;
                        padding: 0.45rem 0.9rem !important;
                        font-size: 0.8125rem !important;
                        font-weight: 600 !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        gap: 0.4rem !important;
                        transition: all 0.15s ease-in-out !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                        cursor: pointer !important;
                        text-decoration: none !important;
                        line-height: 1.25rem !important;
                        height: 38px !important;
                        min-height: 38px !important;
                        box-sizing: border-box !important;
                    }

                    .btn-theme-secondary:hover {
                        background-color: var(--theme-secondary-hover-bg) !important;
                        color: var(--theme-secondary-hover-text) !important;
                        border-color: #cbd5e1 !important;
                    }

                    .btn-theme-secondary:focus {
                        outline: none !important;
                        box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.5) !important;
                    }

                    .btn-theme-secondary.active-toggle {
                        background-color: var(--theme-primary-subtle) !important;
                        color: var(--theme-primary) !important;
                        border-color: rgba(37, 99, 235, 0.3) !important;
                    }

                    /* ── Danger Button ── */
                    .btn-theme-danger {
                        background-color: var(--theme-danger) !important;
                        color: var(--theme-danger-text) !important;
                        border: 1px solid transparent !important;
                        border-radius: var(--theme-input-radius) !important;
                        padding: 0.45rem 0.9rem !important;
                        font-size: 0.8125rem !important;
                        font-weight: 600 !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        gap: 0.4rem !important;
                        transition: all 0.15s ease-in-out !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                        cursor: pointer !important;
                        text-decoration: none !important;
                        line-height: 1.25rem !important;
                        height: 38px !important;
                        min-height: 38px !important;
                        box-sizing: border-box !important;
                    }

                    .btn-theme-danger:hover {
                        background-color: var(--theme-danger-hover) !important;
                        box-shadow: 0 4px 6px -1px rgba(225, 29, 72, 0.25) !important;
                    }

                    .btn-theme-danger:focus {
                        outline: none !important;
                        box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.3) !important;
                    }

                    .btn-theme-danger:active {
                        background-color: #be123c !important;
                    }

                    /* ── Unified Profile & Module Segmented Tabs (SSOT) ── */
                    .profile-tab-btn,
                    .teacher-tab-btn,
                    .tab-theme-btn {
                        height: 34px !important;
                        min-height: 34px !important;
                        max-height: 34px !important;
                        padding: 0 0.875rem !important;
                        font-size: 0.75rem !important;
                        font-weight: 600 !important;
                        border-radius: var(--theme-input-radius) !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        gap: 0.375rem !important;
                        white-space: nowrap !important;
                        cursor: pointer !important;
                        user-select: none !important;
                        transition: all 0.15s ease-in-out !important;
                        border: 1px solid transparent !important;
                        color: #475569 !important;
                        background-color: transparent !important;
                        box-sizing: border-box !important;
                        outline: none !important;
                        box-shadow: none !important;
                        line-height: 1.25rem !important;
                    }

                    .profile-tab-btn:hover:not(.active),
                    .teacher-tab-btn:hover:not(.active),
                    .tab-theme-btn:hover:not(.active) {
                        color: var(--theme-primary) !important;
                        background-color: rgba(226, 232, 240, 0.6) !important;
                    }

                    .profile-tab-btn:focus,
                    .profile-tab-btn:focus-visible,
                    .teacher-tab-btn:focus,
                    .teacher-tab-btn:focus-visible,
                    .tab-theme-btn:focus,
                    .tab-theme-btn:focus-visible {
                        outline: none !important;
                        box-shadow: none !important;
                    }

                    .profile-tab-btn.active,
                    .teacher-tab-btn.active,
                    .tab-theme-btn.active {
                        background-color: var(--theme-primary) !important;
                        color: #ffffff !important;
                        border-color: var(--theme-primary) !important;
                        font-weight: 700 !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                        outline: none !important;
                    }

                    /* ── Format Designer Step Tabs (SSOT Theme Tokens) ── */
                    .format-tab-btn {
                        flex: 1 1 0%;
                        padding: 0.375rem 0.5rem !important;
                        border-radius: 0.375rem !important;
                        font-size: 0.75rem !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        gap: 0.375rem !important;
                        cursor: pointer !important;
                        user-select: none !important;
                        transition: all 0.15s ease-in-out !important;
                        color: #475569 !important;
                        font-weight: 600 !important;
                        background-color: transparent !important;
                        border: none !important;
                        outline: none !important;
                    }

                    .format-tab-btn:hover:not(.active) {
                        color: #0f172a !important;
                        background-color: rgba(203, 213, 225, 0.4) !important;
                    }

                    .format-tab-btn.active {
                        background-color: var(--theme-primary) !important;
                        color: #ffffff !important;
                        font-weight: 700 !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                    }

                    .format-tab-btn.active .step-num {
                        background-color: #ffffff !important;
                        color: var(--theme-primary) !important;
                    }

                    .format-tab-btn:not(.active) .step-num {
                        background-color: #cbd5e1 !important;
                        color: #334155 !important;
                    }

                    /* ── Designer Selection Cards (Orientation, Presets) ── */
                    .theme-selection-card {
                        border: 2px solid #e2e8f0 !important;
                        background-color: #ffffff !important;
                        transition: all 0.15s ease-in-out !important;
                    }

                    .theme-selection-card:hover:not(.active) {
                        border-color: #cbd5e1 !important;
                    }

                    .theme-selection-card.active {
                        border-color: var(--theme-primary) !important;
                        background-color: rgba(30, 64, 175, 0.04) !important;
                        box-shadow: 0 0 0 2px var(--theme-primary-glow) !important;
                    }

                    /* ── Danger Outline Button (Reset/Clear button from Paces Theme Reference) ── */
                    .btn-theme-outline-danger,
                    .btn-outline-danger {
                        background-color: #ffffff !important;
                        color: var(--theme-danger) !important;
                        border: 1px solid var(--theme-danger) !important;
                        border-radius: var(--theme-input-radius) !important;
                        padding: 0.45rem 0.9rem !important;
                        font-size: 0.8125rem !important;
                        font-weight: 600 !important;
                        display: inline-flex;
                        align-items: center !important;
                        justify-content: center !important;
                        gap: 0.4rem !important;
                        transition: all 0.15s ease-in-out !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                        cursor: pointer !important;
                        text-decoration: none !important;
                        line-height: 1.25rem !important;
                    }

                    .btn-theme-outline-danger.hidden,
                    .btn-outline-danger.hidden {
                        display: none !important;
                    }

                    .btn-theme-outline-danger:hover,
                    .btn-outline-danger:hover {
                        background-color: var(--theme-danger) !important;
                        color: #ffffff !important;
                        border-color: var(--theme-danger) !important;
                        box-shadow: 0 4px 6px -1px rgba(225, 29, 72, 0.25) !important;
                    }

                    .btn-theme-outline-danger:focus,
                    .btn-outline-danger:focus {
                        outline: none !important;
                        box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25) !important;
                    }

                    /* ==========================================================================
                     * Standard Filter Bar Action Buttons (Apply & Clear / Reset)
                     * Single Source of Truth (SSOT) - Fixed Size & Unified Palette
                     * ========================================================================== */
                    .btn-filter-apply {
                        height: 38px !important;
                        min-height: 38px !important;
                        max-height: 38px !important;
                        width: 96px !important;
                        min-width: 96px !important;
                        max-width: 96px !important;
                        flex: 0 0 96px !important;
                        flex-grow: 0 !important;
                        flex-shrink: 0 !important;
                        padding: 0 0.875rem !important;
                        font-size: 0.8125rem !important;
                        font-weight: 600 !important;
                        background-color: var(--theme-primary) !important;
                        color: #ffffff !important;
                        border: 1px solid var(--theme-primary) !important;
                        border-radius: var(--theme-input-radius) !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        gap: 0.45rem !important;
                        transition: all 0.15s ease-in-out !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                        cursor: pointer !important;
                        white-space: nowrap !important;
                        text-decoration: none !important;
                        user-select: none !important;
                        line-height: 1.25rem !important;
                        box-sizing: border-box !important;
                    }

                    .btn-filter-apply:hover {
                        background-color: var(--theme-primary-hover) !important;
                        border-color: var(--theme-primary-hover) !important;
                        box-shadow: 0 4px 6px -1px var(--theme-primary-glow) !important;
                    }

                    .btn-filter-apply:focus {
                        outline: none !important;
                        box-shadow: 0 0 0 3px var(--theme-primary-glow) !important;
                    }

                    .btn-filter-apply:active {
                        background-color: var(--theme-primary-active) !important;
                        border-color: var(--theme-primary-active) !important;
                    }

                    .btn-filter-reset,
                    .btn-filter-clear {
                        height: 38px !important;
                        min-height: 38px !important;
                        max-height: 38px !important;
                        width: 96px !important;
                        min-width: 96px !important;
                        max-width: 96px !important;
                        flex: 0 0 96px !important;
                        flex-grow: 0 !important;
                        flex-shrink: 0 !important;
                        padding: 0 0.875rem !important;
                        font-size: 0.8125rem !important;
                        font-weight: 600 !important;
                        background-color: #ffffff !important;
                        color: var(--theme-danger) !important;
                        border: 1px solid var(--theme-danger) !important;
                        border-radius: var(--theme-input-radius) !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        gap: 0.45rem !important;
                        transition: all 0.15s ease-in-out !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                        cursor: pointer !important;
                        white-space: nowrap !important;
                        text-decoration: none !important;
                        user-select: none !important;
                        line-height: 1.25rem !important;
                        box-sizing: border-box !important;
                    }

                    .btn-filter-reset.hidden,
                    .btn-filter-clear.hidden {
                        display: none !important;
                    }

                    .btn-filter-reset:hover,
                    .btn-filter-clear:hover {
                        background-color: var(--theme-danger) !important;
                        color: #ffffff !important;
                        border-color: var(--theme-danger) !important;
                        box-shadow: 0 4px 6px -1px rgba(225, 29, 72, 0.25) !important;
                    }

                    .btn-filter-reset:focus,
                    .btn-filter-clear:focus {
                        outline: none !important;
                        box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25) !important;
                    }

                    /* ── Search Mode Toggle Pills (Single Source of Truth, Matches Filter Apply Button) ── */
                    .search-tab-radio:checked + .search-tab-pill {
                        background-color: var(--theme-primary) !important;
                        color: #ffffff !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                    }
                    .search-tab-radio:not(:checked) + .search-tab-pill:hover {
                        color: #0f172a !important;
                        background-color: #f1f5f9 !important;
                    }

                    /* ── Micro Action Buttons (DataTables Row Actions) ── */
                    .btn-theme-icon {
                        width: 2rem !important;
                        height: 2rem !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        border-radius: var(--theme-input-radius) !important;
                        background-color: #f8fafc !important;
                        border: 1px solid var(--theme-secondary-border) !important;
                        color: #64748b !important;
                        font-size: 0.75rem !important;
                        transition: all 0.15s ease-in-out !important;
                        cursor: pointer !important;
                        text-decoration: none !important;
                    }

                    .btn-theme-icon:hover {
                        background-color: var(--theme-primary-subtle) !important;
                        color: var(--theme-primary) !important;
                        border-color: rgba(37, 99, 235, 0.3) !important;
                    }

                    .btn-theme-icon.action-edit:hover {
                        background-color: var(--theme-warning-subtle) !important;
                        color: var(--theme-warning) !important;
                        border-color: rgba(217, 119, 6, 0.3) !important;
                    }

                    .btn-theme-icon.action-delete:hover {
                        background-color: var(--theme-danger-subtle) !important;
                        color: var(--theme-danger) !important;
                        border-color: rgba(225, 29, 72, 0.3) !important;
                    }

                    .btn-theme-icon.action-success:hover {
                        background-color: var(--theme-success-subtle) !important;
                        color: var(--theme-success) !important;
                        border-color: rgba(5, 150, 105, 0.3) !important;
                    }

                    /* ── Standard Form Control (Inputs, Selects) ── */
                    .form-theme-control,
                    .form-theme-input {
                        width: 100% !important;
                        padding: 0.5rem 0.85rem !important;
                        font-size: 0.875rem !important;
                        color: #1e293b !important;
                        background-color: var(--theme-input-bg) !important;
                        border: 1px solid var(--theme-input-border) !important;
                        border-radius: var(--theme-input-radius) !important;
                        transition: all 0.15s ease-in-out !important;
                        line-height: 1.25rem !important;
                        outline: none !important;
                    }

                    select.form-theme-control,
                    select.form-theme-input {
                        height: 38px !important;
                        min-height: 38px !important;
                        appearance: none !important;
                        -webkit-appearance: none !important;
                        -moz-appearance: none !important;
                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
                        background-position: right 0.75rem center !important;
                        background-repeat: no-repeat !important;
                        background-size: 1.1em 1.1em !important;
                        padding-right: 2.25rem !important;
                        cursor: pointer !important;
                    }

                    .form-theme-control:focus,
                    .form-theme-input:focus {
                        background-color: #ffffff !important;
                        border-color: var(--theme-input-focus-border) !important;
                        box-shadow: 0 0 0 3px var(--theme-input-focus-ring) !important;
                    }

                    .form-theme-input-error {
                        border-color: var(--theme-danger) !important;
                    }

                    .form-theme-input-error:focus {
                        border-color: var(--theme-danger) !important;
                        box-shadow: 0 0 0 3px var(--theme-danger-subtle) !important;
                    }

                    #search-input {
                        height: 38px !important;
                        padding-left: 2.25rem !important;
                        padding-right: 0.875rem !important;
                    }
                    [dir="rtl"] #search-input,
                    .urdu-mode #search-input {
                        padding-left: 0.875rem !important;
                        padding-right: 2.25rem !important;
                    }

                    /* ── Central Filter Box Container ── */
                    .filter-theme-box {
                        background-color: var(--theme-card-bg) !important;
                        border: 1px solid var(--theme-card-border) !important;
                        border-radius: var(--theme-card-radius) !important;
                        box-shadow: var(--theme-card-shadow) !important;
                        padding: 1rem 1.25rem !important;
                    }

                    /* ── Central Card Container ── */
                    .card-theme {
                        background-color: var(--theme-card-bg) !important;
                        border: 1px solid var(--theme-card-border) !important;
                        border-radius: var(--theme-card-radius) !important;
                        box-shadow: var(--theme-card-shadow) !important;
                    }

                    /* ── Paces Style KPI Stat Card ── */
                    .stat-card-theme {
                        background-color: var(--theme-card-bg) !important;
                        border: 1px solid var(--theme-card-border) !important;
                        border-radius: var(--theme-card-radius) !important;
                        padding: 1.125rem 1.25rem !important;
                        box-shadow: var(--theme-card-shadow) !important;
                        display: flex !important;
                        align-items: center !important;
                        gap: 1rem !important;
                        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
                    }

                    .stat-card-theme:hover {
                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
                    }

                    .stat-card-avatar {
                        width: 2.75rem !important;
                        height: 2.75rem !important;
                        border-radius: 0.5rem !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        font-size: 1.15rem !important;
                        flex-shrink: 0 !important;
                    }

                    /* Avatar Color Variants */
                    .stat-card-avatar.variant-primary {
                        background-color: var(--theme-primary-subtle) !important;
                        color: var(--theme-primary) !important;
                    }

                    .stat-card-avatar.variant-success {
                        background-color: var(--theme-success-subtle) !important;
                        color: var(--theme-success) !important;
                    }

                    .stat-card-avatar.variant-warning {
                        background-color: var(--theme-warning-subtle) !important;
                        color: var(--theme-warning) !important;
                    }

                    .stat-card-avatar.variant-danger {
                        background-color: var(--theme-danger-subtle) !important;
                        color: var(--theme-danger) !important;
                    }

                    /* ── Soft Semantic Status Badges (Paces Style) ── */
                    .badge-theme-success {
                        background-color: var(--theme-success-subtle) !important;
                        color: var(--theme-success) !important;
                        border: 1px solid rgba(5, 150, 105, 0.25) !important;
                    }

                    .badge-theme-warning {
                        background-color: var(--theme-warning-subtle) !important;
                        color: var(--theme-warning) !important;
                        border: 1px solid rgba(217, 119, 6, 0.25) !important;
                    }

                    .badge-theme-danger {
                        background-color: var(--theme-danger-subtle) !important;
                        color: var(--theme-danger) !important;
                        border: 1px solid rgba(225, 29, 72, 0.25) !important;
                    }

                    .badge-theme-info {
                        background-color: var(--theme-primary-subtle) !important;
                        color: var(--theme-primary) !important;
                        border: 1px solid rgba(37, 99, 235, 0.25) !important;
                    }

                    .badge-theme-neutral {
                        background-color: #f1f5f9 !important;
                        color: #475569 !important;
                        border: 1px solid #e2e8f0 !important;
                    }

                    /* ── Standardized DataTable Styling ── */
                    table.table-standard thead tr,
                    table.table-theme thead tr {
                        background-color: var(--theme-table-header-bg) !important;
                        border-bottom: 1px solid var(--theme-table-header-border) !important;
                        color: var(--theme-table-header-text) !important;
                    }

                    table.table-standard tbody tr,
                    table.table-theme tbody tr {
                        border-bottom: 1px solid var(--theme-table-row-border) !important;
                        transition: background-color 0.12s ease !important;
                    }

                    table.table-standard tbody tr:hover,
                    table.table-theme tbody tr:hover {
                        background-color: var(--theme-table-row-hover) !important;
                    }

                    /* ── Header Card Action Link (e.g. "View All", "Mark Now") ── */
                    .btn-theme-link {
                        font-size: 0.75rem !important;
                        font-weight: 600 !important;
                        color: var(--theme-primary) !important;
                        background-color: var(--theme-primary-subtle) !important;
                        border: 1px solid rgba(37, 99, 235, 0.2) !important;
                        padding: 0.25rem 0.65rem !important;
                        border-radius: var(--theme-input-radius) !important;
                        transition: all 0.15s ease !important;
                        text-decoration: none !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        gap: 0.3rem !important;
                        line-height: 1rem !important;
                    }

                    .btn-theme-link:hover {
                        background-color: var(--theme-primary) !important;
                        color: #ffffff !important;
                        border-color: var(--theme-primary) !important;
                    }

                    /* ── Quick Action Card Tile ── */
                    .quick-action-tile {
                        background-color: #f8fafc !important;
                        border: 1px solid var(--theme-secondary-border) !important;
                        border-radius: var(--theme-input-radius) !important;
                        padding: 0.75rem 0.5rem !important;
                        display: flex !important;
                        flex-direction: column !important;
                        align-items: center !important;
                        justify-content: center !important;
                        text-align: center !important;
                        gap: 0.35rem !important;
                        transition: all 0.15s ease-in-out !important;
                        text-decoration: none !important;
                        color: #334155 !important;
                        min-height: 72px !important;
                    }

                    .quick-action-tile:hover {
                        background-color: var(--theme-primary-subtle) !important;
                        border-color: rgba(37, 99, 235, 0.3) !important;
                        color: var(--theme-primary) !important;
                        transform: translateY(-1px) !important;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
                    }

                    .quick-action-tile i {
                        font-size: 1.15rem !important;
                        color: var(--theme-primary) !important;
                        transition: transform 0.15s ease !important;
                    }

                    .quick-action-tile:hover i {
                        transform: scale(1.1) !important;
                    }

                    .quick-action-tile span {
                        font-size: 0.75rem !important;
                        font-weight: 600 !important;
                        letter-spacing: -0.01em !important;
                    }

                    /* ── Setup Progress Banner & Stepper ── */
                    .setup-banner-theme {
                        background-color: #ffffff !important;
                        border: 1px solid var(--theme-card-border) !important;
                        border-left: 4px solid var(--theme-primary) !important;
                        border-radius: var(--theme-card-radius) !important;
                        padding: 0.65rem 1.25rem !important;
                        box-shadow: var(--theme-card-shadow) !important;
                    }

                    .setup-icon-box {
                        width: 1.875rem !important;
                        height: 1.875rem !important;
                        border-radius: 0.5rem !important;
                        background-color: var(--theme-primary-subtle) !important;
                        border: 1px solid rgba(37, 99, 235, 0.2) !important;
                        color: var(--theme-primary) !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        font-size: 0.75rem !important;
                    }

                    .setup-pill-badge {
                        background-color: var(--theme-primary-subtle) !important;
                        color: var(--theme-primary) !important;
                        border: 1px solid rgba(37, 99, 235, 0.2) !important;
                    }

                    .setup-step-active {
                        background-color: var(--theme-primary) !important;
                        color: #ffffff !important;
                        box-shadow: 0 0 0 3px var(--theme-primary-glow) !important;
                    }

                    /* ── Paces Style DataTables Toolbars & Controls ── */
                    .dt-toolbar-top,
                    .dataTables_wrapper>div:first-child:not(:has(table)) {
                        background-color: #ffffff !important;
                        border-bottom: 1px solid #f1f5f9 !important;
                        padding: 1rem 1.5rem !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: space-between !important;
                        gap: 1rem !important;
                        width: 100% !important;
                        box-sizing: border-box !important;
                    }

                    .dt-toolbar-bottom,
                    .dataTables_wrapper>div:last-child:not(:has(table)) {
                        background-color: #ffffff !important;
                        border-top: 1px solid #f1f5f9 !important;
                        padding: 0.85rem 1.5rem !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: space-between !important;
                        gap: 1rem !important;
                        width: 100% !important;
                        box-sizing: border-box !important;
                        margin-top: 0 !important;
                        box-shadow: none !important;
                    }

                    /* Length Select (Records per page) */
                    .dataTables_wrapper .dataTables_length {
                        display: inline-flex !important;
                        align-items: center !important;
                        float: none !important;
                        margin: 0 !important;
                    }

                    .dataTables_wrapper .dataTables_length label {
                        display: inline-flex !important;
                        align-items: center !important;
                        gap: 0.5rem !important;
                        font-size: 0.8125rem !important;
                        font-weight: 500 !important;
                        color: #64748b !important;
                        margin: 0 !important;
                        padding: 0 !important;
                    }

                    .dataTables_wrapper .dataTables_length select {
                        display: inline-block !important;
                        width: auto !important;
                        min-width: 68px !important;
                        height: 38px !important;
                        border-radius: 0.5rem !important;
                        border: 1px solid #e2e8f0 !important;
                        background-color: #ffffff !important;
                        color: #1e293b !important;
                        font-size: 0.8125rem !important;
                        font-weight: 600 !important;
                        padding: 0.45rem 1.85rem 0.45rem 0.75rem !important;
                        appearance: none !important;
                        -webkit-appearance: none !important;
                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
                        background-position: right 0.55rem center !important;
                        background-repeat: no-repeat !important;
                        background-size: 1.1em 1.1em !important;
                        line-height: 1.25rem !important;
                        cursor: pointer !important;
                        outline: none !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
                        transition: all 0.15s ease-in-out !important;
                        margin: 0 !important;
                    }

                    .dataTables_wrapper .dataTables_length select:focus {
                        border-color: var(--theme-primary) !important;
                        box-shadow: 0 0 0 3px var(--theme-primary-glow) !important;
                    }

                    /* Filter / Search Input */
                    .dataTables_wrapper .dataTables_filter {
                        display: inline-flex !important;
                        align-items: center !important;
                        float: none !important;
                        margin: 0 !important;
                    }

                    .dataTables_wrapper .dataTables_filter label {
                        display: inline-flex !important;
                        align-items: center !important;
                        position: relative !important;
                        margin: 0 !important;
                        padding: 0 !important;
                        font-size: 0 !important;
                        /* Hides "Search:" text */
                        color: transparent !important;
                    }

                    .dataTables_wrapper .dataTables_filter .dt-search-icon {
                        position: absolute !important;
                        left: 0.85rem !important;
                        top: 50% !important;
                        transform: translateY(-50%) !important;
                        color: #94a3b8 !important;
                        font-size: 0.8125rem !important;
                        pointer-events: none !important;
                        z-index: 5 !important;
                    }

                    .dataTables_wrapper .dataTables_filter input {
                        height: 38px !important;
                        min-width: 280px !important;
                        max-width: 340px !important;
                        border-radius: 0.5rem !important;
                        border: 1px solid #e2e8f0 !important;
                        background-color: #ffffff !important;
                        padding: 0.45rem 1rem 0.45rem 2.5rem !important;
                        /* 40px left padding for search icon */
                        font-size: 0.8125rem !important;
                        color: #1e293b !important;
                        outline: none !important;
                        transition: all 0.15s ease-in-out !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
                        margin: 0 !important;
                    }

                    .dataTables_wrapper .dataTables_filter input::placeholder {
                        color: #94a3b8 !important;
                        font-size: 0.8125rem !important;
                    }

                    .dataTables_wrapper .dataTables_filter input:focus {
                        border-color: var(--theme-primary) !important;
                        box-shadow: 0 0 0 3px var(--theme-primary-glow) !important;
                        background-color: #ffffff !important;
                    }

                    /* Info Summary */
                    .dataTables_wrapper .dataTables_info {
                        font-size: 0.8125rem !important;
                        font-weight: 500 !important;
                        color: #64748b !important;
                        padding: 0 !important;
                        margin: 0 !important;
                        float: none !important;
                    }

                    /* Pagination Buttons */
                    .dataTables_wrapper .dataTables_paginate {
                        display: inline-flex !important;
                        align-items: center !important;
                        gap: 0.35rem !important;
                        padding: 0 !important;
                        margin: 0 !important;
                        float: none !important;
                    }

                    .dataTables_wrapper .dataTables_paginate .paginate_button {
                        min-width: 32px !important;
                        height: 32px !important;
                        padding: 0 0.5rem !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        border-radius: 0.375rem !important;
                        border: 1px solid #e2e8f0 !important;
                        background-color: #ffffff !important;
                        color: #475569 !important;
                        font-size: 0.8125rem !important;
                        font-weight: 600 !important;
                        cursor: pointer !important;
                        user-select: none !important;
                        transition: all 0.15s ease-in-out !important;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
                        text-decoration: none !important;
                        box-sizing: border-box !important;
                        margin: 0 !important;
                    }

                    .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
                        background-color: #f8fafc !important;
                        border-color: #cbd5e1 !important;
                        color: #1e293b !important;
                    }

                    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
                    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
                        background-color: var(--theme-primary) !important;
                        border-color: var(--theme-primary) !important;
                        color: #ffffff !important;
                        box-shadow: 0 1px 3px 0 var(--theme-primary-glow) !important;
                    }

                    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
                    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
                    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
                        color: #cbd5e1 !important;
                        background-color: #ffffff !important;
                        border-color: #f1f5f9 !important;
                        cursor: not-allowed !important;
                        opacity: 0.6 !important;
                        box-shadow: none !important;
                    }

.dataTables_processing,
.dataTables_wrapper .dataTables_processing,
div.dataTables_processing,
#page-processing-loader,
.dt-processing-card,
[id*="processing-loader"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ── Progress Bar Fill Smooth Transition ── */
.progress-bar-fill {
    transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scrollbar Utilities (Eliminates inline <style> in Blade) ── */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ── Global Print Media Rules (Eliminates inline <style> in Blade) ── */
@media print {
    @page {
        size: A4;
        margin: 10mm 12mm 10mm 12mm;
    }

    body {
        background-color: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body * {
        visibility: hidden;
    }

    #print-area,
    #print-area *,
    #print-profile-report,
    #print-profile-report *,
    .printable-area,
    .printable-area *,
    .challan-page,
    .challan-page *,
    .challan-voucher-wrapper,
    .challan-voucher-wrapper * {
        visibility: visible !important;
    }

    #print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    body #print-profile-report {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: white !important;
        z-index: 9999999 !important;
    }

    .no-print {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Hiba School Complete Urdu (RTL) Layout & Noto Nastaliq Typography Engine ── */
/* ══════════════════════════════════════════════════════════════════════════ */

html[dir="rtl"],
body[dir="rtl"],
.rtl,
.urdu-mode {
    direction: rtl !important;
    text-align: right;
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaleeq', 'Urdu Typesetting', serif !important;
    font-size: 15.5px;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── UNIVERSAL NOTO NASTALIQ URDU: Applied across EVERY DOM Element in RTL ── */
[dir="rtl"],
[dir="rtl"] body,
[dir="rtl"] *:not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not([class*="fa-"]):not(.fa):not(.katex):not(.katex *):not(.academic-content):not(.academic-content *),
.urdu-mode,
.urdu-mode body,
.urdu-mode *:not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not([class*="fa-"]):not(.fa):not(.katex):not(.katex *):not(.academic-content):not(.academic-content *) {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaleeq', 'Urdu Typesetting', serif !important;
}

[dir="rtl"] .font-sans,
[dir="rtl"] .font-serif,
[dir="rtl"] .font-mono:not(.tabular-nums),
.urdu-mode .font-sans,
.urdu-mode .font-serif,
.urdu-mode .font-mono:not(.tabular-nums) {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaleeq', 'Urdu Typesetting', serif !important;
}

/* ── Universal Urdu / RTL Letter-spacing & Ligature Integrity Fix ── */
[dir="rtl"],
[dir="rtl"] *,
.urdu-mode,
.urdu-mode * {
    letter-spacing: normal !important;
}

[dir="rtl"] [class*="tracking-"],
.urdu-mode [class*="tracking-"],
[dir="rtl"] .tracking-tighter,
[dir="rtl"] .tracking-tight,
[dir="rtl"] .tracking-normal,
[dir="rtl"] .tracking-wide,
[dir="rtl"] .tracking-wider,
[dir="rtl"] .tracking-widest {
    letter-spacing: 0 !important;
}

[dir="rtl"] [class*="uppercase"],
.urdu-mode [class*="uppercase"],
[dir="rtl"] .uppercase {
    text-transform: none !important;
}

/* ── Nastaliq Vertical Rhythm & Typographic Scale ── */
[dir="rtl"] .text-xs,
.urdu-mode .text-xs {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.75 !important;
}

[dir="rtl"] .text-sm,
.urdu-mode .text-sm {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.85 !important;
}

[dir="rtl"] .text-base,
.urdu-mode .text-base {
    font-size: 1.03125rem !important; /* 16.5px */
    line-height: 1.95 !important;
}

[dir="rtl"] .text-lg,
.urdu-mode .text-lg {
    font-size: 1.15rem !important; /* 18.4px */
    line-height: 2.05 !important;
}

[dir="rtl"] .text-xl,
.urdu-mode .text-xl {
    font-size: 1.35rem !important; /* 21.6px */
    line-height: 2.15 !important;
}

[dir="rtl"] .text-2xl,
.urdu-mode .text-2xl {
    font-size: 1.6rem !important; /* 25.6px */
    line-height: 2.2 !important;
}

[dir="rtl"] .text-3xl,
.urdu-mode .text-3xl {
    font-size: 1.9rem !important; /* 30.4px */
    line-height: 2.3 !important;
}

/* ── Headings in Noto Nastaliq Urdu ── */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .font-heading,
[dir="rtl"] .page-title,
.urdu-mode h1, .urdu-mode h2, .urdu-mode h3, .urdu-mode h4, .urdu-mode h5, .urdu-mode h6,
.urdu-mode .font-heading,
.urdu-mode .page-title {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaleeq', 'Urdu Typesetting', serif !important;
    letter-spacing: 0 !important;
    line-height: 2.1 !important;
    font-weight: 700 !important;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

/* ── Stat Cards in Urdu / RTL Mode ── */
[dir="rtl"] .stat-card-theme,
.urdu-mode .stat-card-theme {
    text-align: right !important;
}

[dir="rtl"] .stat-card-theme .stat-card-title,
.urdu-mode .stat-card-theme .stat-card-title,
[dir="rtl"] .stat-card-title,
.urdu-mode .stat-card-title,
[dir="rtl"] .stat-card-theme span:first-child,
.urdu-mode .stat-card-theme span:first-child {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaleeq', 'Urdu Typesetting', serif !important;
    font-size: 1rem !important; /* 16px prominent Nastaliq */
    font-weight: 700 !important;
    color: #334155 !important; /* slate-700 solid readable contrast */
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 2.1 !important;
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
}

[dir="rtl"] .stat-card-theme .stat-card-value,
.urdu-mode .stat-card-theme .stat-card-value,
[dir="rtl"] .stat-card-theme .tabular-nums,
.urdu-mode .stat-card-theme .tabular-nums {
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    margin-top: 0.25rem !important;
    direction: ltr !important;
    text-align: right !important;
    display: inline-block !important;
    unicode-bidi: isolate !important;
}

[dir="rtl"] .stat-card-theme .stat-card-avatar,
.urdu-mode .stat-card-theme .stat-card-avatar {
    flex-shrink: 0 !important;
}

/* ── Buttons in Urdu RTL (Generous Vertical Room for Nastaliq) ── */
[dir="rtl"] .btn-theme-primary,
[dir="rtl"] .btn-theme-secondary,
[dir="rtl"] .btn-theme-danger,
[dir="rtl"] .btn-theme-warning,
[dir="rtl"] .btn-theme-success,
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-secondary,
[dir="rtl"] .btn-danger,
[dir="rtl"] a.btn-theme-primary,
[dir="rtl"] a.btn-theme-secondary,
[dir="rtl"] a.btn-primary,
[dir="rtl"] a.btn-secondary,
.urdu-mode .btn-theme-primary,
.urdu-mode .btn-theme-secondary,
.urdu-mode .btn-theme-danger {
    min-height: 42px !important;
    height: auto !important;
    padding: 0.45rem 1rem 0.55rem !important;
    font-size: 0.9375rem !important; /* 15px */
    font-weight: 600 !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

[dir="rtl"] .btn-sm,
[dir="rtl"] [size="sm"],
.urdu-mode .btn-sm {
    min-height: 34px !important;
    height: auto !important;
    padding: 0.25rem 0.75rem 0.35rem !important;
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.7 !important;
}

/* ── Form Labels in Urdu RTL ── */
[dir="rtl"] label,
[dir="rtl"] .form-label,
.urdu-mode label,
.urdu-mode .form-label {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', serif !important;
    font-size: 0.84rem !important; /* 13.5px */
    font-weight: 600 !important;
    color: #475569 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.8 !important;
    margin-bottom: 0.35rem !important;
    display: inline-block !important;
}

/* ── Form Controls (Inputs, Selects, Textareas) ── */
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="range"]):not(.force-ltr),
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] .form-theme-control,
[dir="rtl"] .form-theme-input,
[dir="rtl"] .form-input,
.urdu-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="range"]):not(.force-ltr),
.urdu-mode select,
.urdu-mode textarea {
    min-height: 42px !important;
    height: auto !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.85 !important;
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', serif !important;
    box-sizing: border-box !important;
}

/* Numbers, Dates, Currency, Roll Numbers, Phone Numbers & Code (Tabular lining figures) */
[dir="rtl"] .tabular-nums,
[dir="rtl"] [data-num],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] .num,
[dir="rtl"] .font-mono,
[dir="rtl"] code,
[dir="rtl"] kbd {
    direction: ltr !important;
    text-align: right !important;
    unicode-bidi: embed;
}

/* Phone numbers, CNIC, Challan numbers, and Transaction IDs must always isolate cleanly in LTR */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .phone-number,
[dir="rtl"] .phone-cell,
[dir="rtl"] [data-phone],
[dir="rtl"] [data-cnic],
[dir="rtl"] .cnic-cell,
[dir="rtl"] .roll-no,
[dir="rtl"] .challan-no,
[dir="rtl"] .transaction-id,
[dir="rtl"] .iban-number,
[dir="rtl"] .account-no {
    direction: ltr !important;
    display: inline-block !important;
    unicode-bidi: isolate !important;
    text-align: left !important;
}

/* Fields requiring strict LTR entry (Email, URL, Passwords) */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="password"],
[dir="rtl"] .force-ltr {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed;
}

/* Inputs & Textareas text alignment */
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="email"]):not([type="password"]):not([type="url"]):not(.force-ltr),
[dir="rtl"] textarea {
    text-align: right !important;
}

/* Native Select dropdowns (Chevron positioned on left) */
[dir="rtl"] select.form-theme-control,
[dir="rtl"] select.form-theme-input,
[dir="rtl"] select.form-input,
[dir="rtl"] select:not([multiple]) {
    background-position: left 0.75rem center !important;
    padding-left: 2.25rem !important;
    padding-right: 0.85rem !important;
    text-align: right !important;
}

/* Setup Progress Banner */
[dir="rtl"] .setup-banner-theme {
    border-left: 1px solid var(--theme-card-border) !important;
    border-right: 4px solid var(--theme-primary) !important;
}

/* ── DataTables & Standard Tables RTL Styling ── */
[dir="rtl"] table.table-standard thead th,
[dir="rtl"] table.table-theme thead th,
[dir="rtl"] table.dataTable thead th,
.urdu-mode table thead th {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 700 !important;
    line-height: 1.85 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: right !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

[dir="rtl"] table.table-standard tbody td,
[dir="rtl"] table.table-theme tbody td,
[dir="rtl"] table.dataTable tbody td,
.urdu-mode table tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.95 !important;
    text-align: right !important;
    vertical-align: middle !important;
}

/* ── Sidebar Navigation in Urdu RTL ── */
[dir="rtl"] aside nav a,
[dir="rtl"] #sidebar nav a,
[dir="rtl"] .sidebar-nav-link,
.urdu-mode aside nav a,
.urdu-mode #sidebar nav a,
.urdu-mode .sidebar-nav-link {
    min-height: 42px !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.55rem !important;
    line-height: 1.85 !important;
    font-size: 0.9375rem !important;
    align-items: center !important;
    overflow: visible !important;
}

[dir="rtl"] aside nav ul ul a,
[dir="rtl"] #sidebar nav ul ul a,
[dir="rtl"] .sidebar-sublink,
.urdu-mode aside nav ul ul a,
.urdu-mode #sidebar nav ul ul a,
.urdu-mode .sidebar-sublink {
    min-height: 36px !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.45rem !important;
    line-height: 1.8 !important;
    font-size: 0.875rem !important;
    overflow: visible !important;
}

/* ── Badges in Urdu RTL ── */
[dir="rtl"] .badge-theme,
[dir="rtl"] [class*="badge"],
.urdu-mode .badge-theme {
    min-height: 28px !important;
    padding: 0.2rem 0.65rem 0.3rem !important;
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.75 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

/* ── Modals, Dialogs & Toasts in Urdu RTL ── */
[dir="rtl"] .modal-header h3,
[dir="rtl"] .modal-header h2,
.urdu-mode .modal-header h3 {
    font-size: 1.25rem !important;
    line-height: 2.1 !important;
    font-weight: 700 !important;
}

[dir="rtl"] .modal-body,
.urdu-mode .modal-body {
    font-size: 0.9375rem !important;
    line-height: 1.95 !important;
}

[dir="rtl"] #toast-container,
[dir="rtl"] .toast-notification,
.urdu-mode .toast-notification {
    font-size: 0.9375rem !important;
    line-height: 1.85 !important;
}

/* Sticky Actions column in RTL pinned to Left edge */
[dir="rtl"] .table-sticky-actions thead th.col-actions,
[dir="rtl"] .table-sticky-actions thead th:last-child {
    right: auto !important;
    left: 0 !important;
    box-shadow: 5px 0 10px -2px rgba(15, 23, 42, 0.08) !important;
    border-left: none !important;
    border-right: 1px solid #e2e8f0 !important;
}

[dir="rtl"] .table-sticky-actions tbody td.col-actions,
[dir="rtl"] .table-sticky-actions tbody td:last-child {
    right: auto !important;
    left: 0 !important;
    box-shadow: 5px 0 10px -2px rgba(15, 23, 42, 0.08) !important;
    border-left: none !important;
    border-right: 1px solid #f1f5f9 !important;
}

/* DataTables Length Select */
[dir="rtl"] .dataTables_wrapper .dataTables_length select {
    background-position: left 0.55rem center !important;
    padding: 0.45rem 0.75rem 0.45rem 1.85rem !important;
}

/* DataTables Search Input & Icon */
[dir="rtl"] .dataTables_wrapper .dataTables_filter .dt-search-icon {
    left: auto !important;
    right: 0.85rem !important;
}

[dir="rtl"] .dataTables_wrapper .dataTables_filter input {
    padding: 0.45rem 2.5rem 0.45rem 1rem !important;
    text-align: right !important;
}

/* Table sorting icons spacing in RTL */
[dir="rtl"] table.dataTable thead th.sorting,
[dir="rtl"] table.dataTable thead th.sorting_asc,
[dir="rtl"] table.dataTable thead th.sorting_desc {
    padding-left: 1.5rem !important;
    padding-right: 0.75rem !important;
}

/* ── Select2 Searchable Dropdown RTL ── */
[dir="rtl"] .select2-container .select2-selection--single {
    text-align: right !important;
    min-height: 42px !important;
}

[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 0.85rem !important;
    padding-left: 2rem !important;
    text-align: right !important;
    line-height: 2.3 !important;
    font-size: 0.9375rem !important;
}

[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow {
    left: 0.5rem !important;
    right: auto !important;
    top: 6px !important;
}

[dir="rtl"] .select2-container .select2-selection--single .select2-selection__clear {
    left: 1.75rem !important;
    right: auto !important;
    float: left !important;
}

[dir="rtl"] .select2-dropdown {
    text-align: right !important;
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', Tahoma, sans-serif !important;
}

[dir="rtl"] .select2-search--dropdown .select2-search__field {
    text-align: right !important;
    direction: rtl !important;
    padding: 0.45rem 0.75rem !important;
    line-height: 1.85 !important;
}

[dir="rtl"] .select2-results__option {
    text-align: right !important;
    padding: 0.5rem 0.85rem !important;
    line-height: 1.85 !important;
    font-size: 0.9375rem !important;
}

/* ── Directional Icon Helpers ── */
[dir="rtl"] .rtl-flip,
[dir="rtl"] .breadcrumb-chevron {
    transform: scaleX(-1);
}

/* ── Print & Supported Reports RTL ── */
@media print {
    html[dir="rtl"],
    body[dir="rtl"],
    .urdu-mode {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', serif !important;
        line-height: 1.85 !important;
    }
    [dir="rtl"] .challan-copy {
        line-height: 1.7 !important;
    }
    [dir="rtl"] .challan-copy table td,
    [dir="rtl"] .challan-copy table th {
        line-height: 1.65 !important;
    }
    [dir="rtl"] table.timetable-grid-table th {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif !important;
        line-height: 1.6 !important;
    }
    [dir="rtl"] table.timetable-grid-table td {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif !important;
        line-height: 1.7 !important;
    }
}

/* ── Academic Content Isolation ── */
/* Exam questions, LaTeX math formulas, student answers, and paper builders stay in their original input format */
.academic-content,
.exam-paper-content,
.question-body,
.katex,
.katex-display,
.math-tex {
    direction: ltr !important;
    text-align: left;
    unicode-bidi: isolate;
}

/* When the exam paper or question is explicitly Urdu literature/Islamic studies */
.exam-paper-content.urdu-paper,
.academic-content[data-lang="urdu"],
.urdu-question {
    direction: rtl !important;
    text-align: right;
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', serif !important;
}
