/**
 * ═══════════════════════════════════════════════════════════════
 * SOVERSE GLOBAL CSS FIX & UNIFIED 2026 FLAT DESIGN SYSTEM
 * Kalıcı düzeltmeler — tüm panellerde (master + tenant) geçerli
 * Referans Standart: Onaylı Görev Kartı (#task-modal)
 * ═══════════════════════════════════════════════════════════════
 */

:root {
    --sv-accent: #4F46E5;
    --sv-accent-hover: #4338CA;
    --sv-accent-soft: #EEF2FF;
    --sv-accent-border: #C7D2FE;
    --sv-brand: #4F5DA7;
    --sv-surface: #FFFFFF;
    --sv-surface-2: #F8FAFC;
    --sv-surface-hover: #F1F5F9;
    --sv-bg-page: #F8FAFC;
    --sv-text: #0F172A;
    --sv-text-body: #334155;
    --sv-text-sec: #64748B;
    --sv-text-muted: #94A3B8;
    --sv-border: #E2E8F0;
    --sv-border-hover: #CBD5E1;
    --sv-border-subtle: #F1F5F9;
    --sv-radius-ctrl: 8px;
    --sv-radius-card: 12px;
    --sv-radius-inner: 10px;
    --sv-ctrl-h: 38px;
    --sv-btn-h: 36px;
    --sv-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
}

/* ─── 1. PAGINATION FIX ────────────────────────────────────────
 * DataTables pagination: div > a.paginate_button (li yok!)
 * Bootstrap pagination: ul.pagination > li > a
 */

/* DataTables pagination wrapper */
.dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 0 !important;
}

/* DataTables doğrudan a.paginate_button yapısı */
.dataTables_paginate > a.paginate_button,
.dataTables_paginate > span > a.paginate_button,
a.paginate_button {
    border-radius: 6px !important;
    min-width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 2px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    border: 1px solid #dee2e6 !important;
    background: #fff !important;
    color: #4f5da7 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Aktif buton — DataTables */
.dataTables_paginate > a.paginate_button.current,
.dataTables_paginate > span > a.paginate_button.current,
a.paginate_button.current {
    background: #4f5da7 !important;
    border-color: #4f5da7 !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

/* Devre dışı — DataTables */
.dataTables_paginate > a.paginate_button.disabled,
a.paginate_button.disabled {
    color: #adb5bd !important;
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Hover — DataTables */
.dataTables_paginate > a.paginate_button:not(.current):not(.disabled):hover,
a.paginate_button:not(.current):not(.disabled):hover {
    background: #e9ecef !important;
    color: #3d4a8a !important;
    border-color: #ced4da !important;
}

/* Bootstrap ul>li>a yapısı (fallback) */
body .pagination > li > a,
body .pagination > li > span,
body .pagination > li:first-child > a,
body .pagination > li:last-child > a,
body .pagination > li:first-child > span,
body .pagination > li:last-child > span {
    border-radius: 6px !important;
    min-width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 2px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    border: 1px solid #dee2e6 !important;
    background: #fff !important;
    color: #4f5da7 !important;
    text-decoration: none !important;
}

body .pagination > .active > a,
body .pagination > .active > span {
    background: #4f5da7 !important;
    border-color: #4f5da7 !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

body .pagination > .disabled > a,
body .pagination > .disabled > span {
    color: #adb5bd !important;
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
}

body .pagination > li:not(.active):not(.disabled) > a:hover {
    background: #e9ecef !important;
    color: #3d4a8a !important;
    border-color: #ced4da !important;
}



/* ─── 2. DATATABLE SÜTUN ORANI FIX ─────────────────────────────
 * Sorun: compiled-main-style.css L3024 → first-child max-width: 60px !important
 *        → AD SOYAD sütunu 50px'e sıkışıyor, E-POSTA gereksiz geniş
 */

/* İlk sütun (checkbox/avatar) — makul boyut */
table.dataTable thead th:first-child,
table.dataTable tbody td:first-child,
.table thead th:first-child,
.table tbody td:first-child {
    width: auto !important;
    min-width: 40px !important;
    max-width: none !important;
}

/* Tablo başlıkları — daha iyi oran */
table.dataTable thead th,
table.table thead th,
.table > thead > tr > th {
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 10px 12px !important;
    color: #495057 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* Hücre padding ve alignment */
table.dataTable tbody td,
.table tbody td {
    vertical-align: middle !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Tablo responsive container */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* DataTables auto-width düzeltmesi */
table.dataTable {
    width: 100% !important;
    table-layout: auto !important;
}

/* ─── 3. SIDEBAR & LAYOUT (Tablet / iPad & Desktop >= 768px) ─── */
@media (min-width: 768px) {
    /* Normal State (Sidebar Visible) */
    #menu,
    #setup-menu-wrapper {
        width: 270px !important;
        margin-left: 0 !important;
        transform: none !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        min-height: 100vh !important;
        height: auto !important;
        z-index: 100 !important;
        background: #ffffff !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transition: margin-left 0.22s ease-in-out !important;
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05) !important;
    }

    body:not(.hide-sidebar):not(.poly-hide-sidebar):not(.customers) #wrapper {
        margin-left: 270px !important;
        width: calc(100% - 270px) !important;
        transition: margin-left 0.22s ease-in-out, width 0.22s ease-in-out !important;
    }

    body:not(.hide-sidebar):not(.poly-hide-sidebar):not(.customers) #header {
        margin-left: 270px !important;
        margin-right: 0 !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        transition: margin-left 0.22s ease-in-out !important;
    }

    /* Collapsed State (Toggled via hamburger button) */
    body.hide-sidebar #menu,
    body.poly-hide-sidebar #menu,
    body.hide-sidebar #setup-menu-wrapper,
    body.poly-hide-sidebar #setup-menu-wrapper {
        margin-left: -270px !important;
        transform: none !important;
    }

    body.hide-sidebar #wrapper,
    body.hide-sidebar #header,
    body.poly-hide-sidebar #wrapper,
    body.poly-hide-sidebar #header {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Single logo: Hide duplicate header logo because sidebar logo is visible */
    #header #logo {
        display: none !important;
    }

    /* Never show dark overlay on tablet/desktop */
    .soverse-sidebar-overlay,
    #soverse-sidebar-overlay {
        display: none !important;
    }

    /* Never lock body scroll on tablet/desktop */
    body.show-sidebar,
    body.sv-sidebar-open {
        overflow: auto !important;
    }

    .sidebar-close-btn {
        display: none !important;
    }
}

/* Public sayfalar (teklif, sözleşme, fatura önizleme ve müşteri login) — TÜM margin'leri sıfırla */
body:not(.admin).proposal-view #wrapper,
body:not(.admin).proposal-view #main-wrapper,
body:not(.admin).contract-view #wrapper,
body:not(.admin).contract-view #main-wrapper,
body:not(.admin).viewinvoice #wrapper,
body:not(.admin).viewestimate #wrapper,
body:not(.admin).viewproposal #wrapper,
body:not(.admin).viewcontract #wrapper,
body.customers_login #wrapper,
body.customers.proposal-view #wrapper,
body.customers.contract-view #wrapper {
    margin: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* Müşteri Portalı (Giriş yapılmış oturum) — Masaüstünde 235px sidebar ofseti ve tam genişlik */
@media (min-width: 850px) {
    body.customers:not(.customers_login):not(.proposal-view):not(.contract-view):not(.viewinvoice) #wrapper {
        margin-left: 235px !important;
        width: calc(100% - 235px) !important;
        min-height: 100vh !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    body.customers:not(.customers_login):not(.proposal-view):not(.contract-view):not(.viewinvoice) #content {
        padding: 24px 28px 40px 28px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.customers:not(.customers_login):not(.proposal-view):not(.contract-view):not(.viewinvoice) .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
    body.customers:not(.customers_login):not(.proposal-view):not(.contract-view):not(.viewinvoice) .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Teklif sayfası için ekstra güvence */
body.proposal-view,
body.contract-view {
    background-color: #f4f4f5;
}

/* Sidebar menü yapısı & accordion stabilizasyonu */
#side-menu,
#setup-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 8px 0 24px 0 !important;
    width: 100% !important;
}

#side-menu > li,
#setup-menu > li {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    margin: 2px 0 !important;
}

/* Ana menü butonları */
#side-menu > li > a,
#setup-menu > li > a,
.sidebar-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    margin: 0 8px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    position: relative !important;
    cursor: pointer !important;
}

#side-menu > li > a:hover,
#setup-menu > li > a:hover {
    background-color: rgba(79, 93, 167, 0.08) !important;
    color: #4f5da7 !important;
}

#side-menu > li.active > a,
#side-menu > li > a[aria-expanded="true"],
#setup-menu > li.active > a,
#setup-menu > li > a[aria-expanded="true"] {
    background-color: rgba(79, 93, 167, 0.12) !important;
    color: #4f5da7 !important;
    font-weight: 600 !important;
}

/* Sidebar ikonları */
#side-menu > li > a i.menu-icon,
#setup-menu > li > a i.menu-icon {
    width: 22px !important;
    min-width: 22px !important;
    text-align: center !important;
    font-size: 14.5px !important;
    margin-right: 10px !important;
    color: #6b7280 !important;
    flex-shrink: 0 !important;
}

#side-menu > li:hover > a i.menu-icon,
#side-menu > li.active > a i.menu-icon,
#setup-menu > li:hover > a i.menu-icon,
#setup-menu > li.active > a i.menu-icon {
    color: #4f5da7 !important;
}

/* Menü metni */
#side-menu > li > a .menu-text,
#setup-menu > li > a .menu-text {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
}

/* Ok simgesi (Arrow) */
#side-menu .arrow,
#setup-menu .arrow {
    margin-left: auto !important;
    font-size: 11px !important;
    color: #9ca3af !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}

#side-menu .fa.arrow:before,
#setup-menu .fa.arrow:before {
    content: "\f105" !important; /* Chevron right */
}

#side-menu li.active > a > .arrow,
#side-menu li > a[aria-expanded="true"] > .arrow,
#setup-menu li.active > a > .arrow,
#setup-menu li > a[aria-expanded="true"] > .arrow {
    transform: rotate(90deg) !important;
    color: #4f5da7 !important;
}

/* Badge */
#side-menu .badge,
#setup-menu .badge {
    margin-left: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
}

/* Alt menü sarmalayıcısı (ul.nav-second-level) - Flat Theme uyumlu temiz düzen */
#side-menu ul.nav-second-level,
#setup-menu ul.nav-second-level {
    list-style: none !important;
    padding: 6px 0 !important;
    margin: 3px 6px 6px 6px !important;
    background-color: #f8fafc !important;
    border-radius: 6px !important;
    border: none !important;
    border-left: none !important;
}

#side-menu ul.nav-second-level.collapse:not(.in),
#setup-menu ul.nav-second-level.collapse:not(.in) {
    display: none;
}

#side-menu ul.nav-second-level.collapse.in,
#setup-menu ul.nav-second-level.collapse.in {
    display: block !important;
}

/* Alt menü elemanları */
#side-menu ul.nav-second-level > li,
#setup-menu ul.nav-second-level > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#side-menu ul.nav-second-level > li > a,
#setup-menu ul.nav-second-level > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px 8px 24px !important;
    font-size: 13px !important;
    color: #4b5563 !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    margin: 2px 6px !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border: none !important;
}

#side-menu ul.nav-second-level > li > a:hover,
#setup-menu ul.nav-second-level > li > a:hover {
    background-color: rgba(79, 93, 167, 0.08) !important;
    color: #4f5da7 !important;
    font-weight: 500 !important;
    padding-left: 28px !important;
}

#side-menu ul.nav-second-level > li.active > a,
#setup-menu ul.nav-second-level > li.active > a {
    background-color: rgba(79, 93, 167, 0.12) !important;
    color: #4f5da7 !important;
    font-weight: 600 !important;
}

#side-menu ul.nav-second-level > li > a i.menu-icon,
#setup-menu ul.nav-second-level > li > a i.menu-icon {
    width: 18px !important;
    min-width: 18px !important;
    font-size: 13px !important;
    margin-right: 10px !important;
    color: #9ca3af !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    border: none !important;
}

#side-menu ul.nav-second-level > li > a:hover i.menu-icon,
#side-menu ul.nav-second-level > li.active > a i.menu-icon {
    color: #4f5da7 !important;
}

/* ─── 4. DROPDOWN MENÜ FIX ─────────────────────────────────────
 * Sorun: Dropdown'lar içeriğin üstünde/altında yanlış katmanda açılıyor
 * Select2 ve Bootstrap-Select dahil
 */
.dropdown-menu {
    z-index: 9999 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 6px 0 !important;
}

.dropdown-menu > li > a {
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: #333 !important;
}

.dropdown-menu > li > a:hover {
    background: #f5f7fa !important;
    color: #4f5da7 !important;
}

/* Select2 dropdown — form alanlarının üstünde düzgün açılsın */
.select2-container--open .select2-dropdown {
    z-index: 100005 !important;
}

.select2-container {
    z-index: 1 !important;
}

.select2-container--open {
    z-index: 100005 !important;
}

/* Bootstrap-Select dropdown — aynı z-index düzeltmesi */
.bootstrap-select .dropdown-menu {
    z-index: 100005 !important;
}

.bootstrap-select.open .dropdown-menu {
    z-index: 100005 !important;
}

/* Form alanları içindeki dropdown'lar — parent overflow hidden sorununu çöz */
.form-group {
    position: relative !important;
}

/* Select2 dropdown body'ye eklenen versiyonu */
body > .select2-container--open {
    z-index: 100005 !important;
}

/* ─── 5. MODAL/POPUP FIX ──────────────────────────────────────
 * Sorun: Modal açılırken kayma, arka plan scroll
 */
body.app.admin .modal-backdrop {
    z-index: 100050 !important;
}

body.app.admin .modal {
    z-index: 100060 !important;
}

body.modal-open .widget,
body.modal-open .panel,
body.modal-open .ui-sortable,
body.modal-open .row,
body.modal-open .content,
body.modal-open #wrapper {
    z-index: auto !important;
}

.modal-dialog {
    margin: 30px auto !important;
}

.modal-content {
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    border: none !important;
}

/* ─── 6. BUTON FIX ─────────────────────────────────────────────
 * Bootstrap butonlarının düzgün render edilmesi
 */
.btn {
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.btn-primary {
    background: #4f5da7 !important;
    border-color: #4f5da7 !important;
}

.btn-primary:hover {
    background: #3d4a8a !important;
    border-color: #3d4a8a !important;
}

.btn-success {
    background: #28a745 !important;
    border-color: #28a745 !important;
}

.btn-default {
    background: #fff !important;
    border-color: #ced4da !important;
    color: #495057 !important;
}

.btn-default:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
}

/* ─── 7. HEADER/TOPBAR FIX ─────────────────────────────────────
 * Header navbar düzeltmeleri
 */
#header .navbar-header,
#header .nav.navbar-nav {
    display: flex !important;
    align-items: center !important;
}

/* ─── 8. CHECKBOX FILTER ROW ──────────────────────────────────
 * Sorun: Çok fazla kolon checkbox'u olunca satır taşıyor
 * Çözüm: Scrollable container + compact stiller
 */
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* Checkbox filter satırı — kaydırılabilir */
.dataTables_wrapper > div:first-child,
.dataTables_wrapper .top {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Checkbox'lar — compact ve tek satır */
.dataTables_wrapper .checkbox-inline,
.dataTables_wrapper label {
    font-size: 11px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    padding: 2px 6px !important;
}

/* Checkbox satırının sarmalayıcı div'i */
.dataTables_wrapper .checkbox-inline input[type="checkbox"] {
    margin-right: 3px !important;
}

/* DataTables info text */
.dataTables_info {
    font-size: 12px !important;
    color: #6c757d !important;
    padding-top: 8px !important;
}

/* ─── 8b. ÇOK SÜTUNLU TABLO FIX ──────────────────────────────
 * Sorun: 10+ sütun olunca tablo daraltıyor sütunları
 * Çözüm: min-width ve horizontal scroll
 */
table.dataTable {
    min-width: 100% !important;
}

/* 8+ sütunlu tablolar — minimum genişlik ver */
table.dataTable thead th {
    min-width: 60px !important;
}

/* İlk sütun (checkbox varsa) — dar tut */
table.dataTable thead th.not-sortable:first-child,
table.dataTable thead th:has(.checkbox),
table.dataTable thead th:has(input[type="checkbox"]) {
    min-width: 38px !important;
    max-width: 42px !important;
    width: 38px !important;
}

/* Wrapper overflow — yatay scroll */
.dataTables_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ─── 9. CARD/PANEL FIX ───────────────────────────────────────
 * Panel ve kart düzeltmeleri
 */
.panel {
    border-radius: 8px !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.panel-heading {
    border-radius: 8px 8px 0 0 !important;
    padding: 12px 16px !important;
}

/* ─── 10. FORM CONTROL FIX ────────────────────────────────────
 * Form elemanlarının düzeltmeleri
 */
.form-control {
    border-radius: 6px !important;
    border: 1px solid #ced4da !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    height: auto !important;
    min-height: 34px !important;
}

.form-control:focus {
    border-color: #4f5da7 !important;
    box-shadow: 0 0 0 2px rgba(79, 93, 167, 0.15) !important;
}

/* ─── 11. SWITCH TOGGLE FIX ───────────────────────────────────
 * Aktif/pasif switch düzeltmeleri
 */
.onoffswitch {
    width: 50px !important;
}

/* ─── 12. SCROLLBAR BEAUTIFY ──────────────────────────────────
 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c1c8d0;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ─── 13. PROPOSAL & CONTRACT ITEM DESCRIPTION ALIGNMENT & LAYOUT FIX ─── */
td.description,
.proposal-items-preview td.description,
.table.items td.description,
.item-desc,
.itemdesc,
[class*="proposal"] td.description,
[class*="contract"] td.description {
    text-align: left !important;
    vertical-align: top !important;
    line-height: 1.6 !important;
    font-size: 13.5px !important;
    padding: 12px 15px !important;
}

td.description span,
td.description strong,
td.description p,
td.description div {
    text-align: left !important;
}

td.description ul,
td.description ol {
    padding-left: 20px !important;
    margin: 8px 0 !important;
    text-align: left !important;
}

td.description li {
    margin-bottom: 4px !important;
    text-align: left !important;
}

/* ─── 14. ADMIN PANEL MOBILE ONLY (< 768px) LAYOUT & MENU FIX ─── */
@media (max-width: 767px) {
    /* Header main container nowrap & height fix */
    #header {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        background-color: #fff !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    #header nav {
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    #header nav > div.tw-flex.tw-justify-between {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }
    #header nav > div.tw-flex.tw-justify-between > div.tw-overflow-hidden {
        order: 1 !important;
    }
    #header nav > div.tw-flex.tw-justify-between > div.tw-flex.tw-flex-1,
    #header nav > div.tw-flex.tw-justify-between > div:nth-child(2) {
        order: 2 !important;
    }
    #header nav > div.tw-flex.tw-justify-between > .mobile-menu {
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 5px !important;
    }
    
    /* Hide desktop-only visible menus with higher specificity */
    body #header .nav.navbar-nav.visible-md,
    body #header .nav.navbar-nav.visible-lg,
    #header .navbar-right {
        display: none !important;
    }

    /* Optimize logo image size on mobile */
    #header .logo img,
    #header #logo img {
        max-height: 28px !important;
        max-width: 85px !important;
    }
    
    /* Navbar right alignment & compact sizing */
    #header .navbar-right {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        gap: 6px !important;
    }
    #header .navbar-right > li {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        width: auto !important;
        float: none !important;
    }
    #header .navbar-right > li > a {
        padding: 4px 6px !important;
        font-size: 11px !important;
        color: #4b5563 !important;
    }
    #header #tenant-switch span {
        padding: 4px 6px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
    #header .navbar-right .header-merebel-hr-profile a i {
        font-size: 14px !important;
    }
    
    /* İK Profilim, SaaS geçişi, Settings, Newsfeed, Todo ve mükerrer mobil butonları gizle (Hızlı Menüye taşındı) */
    #header .navbar-right > li.header-merebel-hr-profile,
    #header .navbar-right > li.header-tenant-switch,
    #header .navbar-right > li.header-settings,
    #header .navbar-right > li.header-newsfeed,
    #header .navbar-right > li.header-todo,
    #header .navbar-right > li.header-timers,
    #header .navbar-right > li.header-notifications {
        display: none !important;
    }
    
    /* Content wrapper margin reset on mobile & tablet */
    body:not(.hide-sidebar):not(.poly-hide-sidebar):not(.customers) #wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
    
    /* Collapsed mobile menu vertical display & clean styling */
    #mobile-collapse {
        position: absolute !important;
        background: #fff !important;
        border-bottom: 2px solid #4f5da7 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        padding: 10px 15px !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 56px !important;
        z-index: 9999 !important;
    }
    #mobile-collapse .nav.navbar-nav {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #mobile-collapse .nav.navbar-nav > li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #f3f4f6 !important;
        float: none !important;
    }
    #mobile-collapse .nav.navbar-nav > li:last-child {
        border-bottom: none !important;
    }
    #mobile-collapse .nav.navbar-nav > li > a {
        display: block !important;
        padding: 10px 0 !important;
        font-size: 13px !important;
        color: #4b5563 !important;
        font-weight: 500 !important;
        text-align: left !important;
    }

    /* Hide sidebar by default on mobile & tablet */
    body #menu,
    body #setup-menu-wrapper {
        transform: translateX(-280px) !important;
        transition: transform 0.26s ease !important;
    }
    
    /* Show sidebar when open class is present */
    body.sidebar-open #menu,
    body.sidebar-open #setup-menu-wrapper,
    body.show-sidebar #menu,
    body.show-sidebar #setup-menu-wrapper,
    body.sv-sidebar-open #menu,
    body.sv-sidebar-open #setup-menu-wrapper {
        transform: translateX(0) !important;
    }
}

/* ─── 15. PROPOSAL ITEMS TABLE VERTICAL ALIGN & COLUMN WIDTH FIX ─── */
.table.items tbody td,
.table.items thead th,
.proposal-items-preview td,
.proposal-items-preview th {
    vertical-align: top !important;
}

.table.items td.description,
.table.items th.description {
    width: 55% !important;
}

.table.items td.amount,
.table.items th.amount {
    width: 12% !important;
}

.table.items td {
    padding-top: 12px !important;
}

/* ─── 16. PROPOSAL RIGHT PANEL LEFT ALIGNMENT ─── */
body.customers .proposal-right,
body.customers .proposal-right address,
body.customers .proposal-right p,
body.customers .proposal-right h4,
body.customers .proposal-right div,
body.customers .proposal-html-company-info,
body.customers .proposal-html-info {
    text-align: left !important;
}

/* Table Header high-contrast styling using CSS */
.table.items thead {
    background-color: #2d4166 !important;
}

.table.items thead th {
    background-color: #2d4166 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    border: none !important;
}

/* ─── 17. GOOGLE DRIVE PICKER MODAL LAYER (z-index) FIX ─── */
.picker-dialog {
    z-index: 200000 !important; /* Above modals (100060) */
}
.picker-dialog-bg {
    z-index: 199999 !important; /* Backdrop above modals (100060) */
}

/* ─── 18. HIDE LEGACY POLY WIDGETS & SCROLL TO TOP ─── */
.poly-utilities-widgets,
.poly-scroll-to-top,
.poly-widgets-area,
.poly_utilities-widgets {
    display: none !important;
}

/* ─── 19. BRAND LOGO STABILIZATION (ADMIN SIDEBAR & CLIENT PORTAL) ─── */
/* Admin Sidebar Brand Logo */
.sidebar-brand-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px 10px !important;
    min-height: 64px !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
}

.sidebar-brand-logo img {
    max-width: 175px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Client Portal Sidebar Brand Logo */
.customers .navbar-header {
    height: auto !important;
    min-height: 80px !important;
    padding: 16px 14px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.customers .navbar a.navbar-brand,
.customers .navbar-brand.logo,
.customers .logo {
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    text-align: center !important;
}

.customers .navbar a.navbar-brand img,
.customers .navbar-brand.logo img,
.customers .logo img {
    width: 100% !important;
    max-width: 180px !important;
    max-height: 65px !important;
    min-height: 32px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
}

/* ─── 21. EXPENSES & SALES STAT SUMMARY CARDS (#stats-top & #expenses_total) ─── */
#stats-top dl,
#expenses_total dl {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

#stats-top dl > div,
#expenses_total dl > div {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
}

#stats-top dl > div dt,
#expenses_total dl > div dt,
#stats-top dl > div .tw-text-neutral-500,
#expenses_total dl > div .tw-text-neutral-500 {
    white-space: normal !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
}

/* Dashboard Quick Stats (Maintain Native Multi-Column Grid) */
.widget .quick-stats-invoices,
.widget .quick-stats-leads,
.widget .quick-stats-projects,
.widget .quick-stats-tasks {
    margin-bottom: 15px !important;
}

.widget .top_stats_wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* ─── 22. DATATABLES TOOLBAR & ACTION BUTTONS ALIGNMENT ─── */
.dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.dataTables_wrapper > .row:first-child,
.dataTables_wrapper .top {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding: 2px 0 !important;
}

.dataTables_wrapper > .row:first-child > div {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: auto !important;
    float: none !important;
}

.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    float: none !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

.dataTables_wrapper .dataTables_length select {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 6px 12px !important;
    background-color: #ffffff !important;
    font-size: 13px !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: #4f5da7 !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"] {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 6px 14px !important;
    background-color: #ffffff !important;
    font-size: 13px !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    min-width: 200px !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
    border-color: #4f5da7 !important;
    box-shadow: 0 0 0 3px rgba(79, 93, 167, 0.12) !important;
    outline: none !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .btn {
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    gap: 6px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* ─── 23. UNIVERSAL TABLE HEADERS & ROWS STANDARDIZATION ─── */
.table-responsive {
    overflow-x: auto !important;
    width: 100% !important;
    border: none !important;
}

body.admin table.dataTable,
table.dataTable,
.table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    table-layout: auto !important;
}

body.admin table.dataTable thead th,
table.dataTable thead th,
.table thead th {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #475569 !important;
    padding: 11px 14px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

body.admin table.dataTable tbody td,
table.dataTable tbody td,
.table tbody td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

body.admin table.dataTable tbody tr:hover td,
table.dataTable tbody tr:hover td,
.table tbody tr:hover td {
    background-color: rgba(79, 93, 167, 0.04) !important;
}

/* Checkbox Column & Mass Select Alignment (Strictly First Column of DataTables) */
table.dataTable th.not-sortable:first-child,
table.dataTable th:first-child:has(.mass_select_all_wrap),
table.dataTable th:first-child:has(input[type="checkbox"]),
table.dataTable td:first-child:has(input[type="checkbox"]),
table.dataTable th:first-child:has(.checkbox),
table.dataTable td:first-child:has(.checkbox) {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 44px !important;
    padding: 8px 4px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

table.dataTable th:first-child .checkbox,
table.dataTable td:first-child .checkbox,
table.dataTable .mass_select_all_wrap {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

table.dataTable th:first-child .checkbox input[type="checkbox"],
table.dataTable td:first-child .checkbox input[type="checkbox"],
table.dataTable .mass_select_all_wrap input[type="checkbox"] {
    position: static !important;
    margin: 0 !important;
    cursor: pointer !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--sv-accent, #4F46E5) !important;
}

table.dataTable th:first-child .checkbox label,
table.dataTable td:first-child .checkbox label,
table.dataTable .mass_select_all_wrap label {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* Table First Column (# / ID or general text) spacing */
table.dataTable th:first-child,
table.dataTable td:first-child,
.table th:first-child,
.table td:first-child {
    padding-left: 14px !important;
}

/* Number Index Alignment (Perfex Standard) */
table.number-index-1 tbody > tr > td:first-child,
table.number-index-1 thead > tr > th:first-child {
    text-align: center !important;
    min-width: 45px !important;
    width: auto !important;
}
table.number-index-2 tbody > tr > td:nth-child(2),
table.number-index-2 thead > tr > th:nth-child(2) {
    text-align: center !important;
    min-width: 45px !important;
    width: auto !important;
}

/* Status & Priority Pill Chips */
.soverse-task-status-pill,
.soverse-task-priority-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.15s ease !important;
}

.soverse-status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Brand / Custom Field Tags in Table */
.table-tasks td .label-info,
.table-tasks td .label-default,
.table-tasks td .label {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
}

/* Table task title wrapped nicely */
.table-tasks td a.main-tasks-table-href-name {
    font-weight: 600 !important;
    display: inline-block !important;
    max-width: 260px !important;
    white-space: normal !important;
    word-break: break-word !important;
    color: #1e293b !important;
}

.table-tasks td a.main-tasks-table-href-name:hover {
    color: #4f5da7 !important;
}

/* Row Options */
.table tr .row-options {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    margin-top: 3px !important;
}

.table tr .row-options a {
    color: #4f5da7 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Modern DataTables Pagination */
.dataTables_paginate {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 14px !important;
}

.dataTables_paginate .paginate_button {
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.dataTables_paginate .paginate_button:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: #4f5da7 !important;
    border-color: #4f5da7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(79, 93, 167, 0.3) !important;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Sidebar User Widget Clean Alignment */
#setup-menu-wrapper .sidebar-user,
.sidebar-user {
    padding: 10px 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.sidebar-user .user-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sidebar-user .user-email {
    font-size: 11px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* Row Options (View, Edit, Delete links) */
.table tr .row-options {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    margin-top: 4px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}

.table tr:hover .row-options {
    visibility: visible !important;
    opacity: 1 !important;
}

.table tr .row-options a {
    color: #4f5da7 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.table tr .row-options a:hover {
    text-decoration: underline !important;
}

.table tr .row-options a._delete {
    color: #ef4444 !important;
}

/* Modern Status Pill Badges (Projects & Tasks) */
.label,
.badge,
.label[class*="project-status-"],
.label[class*="task-status-"],
span.label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: 1px solid transparent !important;
}

/* Status Specific Soft Pastel Themes */
.label.project-status-1,
.label.task-status-1,
.label-default {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

.label.project-status-2,
.label.task-status-4,
.label-info {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

.label.project-status-3,
.label.task-status-3,
.label-warning {
    background-color: #fffbeb !important;
    color: #d97706 !important;
    border-color: #fde68a !important;
}

.label.project-status-4,
.label.task-status-5,
.label-success {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #bbf7d0 !important;
}

.label.project-status-5,
.label-danger {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

/* Modern Member Avatar Stack */
.table td .tw-flex.-tw-space-x-1,
.table td .tw-flex {
    display: inline-flex !important;
    align-items: center !important;
}

.table td img.staff-profile-image-small,
.table td img[class*="staff-profile-image"],
.table td .tw-h-7.tw-w-7,
.table td .tw-h-6.tw-w-6 {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    margin-left: -8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    object-fit: cover !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: transform 0.15s ease, z-index 0.15s ease !important;
}

.table td a:first-child img,
.table td img:first-child {
    margin-left: 0 !important;
}

.table td a:hover img,
.table td img:hover {
    transform: scale(1.2) !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Tags in Tables */
.table td .tag,
.table td .label.tag {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
}

/* ─── 24. HORIZONTAL TABS & PROJECT/TASK DETAIL FIXES ─── */
.horizontal-scrollable-tabs {
    background: transparent !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

.horizontal-scrollable-tabs .nav-tabs-segmented {
    border-bottom: none !important;
    display: flex !important;
    gap: 4px !important;
}

.horizontal-scrollable-tabs .nav-tabs > li > a,
.nav-tabs-horizontal > li > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    padding: 9px 15px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 6px 6px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.horizontal-scrollable-tabs .nav-tabs > li.active > a,
.horizontal-scrollable-tabs .nav-tabs > li > a:hover,
.nav-tabs-horizontal > li.active > a,
.nav-tabs-horizontal > li > a:hover {
    color: #2563eb !important;
    border-bottom: 2px solid #2563eb !important;
    background: #f8fafc !important;
    font-weight: 600 !important;
}

.horizontal-scrollable-tabs .scroller {
    height: 36px !important;
    min-height: 36px !important;
    width: 32px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #475569 !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

@media (max-width: 991px) {
    .horizontal-scrollable-tabs .scroller {
        display: none !important;
    }
}

/* ─── 25. TASK SUMMARY CARDS ─── */
.tasks-summary-flex-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.tasks-summary-flex-container .task-summary-card,
.tasks-summary-flex-container > button,
.tasks-summary-flex-container > a {
    flex: 1 1 140px !important;
    min-width: 130px !important;
    min-height: 64px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    text-align: left !important;
    text-decoration: none !important;
}

.tasks-summary-flex-container .task-summary-card:hover,
.tasks-summary-flex-container > button:hover,
.tasks-summary-flex-container > a:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* ─── 26. PROJECT HEADING & TOP BAR ─── */
.project-heading {
    display: flex !important;
    align-items: center !important;
}

.project-heading .bootstrap-select {
    border-radius: 6px !important;
}

.project-heading .bootstrap-select .btn-default {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    height: 36px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
}

.project_status {
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* ─── 27. CUSTOMER PROFILE SIDEBAR & SUBTABS FIXES ─── */
.customer-tabs {
    background: transparent !important;
}

.customer-tabs ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.customer-tabs ul li a:hover {
    background-color: #f1f5f9 !important;
    color: #2563eb !important;
}

.customer-tabs ul li a i {
    width: 20px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #64748b !important;
}

.customer-tabs ul li a:hover i {
    color: #2563eb !important;
}

.customer-tabs ul li.customer_tab_profile a.tw-bg-neutral-50,
.customer-tabs ul li a.tw-bg-neutral-50,
.customer-tabs ul li a.tw-text-primary-600 {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    font-weight: 600 !important;
}

.customer-tabs ul li a.tw-text-primary-600 i {
    color: #2563eb !important;
}

.panel-full-width-tabs {
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 20px !important;
}

.panel-full-width-tabs .customer-profile-tabs > li > a {
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
}

.panel-full-width-tabs .customer-profile-tabs > li.active > a,
.panel-full-width-tabs .customer-profile-tabs > li > a:hover {
    color: #2563eb !important;
    border-bottom: 2px solid #2563eb !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.panel-full-width-tabs .scroller {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    width: 24px !important;
    cursor: pointer !important;
}

.panel-full-width-tabs .scroller:hover {
    color: #2563eb !important;
}

.customer_profile .panel_s {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.customer_profile .form-group {
    margin-bottom: 16px !important;
}

.customer_profile label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
}

.customer_profile .form-control {
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    height: 36px !important;
    font-size: 13px !important;
}

.customer_profile textarea.form-control {
    height: auto !important;
}

/* ─── 24. SETUP MENU & SIDEBAR BRANDING & BG FIX ─────────────── */
#menu,
#menu.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 270px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 #f1f5f9 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    z-index: 9000 !important;
    box-sizing: border-box !important;
}

#setup-menu-wrapper,
#setup-menu-wrapper.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 270px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 #f1f5f9 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
}

#setup-menu-wrapper:not(.display-block) {
    display: none !important;
}

#setup-menu-wrapper.display-block {
    display: block !important;
    z-index: 10050 !important; /* Kurulum açıldığında sol ana menünün üstüne çıkması şart */
}

.admin #side-menu,
.admin #setup-menu,
#side-menu,
#setup-menu {
    background-color: #ffffff !important;
    background-image: none !important;
    background: #ffffff !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 140px !important; /* Alt menülerin rahat kaydırılıp görünmesi için yeterli pay */
    margin: 0 !important;
}

/* Scrollbar Görünürlük & Modern Stil */
#menu::-webkit-scrollbar,
#menu.sidebar::-webkit-scrollbar,
#setup-menu-wrapper::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    display: block !important;
}

#menu::-webkit-scrollbar-track,
#setup-menu-wrapper::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: #f8fafc !important;
}

#menu::-webkit-scrollbar-thumb,
#setup-menu-wrapper::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

#menu::-webkit-scrollbar-thumb:hover,
#setup-menu-wrapper::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

#wrapper {
    background-color: #f5f6fa !important;
    background-image: none !important;
}

#setup-menu-wrapper .sidebar-brand-logo {
    min-height: 64px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
}

#setup-menu-wrapper .sidebar-brand-logo img {
    max-height: 40px !important;
    max-width: 150px !important;
    width: auto !important;
    object-fit: contain !important;
}

#setup-menu li a {
    padding: 9px 16px !important;
    font-size: 13.5px !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 6px !important;
    margin: 2px 8px !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

#setup-menu li a:hover {
    background-color: rgba(79, 93, 167, 0.08) !important;
    color: #4f5da7 !important;
}

#setup-menu li.active > a,
#setup-menu li a.active {
    background-color: rgba(79, 93, 167, 0.12) !important;
    color: #4f5da7 !important;
    font-weight: 600 !important;
}

#setup-menu li a i.menu-icon {
    width: 20px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #4f5da7 !important;
    flex-shrink: 0 !important;
}

#setup-menu .nav-second-level {
    background: #f8fafc !important;
    padding: 4px 0 !important;
    border-radius: 6px !important;
    margin: 2px 8px !important;
}

#setup-menu .nav-second-level li a {
    padding: 7px 14px 7px 34px !important;
    font-size: 12.5px !important;
    color: #4b5563 !important;
}

#setup-menu .nav-second-level li a:hover {
    color: #4f5da7 !important;
    background-color: rgba(79, 93, 167, 0.06) !important;
}

#header #logo {
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    padding-left: 8px !important;
}

#header #logo img {
    max-height: 38px !important;
    max-width: 140px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* ─── 25. HANDSONTABLE MODAL & GRID STABILIZATION ────────────── */
.handsontableInputHolder {
    z-index: 99999 !important;
}

.handsontableInput {
    background-color: #ffffff !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-family: inherit !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    border: 2px solid #4f5da7 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 3px rgba(79, 93, 167, 0.25) !important;
    outline: none !important;
}

.modal .handsontable td:first-child,
.modal .handsontable th:first-child,
.modal .ht_clone_left td,
.modal .ht_clone_left th,
.setting-handsome-table .handsontable td:first-child,
.setting-handsome-table .handsontable th:first-child,
.setting-handsome-table .ht_clone_left td,
.setting-handsome-table .ht_clone_left th,
#unit_type .handsontable td:first-child,
#unit_type .handsontable th:first-child,
#unit_type .ht_clone_left td,
#unit_type .ht_clone_left th {
    min-width: 36px !important;
    width: auto !important;
    font-weight: 500 !important;
}

.setting-handsome-table .handsontable td,
#unit_type .handsontable td {
    font-weight: 400 !important;
    cursor: cell !important;
    font-size: 13px !important;
    height: 36px !important;
    line-height: 24px !important;
}

.setting-handsome-table .handsontable th,
#unit_type .handsontable th {
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    padding: 8px 4px !important;
}

.setting-handsome-table .handsontable td.current,
.setting-handsome-table .handsontable td.area,
#unit_type .handsontable td.current,
#unit_type .handsontable td.area {
    background-color: rgba(79, 93, 167, 0.08) !important;
}

.setting-handsome-table .handsontable {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* ─── PROJECTS & TASKS MODERN FLAT THEME UI FIXES ──────────────── */
.soverse-projects-header-flex,
.soverse-tasks-header-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.soverse-btn-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.soverse-btn-group .btn {
    height: 36px !important;
    line-height: 22px !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 !important;
}

.soverse-btn-group .btn-primary {
    background: #4f5da7 !important;
    border-color: #4f5da7 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(79, 93, 167, 0.2) !important;
}

.soverse-btn-group .btn-default {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

.soverse-btn-group .btn-default:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.soverse-projects-stats-container {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.soverse-status-chips-scroll {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 0 !important;
    scrollbar-width: none !important;
}

.soverse-status-chips-scroll::-webkit-scrollbar {
    display: none !important;
}

.soverse-status-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.15s ease !important;
}

.soverse-status-chip:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    text-decoration: none !important;
}

.soverse-chip-count {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 13px !important;
}

.soverse-chip-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.soverse-chip-name {
    font-weight: 600 !important;
    font-size: 12.5px !important;
}

.soverse-projects-filters-container,
.soverse-tasks-filters-container {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.soverse-page-header-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.soverse-tasks-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.soverse-task-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--task-status-color, #4f5da7) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 68px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.soverse-task-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
    border-left-color: var(--task-status-color, #4f5da7) !important;
    text-decoration: none !important;
}

.soverse-task-card-header {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

.soverse-task-count {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1 !important;
}

.soverse-task-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.soverse-task-card-footer {
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.2 !important;
}

.soverse-task-label {
    color: #94a3b8 !important;
    margin-right: 4px !important;
}

.soverse-task-my-count {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* Universal Flat Admin Panel Card (Single outer border, consistent internal padding) */
.panel_s,
.panel {
    border-radius: var(--sv-radius-card, 12px) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    box-shadow: var(--sv-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.04)) !important;
    background: var(--sv-surface, #FFFFFF) !important;
    overflow: visible !important;
    margin-bottom: 20px !important;
}

.panel_s > .panel-body,
.panel > .panel-body {
    padding: 20px 24px !important;
    border: none !important;
    border-radius: var(--sv-radius-card, 12px) !important;
    background: transparent !important;
}

.panel-table-full {
    border-radius: 0 !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.panel-table-full .table-responsive,
.panel-table-full .dataTables_wrapper,
.table-responsive {
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Seamless Unified Table (No inner border box) */
table.dataTable,
table.table,
.table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    background: #ffffff !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Crisp Table Header Bar */
body.admin table.dataTable thead th,
table.dataTable thead th,
.table thead th,
#wrapper table.dataTable thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 11px 14px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
}

/* Clean Header End-caps */
body.admin table.dataTable thead th:first-child,
table.dataTable thead th:first-child,
.table thead th:first-child {
    padding-left: 16px !important;
    border-left: none !important;
}

body.admin table.dataTable thead th:last-child,
table.dataTable thead th:last-child,
.table thead th:last-child {
    padding-right: 16px !important;
    border-right: none !important;
}

/* Table Body Rows */
body.admin table.dataTable tbody td,
table.dataTable tbody td,
.table tbody td,
#wrapper table.dataTable tbody td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #334155 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

body.admin table.dataTable tbody td:first-child,
table.dataTable tbody td:first-child,
.table tbody td:first-child {
    padding-left: 16px !important;
}

body.admin table.dataTable tbody td:last-child,
table.dataTable tbody td:last-child,
.table tbody td:last-child {
    padding-right: 16px !important;
}

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

/* Status Chips Container & Archive Chips */
.soverse-status-chips-scroll {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

.soverse-status-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    color: inherit !important;
}

.soverse-status-chip:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
}

.soverse-status-chip.soverse-status-chip-archive {
    border-color: #fde68a !important;
    background: #fffbeb !important;
}

.soverse-status-chip.soverse-status-chip-archive:hover {
    border-color: #f59e0b !important;
    background: #fef3c7 !important;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.12) !important;
}

.soverse-status-chip .soverse-chip-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    min-width: 18px !important;
}

.soverse-status-chip .soverse-chip-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* ─── 24. TASK MODAL & TASK VIEW MODERNIZATION (2026 FLAT SAAS DESIGN SYSTEM) ─── */
#task-modal,
.task-modal-single,
.modal.modal-task-single {
    --tm-accent: #4F46E5;
    --tm-accent-hover: #4338CA;
    --tm-surface: #FFFFFF;
    --tm-surface-2: #F8FAFC;
    --tm-text: #0F172A;
    --tm-text-sec: #64748B;
    --tm-text-muted: #94A3B8;
    --tm-border: #E2E8F0;
    --tm-border-subtle: #F1F5F9;
    --tm-radius-ctrl: 8px;
    --tm-radius-card: 12px;
    --tm-ctrl-h: 36px;
}

#task-modal .modal-dialog,
.task-modal-single .modal-dialog,
.modal.modal-task-single .modal-dialog {
    width: 94vw !important;
    max-width: 1360px !important;
    min-width: 0 !important;
    margin: 24px auto !important;
}

#task-modal .modal-content,
.task-modal-single .modal-content {
    border-radius: var(--tm-radius-card) !important;
    border: 1px solid var(--tm-border) !important;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
    background: var(--tm-surface) !important;
    max-height: calc(100vh - 48px) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 1. Modal Header: Title + Status + Archive on Left, Privacy + Close on Right */
#task-modal .modal-header.task-single-header,
.task-modal-single .modal-header.task-single-header {
    padding: 16px 24px !important;
    background: var(--tm-surface) !important;
    border-bottom: 1px solid var(--tm-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
}

#task-modal .modal-header.task-single-header::before,
#task-modal .modal-header.task-single-header::after {
    display: none !important;
    content: none !important;
}

#task-modal .task-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

#task-modal .modal-header .modal-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--tm-text) !important;
    line-height: 1.35 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

#task-modal .modal-header .modal-title .task-title-text {
    color: var(--tm-text) !important;
    font-weight: 600 !important;
    word-break: break-word !important;
}

/* Archive Button Injected by merebel_archive */
#task-modal .modal-header .archive-task-modal-btn {
    height: 30px !important;
    padding: 0 12px !important;
    border-radius: var(--tm-radius-ctrl) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    background: var(--tm-surface-2) !important;
    border: 1px solid var(--tm-border) !important;
    color: #475569 !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}

#task-modal .modal-header .archive-task-modal-btn:hover {
    background: #F1F5F9 !important;
    color: var(--tm-text) !important;
    border-color: #CBD5E1 !important;
}

#task-modal .task-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

#task-modal .task-privacy-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: var(--tm-radius-ctrl) !important;
    background: var(--tm-surface-2) !important;
    border: 1px solid var(--tm-border) !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

#task-modal .task-privacy-label {
    color: var(--tm-text-sec) !important;
    font-weight: 500 !important;
}

#task-modal .task-privacy-sep {
    color: #CBD5E1 !important;
}

#task-modal .task-make-public-link {
    color: var(--tm-accent) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#task-modal .task-make-public-link:hover {
    color: var(--tm-accent-hover) !important;
    text-decoration: underline !important;
}

#task-modal .modal-header .close {
    font-size: 22px !important;
    color: var(--tm-text-sec) !important;
    opacity: 1 !important;
    transition: all 0.15s ease !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--tm-radius-ctrl) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-shadow: none !important;
}

#task-modal .modal-header .close:hover,
#task-modal .modal-header .close:focus-visible {
    color: var(--tm-text) !important;
    background: var(--tm-surface-2) !important;
    border-color: var(--tm-border) !important;
    outline: none !important;
}

/* Modal Body & Scroll Management */
#task-modal .modal-body,
.task-modal-single .modal-body {
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* 9. Desktop Two-Column Split (Left Main + 350px Right Sidebar) */
@media (min-width: 992px) {
    #task-modal .modal-body > .row,
    .task-modal-single .modal-body > .row {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        margin: 0 !important;
        min-height: 100% !important;
    }

    #task-modal .task-single-col-left,
    .task-modal-single .task-single-col-left {
        flex: 1 1 auto !important;
        width: calc(100% - 350px) !important;
        max-width: calc(100% - 350px) !important;
        min-width: 0 !important;
        padding: 24px 32px !important;
        background: var(--tm-surface) !important;
        border-right: 1px solid var(--tm-border) !important;
        float: none !important;
    }

    #task-modal .task-single-col-right,
    .task-modal-single .task-single-col-right {
        flex: 0 0 350px !important;
        width: 350px !important;
        max-width: 350px !important;
        min-width: 350px !important;
        padding: 24px !important;
        background: var(--tm-surface-2) !important;
        border-left: none !important;
        float: none !important;
    }
}

/* Tablet & Mobile Stack (< 992px) */
@media (max-width: 991px) {
    #task-modal .modal-dialog,
    .task-modal-single .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;
        margin: 12px auto !important;
    }

    #task-modal .modal-content,
    .task-modal-single .modal-content {
        max-height: calc(100vh - 24px) !important;
    }

    #task-modal .modal-body > .row,
    .task-modal-single .modal-body > .row {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
    }

    #task-modal .task-single-col-left,
    .task-modal-single .task-single-col-left {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--tm-border) !important;
    }

    #task-modal .task-single-col-right,
    .task-modal-single .task-single-col-right {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        background: var(--tm-surface-2) !important;
        border-left: none !important;
    }
}

/* 2. Sub-header: Creator, Related Project & Top Action Bar */
#task-modal .task-meta-subheader {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

#task-modal .task-meta-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

#task-modal .task-info-created {
    font-size: 13px !important;
    color: var(--tm-text-sec) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

#task-modal .task-info-created .task-meta-value {
    color: var(--tm-text) !important;
    font-weight: 600 !important;
}

#task-modal .task-info-created .task-meta-clock {
    color: var(--tm-text-muted) !important;
    font-size: 13px !important;
}

#task-modal .task-single-related-wrapper {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--tm-text-sec) !important;
    min-width: 0 !important;
}

#task-modal .task-related-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 6px !important;
}

#task-modal .task-meta-label {
    color: var(--tm-text-sec) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

#task-modal .task-related-link {
    color: var(--tm-accent) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

#task-modal .task-related-link:hover {
    color: var(--tm-accent-hover) !important;
    text-decoration: underline !important;
}

#task-modal .task-top-actions-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

#task-modal .task-top-actions-bar > p {
    margin: 0 !important;
    float: none !important;
}

/* Left Column Standard Buttons */
#task-modal .task-single-col-left .btn {
    border-radius: var(--tm-radius-ctrl) !important;
    padding: 0 14px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: var(--tm-ctrl-h) !important;
    min-height: var(--tm-ctrl-h) !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
    border: 1px solid var(--tm-border) !important;
    background: var(--tm-surface) !important;
    color: #334155 !important;
    margin: 0 !important;
}

#task-modal .task-single-col-left .btn:hover:not(.disabled):not(:disabled) {
    background: var(--tm-surface-2) !important;
    border-color: #CBD5E1 !important;
    color: var(--tm-text) !important;
}

#task-modal .task-single-col-left .btn:focus-visible {
    outline: 2px solid var(--tm-accent) !important;
    outline-offset: 2px !important;
}

#task-modal .task-single-col-left .task-icon-action-btn {
    width: var(--tm-ctrl-h) !important;
    min-width: var(--tm-ctrl-h) !important;
    padding: 0 !important;
}

#task-modal #task-single-mark-complete-btn {
    background: var(--tm-accent) !important;
    border-color: var(--tm-accent) !important;
    color: #FFFFFF !important;
}

#task-modal #task-single-mark-complete-btn:hover {
    background: var(--tm-accent-hover) !important;
    border-color: var(--tm-accent-hover) !important;
    color: #FFFFFF !important;
}

#task-modal #task-single-unmark-complete-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

#task-modal #task-single-unmark-complete-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #FFFFFF !important;
}

#task-modal .task-timer-btn.btn-success:not(.disabled) {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

#task-modal .task-timer-btn.btn-success:not(.disabled):hover {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #FFFFFF !important;
}

#task-modal .task-timer-btn.btn-danger:not(.disabled) {
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
    color: #DC2626 !important;
}

#task-modal .task-timer-btn.btn-danger:not(.disabled):hover {
    background: #FEE2E2 !important;
    border-color: #FCA5A5 !important;
    color: #B91C1C !important;
}

#task-modal .task-single-col-left .btn.disabled,
#task-modal .task-single-col-left .btn:disabled {
    background: #F1F5F9 !important;
    border-color: var(--tm-border) !important;
    color: var(--tm-text-muted) !important;
    opacity: 0.75 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

#task-modal .task-section-divider,
#task-modal .task-single-col-left hr {
    border: 0 !important;
    border-top: 1px solid var(--tm-border) !important;
    margin: 20px 0 !important;
}

/* 3, 4, 5. Google Drive Files Card & Rows */
#task-modal .gw-task-drive-panel {
    margin: 16px 0 20px 0 !important;
}

#task-modal .gw-task-drive-panel .panel_s,
#task-modal .gw-task-drive-card {
    background: var(--tm-surface-2) !important;
    border: 1px solid var(--tm-border) !important;
    border-left: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-card) !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

#task-modal .gw-task-drive-panel .panel-body {
    padding: 16px !important;
    border: none !important;
    background: transparent !important;
}

#task-modal .gw-task-drive-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

#task-modal .gw-task-drive-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tm-text) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#task-modal .gw-task-drive-title i {
    color: var(--tm-accent) !important;
    font-size: 15px !important;
}

#task-modal .gw-task-drive-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

#task-modal .gw-task-drive-panel .gw-task-picker-btn {
    height: var(--tm-ctrl-h) !important;
    padding: 0 12px !important;
    border-radius: var(--tm-radius-ctrl) !important;
    background: var(--tm-surface) !important;
    border: 1px solid var(--tm-border) !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#task-modal .gw-task-drive-panel .gw-task-picker-btn:hover {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: var(--tm-text) !important;
}

#task-modal .gw-task-drive-panel .gw-task-upload-btn {
    height: var(--tm-ctrl-h) !important;
    padding: 0 14px !important;
    border-radius: var(--tm-radius-ctrl) !important;
    background: var(--tm-accent) !important;
    border: 1px solid var(--tm-accent) !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#task-modal .gw-task-drive-panel .gw-task-upload-btn:hover {
    background: var(--tm-accent-hover) !important;
    border-color: var(--tm-accent-hover) !important;
    color: #FFFFFF !important;
}

#task-modal .gw-task-file-list {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#task-modal .gw-task-drive-panel .gw-task-file-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: var(--tm-radius-ctrl) !important;
    background: var(--tm-surface) !important;
    border: 1px solid var(--tm-border) !important;
    transition: border-color 0.15s ease !important;
}

#task-modal .gw-task-drive-panel .gw-task-file-item:hover {
    border-color: #CBD5E1 !important;
}

#task-modal .gw-file-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

#task-modal .gw-file-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    flex-shrink: 0 !important;
    font-size: 15px !important;
}

#task-modal .gw-file-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--tm-text) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
}

#task-modal .gw-file-badges {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

#task-modal .gw-task-drive-panel .label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 22px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

#task-modal .gw-task-drive-panel .label-default {
    background: #F1F5F9 !important;
    border: 1px solid var(--tm-border) !important;
    color: #475569 !important;
}

#task-modal .gw-task-drive-panel .label-success {
    background: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #047857 !important;
}

#task-modal .gw-task-drive-panel .label-warning {
    background: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    color: #B45309 !important;
}

#task-modal .gw-file-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

#task-modal .gw-file-actions .gw-action-icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: var(--tm-radius-ctrl) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--tm-surface) !important;
    border: 1px solid var(--tm-border) !important;
    color: #475569 !important;
    box-shadow: none !important;
}

#task-modal .gw-file-actions .gw-action-icon-btn:hover {
    background: var(--tm-surface-2) !important;
    border-color: #CBD5E1 !important;
    color: var(--tm-text) !important;
}

#task-modal .gw-file-actions .gw-vis-group > .dropdown-toggle .caret {
    display: none !important;
}

#task-modal .gw-file-actions .gw-soft-delete-task-file {
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    color: #DC2626 !important;
}

#task-modal .gw-file-actions .gw-soft-delete-task-file:hover {
    background: #FEE2E2 !important;
    border-color: #FCA5A5 !important;
    color: #B91C1C !important;
}

#task-modal .gw-files-empty {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--tm-text-sec) !important;
}

/* 6. Section Headers & Description Area */
#task-modal .task-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

#task-modal .task-section-title,
#task-modal #taskCommentSlide h4 {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--tm-text) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    float: none !important;
}

#task-modal .task-section-icon,
#task-modal #taskCommentSlide h4 i {
    color: var(--tm-accent) !important;
    font-size: 14px !important;
}

#task-modal .task-section-edit-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--tm-radius-ctrl) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--tm-text-sec) !important;
    border: 1px solid transparent !important;
    transition: all 0.15s ease !important;
}

#task-modal .task-section-edit-btn:hover {
    background: var(--tm-surface-2) !important;
    border-color: var(--tm-border) !important;
    color: var(--tm-text) !important;
}

#task-modal #task_view_description {
    background: var(--tm-surface-2) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--tm-text) !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

#task-modal #task_view_description p:last-child {
    margin-bottom: 0 !important;
}

#task-modal #task_view_description.task-no-description,
#task-modal #task_view_description.task-no-description span {
    color: var(--tm-text-sec) !important;
    font-style: normal !important;
    font-size: 13.5px !important;
}

/* 7. Checklist Header, Template Selector & Empty State */
#task-modal .task-checklist-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

#task-modal .task-checklist-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

#task-modal .checklist-templates-wrapper {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Eliminate Double Borders on ALL Bootstrap Selects inside #task-modal */
#task-modal div.bootstrap-select {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    width: 100% !important;
}

#task-modal div.bootstrap-select > button.dropdown-toggle {
    height: 38px !important;
    min-height: 38px !important;
    background: var(--tm-surface) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-ctrl) !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--tm-text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease !important;
}

#task-modal div.bootstrap-select > button.dropdown-toggle.bs-placeholder {
    color: var(--tm-text-sec) !important;
}

#task-modal div.bootstrap-select > button.dropdown-toggle:hover,
#task-modal div.bootstrap-select.open > button.dropdown-toggle,
#task-modal div.bootstrap-select > button.dropdown-toggle:focus {
    border-color: var(--tm-accent) !important;
    background: var(--tm-surface) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1) !important;
}

#task-modal div.bootstrap-select > button.dropdown-toggle .filter-option {
    position: static !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
    height: auto !important;
    line-height: 1.4 !important;
}

#task-modal .soverse-empty-checklist-state,
#task-modal #task-no-checklist-items {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: var(--tm-surface-2) !important;
    border: 1px dashed var(--tm-border) !important;
    border-radius: var(--tm-radius-ctrl) !important;
    color: var(--tm-text-sec) !important;
    font-size: 13px !important;
    margin: 0 0 12px 0 !important;
}

#task-modal #task-no-checklist-items.hide {
    display: none !important;
}

#task-modal .checklist {
    background: var(--tm-surface) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-ctrl) !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    transition: border-color 0.15s ease !important;
}

#task-modal .checklist:hover {
    border-color: #CBD5E1 !important;
}

#task-modal .checklist textarea[name="checklist-description"] {
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--tm-text) !important;
    resize: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
}

/* 8. Comments Section */
#task-modal #taskCommentSlide {
    display: inline-block !important;
    text-decoration: none !important;
    margin-bottom: 12px !important;
}

#task-modal #task-comment-form {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#task-modal #task-comment-form textarea {
    border-radius: var(--tm-radius-ctrl) !important;
    border: 1px solid var(--tm-border) !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--tm-text) !important;
    background: var(--tm-surface) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#task-modal #task-comment-form textarea:focus {
    border-color: var(--tm-accent) !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12) !important;
    outline: none !important;
}

#task-modal #addTaskCommentBtn {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: var(--tm-radius-ctrl) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    background: var(--tm-accent) !important;
    border: 1px solid var(--tm-accent) !important;
    color: #FFFFFF !important;
    margin-top: 12px !important;
}

#task-modal #addTaskCommentBtn:hover {
    background: var(--tm-accent-hover) !important;
    border-color: var(--tm-accent-hover) !important;
    color: #FFFFFF !important;
}

#task-modal .task-comment {
    background: var(--tm-surface-2) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
}

/* 10, 11, 12. Right Sidebar Info Grid, Headings & People Pickers */
#task-modal .task-info-heading,
#task-modal .mte-contact-section .mte-section-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--tm-text-sec) !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--tm-border) !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

#task-modal .task-single-col-right > .task-info-heading:first-of-type {
    margin-top: 0 !important;
}

#task-modal .task-sidebar-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--tm-border) !important;
    padding-bottom: 8px !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
}

#task-modal .task-sidebar-section-header .task-info-heading {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
}

#task-modal .task-reminder-add-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    border: 1px solid var(--tm-border) !important;
    background: var(--tm-surface) !important;
    color: var(--tm-text-sec) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.15s ease !important;
}

#task-modal .task-reminder-add-btn:hover {
    background: var(--tm-accent) !important;
    border-color: var(--tm-accent) !important;
    color: #FFFFFF !important;
}

#task-modal .task-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid var(--tm-border) !important;
    margin: 0 !important;
    gap: 12px !important;
}

#task-modal .task-info.task-info-billable {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
}

#task-modal .task-billable-subnote {
    font-size: 12px !important;
    color: var(--tm-text-sec) !important;
    text-align: right !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

#task-modal .task-info h5 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--tm-text-sec) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
}

#task-modal .task-info h5 > span:first-child {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--tm-text-sec) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#task-modal .task-info-icon,
#task-modal .mte-contact-section .mte-section-label i {
    color: var(--tm-text-muted) !important;
    font-size: 13px !important;
    width: 16px !important;
    text-align: center !important;
    margin: 0 !important;
}

/* Sidebar Date Inputs */
#task-modal .task-single-inline-field,
#task-modal .task-info-inline-input-edit,
#task-modal #task-single-startdate,
#task-modal #task-single-duedate {
    border-radius: var(--tm-radius-ctrl) !important;
    border: 1px solid var(--tm-border) !important;
    background: var(--tm-surface) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tm-text) !important;
    width: 124px !important;
    max-width: 130px !important;
    text-align: center !important;
    height: 32px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease !important;
    outline: none !important;
}

#task-modal .task-single-inline-field:hover,
#task-modal .task-info-inline-input-edit:hover,
#task-modal .task-single-inline-field:focus,
#task-modal .task-info-inline-input-edit:focus {
    border-color: var(--tm-accent) !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1) !important;
}

#task-modal .task-info-separator {
    display: none !important;
}

/* Tags Input */
#task-modal #inputTagsWrapper {
    margin-top: 12px !important;
    margin-bottom: 4px !important;
}

#task-modal #inputTagsWrapper div.tagsinput,
#task-modal .task-info-tags-edit .tagsinput {
    background: var(--tm-surface) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-ctrl) !important;
    padding: 4px 10px !important;
    min-height: 38px !important;
    box-shadow: none !important;
}

#task-modal #inputTagsWrapper div.tagsinput:focus-within {
    border-color: var(--tm-accent) !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1) !important;
}

/* 13. Status & Priority Pills */
#task-modal .soverse-task-status-pill,
#task-modal .soverse-task-priority-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

#task-modal .soverse-task-status-pill:hover,
#task-modal .soverse-task-priority-pill:hover {
    opacity: 0.88 !important;
}

#task-modal .soverse-status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Sidebar Select Wrappers, Avatars & merebel_tasks_ext Integration */
#task-modal .task-sidebar-select-wrap,
#task-modal .mte-add-dropdown {
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}

#task-modal .mte-contact-section {
    border-top: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

#task-modal .task-sidebar-empty-text,
#task-modal .mte-empty-text {
    font-size: 12.5px !important;
    color: var(--tm-text-sec) !important;
    font-style: normal !important;
    margin: 4px 0 12px 0 !important;
    display: block !important;
}

#task-modal .task_users_wrapper,
#task-modal #mte-contact-assignees-list,
#task-modal #mte-contact-followers-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
}

#task-modal .task_users_wrapper .task-user,
#task-modal .mte-contact-user {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--tm-surface) !important;
    border: 2px solid var(--tm-border) !important;
    box-shadow: none !important;
}

#task-modal .task_users_wrapper .task-user img,
#task-modal .task_users_wrapper .task-user .staff-profile-image-small,
#task-modal .mte-contact-user img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: none !important;
    display: block !important;
}

#task-modal .task_users_wrapper .task-user .remove-task-user,
#task-modal .mte-contact-user .mte-remove-btn {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #EF4444 !important;
    color: #FFFFFF !important;
    font-size: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
    text-decoration: none !important;
    border: 1.5px solid #FFFFFF !important;
}

#task-modal .task_users_wrapper .task-user:hover .remove-task-user,
#task-modal .mte-contact-user:hover .mte-remove-btn {
    opacity: 1 !important;
}

/* Google Drive Chooser Button in Sidebar */
#task-modal .gpicker.btn {
    width: 100% !important;
    height: 38px !important;
    background: var(--tm-surface) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-ctrl) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
    margin-top: 12px !important;
    box-shadow: none !important;
}

#task-modal .gpicker.btn:hover {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: var(--tm-text) !important;
}

/* Responsive Fine-Tuning for Small Mobile Screens (< 576px) */
@media (max-width: 576px) {
    #task-modal .modal-header.task-single-header {
        padding: 14px 16px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    #task-modal .modal-header .modal-title {
        font-size: 17px !important;
    }

    #task-modal .task-header-right {
        width: 100% !important;
        justify-content: space-between !important;
    }

    #task-modal .gw-task-drive-panel .gw-task-file-item {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #task-modal .gw-file-meta {
        width: 100% !important;
    }

    #task-modal .gw-file-actions {
        width: 100% !important;
        justify-content: flex-end !important;
    }
}

/* ─── 25. UNIFIED SHARED COMPONENTS, FORMS, TABS & CUSTOMER LAYOUT (2026 FLAT STANDARD) ─── */

/* 25.1 Typography & Page Shell */
body.admin {
    color: var(--sv-text, #0F172A) !important;
    background-color: var(--sv-bg-page, #F8FAFC) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

#wrapper {
    background-color: var(--sv-bg-page, #F8FAFC) !important;
}

#wrapper > .content {
    padding: 24px !important;
    box-sizing: border-box !important;
}

body .customer-profile-group-heading,
.customer-profile-group-heading {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--sv-text, #0F172A) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid var(--sv-border, #E2E8F0) !important;
    line-height: 1.35 !important;
}

.customer-profile-group-heading + hr,
.customer-profile-group-heading + .hr-panel-separator {
    display: none !important;
}

/* 25.2 Customer Profile Layout (Left Sidebar + Right Content Panel) */
.soverse-customer-header-bar {
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.soverse-customer-header-bar h4 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--sv-text, #0F172A) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

@media (min-width: 992px) {
    .soverse-customer-layout {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .soverse-customer-sidebar {
        flex: 0 0 240px !important;
        width: 240px !important;
        max-width: 240px !important;
        min-width: 240px !important;
    }

    .soverse-customer-content {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: calc(100% - 264px) !important;
        max-width: 100% !important;
        margin-top: 0 !important;
    }
}

/* Customer Left Navigation Menu (.customer-tabs) */
.customer-tabs {
    background: var(--sv-surface, #FFFFFF) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    border-radius: var(--sv-radius-card, 12px) !important;
    padding: 8px !important;
    box-shadow: var(--sv-shadow-card) !important;
    margin-bottom: 0 !important;
}

.customer-tabs > li,
.customer-tabs ul > li {
    margin: 0 0 2px 0 !important;
    border: none !important;
}

.customer-tabs > li:last-child,
.customer-tabs ul > li:last-child {
    margin-bottom: 0 !important;
}

.customer-tabs > li > a,
.customer-tabs ul > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    min-height: 38px !important;
    border-radius: var(--sv-radius-ctrl, 8px) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--sv-text-body, #334155) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.customer-tabs > li > a:hover,
.customer-tabs ul > li > a:hover {
    background-color: var(--sv-surface-2, #F8FAFC) !important;
    color: var(--sv-accent, #4F46E5) !important;
}

.customer-tabs > li.active > a,
.customer-tabs > li > a.active,
.customer-tabs > li > a.tw-bg-neutral-50,
.customer-tabs > li > a.tw-text-primary-600,
.customer-tabs ul > li.active > a,
.customer-tabs ul > li > a.tw-bg-neutral-50,
.customer-tabs ul > li > a.tw-text-primary-600 {
    background-color: var(--sv-accent-soft, #EEF2FF) !important;
    color: var(--sv-accent, #4F46E5) !important;
    border-color: #E0E7FF !important;
    font-weight: 600 !important;
}

.customer-tabs > li > a i,
.customer-tabs ul > li > a i {
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: var(--sv-text-sec, #64748B) !important;
    flex-shrink: 0 !important;
}

.customer-tabs > li.active > a i,
.customer-tabs > li > a.tw-text-primary-600 i,
.customer-tabs > li > a:hover i,
.customer-tabs ul > li.active > a i,
.customer-tabs ul > li > a.tw-text-primary-600 i,
.customer-tabs ul > li > a:hover i {
    color: var(--sv-accent, #4F46E5) !important;
}

.customer-tabs .badge {
    margin-left: auto !important;
    background: var(--sv-surface-hover, #F1F5F9) !important;
    color: var(--sv-text-body, #334155) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
}

.customer-tabs > li.active .badge,
.customer-tabs > li > a.tw-text-primary-600 .badge {
    background: #E0E7FF !important;
    color: var(--sv-accent, #4F46E5) !important;
    border-color: var(--sv-accent-border, #C7D2FE) !important;
}

/* 25.3 Horizontal Scrollable Tabs & Panel Full-Width Tabs (Zero Negative Margin, Zero Arrow Clipping) */
.horizontal-scrollable-tabs,
.panel-full-width-tabs,
.horizontal-scrollable-tabs.panel-full-width-tabs {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 0 10px 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--sv-border, #E2E8F0) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.horizontal-scrollable-tabs .horizontal-tabs,
.panel-full-width-tabs .horizontal-tabs {
    order: 2 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

.horizontal-scrollable-tabs .horizontal-tabs::-webkit-scrollbar,
.panel-full-width-tabs .horizontal-tabs::-webkit-scrollbar {
    display: none !important;
}

body .horizontal-scrollable-tabs .horizontal-tabs ul.nav-tabs,
body .panel-full-width-tabs .horizontal-tabs ul.nav-tabs,
body .horizontal-scrollable-tabs ul.nav-tabs,
body .panel-full-width-tabs ul.nav-tabs,
.customer-profile-tabs,
.nav-tabs-horizontal {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

.horizontal-scrollable-tabs ul.nav-tabs > li,
.panel-full-width-tabs ul.nav-tabs > li,
.customer-profile-tabs > li,
.nav-tabs-horizontal > li {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.horizontal-scrollable-tabs ul.nav-tabs > li > a,
.panel-full-width-tabs ul.nav-tabs > li > a,
.customer-profile-tabs > li > a,
.nav-tabs-horizontal > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--sv-text-sec, #64748B) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--sv-radius-ctrl, 8px) !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}

.horizontal-scrollable-tabs ul.nav-tabs > li > a:hover,
.panel-full-width-tabs ul.nav-tabs > li > a:hover,
.customer-profile-tabs > li > a:hover,
.nav-tabs-horizontal > li > a:hover {
    color: var(--sv-text, #0F172A) !important;
    background: var(--sv-surface-2, #F8FAFC) !important;
    border-color: var(--sv-border, #E2E8F0) !important;
}

.horizontal-scrollable-tabs ul.nav-tabs > li.active > a,
.panel-full-width-tabs ul.nav-tabs > li.active > a,
.customer-profile-tabs > li.active > a,
.nav-tabs-horizontal > li.active > a {
    color: var(--sv-accent, #4F46E5) !important;
    background: var(--sv-accent-soft, #EEF2FF) !important;
    border: 1px solid #E0E7FF !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.horizontal-scrollable-tabs .scroller,
.panel-full-width-tabs .scroller {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--sv-radius-ctrl, 8px) !important;
    background: var(--sv-surface-2, #F8FAFC) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    color: var(--sv-text-body, #334155) !important;
    cursor: pointer !important;
    float: none !important;
    position: static !important;
    transition: all 0.15s ease !important;
}

.horizontal-scrollable-tabs .scroller[style*="none"],
.panel-full-width-tabs .scroller[style*="none"] {
    display: none !important;
}

.horizontal-scrollable-tabs .scroller:not([style*="none"]),
.panel-full-width-tabs .scroller:not([style*="none"]) {
    display: inline-flex !important;
}

.horizontal-scrollable-tabs .scroller.arrow-left,
.panel-full-width-tabs .scroller.arrow-left {
    order: 1 !important;
}

.horizontal-scrollable-tabs .scroller.arrow-right,
.panel-full-width-tabs .scroller.arrow-right {
    order: 3 !important;
}

.horizontal-scrollable-tabs .scroller:hover:not(.disabled),
.panel-full-width-tabs .scroller:hover:not(.disabled) {
    background: var(--sv-surface-hover, #F1F5F9) !important;
    border-color: var(--sv-border-hover, #CBD5E1) !important;
    color: var(--sv-text, #0F172A) !important;
}

/* 25.4 Global Form Controls, Labels, Bootstrap-Select (Single Border!) & Input Groups */
.form-group {
    margin-bottom: 16px !important;
    position: relative !important;
}

.form-group label,
label.control-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sv-text-body, #334155) !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
    display: inline-block !important;
}

/* Tooltip icon before label (e.g. Para Birimi in Customer Profile) */
.soverse-field-with-tooltip > i.pull-left,
.col-md-6 > i.fa-circle-question.pull-left,
.col-md-12 > i.fa-circle-question.pull-left {
    float: left !important;
    margin-top: 2px !important;
    margin-right: 6px !important;
    color: var(--sv-text-sec, #64748B) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Standard Form Inputs (Exclude .bootstrap-select wrapper div to prevent double border!) */
input.form-control,
select.form-control:not(.selectpicker),
.form-control:not(div):not(textarea):not([multiple]) {
    height: var(--sv-ctrl-h, 38px) !important;
    min-height: var(--sv-ctrl-h, 38px) !important;
    padding: 6px 12px !important;
    font-size: 13.5px !important;
    line-height: 24px !important;
    color: var(--sv-text, #0F172A) !important;
    background-color: var(--sv-surface, #FFFFFF) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    border-radius: var(--sv-radius-ctrl, 8px) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

textarea.form-control {
    min-height: 88px !important;
    height: auto !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--sv-text, #0F172A) !important;
    background-color: var(--sv-surface, #FFFFFF) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    border-radius: var(--sv-radius-ctrl, 8px) !important;
    box-shadow: none !important;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--sv-accent, #4F46E5) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
    outline: none !important;
}

input.form-control[disabled],
input.form-control[readonly],
textarea.form-control[disabled],
select.form-control[disabled] {
    background-color: var(--sv-surface-2, #F8FAFC) !important;
    color: var(--sv-text-sec, #64748B) !important;
    border-color: var(--sv-border, #E2E8F0) !important;
    cursor: not-allowed !important;
}

/* Bootstrap-Select: Strip outer wrapper border/padding globally so ONLY the inner button has a border */
div.bootstrap-select,
div.bootstrap-select.form-control,
.form-group div.bootstrap-select,
.input-group div.bootstrap-select {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: var(--sv-radius-ctrl, 8px) !important;
}

div.bootstrap-select > button.dropdown-toggle,
div.bootstrap-select > .btn-default,
body.poly-utilities div.bootstrap-select > .btn-default,
.flatadmintheme_initiated div.bootstrap-select > .btn-default {
    height: var(--sv-ctrl-h, 38px) !important;
    min-height: var(--sv-ctrl-h, 38px) !important;
    padding: 0 32px 0 12px !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    color: var(--sv-text, #0F172A) !important;
    background-color: var(--sv-surface, #FFFFFF) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    border-radius: var(--sv-radius-ctrl, 8px) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

div.bootstrap-select > button.dropdown-toggle:hover,
div.bootstrap-select > .btn-default:hover {
    border-color: var(--sv-border-hover, #CBD5E1) !important;
    background-color: var(--sv-surface, #FFFFFF) !important;
}

div.bootstrap-select.open > button.dropdown-toggle,
div.bootstrap-select > button.dropdown-toggle:focus {
    border-color: var(--sv-accent, #4F46E5) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
    background-color: var(--sv-surface, #FFFFFF) !important;
    outline: none !important;
}

div.bootstrap-select.disabled > button.dropdown-toggle,
div.bootstrap-select > button.dropdown-toggle.disabled,
div.bootstrap-select > button.dropdown-toggle[disabled] {
    background-color: var(--sv-surface-2, #F8FAFC) !important;
    color: var(--sv-text-sec, #64748B) !important;
    border-color: var(--sv-border, #E2E8F0) !important;
    opacity: 0.85 !important;
    cursor: not-allowed !important;
}

div.bootstrap-select > button.dropdown-toggle .filter-option {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    overflow: hidden !important;
}

div.bootstrap-select > button.dropdown-toggle .filter-option-inner-inner {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

/* Input Groups (Select + Addon Button, Input + Addon, DataTables Search Input Group) */
.input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
}

.input-group > .form-control,
.input-group > div.bootstrap-select,
.input-group.input-group-select > div.bootstrap-select {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    margin-bottom: 0 !important;
}

/* Left control when followed by addon/btn */
.input-group > .form-control:first-child:not(:last-child),
.input-group > div.bootstrap-select:first-child:not(:last-child) > button.dropdown-toggle {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Right control when preceded by addon/btn */
.input-group > .form-control:last-child:not(:first-child),
.input-group > div.bootstrap-select:last-child:not(:first-child) > button.dropdown-toggle {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-addon,
#wrapper .input-group > .input-group-addon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 38px !important;
    height: var(--sv-ctrl-h, 38px) !important;
    padding: 0 12px !important;
    background-color: var(--sv-surface-2, #F8FAFC) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    color: var(--sv-text-sec, #64748B) !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.input-group > .input-group-addon:first-child,
#wrapper .input-group > .input-group-addon:first-child {
    border-right: none !important;
    border-radius: var(--sv-radius-ctrl, 8px) 0 0 var(--sv-radius-ctrl, 8px) !important;
}

.input-group > .input-group-addon:last-child,
#wrapper .input-group > .input-group-addon:last-child {
    border-left: none !important;
    border-radius: 0 var(--sv-radius-ctrl, 8px) var(--sv-radius-ctrl, 8px) 0 !important;
}

.input-group > .input-group-btn {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

.input-group > .input-group-btn > .btn {
    height: var(--sv-ctrl-h, 38px) !important;
    min-height: var(--sv-ctrl-h, 38px) !important;
    min-width: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    background: var(--sv-surface-2, #F8FAFC) !important;
    color: var(--sv-text-body, #334155) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.input-group > .input-group-btn:last-child > .btn {
    border-left: none !important;
    border-radius: 0 var(--sv-radius-ctrl, 8px) var(--sv-radius-ctrl, 8px) 0 !important;
}

.input-group > .input-group-btn > .btn:hover {
    background: var(--sv-surface-hover, #F1F5F9) !important;
    color: var(--sv-accent, #4F46E5) !important;
}

/* DataTables Filter Search Input Group (36px height alignment) */
.dataTables_wrapper .dataTables_filter .input-group {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
}

.dataTables_wrapper .dataTables_filter .input-group > .input-group-addon {
    height: 36px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 10px !important;
    background: var(--sv-surface-2, #F8FAFC) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    border-right: none !important;
    border-radius: var(--sv-radius-ctrl, 8px) 0 0 var(--sv-radius-ctrl, 8px) !important;
}

.dataTables_wrapper .dataTables_filter .input-group > input[type="search"].form-control {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 0 var(--sv-radius-ctrl, 8px) var(--sv-radius-ctrl, 8px) 0 !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    min-width: 200px !important;
}

/* Secure PIN field cleanup in Customer Profile */
.form-group .secure-pin .form-group {
    margin-bottom: 0 !important;
}

.form-group .secure-pin .form-group > label:empty {
    display: none !important;
}

/* Bottom fixed/sticky form action bar cleanup */
.btn-bottom-toolbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(6px) !important;
    border-top: 1px solid var(--sv-border, #E2E8F0) !important;
    padding: 12px 24px !important;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04) !important;
}

/* Dashboard User Data Widget */
.panel_s.user-data {
    border-radius: var(--sv-radius-card, 12px) !important;
    border: 1px solid var(--sv-border, #E2E8F0) !important;
    box-shadow: var(--sv-shadow-card) !important;
    background: var(--sv-surface, #FFFFFF) !important;
}

.panel_s.user-data .home-activity {
    padding: 20px 24px !important;
}