/* ============================================
   UNIFIED UI STYLES - Eye-Friendly Design
   ============================================
   IFRAME THEME ADOPTION:
   When this app is embedded in an iframe inside a parent project, it can
   adopt the parent's colors/theme. iframe-theme.js (same-origin: reads from
   parent :root; cross-origin: listens for postMessage { type: 'FTT_THEME', theme: {...} })
   overrides the variables below on :root. All theme-dependent styles use
   these variables, so no further CSS changes are needed.

   Overridable variables (use same names in parent :root, or send via postMessage):
   --primary-soft, --primary-soft-hover, --primary-gradient, --primary-gradient-hover,
   --primary-soft-rgb (e.g. "91, 141, 239" for rgba), --bg-primary, --bg-secondary,
   --bg-card, --bg-hover, --bg-active, --text-primary, --text-secondary, --text-muted,
   --text-light, --border-light, --border-medium, --border-soft
   ============================================ */

/* ============================================
   EYE-FRIENDLY COLOR VARIABLES (defaults; overridden by iframe-theme.js when in iframe)
   ============================================ */
 :root {

    --primary-soft: #7EA8F5;
    --primary-soft-hover: #6B95E8;
    --primary-gradient: linear-gradient(135deg, #A0C4FF 50%, #7EA8F5 100%);
    --primary-gradient-hover: linear-gradient(135deg, #8BB8FC 0%, #6B95E8 100%);
    --primary-soft-rgb: 126, 168, 245;


    --bg-primary: #FAFBFC;
    --bg-secondary: #F5F7FA;
    --bg-card: #FFFFFF;
    --bg-hover: #F0F4F8;
    --bg-active: #E8F0FE;


    --text-primary: #2D3748;
    --text-secondary: #4A5568;
    --text-muted: #718096;
    --text-light: #A0AEC0;


    --border-light: #E8EDF4;
    --border-medium: #D5DEE8;
    --border-soft: #EEF2F7;


    --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.03);
    --shadow-medium: 0 2px 10px rgba(0, 0, 0, 0.04);
    --shadow-strong: 0 4px 20px rgba(0, 0, 0, 0.06);


    --transition-fast: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}


/*
.bg-primary-var { background: var(--bg-primary); }
.bg-secondary-var { background: var(--bg-secondary); }
.bg-card-var { background: var(--bg-card); }
.bg-hover-var { background: var(--bg-hover); }
.bg-active-var { background: var(--bg-active); }
.text-primary-var { color: var(--text-primary); }
.text-secondary-var { color: var(--text-secondary); }
.text-muted-var { color: var(--text-muted); }
.text-light-var { color: var(--text-light); }
.border-light-var { border-color: var(--border-light); }
.border-medium-var { border-color: var(--border-medium); }
.border-soft-var { border-color: var(--border-soft); }
.shadow-soft-var { box-shadow: var(--shadow-soft); }
.shadow-medium-var { box-shadow: var(--shadow-medium); }
.shadow-strong-var { box-shadow: var(--shadow-strong); }
.primary-soft-bg { background: var(--primary-soft); }
.primary-soft-bg:hover { background: var(--primary-soft-hover); }
.primary-soft-text { color: var(--primary-soft); }
.primary-soft-text:hover { color: var(--primary-soft-hover); }
.primary-gradient-bg { background: var(--primary-gradient); }
.primary-gradient-bg:hover { background: var(--primary-gradient-hover); }
.transition-fast-var { transition: var(--transition-fast); }
.transition-normal-var { transition: var(--transition-normal); }
.transition-slow-var { transition: var(--transition-slow); } */
 */

i {
    color: var(--primary-gradient) !important;
}

/* Overlay background when loader is shown */
.loader-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.loader-overlay.show {
    display: block;
}


cv-spinner {
    background: var(--primary-soft);
    border-radius: 7px;
  }

  /* Handle on hover */
  cv-spinner:hover {
    background: var(--primary-soft);
  }

  .text-black{
    color: var(--primary-soft) !important;
  }

  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    color: var(--primary-soft)!important;
  }

  .page-title{
    color: var(--primary-soft) !important;
  }

  .card h2 i{
    color: var(--primary-soft) !important;
  }
/* ============================================
   BUTTONS - Eye-Friendly Unified Style
   ============================================ */

/* Primary Buttons - Soft Blue Gradient */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
.theme-btn,
button[type="submit"]:not(.btn-secondary):not(.btn-danger),
.btn-success {
    background: var(--primary-gradient) !important;
    /* color: var(--color-gray-600) !important; */
    color: var(--bg-primary) !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

/* .right-side-all-bottom{
    height: 70vh !important;
    max-height: 80vh !important;
} */


.dropdown-content {
    display: none;
    position: absolute;
    right: 0px;
    background-color: var(--bg-card) !important;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.colorgray {
    color: var(--text-muted) !important;
    font-size: 14px !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.theme-btn:hover,
button[type="submit"]:not(.btn-secondary):not(.btn-danger):hover,
.btn-success:hover {
    background: var(--primary-gradient-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(var(--primary-soft-rgb), 0.2);
}

.btn-primary:active,
.btn.btn-primary:active,
button.btn-primary:active,
a.btn-primary:active,
.theme-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(var(--primary-soft-rgb), 0.15);
}

/* Secondary Buttons - Soft & Eye-Friendly */
.btn-secondary,
.btn.btn-secondary,
button.btn-secondary {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-light) !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: var(--transition-normal);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
button.btn-secondary:hover {
    background: var(--bg-hover) !important;
    border-color: var(--primary-soft) !important;
    color: var(--primary-soft) !important;
    transform: translateY(0);
    box-shadow: var(--shadow-soft);
}

/* Danger Buttons - Softer Red */
.btn-danger,
.btn.btn-danger,
button.btn-danger {
    background: linear-gradient(135deg, #F56565 0%, #E53E3E 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-soft);
}

.btn-danger:hover,
.btn.btn-danger:hover,
button.btn-danger:hover {
    background: linear-gradient(135deg, #E53E3E 0%, #C53030 100%) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(229, 62, 62, 0.25);
}

/* Small Buttons */
.btn-sm,
.btn.btn-sm {
    padding: 8px 16px !important;
    font-size: 13px !important;
}

/* ============================================
   LABELS - Unified Style
   ============================================ */

.form-label,
label:not(.form-check-label):not(.badge):not(.status-badge) {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: inline-block;
    transition: var(--transition-fast);
}

/* .form-label:hover,
label:not(.form-check-label):not(.badge):not(.status-badge):hover {
    color: #00ADEE !important;
}

.form-label i,
label i {
    color: #00ADEE;
    margin-right: 6px;
}

/* Required Field Indicator
.form-label:has(+ *[required])::after,
label:has(+ *[required])::after,
.form-label.required::after,
label.required::after {
    content: ' *';
    color: #ef4444;
    font-weight: 700;
} */

/* ============================================
   SMOOTH TABLES - Eye-Friendly Design
   ============================================ */

/* Table Container - Smooth & Eye-Friendly (no overflow:hidden on table so sticky thead works) */
table,
.table,
.data-table,
table.dataTable,
.advance-data-table table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    background: var(--bg-card);
    transition: var(--transition-normal);
}

/* Table Headers - Sticky on top when scrolling vertically */
table thead,
.table thead,
.data-table thead,
table.dataTable thead,
.advance-data-table table thead {
    background: var(--primary-gradient) !important;
    position: sticky;
    top: -1 !important;
    z-index: 25;
}

table thead th,
.table thead th,
.data-table thead th,
table.dataTable thead th,
.advance-data-table table thead th,
#templatesTable thead th,
#campaignTable thead th,
#eventsDataTable thead th,
#commonListFileData thead th {
    background: var(--primary-gradient) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 11px 16px !important;
    text-align: center !important;
    /* text-transform: uppercase !important; */
    letter-spacing: 0.5px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: var(--transition-fast);
    position: sticky !important;
    top: 0 !important;
    z-index: 25;
}

table thead th:last-child,
.table thead th:last-child,
.data-table thead th:last-child {
    border-right: none !important;
}

/* Table Body - Smooth Rows */
table tbody,
.table tbody,
.data-table tbody,
table.dataTable tbody,
.advance-data-table table tbody {
    background: var(--bg-card);
}

/* Force ALL table rows to be white - No alternating colors */
table tbody tr,
.table tbody tr,
.table-bordered tbody tr,
.table-hover tbody tr,
.table-striped tbody tr,
.data-table tbody tr,
table.dataTable tbody tr,
.advance-data-table table tbody tr,
#templatesTable tbody tr,
#campaignTable tbody tr,
#eventsDataTable tbody tr,
#commonListFileData tbody tr {
    background-color: var(--bg-card) !important;
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--border-soft) !important;
}

/* Remove any stripe/alternating color classes */
table tbody tr.odd,
table tbody tr.even,
.table-striped tbody tr:nth-child(odd),
.table-striped tbody tr:nth-child(even),
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
    background-color: var(--bg-card) !important;
}

/* Smooth hover effect - Softer, more comfortable */
table tbody tr:hover,
.table tbody tr:hover,
.table-bordered tbody tr:hover,
.table-hover tbody tr:hover,
.table-striped tbody tr:hover,
.data-table tbody tr:hover,
table.dataTable tbody tr:hover,
.advance-data-table table tbody tr:hover {
    background-color: var(--bg-hover) !important;
    box-shadow: 0 1px 4px rgba(var(--primary-soft-rgb), 0.05);
    transition: var(--transition-normal);
}

/* Table Cells - Smooth Borders */
table tbody td,
.table tbody td,
.data-table tbody td,
table.dataTable tbody td,
.advance-data-table table tbody td {
    padding: 14px 16px !important;
    border: none !important;
    border-right: 1px solid var(--border-soft) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    transition: var(--transition-fast);
}

table tbody td:last-child,
.table tbody td:last-child,
.data-table tbody td:last-child {
    border-right: none !important;
}

table tbody tr:last-child td,
.table tbody tr:last-child td,
.data-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Table Links in Cells */
table tbody td a,
.table tbody td a,
.data-table tbody td a {
    color: var(--primary-soft) !important;
    text-decoration: none;
    transition: var(--transition-fast);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

table tbody td a:hover,
.table tbody td a:hover,
.data-table tbody td a:hover {
    color: var(--primary-soft-hover) !important;
    background: var(--bg-active);
}

/* Table Badges/Status Pills */
table tbody td .badge,
.table tbody td .badge,
.data-table tbody td .badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    transition: var(--transition-fast);
    display: inline-block;
}

table tbody td .badge:hover,
.table tbody td .badge:hover,
.data-table tbody td .badge:hover {
    box-shadow: var(--shadow-soft);
    opacity: 0.95;
}

/* ============================================
   PAGINATION - Single Border Only (No Extra Borders)
   ============================================ */

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px !important;
    margin: 0 2px !important;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    color: #111827 !important;
    background: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    border-style: solid !important;
    border-width: 1px !important;
    background-clip: padding-box !important;
}

 Remove pseudo-elements that might create extra borders
.dataTables_wrapper .dataTables_paginate .paginate_button::before,
.dataTables_wrapper .dataTables_paginate .paginate_button::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled) {
    border: 1px solid #d1d5db !important;
    background: white !important;
    border-style: solid !important;
    border-width: 1px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background-color: #f3f4f6 !important;
    border-color: #00BFFF !important;
    color: #00BFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 191, 255, 0.2);

    border-style: solid !important;
    border-width: 1px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #00ADEE, #3b82f6) !important;
    color: white !important;
    border: 1px solid #00BFFF !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 191, 255, 0.3);

    border-style: solid !important;
    border-width: 1px !important;
    background-clip: padding-box !important;
}


.dataTables_wrapper .dataTables_paginate .paginate_button.current::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.current::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border: 1px solid #d1d5db !important;
    background: white !important;
    color: #9ca3af !important;
    border-style: solid !important;
    border-width: 1px !important;
}


.pagination .page-link {
    border: 1px solid #d1d5db !important;
    color: #111827;
    background: white;
    border-radius: 6px !important;
    margin: 0 2px;
    padding: 6px 12px;
    transition: all 0.2s ease;
    box-shadow: none !important;
    outline: none !important;

    border-style: solid !important;
    border-width: 1px !important;
    background-clip: padding-box !important;
}

 Remove pseudo-elements
.pagination .page-link::before,
.pagination .page-link::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.pagination .page-link:hover:not(.disabled) {
    background-color: #f3f4f6 !important;
    border-color: #00BFFF !important;
    color: #00BFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 191, 255, 0.2);
    border-style: solid !important;
    border-width: 1px !important;
}


/* Bootstrap pagination base – single light border, no extra borders */
.pagination .page-link {
    border: 0px solid var(--border-soft) !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    outline: none !important;
}

.pagination .page-link::before,
.pagination .page-link::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.pagination .page-item.active .page-link {
    border-radius: 8px !important;
    background: var(--primary-gradient) !important;
    color: white !important;
    border: 0px solid var(--primary-soft) !important;
    font-weight: 600;
    box-shadow: none !important;
    background-clip: padding-box !important;
    transition: var(--transition-normal);
}

.pagination .page-item.active .page-link:hover {
    border-radius: 6px !important;
}

.pagination .page-item.active .page-link::before,
.pagination .page-item.active .page-link::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-card) !important;
    color: var(--text-muted) !important;
    border: 0px solid var(--border-soft) !important;
}


/* ============================================
   FORM CONTROLS - Unified Style
   ============================================ */

.form-control:not(.form-check-input),
.form-select,
select.form-control {
    /* border: 1px solid var(--border-light) !important; */
    border-radius: 10px !important;
    /* padding: 12px 16px !important; */
    font-size: 14px !important;
    transition: var(--transition-normal);
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.form-control:focus:not(.form-check-input),
.form-select:focus,
select.form-control:focus {
    border-color: var(--primary-soft) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-soft-rgb), 0.08) !important;
    background-color: var(--bg-card) !important;
}

/* ============================================
   BADGES & STATUS LABELS - Hover Effects
   ============================================ */

.badge,
.status-badge,
.status-badge-toggle {
    transition: all 0.2s ease;
    cursor: pointer;
}

.badge:hover,
.status-badge:hover,
.status-badge-toggle:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    opacity: 0.92;
}

/* ============================================
   ACTION BUTTONS IN TABLES
   ============================================ */

.btn-action,
.action-buttons .btn,
.action-buttons a {
    transition: all 0.2s ease;
}

.btn-action:hover,
.action-buttons .btn:hover,
.action-buttons a:hover {
    opacity: 0.92;
}

/* ============================================
   OVERRIDE SPECIFIC BUTTON STYLES
   ============================================ */

/* Remove any double borders or extra borders */
.btn,
button,
a.btn {
    box-shadow: none !important;
    outline: none !important;
}

.btn:focus,
button:focus,
a.btn:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-soft-rgb), 0.08) !important;
    outline: none !important;
}

/* ============================================
   OVERRIDE DATATABLES ALTERNATING COLORS
   ============================================ */

/* Override DataTables striped/alternating row colors - Smooth & Eye-Friendly */
.dataTable.table-striped tbody tr,
.dataTable.table-striped tbody tr.odd,
.dataTable.table-striped tbody tr.even,
.dataTable.table-striped tbody tr:nth-of-type(odd),
.dataTable.table-striped tbody tr:nth-of-type(even),
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
table.dataTable tbody tr:nth-child(odd),
table.dataTable tbody tr:nth-child(even) {
    background-color: var(--bg-card) !important;
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--border-soft) !important;
}

.dataTable.table-striped tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: var(--bg-hover) !important;
    box-shadow: 0 1px 4px rgba(var(--primary-soft-rgb), 0.05);
    transition: var(--transition-normal);
}

/* Override DataTables cell backgrounds - Smooth */
.dataTable tbody tr.odd td,
.dataTable tbody tr.even td,
table.dataTable tbody tr.odd td,
table.dataTable tbody tr.even td,
.dataTable.table-striped tbody tr.odd td,
.dataTable.table-striped tbody tr.even td {
    background-color: var(--bg-card) !important;
    transition: var(--transition-fast);
}

/* Table Responsive Container - Smooth; overflow:auto so sticky thead works when scrolling */
.table-responsive {
    border-radius: 12px;
    overflow: auto !important;
    box-shadow: var(--shadow-soft);
    background: var(--bg-card);
    transition: var(--transition-normal);
}

.table-responsive:hover {
    box-shadow: var(--shadow-soft);
}

/* Table Action Buttons - Smooth */
table .btn-action,
.table .btn-action,
.data-table .btn-action {
    padding: 6px 12px;
    border-radius: 8px;
    transition: var(--transition-normal);
    margin: 0 4px;
}

table .btn-action:hover,
.table .btn-action:hover,
.data-table .btn-action:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

/* Table Search & Filter - Smooth */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border-light) !important;
    border-radius: 10px !important;
    padding: 7px 14px !important;
    transition: var(--transition-normal);
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--primary-soft) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-soft-rgb), 0.08) !important;
    outline: none !important;
}

/* Additional overrides to ensure single borders and white rows */

/* Filter Buttons - Eye-Friendly */
.filter-btn {
    border: 1px solid var(--border-light) !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    transition: var(--transition-normal);
    border-radius: 10px !important;
    box-shadow: var(--shadow-soft);
}

.filter-btn:hover {
    border-color: var(--primary-soft) !important;
    color: var(--primary-soft) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    background: var(--bg-hover) !important;
}

.filter-btn.active {
    background: var(--primary-gradient) !important;
    color: white !important;
    border-color: var(--primary-soft) !important;
    box-shadow: var(--shadow-soft);
}

/* ============================================
   ADDITIONAL SMOOTH TABLE ENHANCEMENTS
   ============================================ */

/* Smooth table loading animation – softer */
@keyframes fadeInTable {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

table,
.table,
.data-table,
table.dataTable {
    animation: fadeInTable 0.5s ease-out;
}

/* Smooth table cell content */
table tbody td,
.table tbody td,
.data-table tbody td {
    position: relative;
}

/* Smooth status badges in tables – softer */
table .badge-success,
.table .badge-success,
.data-table .badge-success {
    background: linear-gradient(135deg, #68D391 0%, #48BB78 100%) !important;
    color: white !important;
    box-shadow: 0 1px 3px rgba(72, 187, 120, 0.25);
}

table .badge-warning,
.table .badge-warning,
.data-table .badge-warning {
    background: linear-gradient(135deg, #F6AD55 0%, #ED8936 100%) !important;
    color: white !important;
    box-shadow: 0 1px 3px rgba(237, 137, 54, 0.25);
}

table .badge-danger,
.table .badge-danger,
.data-table .badge-danger {
    background: linear-gradient(135deg, #FC8181 0%, #F56565 100%) !important;
    color: white !important;
    box-shadow: 0 1px 3px rgba(245, 101, 101, 0.25);
}

table .badge-info,
.table .badge-info,
.data-table .badge-info {
    background: var(--primary-gradient) !important;
    color: white !important;
    box-shadow: 0 1px 3px rgba(var(--primary-soft-rgb), 0.25);
}

/* Smooth table icons */
table tbody td i,
.table tbody td i,
.data-table tbody td i {
    transition: var(--transition-fast);
}

table tbody td:hover i,
.table tbody td:hover i,
.data-table tbody td:hover i {
    color: var(--text-primary);
    transform: scale(1.05);
}

/* Smooth table row selection */
table tbody tr.selected,
.table tbody tr.selected,
.data-table tbody tr.selected {
    background-color: var(--bg-active) !important;
    border-left: 2px solid var(--primary-soft) !important;
}

/* Smooth table empty state */
.table-empty,
.data-table-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 16px;
}

/* Smooth table loading spinner */
.table-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: var(--primary-soft);
}



.config-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-soft);
}

.config-card:hover {
    border-color: var(--border-light);
    box-shadow: 0 2px 12px rgba(var(--primary-soft-rgb), 0.06);
}

.config-card h5 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.config-card h5 i {
    color: var(--primary-soft);
}

.page-header h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-soft);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header h4 i {
    color: var(--primary-soft);
}
/*
        .h5, h5 {
            font-size: 1.25rem;
            color: var(--primary-color) !important;
        } */

.advance-data-table table thead tr th {
    background: var(--primary-gradient) !important;
    color: var(--color-gray-600) !important;
    font-size: 15px;
    white-space: nowrap;
    font-weight: 600;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border-soft);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    position: sticky !important;
    top: 0 !important;
    z-index: 25;
    cursor: pointer;
}

.advance-data-table table thead tr th:last-child {
    border-right: none;
}