/* ============================================================
   #createtransation padding
   ============================================================ */
#createtransation {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* ============================================================
   Base display reset for custom elements
   ============================================================ */
ebit-start,
ebit-section,
ebit-header,
ebit-simple-header,
ebit-propertyscreentab,
ebit-propertypage,
ebit-table,
ebit-head,
ebit-footer,
ebit-row,
ebit-filter-key,
ebit-filter-group,
ebit-filter-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

/* ============================================================
   ⭐ ANIMATIONS — SLIDE IN
   ============================================================ */
@keyframes ebitXSlideIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ebitFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ebitSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   ⭐ EBIT-SIMPLE-HEADER + EBIT-HEADER — slide in from left
   ============================================================ */
ebit-simple-header,
ebit-header {
    min-height: 56px;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateZ(0);
    animation: ebitXSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ============================================================
   EBIT-START / STEPPER
   ============================================================ */
ebit-start.bs-stepper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
    animation: ebitFadeIn 0.3s ease both;
}

ebit-section.bs-stepper-content {
    flex: 1 1 auto;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}

ebit-section.content {
    display: flex;
    flex: 1 1 auto;
    margin: 0 !important;
    animation: ebitSlideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ============================================================
   EBIT-TABLE
   ============================================================ */
ebit-table {
    min-height: 300px;
    margin: 0 !important;
    animation: ebitSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

    /* ============================================================
   ⭐ SAARE BORDERS / SHADOWS / OUTLINES HATAO
   ============================================================ */
    ebit-table,
    ebit-table *,
    ebit-table *::before,
    ebit-table *::after,
    ebit-table tbody,
    ebit-table thead,
    ebit-table tfoot,
    ebit-table tr,
    ebit-table td,
    ebit-table th,
    ebit-table ebit-row,
    ebit-table ebit-head,
    ebit-table ebit-body,
    ebit-table ebit-footer,
    ebit-table ebit-headcolumn,
    ebit-table ebit-bodycolumn,
    ebit-table ebit-column,
    .grid-wrapper,
    .grid-wrapper *,
    .table-responsive-container,
    .table-responsive-container * {
        border: 0 !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        border-width: 0 !important;
        border-style: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

        /* ---- Extra target — last row + dataTables ---- */
        ebit-table tbody tr:last-child,
        ebit-table tbody tr:last-child td,
        ebit-table tbody tr:last-child th,
        ebit-table tbody ebit-row:last-child,
        ebit-table table,
        ebit-table thead,
        ebit-table tbody,
        ebit-table .dataTables_wrapper,
        ebit-table .dataTables_wrapper .row:last-child,
        ebit-table .dataTables_wrapper .row:last-child > div,
        ebit-table .dataTables_info,
        ebit-table .dataTables_paginate,
        ebit-table .dataTables_length,
        ebit-table .dataTables_filter {
            border: none !important;
            border-top: none !important;
            border-bottom: none !important;
            border-left: none !important;
            border-right: none !important;
            box-shadow: none !important;
        }

/* ============================================================
   BACKGROUNDS / HEADER CLEANUP
   ============================================================ */
ebit-table,
.grid-wrapper,
.table-responsive-container,
ebit-simple-header,
ebit-header,
ebit-start {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

ebit-simple-header,
ebit-header {
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   ROW HOVER — CLICKABLE FEEL
   ============================================================ */
ebit-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    ebit-table tbody tr:hover {
        background-color: #f5f6fa !important;
    }

/* ============================================================
   ⭐ ROW ANIMATION — staggered fade in
   ============================================================ */
ebit-table tbody tr {
    animation: ebitFadeIn 0.25s ease both;
}

    ebit-table tbody tr:nth-child(1) {
        animation-delay: 0.10s;
    }

    ebit-table tbody tr:nth-child(2) {
        animation-delay: 0.13s;
    }

    ebit-table tbody tr:nth-child(3) {
        animation-delay: 0.16s;
    }

    ebit-table tbody tr:nth-child(4) {
        animation-delay: 0.19s;
    }

    ebit-table tbody tr:nth-child(5) {
        animation-delay: 0.22s;
    }

    ebit-table tbody tr:nth-child(6) {
        animation-delay: 0.25s;
    }

    ebit-table tbody tr:nth-child(7) {
        animation-delay: 0.28s;
    }

    ebit-table tbody tr:nth-child(8) {
        animation-delay: 0.31s;
    }

    ebit-table tbody tr:nth-child(9) {
        animation-delay: 0.34s;
    }

    ebit-table tbody tr:nth-child(10) {
        animation-delay: 0.37s;
    }

/* ============================================================
    DARK THEME ANIMATION SUPPORT
   ============================================================ */
.dark-style ebit-simple-header,
.dark-style ebit-header,
body.dark-style ebit-simple-header,
body.dark-style ebit-header {
    animation: ebitXSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dark-style ebit-table,
body.dark-style ebit-table {
    animation: ebitSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

    /* ============================================================
    DARK THEME — TABLE BORDER CLEANUP
   ============================================================ */
    .dark-style ebit-table,
    .dark-style ebit-table *,
    .dark-style ebit-row,
    .dark-style ebit-row *,
    body.dark-style ebit-table,
    body.dark-style ebit-table *,
    body.dark-style ebit-row,
    body.dark-style ebit-row * {
        border: 0 !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

/* ============================================================
    REDUCED MOTION SUPPORT (accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    ebit-simple-header,
    ebit-header,
    ebit-start.bs-stepper,
    ebit-section.content,
    ebit-table,
    ebit-table tbody tr {
        animation: none !important;
    }
}

/* ============================================================
   ⭐ IN-CARD LOADER
   ============================================================ */
/* ============================================================
   EBIT-HEADER — HOST (Server-side HTML ke liye)
   ============================================================ */
ebit-header {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

    /* ============================================================
   HEADER FLEX CONTAINER
   ============================================================ */
    ebit-header .header-flex-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 60px;
        gap: 15px;
        background-color: #ffffff;
        padding: 10px;
        position: relative;
        overflow: visible !important;
        box-sizing: border-box;
        width: 100%;
        max-width: 100vw;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    /* ============================================================
   SECTION LEFT
   ============================================================ */
    ebit-header .section-left {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    ebit-header .responsive-left-wrapper {
        max-width: 100%;
        min-width: 0;
    }

    ebit-header .header-title {
        font-size: 1.15rem;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    /* ============================================================
   SEARCH WRAPPER CENTER
   ============================================================ */
    ebit-header .search-wrapper-center {
        margin: 5px 0;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative !important;
        overflow: visible !important;
        min-width: 0;
    }

    ebit-header .input-group {
        border: 1px solid #d9dee3;
        border-radius: 0.375rem !important;
        background-color: #fff;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 4px 8px;
        min-height: 40px;
        transition: all 0.2s ease-in-out;
        position: relative !important;
    }

    /* ============================================================
   SELECTION CENTER PLACEMENT
   ============================================================ */
    ebit-header .selection-center-placement {
        display: none !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 600px;
        opacity: 0;
        transform: translateY(5px);
        transition: all 0.2s ease-in-out;
    }

        ebit-header .selection-center-placement.show-actions {
            display: flex !important;
            opacity: 1;
            transform: translateY(0);
        }

    /* ============================================================
   CUSTOM PILL BADGE
   ============================================================ */
    ebit-header .custom-pill-badge {
        background-color: rgba(105, 108, 255, 0.12) !important;
        border: 1px solid rgba(105, 108, 255, 0.25) !important;
        color: #696cff !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        border-radius: 10px !important;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0.4rem 1rem !important;
        box-shadow: 0 2px 8px rgba(95, 97, 230, 0.15);
    }

        ebit-header .custom-pill-badge .custom-close-icon {
            background-color: #696cff !important;
            color: #ffffff !important;
            font-size: 1rem;
            border-radius: 50%;
            padding: 1px;
            margin-left: 5px !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

            ebit-header .custom-pill-badge .custom-close-icon:hover {
                opacity: 0.85;
            }

    ebit-header .default-left-cog.hide-left-cog {
        display: none !important;
    }

    /* ============================================================
   SEARCH CONTAINER + INPUT
   ============================================================ */
    ebit-header #searchContainer {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
    }

    ebit-header #universalSearch {
        border: none !important;
        outline: none !important;
        font-size: 0.9375rem;
        color: #566a7f;
        background: transparent;
        height: 30px;
        flex: 1;
        width: 100%;
        min-width: 0;
    }

    /* ============================================================
   COMPACT PAGINATION
   ============================================================ */
    ebit-header .compact-pagination {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        ebit-header .compact-pagination .btn-arrow-nav {
            background: transparent !important;
            border: none !important;
            color: #696cff !important;
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        ebit-header .compact-pagination .txt-page-info {
            color: #696cff !important;
            font-weight: 500;
            font-size: 0.9rem;
            white-space: nowrap;
        }

    /* ============================================================
   GRID VIEW TOGGLE
   ============================================================ */
    ebit-header .grid-view-toggle-group {
        display: flex;
        background-color: #8fa0b3;
        border-radius: 6px;
        padding: 3px;
        gap: 1px;
        height: fit-content;
    }

    ebit-header .grid-view-toggle-btn {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.75);
        padding: 4px 10px;
        border-radius: 4px;
        cursor: pointer;
    }

        ebit-header .grid-view-toggle-btn.active {
            background-color: rgba(255, 255, 255, 0.25);
            color: #ffffff;
        }

    /* ============================================================
   SECTION RIGHT + PAGINATION TARGET
   ============================================================ */
    ebit-header .section-right {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 12px;
    }

    ebit-header #innerPaginationTarget {
        display: none;
        align-items: center;
    }

    ebit-header .header-flex-container.single-grid-mode #innerPaginationTarget {
        display: flex !important;
    }

    ebit-header .header-flex-container.single-grid-mode #searchbarPagination {
        display: none !important;
    }

    /* ============================================================
   DROPDOWNS — ADVANCED
   ============================================================ */
    ebit-header .advanced-dropdown {
        position: absolute !important;
        top: calc(100% + 5px) !important;
        left: 15px !important;
        width: 500px;
        max-width: calc(100vw - 40px) !important;
        background: #ffffff !important;
        z-index: 500 !important;
        border: 1px solid #d9dee3 !important;
        border-radius: 0.5rem !important;
        padding: 1.25rem !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18) !important;
        display: flex !important;
        gap: 1.5rem;
        color: #566a7f;
    }

        ebit-header .advanced-dropdown.d-none {
            display: none !important;
        }

        ebit-header .advanced-dropdown .col {
            flex: 1;
            min-width: 0;
        }

    /* ============================================================
   DROPDOWNS — VIEW SETTINGS
   ============================================================ */
    ebit-header .view-settings-dropdown {
        position: absolute !important;
        top: calc(100% + 5px) !important;
        left: 15px !important;
        width: fit-content !important;
        min-width: auto !important;
        background: #ffffff !important;
        z-index: 500 !important;
        border: 1px solid #d9dee3 !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
        box-sizing: border-box;
    }

        ebit-header .view-settings-dropdown.d-none {
            display: none !important;
        }

    /* ============================================================
   SELECTION MENU SCOPED
   ============================================================ */
    ebit-header .selection-menu-scoped {
        display: none;
        position: absolute;
        z-index: 999999 !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        border: 1px solid #e4e6fc !important;
        box-shadow: 0 10px 25px rgba(140, 140, 200, 0.25) !important;
        padding: 6px 0 !important;
        min-width: 220px !important;
    }

        ebit-header .selection-menu-scoped.show {
            display: block !important;
        }

    ebit-header .has-selection #searchbar {
        display: none !important;
    }

/* ============================================================
   DARK THEME
   ============================================================ */
.dark-style ebit-header .header-flex-container {
    background-color: #2b2c40 !important;
    border-color: #444564 !important;
}

.dark-style ebit-header .input-group {
    background-color: #32344e !important;
    border-color: #444564 !important;
}

.dark-style ebit-header #universalSearch {
    color: #dbdade !important;
}

    .dark-style ebit-header #universalSearch::placeholder {
        color: #8283a7 !important;
    }

.dark-style ebit-header .header-title {
    color: #e1e1ff !important;
}

.dark-style ebit-header .advanced-dropdown,
.dark-style ebit-header .view-settings-dropdown,
.dark-style ebit-header .selection-menu-scoped {
    background: #2b2c40 !important;
    border-color: #444564 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45) !important;
    color: #a3a4cc !important;
}

    .dark-style ebit-header .advanced-dropdown h6 {
        color: #dbdade !important;
    }

.dark-style ebit-header #defaultLoadText {
    color: #e1e1ff !important;
}

.dark-style ebit-header #newPageLengthInput {
    background-color: #32344e !important;
    color: #dbdade !important;
    border-color: #696cff !important;
}

.dark-style ebit-header .grid-view-toggle-group {
    background-color: #32344e !important;
}

/* ============================================================
   RESPONSIVE — max-width 925px
   ============================================================ */
@media (max-width: 925px) {
    ebit-header .header-flex-container {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        padding: 0.75rem 1rem;
        gap: 12px 0px;
    }

    ebit-header .section-left {
        grid-column: 1 / 2;
        grid-row: 1;
        display: flex !important;
        align-items: center !important;
    }

    ebit-header .section-right {
        grid-column: 2 / 3;
        grid-row: 1;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin-left: auto;
        gap: 8px;
    }

    ebit-header #innerPaginationTarget {
        display: none !important;
    }

    ebit-header .search-wrapper-center {
        grid-column: 1 / 3;
        grid-row: 2;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 0 !important;
    }

    ebit-header .input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    ebit-header .advanced-dropdown {
        flex-direction: column;
        gap: 1rem;
        left: 15px !important;
        top: 100% !important;
    }

    ebit-header .view-settings-dropdown {
        left: 15px !important;
        top: 100% !important;
    }
}

/* ============================================================
   RESPONSIVE — max-width 480px
   ============================================================ */
@media (max-width: 480px) {
    ebit-header .header-flex-container {
        padding: 0.5rem 0.6rem !important;
    }

    ebit-header .responsive-left-wrapper {
        gap: 6px !important;
    }

    ebit-header .responsive-create-btn {
        padding: 4px 8px !important;
        font-size: 0.82rem !important;
    }

    ebit-header .header-title {
        font-size: 0.88rem !important;
    }
}

/* ============================================================
   RESPONSIVE — max-width 380px
   ============================================================ */
@media (max-width: 380px) {
    ebit-header .responsive-create-btn {
        padding: 3px 6px !important;
        font-size: 0.75rem !important;
    }

    ebit-header .header-title {
        font-size: 0.82rem !important;
    }

    ebit-header .section-right {
        gap: 4px !important;
    }
}

/* ============================================================
   RESPONSIVE — max-width 330px
   ============================================================ */
@media (max-width: 330px) {
    ebit-header .responsive-left-wrapper {
        gap: 4px !important;
    }

    ebit-header .responsive-create-btn {
        padding: 3px 5px !important;
    }

        ebit-header .responsive-create-btn .btn-text {
            display: none !important;
        }

        ebit-header .responsive-create-btn i {
            margin-right: 0 !important;
            font-size: 1.1rem !important;
        }

    ebit-header .header-title {
        font-size: 0.75rem !important;
        max-width: none !important;
    }

    ebit-header .advanced-dropdown {
        width: calc(100vw - 20px) !important;
        left: 10px !important;
    }
}