.rz-cell-data
{
    overflow: visible !important;
    position: relative !important;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.rz-grid-table td
{
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Frozen action column: dropdown must appear above other frozen cells */
.rz-frozen-cell .dropdown-menu.show
{
    z-index: 1050 !important;
}

.rz-frozen-cell:has(.dropdown-menu.show)
{
    z-index: 2 !important;
}

@media (max-width: 768px)
{
    .rz-datatable-reflow .rz-data-row>td
    {
        display: block;
        width: 100% !important;
        border: none;
    }
}

.rz-grid-table thead th .rz-column-title
{
    text-transform: none !important;
    font-size: 0.90rem;
}

.validation-message
{
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.modified.invalid,
.invalid
{
    border-color: #dc3545 !important;
}

.modified.valid,
.valid
{
    border-color: #198754 !important;
}



/* Card Styles */
.card-custom
{
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.card-custom-left
{
    margin-left: 12px;
    margin-right: 12px;
}

.card-custom-right
{
    margin-left: 12px;
    margin-right: 12px;
}

.card-header-custom
{
    border-radius: 0;
    min-height: 100px;
}


.card-header-custom h5
{
    margin: 0;
    font-weight: 600;
    font-size: 1.5rem !important;
}

.card-header-custom p
{
    margin: 8px 0 0 0;
    opacity: 0.9;
    font-size: 0.95rem;
    line-height: 1.4;
}

.custom-chart
{
    min-height: 375px;
}


:root
{
    --skew: 15%;
    /* əyilmə faizi */
}

.image-grid
{
    display: flex;
    height: 100px;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.image-grid:last-child
{
    background-repeat: no-repeat;
}

.image-item
{
    flex: 1 0 38%;
    position: relative;
    background-size: cover;
    background-position: center;
    height: 100px;
    margin-right: 8px;
}

.image-item:last-child
{
    margin-right: 0;
}

.image-item:first-child
{
    border-top-left-radius: 12px;
}

.image-item:last-child
{
    border-top-right-radius: 12px;
}

/* 1-ci: düz sol |, sağ maili / */
.image-item:nth-child(1)
{
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0% 100%);
}

/* 2-ci və 3-cü: hər iki tərəfi maili / / */
.image-item:nth-child(2),
.image-item:nth-child(3)
{
    clip-path: polygon(var(--skew) 0, 100% 0, calc(100% - var(--skew)) 100%, 0% 100%);
    margin-left: calc(var(--skew) * -1);
}

/* 4-cü: sol maili /, sağ düz | */
.image-item:nth-child(4)
{
    clip-path: polygon(var(--skew) 0, 100% 0, 100% 100%, 0% 100%);
    margin-left: calc(var(--skew) * -1);
}

.categories-list a
{
    color: black;
}

/* List Items */
.list-item
{
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 13px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 18px
}

.list-item:hover
{
    background-color: #f8f9fa;
}

.list-item.active
{
    background-color: #e3f2fd;
    border-left: none !important;
    padding-left: 20px !important;
    border-radius: 0 0 0 0;
    margin-left: -20px;
    margin-right: -20px;
    padding-right: 20px;
    padding-left: 16px;
}

/* Yalnız sonuncu elementdə border-bottom silinsin */
a:last-child .list-item
{
    border-bottom: none;
}

a:first-child .list-item
{
    border-top: 1px solid #e9ecef;
}


/* Icons */
.icon-wrapper
{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 18px;
    color: #2196f3 !important;
}

.icon-blue,
.icon-green,
.icon-orange,
.icon-red,
.icon-purple,
.icon-cyan,
.icon-teal,
.icon-indigo
{
    background-color: transparent !important;
}

/* Progress Circle */
.progress-circle
{
    width: 200px !important;
    height: 200px !important;
    border-radius: 50%;
    position: relative;
    margin: 20px auto;
    background: conic-gradient(from 0deg, var(--grad-start) 0%, var(--grad-end) var(--progress-percent), #f1f3f4 var(--progress-percent), #f1f3f4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-circle::before
{
    content: '';
    width: 150px !important;
    height: 150px !important;
    border-radius: 50%;
    background: white;
    position: absolute;
}

.progress-text
{
    font-size: 24px;
    font-weight: bold;
    color: #333;
    z-index: 1;
    position: relative;
}

/* Tabs */
.tabs-custom
{
    margin-bottom: 0;
}

.tab-item
{
    padding: 8px 16px;
    color: black;
    background: #f3f2f2 !important;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 8px;
    border: 1px solid #f3f2f2;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    display: inline-block;
    font-weight: 600;
}

.tab-item.active
{
    background: #E2F3FF !important;
    color: black;
    border: 1px solid #2196f3 !important;
}

.tab-item:hover
{
    background: #E2F3FF !important;
    color: #1976d2;
    border-color: #2196f3 !important;
}

.tab-item.active:hover
{
    background: #1976d2;
}

/* Legend */
.legend-item
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #fbfafa98 !important;
    border-radius: 30px !important;
    padding: 8px 20px !important;
}

.legend-color
{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 10px;
}

.legend-left
{
    display: flex;
    align-items: center;
}

/* Arrow icon düzəlişi */
.arrow-icon
{
    color: #666;
    font-size: 16px;
    transition: transform 0.3s;
    transform: rotate(315deg);
}

.list-item.active .arrow-icon,
.tab-item.active .arrow-icon
{
    transform: rotate(0deg);
}

/* Responsive */
@media (max-width: 768px)
{
    .image-grid
    {
        grid-template-columns: repeat(2, 1fr);
        height: 100px;
    }

    .card-header-custom h5
    {
        font-size: 1rem !important;
    }

    .card-header-custom p
    {
        font-size: 0.8rem;
    }

    .progress-circle
    {
        width: 100px;
        height: 100px;
    }

    .progress-circle::before
    {
        width: 70px;
        height: 70px;
    }

    .progress-text
    {
        font-size: 18px;
    }
}

.card-title,
.custom-chart .card-title
{
    font-size: 1.35rem !important;
    margin-bottom: 1rem !important;
    font-family: inherit !important;
    line-height: 1.2;
}


.grid-height
{
    padding-top: .25rem !important;
    /* tighten */
    padding-bottom: .25rem !important;
    height: 36px !important;
    /* optional hard height */
    line-height: 1.1 !important;
}

/* Sənin işləyən fallback-ların */
.bg-custom-success
{
    background-image: linear-gradient(90deg, #bff3c9, #0a7a38);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.bg-custom-danger
{
    background-image: linear-gradient(90deg, #fecaca, #b91c1c);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.bg-custom-warning
{
    background-image: linear-gradient(90deg, #fde68a, #b45309);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.bg-custom-progress
{
    background-color: #f1f3f4;
}

/* Dəstək varsa: start HƏR ZAMAN açıq, end isə faizə görə daha tünd */
/* Arxa fon */
.bg-custom-progress
{
    background: #f1f3f4;
}

/* Dinamik: qırmızı → sarı → yaşıl; həmişə açıqdan tündə gradient */
.progress .progress-bar.dynamic
{
    /* Inline gəlir: --p (0..100), istəsən --pDark (0..150) */
    --pHue: clamp(var(--p, 0), 0, 100);
    --pDark: clamp(var(--pDark, var(--p, 0)), 0, 150);
    /* Hue 0→120 (qırmızıdan yaşıladək), saturation sabit, lightness bir az azalır */
    --h: calc(1.2 * var(--pHue));
    /* 0..120 deg */
    --s: 85%;
    --l: calc(70% - 0.2% * var(--pHue));
    /* faiz artdıqca bir az tünd */

    --base: hsl(var(--h) var(--s) var(--l));
    /* Tündləşmə gücü: p artdıqca daha çox black qarışır */
    --dark-mix: calc(10% + 0.4% * var(--pDark));
    /* 0%→10%, 100%→50%, 150%→70% */
    /* Start HƏMİŞƏ açıq, End p-yə görə tünd */
    --start: color-mix(in hsl, var(--base) 75%, white 25%);
    --end: color-mix(in hsl, var(--base) calc(100% - var(--dark-mix)), black var(--dark-mix));
    background: linear-gradient(90deg, var(--start), var(--end)) !important;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}




.nav-pills .nav-link.active,
.nav-pills .show>.nav-link
{
    background-color: #0D9DF6 !important;
    color: #ffffff !important;
}

.nav-pills>li>a:hover
{
    color: #0D9DF6 !important;
}

.nav-link-color
{
    color: #0D9DF6;
}



/* Məhsul kartı (əvvəlki kimi) */
.item-group-card
{
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.item-group-card:hover
{
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
    border-color: rgba(13, 110, 253, 0.25);
}

/* Ümumi faiz dairəsi */
.total-circle-wrapper
{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ümumi faiz dairəsi */
.total-circle
{
    --tp: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Faizə görə rənglər */
.total-circle.circle-success
{
    background: conic-gradient(rgba(25, 135, 84, 0.75) calc(var(--tp) * 1%), rgba(222, 226, 230, 0.8) 0);
}

.total-circle.circle-warning
{
    background: conic-gradient(rgba(255, 193, 7, 0.80) calc(var(--tp) * 1%), rgba(222, 226, 230, 0.8) 0);
}

.total-circle.circle-danger
{
    background: conic-gradient(rgba(220, 53, 69, 0.75) calc(var(--tp) * 1%), rgba(222, 226, 230, 0.8) 0);
}

.total-circle-inner
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.total-circle-value
{
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.total-circle-label
{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
}


/* Ownership chip list və chip-lər (əvvəl verdiyim) */
.ownership-chip-list
{
    margin-top: 8px;
}

.ownership-chip
{
    flex: 1 1 220px;
    min-width: 210px;
    max-width: 100%;
    border-radius: 14px;
    padding: 10px 12px;
    background: radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), rgba(13, 110, 253, 0.02));
    border: 1px solid rgba(13, 110, 253, 0.12);
    position: relative;
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.ownership-chip:hover
{
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    border-color: rgba(13, 110, 253, 0.4);
    background: radial-gradient(circle at top left, rgba(13, 110, 253, 0.18), rgba(13, 110, 253, 0.05));
}

.ownership-chip-header .chip-title
{
    font-size: 13px;
    font-weight: 600;
}

.chip-percent-badge
{
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.chip-percent-badge.chip-empty
{
    background: rgba(108, 117, 125, 0.10);
    color: #6c757d;
}

.ownership-chip-body
{
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.chip-metric
{
    display: flex;
    flex-direction: column;
}

.metric-label
{
    font-size: 13px;
    letter-spacing: .04em;
    color: #000;
}

.metric-value
{
    font-size: 13px;
    font-weight: 600;
    color: #212529;
}

.chip-progress
{
    margin-top: 4px;
    border-radius: 999px;
    overflow: hidden;
}

.chip-progress-fill
{
    border-radius: 999px;
}

@media (max-width: 767.98px)
{
    .ownership-chip
    {
        flex: 1 1 100%;
    }
}


/* Ümumi cədvəl görünüşünü bir az yüngülləşdirək */
.creative-table tbody tr:hover
{
    background: #f8fafc;
}

/* Məhsullar üzrə – ownership hüceyrəsi */
.ownership-header
{
    background: #f1f4fb;
    font-size: 13px;
}

.ownership-metric-cell
{
    min-width: 180px;
    padding: 6px 8px;
    vertical-align: middle;
}

.ownership-cell-header
{
    display: flex;
    justify-content: flex-start;
}

.ownership-cell-body .metric-row
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
}


/* Ownership içi progress bar */
.ownership-cell-progress
{
    height: 11px !important;
    border-radius: 999px;
    overflow: hidden;
}

/* Faiz badge-ləri – 3 səviyyə */
.percent-badge
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.percent-badge-success
{
    background: rgba(25, 135, 84, 0.14);
    color: #198754;
}

.percent-badge-warning
{
    background: rgba(255, 193, 7, 0.18);
    color: #856404;
}

.percent-badge-danger
{
    background: rgba(220, 53, 69, 0.16);
    color: #842029;
}

/* Şirkətlər üzrə – icra hüceyrəsi */
.icra-cell .percent-badge
{
    margin-bottom: 4px;
}

.icra-progress
{
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
}

/* Regionlar üzrə – dəyərlər üçün yüngül heatmap */
.value-cell
{
    font-size: 13px;
}

.value-cell.has-value
{
    background: rgba(13, 110, 253, 0.04);
    font-weight: 500;
}

/* Mövcud distribution-tabs CSS (əgər artıq əlavə etmisənsə, təkrar etməyə ehtiyac yoxdur) */
.distribution-tabs
{
    background: #f5f7fb;
    border-radius: 18px;
    padding: 4px;
}

.distribution-tabs .nav-link
{
    border-radius: 14px;
    border: none;
    background: transparent;
    color: #6c757d;
    font-weight: 500;
    position: relative;
    padding: 18px 25px;
    margin: 6px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    display: flex;
}

.distribution-tabs .nav-link:hover
{
    background: rgba(13, 110, 253, 0.06);
    color: #0d6efd;
}

.distribution-tabs .nav-link.active
{
    background: linear-gradient(135deg, #0f3b44, #638aa4);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(13, 110, 253, 0.35);
    transform: translateY(-1px);
}

.distribution-tabs .nav-link::after
{
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.18s ease;
}

.distribution-tabs .nav-link.active::after
{
    transform: scaleX(1);
}

.distribution-tabs .tab-icon i
{
    font-size: 18px;
}

.distribution-tabs .tab-badge
{
    font-size: 11px;
    border-radius: 999px;
    padding: 3px 9px;
    background: rgba(255, 255, 255, 0.9);
    color: #0d6efd;
}

@media (max-width: 767.98px)
{
    .distribution-tabs .nav-link
    {
        font-size: 13px;
        padding: 8px 10px;
    }

    .distribution-tabs .tab-title
    {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Şirkətlər üzrə – icra dairəsi olan hüceyrə */
.company-circle-cell
{
    min-width: 80px;
}

/* Dairəvi gauge */
.company-circle
{
    --cp: 0;
    /* Razor-dan gəlir, 0–130 arası faiz */
    --circle-color: rgba(13, 110, 253, 0.9);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 8px;
    background: conic-gradient(var(--circle-color) calc(var(--cp) * 1%), #e9ecef 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.company-circle-inner
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.company-circle-value
{
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.company-circle-label
{
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
}

/* Faizə görə rəng dəyişimi */
.company-circle.circle-success
{
    --circle-color: rgba(25, 135, 84, 0.95);
}

.company-circle.circle-warning
{
    --circle-color: rgba(255, 193, 7, 0.95);
}

.company-circle.circle-danger
{
    --circle-color: rgba(220, 53, 69, 0.95);
}

/* ===== Ümumi override (möhkəm) ===== */
.creative-table
{
    border-collapse: separate !important;
    border-spacing: 3px 3px !important;
    /* sütunlar arası boşluq (şəkil effektinə görə) */
    width: 100% !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    outline: 0 !important;
}

/* BÜTÜN köhnə border qaydalarını söndür və yeni border ver */
.creative-table,
.creative-table thead,
.creative-table thead th,
.creative-table tbody,
.creative-table tbody td
{
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* ===== Header - tünd fon və ağ mətn (mütləq görünən) ===== */
.creative-table thead th
{
    background: #0f3b44 !important;
    /* istəsən rəngi burada dəyiş */
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 16px 18px !important;
    vertical-align: middle !important;
    border-radius: 4px !important;
    border: 2px solid rgba(11, 59, 68, 0.9) !important;
    /* header çevrə borderi */
}

/* Header sütunları üçün fərdi enləri (əgər istifadə edirsən) */
.creative-table thead th.col-company
{
    width: 28% !important;
}

.creative-table thead th.col-unit
{
    width: 10% !important;
}

.creative-table thead th.col-min
{
    width: 15% !important;
}

.creative-table thead th.col-actual
{
    width: 15% !important;
}

.creative-table thead th.col-days
{
    width: 12% !important;
}

.creative-table thead th.col-indicator
{
    width: 10% !important;
}

/* ===== Body hüceyrələr: sütun-box effekti, border görünüşü ===== */
.creative-table tbody td
{
    background: #fbf8f6 !important;
    /* açıq krem arxa fon */
    padding: 20px 16px !important;
    vertical-align: middle !important;
    color: #0b2b2f !important;
    position: relative !important;
    border: 2px solid rgba(11, 59, 68, 0.10) !important;
    /* sütun qutusu effekti */
    border-radius: 2px !important;
    box-sizing: border-box !important;
}

/* Sütunlar arası "dikey boşluq" effekti üçün: td + td */
/*.creative-table tbody td + td {
                box-shadow: -6px 0 0 rgba(11,59,68,0.06) inset !important;
            }*/

/* Nöqtəli horizontal xətt effekti (alt hissədə) */
.creative-table tbody td::after
{
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -12px;
    height: 1px;
    background-image: linear-gradient(to right, rgba(11, 43, 47, 0.12) 0 20%, rgba(11, 43, 47, 0) 20%);
    background-size: 6px 1px;
    opacity: 0.95;
}

.creative-table tbody tr:last-child td::after
{
    display: none !important;
}

/* Hover effekti: satır üzərinə gələndə açıq fon */
.creative-table tbody tr:hover td
{
    background: #ffffff !important;
}

/* Xüsusi align-lar (sənin Razor class-larla uyğun) */
.creative-table td.company
{
    text-align: left !important;
    font-weight: 600 !important;
    color: #072b2f !important;
}

.creative-table td.unit
{
    text-align: center !important;
    color: #0b2b2f !important;
}

.creative-table td.num
{
    text-align: right !important;
    color: #0b2b2f !important;
    font-variant-numeric: tabular-nums !important;
}

.creative-table td.days
{
    text-align: center !important;
    color: #0b2b2f !important;
}


/* Responsive tənzimləmələr */
@media (max-width: 900px)
{
    .creative-table thead th
    {
        padding: 12px 10px !important;
        font-size: .95rem !important;
    }

    .creative-table tbody td
    {
        padding: 12px 10px !important;
        font-size: .95rem !important;
    }
}


.map-wrapper
{
    position: relative;
    width: 100%;
    overflow: hidden;
    align-items: center;
}

/* SVG özü */
.map-wrapper svg
{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Regionlər */
#az-map path
{
    fill: rgb(107 139 203);
    stroke: #fff;
    stroke-width: 1;
    transition: fill .2s ease, stroke-width .2s ease;
}

#az-map path:hover
{
    fill: #22413A;
    stroke-width: 1.2;
    cursor: pointer;
}

.map-tooltip
{
    position: fixed;
    background: #22413A;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    z-index: 9999;
    max-width: 200px;
    white-space: nowrap;
}

@media (max-width: 768px)
{
    .map-tooltip
    {
        font-size: 11px;
        padding: 5px 8px;
    }

    #az-map path
    {
        stroke-width: 0.6;
    }
}

/* Quantity > 0 olan region */
#az-map path.has-data
{
    stroke: #FFC107;
    stroke-width: 2.2;
    filter: drop-shadow(0 0 3px rgba(255, 193, 7, .6));
}

/* Hover-da daha güclü görünsün */
#az-map path.has-data:hover
{
    stroke-width: 2.6;
}


.circle-percent
{
    --size: 72px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--color) calc(var(--p) * 1%), #e9ecef 0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: auto;
}

.circle-percent span
{
    background: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.circle-success
{
    --color: #198754;
}

.circle-warning
{
    --color: #ffc107;
}

.circle-danger
{
    --color: #dc3545;
}


.sortable-header
{
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
}

.sortable-header:hover
{
    text-decoration: underline;
}

#app-loader
{
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity .25s ease;
}

#app-loader.hide
{
    opacity: 0;
}

/* container */
.loader-box
{
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1f2937;
}

/* text */
.loader-text
{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* spinner */
.spinner-ring
{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid #e5e7eb;
    border-top-color: #0d6efd;
    animation: spin 0.8s linear infinite;
}

@keyframes spin
{
    to
    {
        transform: rotate(360deg);
    }
}

.two-factor
{
    width: fit-content;
    max-width: 100%;
}

.two-factor .otp-input
{
    width: 40px;
    flex: 0 0 39px;
    padding-left: 0;
    padding-right: 0;
}

/* Clean Loading Screen */
#preloader
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f6f8 0%, #ffffff 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}


#app-loader
{
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preloader-background
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.loader-center
{
    position: relative;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

.loader-spinner
{
    width: 50px;
    height: 50px;
    border: 4px solid #e7e9eb;
    border-top: 4px solid #6658dd;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin
{
    to
    {
        transform: rotate(360deg);
    }
}

.loader-text
{
    font-size: 16px;
    color: #4c4c5c;
    font-weight: 500;
    margin-top: 10px;
    letter-spacing: 0.5px;
}

.loader-text::after
{
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots
{

    0%,
    20%
    {
        content: '';
    }

    40%
    {
        content: '.';
    }

    60%
    {
        content: '...';
    }

    80%
    {
        content: '....';
    }

    100%
    {
        content: '.....';
    }
}

.loader-ring,
.loader-ring.outer-ring,
.loader-ring.middle-ring,
.loader-core,
.core-inner,
.orbit-container,
.orbit-dot,
.orbit-dot.dot-1,
.orbit-dot.dot-2,
.orbit-dot.dot-3,
.loader-info,
.brand-name,
.loader-description,
.progress-ring-container,
.progress-ring,
.progress-ring-bg,
.progress-ring-circle,
.progress-percent
{
    display: none !important;
}