/**
 * ═══════════════════════════════════════════════════════════════
 * SOVERSE GLOBAL CSS FIX
 * Kalıcı düzeltmeler — tüm panellerde (master + tenant) geçerli
 * Yazar: Soverse Dev
 * Tarih: 2026-06-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 FIX ───────────────────────────────────────────
 * Sorun: poly-shim.css sidebar width/margin çakışması
 */

/* Sidebar genişliği — orijinal değerlere uyumlu */
#menu,
#setup-menu-wrapper {
    width: 270px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Wrapper margin — sidebar ile uyumlu */
/* NOT: .customers class'ı public teklif/sözleşme sayfalarında var, bunlara uygulanmamalı */
body:not(.hide-sidebar):not(.poly-hide-sidebar):not(.customers) #wrapper {
    margin-left: 270px !important;
}

/* Public sayfalar (teklif, sözleşme önizleme) — TÜM margin'leri sıfırla */
/* style.css'deki #wrapper { margin: 0 0 0 230px } kuralını override et */
body.customers #wrapper,
body.customers #main-wrapper,
body.proposal-view #wrapper,
body.contract-view #wrapper,
body[class*="proposal"] #wrapper,
body[class*="contract"] #wrapper,
.customers #wrapper {
    margin: 0 !important;
    padding-left: 0 !important;
}

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

/* Sidebar menü metinleri — kesilmesin */
#side-menu li a,
#setup-menu li a,
.sidebar-menu li a {
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: 14px !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Sidebar ikonları */
#side-menu li a i,
#setup-menu li a i {
    width: 20px !important;
    text-align: center !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
}

/* Alt menü (dropdown) */
#side-menu .collapse li a,
#side-menu .in li a,
#setup-menu .collapse li a {
    padding-left: 40px !important;
    font-size: 13px !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;
    max-height: 400px !important;
    overflow-y: auto !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: 10060 !important;
}

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

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

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

.bootstrap-select.open .dropdown-menu {
    z-index: 10050 !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: 10060 !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: 80px !important;
}

/* İlk sütun (checkbox) — dar tut */
table.dataTable thead th:first-child {
    min-width: 40px !important;
    max-width: 50px !important;
    width: 40px !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 LAYOUT & MENU FIX ─── */
@media (max-width: 767px) {
    /* Header main container nowrap & height fix */
    #header {
        height: 60px !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: flex-start !important;
        gap: 8px !important;
    }
    #header nav > div.tw-flex.tw-justify-between > div.tw-overflow-hidden {
        order: 1 !important;
    }
    #header nav > div.tw-flex.tw-justify-between > .mobile-menu {
        order: 2 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #header nav > div.tw-flex.tw-justify-between > .navbar-right {
        order: 3 !important;
    }
    
    /* Hide search input on mobile header to make space */
    #top_search {
        display: none !important;
    }
    
    /* Hide desktop-only visible menus with higher specificity */
    body #header .nav.navbar-nav.visible-md,
    body #header .nav.navbar-nav.visible-lg {
        display: none !important;
    }

    /* Optimize logo image size on mobile */
    #header .logo img {
        max-width: 95px !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 */
    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: 60px !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 */
    body #menu,
    body #setup-menu-wrapper {
        transform: translateX(-270px) !important;
        transition: transform 0.3s 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) */
}