/* --- Global SB-Admin-2 Sidebar Color Override --- */
.bg-gradient-primary {
    background-color: #0b0f19 !important;
    background-image: linear-gradient(180deg, #0b0f19 10%, #1e293b 100%) !important;
    background-size: cover !important;
}

/* Sidebar brand and divider text styling */
.sidebar-dark .sidebar-brand {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}
.sidebar-dark .sidebar-heading {
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
}

/* Active Sidebar Navigation Highlight */
.sidebar-dark .nav-item.active .nav-link {
    color: #F7941D !important;
    font-weight: 700 !important;
}
.sidebar-dark .nav-item.active .nav-link i {
    color: #F7941D !important;
}
.sidebar-dark .nav-item .nav-link:hover {
    color: #fff !important;
}
.sidebar-dark .nav-item .nav-link:hover i {
    color: #F7941D !important;
}

/* Add an elegant left vertical border indicator on active sidebar link */
.sidebar-dark .nav-item.active {
    border-left: 4px solid #F7941D !important;
}

/* --- Accent Colors Override (Primary Buttons, Texts, Alerts) --- */
.btn-primary {
    color: #fff !important;
    background-color: #F7941D !important;
    border-color: #F7941D !important;
    box-shadow: 0 4px 10px rgba(247, 148, 29, 0.2) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
}
.btn-primary:hover {
    background-color: #e08316 !important;
    border-color: #e08316 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(247, 148, 29, 0.3) !important;
}

.text-primary {
    color: #F7941D !important;
}

/* Border indicators for cards */
.border-left-primary {
    border-left: 0.25rem solid #F7941D !important;
}
.border-bottom-primary {
    border-bottom: 0.25rem solid #F7941D !important;
}

/* Pagination Highlights */
.page-item.active .page-link {
    z-index: 3 !important;
    color: #fff !important;
    background-color: #F7941D !important;
    border-color: #F7941D !important;
}
.page-link {
    color: #F7941D !important;
}
.page-link:hover {
    color: #e08316 !important;
    background-color: #f8f9fc !important;
    border-color: #dddfeb !important;
}

/* --- Modern Dashboard Cards (Compact Style) --- */
.card {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    overflow: visible !important;
}
.card:focus-within {
    position: relative !important;
    z-index: 25 !important;
}
.card-header {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 10px 16px !important; /* Compact header */
}
.card-body {
    padding: 12px 16px !important; /* Compact body */
    overflow: visible !important;
}

/* TomSelect dropdown fix for cards and stacking context */
.ts-wrapper {
    position: relative !important;
}
.ts-wrapper.focus {
    z-index: 100 !important;
}
.ts-dropdown {
    z-index: 1060 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}
.ts-dropdown .ts-dropdown-content {
    max-height: 250px !important;
}

/* --- Premium & Beautiful Table Redesign (SaaS Grid Style) --- */
.table {
    color: #334155 !important;
    border-collapse: collapse !important;
    width: 100% !important;
}
.table thead th {
    background-color: #f8fafc !important; /* Very soft light grey */
    color: #64748b !important; /* Muted modern grey */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.8px !important;
    border-top: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 10px 14px !important;
}
.table tbody td {
    padding: 10px 14px !important;
    border-top: none !important;
    border-bottom: 1px solid #f1f5f9 !important; /* Soft bottom boundary line only */
    vertical-align: middle !important;
    font-size: 0.82rem !important;
    color: #475569 !important;
}
.table-hover tbody tr:hover {
    background-color: #fafbfd !important; /* Extremely soft light highlight */
    transition: background-color 0.15s ease !important;
}

/* Premium Square Rounded Card Badge for Table Images */
.table-img-badge {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    cursor: pointer !important;
    margin-right: 12px !important;
}
.table-img-badge img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    display: block !important;
}
.table-img-badge:hover {
    transform: scale(1.35) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    z-index: 100 !important;
}

/* Sleek Minimalist Action Buttons inside Lists */
.table .btn-sm {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
}
/* Style Edit / Delete badges as soft rounded buttons */
.table .btn-primary.btn-sm {
    background-color: rgba(247, 148, 29, 0.08) !important;
    color: #F7941D !important;
    border: 1px solid rgba(247, 148, 29, 0.15) !important;
    box-shadow: none !important;
}
.table .btn-primary.btn-sm:hover {
    background-color: #F7941D !important;
    color: #fff !important;
    border-color: #F7941D !important;
}
.table .btn-danger.btn-sm {
    background-color: rgba(239, 68, 68, 0.08) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
    box-shadow: none !important;
}
.table .btn-danger.btn-sm:hover {
    background-color: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
}

/* --- Premium Form Controls (SaaS Input Style) --- */
.form-group {
    margin-bottom: 15px !important; /* Spacious but tight vertical margins */
}
.form-group label {
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: #475569 !important;
    letter-spacing: 0.2px !important;
}
.form-control {
    height: auto !important;
    padding: 10px 14px !important; /* High density clean spacing */
    font-size: 0.85rem !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important; /* Soft grey background when idle */
    color: #1e293b !important;
    transition: all 0.2s ease-in-out !important;
}
.form-control:focus {
    background-color: #fff !important; /* Turns white on focus */
    border-color: #F7941D !important;
    box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.15) !important;
    outline: 0 !important;
}
select.form-control {
    padding-right: 28px !important; /* Spacing for select arrow */
}
textarea.form-control {
    min-height: 100px !important;
    resize: vertical !important;
}

/* --- Premium Translucent Status Badges (SaaS Style) --- */
.badge {
    padding: 6px 12px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
}
.badge-success {
    background-color: rgba(22, 163, 74, 0.08) !important;
    color: #16a34a !important;
    border: 1px solid rgba(22, 163, 74, 0.15) !important;
}
.badge-warning {
    background-color: rgba(217, 119, 6, 0.08) !important;
    color: #d97706 !important;
    border: 1px solid rgba(217, 119, 6, 0.15) !important;
}
.badge-danger {
    background-color: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
}
.badge-info, .badge-primary {
    background-color: rgba(247, 148, 29, 0.08) !important;
    color: #F7941D !important;
    border: 1px solid rgba(247, 148, 29, 0.15) !important;
}

/* --- Header / Top Navigation Bar --- */
.navbar {
    background-color: #fff !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05) !important;
}

/* --- Top Bar Search input glow --- */
.sidebar .sidebar-card,
.topbar #sidebarToggleTop {
    color: #475569 !important;
}
.input-group .form-control:focus {
    border-color: #F7941D !important;
}

/* --- Compact Sidebar Menu Styling --- */
.sidebar .nav-item .nav-link {
    padding: 0.45rem 1rem !important;
    font-size: 0.78rem !important;
}
.sidebar .nav-item .nav-link i {
    font-size: 0.82rem !important;
    margin-right: 0.4rem !important;
}
.sidebar .sidebar-heading {
    margin-top: 0.4rem !important;
    margin-bottom: 0.15rem !important;
    padding: 0 1rem !important;
}
.sidebar .sidebar-brand {
    height: 3.2rem !important;
}
.collapse-inner .collapse-item {
    padding: 0.3rem 1rem !important;
    font-size: 0.75rem !important;
}
.sidebar-dark .nav-item.active {
    border-left: 3px solid #F7941D !important;
}

/* --- Global Compact Layout Elements --- */
.container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.d-sm-flex.mb-4 {
    margin-bottom: 12px !important;
}
h1.h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 0px !important;
}
.topbar {
    height: 3.2rem !important;
}
.btn {
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
}
.btn-sm {
    padding: 3px 8px !important;
    font-size: 0.72rem !important;
}
.alert {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    margin-bottom: 12px !important;
}

/* =====================================================
   GLOBAL TABLE THUMBNAIL ENFORCEMENT — 44px × 44px
   Applies to images NOT already inside .table-img-badge
   ===================================================== */

/* For images directly in a td (no badge wrapper) */
.table td > img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Badge images — override global rules cleanly */
.table-img-badge img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 8px !important;
}

/* Flex row: badge + text — ensure gap so they never overlap */
.table td .d-flex.align-items-center {
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* Text block next to badge — prevent overflow into image */
.table td .d-flex.align-items-center > div:not(.table-img-badge) {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
}

.table td .d-flex.align-items-center > div:not(.table-img-badge) strong,
.table td .d-flex.align-items-center > div:not(.table-img-badge) small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important; word-break: break-word !important; line-height: 1.3 !important;
}

/* User avatar circle */
.table td img.rounded-circle,
.table-img-badge img[style*="border-radius:50%"] {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Lightbox preview image — NOT constrained to 44px */
#imagePreviewSrc {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    min-width: unset !important;
    min-height: unset !important;
    object-fit: contain !important;
    display: block !important;
}

/* --- Pagination & SVG Icon Size Protection --- */
.pagination svg,
nav[role="navigation"] svg,
.dataTables_wrapper svg,
nav svg {
    width: 1rem !important;
    height: 1rem !important;
    max-width: 1rem !important;
    max-height: 1rem !important;
    display: inline-block !important;
}

.pagination {
    margin-bottom: 0 !important;
}

.page-item.active .page-link {
    background-color: #F7941D !important;
    border-color: #F7941D !important;
    color: #fff !important;
}

.page-link {
    color: #4e73df;
}

.page-link:hover {
    color: #F7941D;
}

/* --- Sidebar Brand Logo Responsive Toggle --- */
.sidebar .sidebar-brand {
    height: auto !important;
    min-height: 4.5rem !important;
    padding: 0.75rem 1rem !important;
}

.sidebar:not(.toggled) .sidebar-brand-icon {
    display: none !important;
}

.sidebar.toggled .sidebar-brand-icon {
    display: block !important;
    margin: 0 auto !important;
}

.sidebar.toggled .sidebar-brand-text {
    display: none !important;
}