
.select-column {
    max-width: 15px !important;
}

.myBtn i {
    padding: 0 !important
}

/* ========================================
   TASK-044: Validation Düzeltme
   Bootstrap 5 Standart Validation Stilleri
   ======================================== */
.input-validation-error {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.input-validation-error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

.field-validation-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.validation-summary-errors {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

small .text-danger {
    display: block;
}

/* ========================================
   TASK-044: Color Picker Input Stilleri
   ======================================== */
.form-control-color {
    width: 50px !important;
    min-width: 50px !important;
    height: 38px !important;
    padding: 0.25rem !important;
    cursor: pointer;
    border: 1px solid #ced4da;
}

.form-control-color::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.form-control-color::-webkit-color-swatch {
    border-radius: 4px;
    border: none;
}

.form-control-color::-moz-color-swatch {
    border-radius: 4px;
    border: none;
}

.input-group .form-control-color {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.color-picker-group .form-control:not(.form-control-color) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.color-picker-group {
    max-width: 200px;
}

/* ========================================
   TASK-045: Form Tooltip/Helper Text Gizleme
   Input altındaki açıklama yazılarını gizle
   ======================================== */
.form-text,
.help-block,
.form-hint,
.form-floating-custom + small,
.form-check + span.text-muted.fs-7 {
    display: none !important;
}

/* ========================================
   TASK-046: Form Full Width
   Card yapısı kaldırıldı, formlar tam genişlik
   TASK-047: Form margin-top 20px olarak güncellendi
   ======================================== */
#kt_app_content_container > form,
#kt_app_content_container > form.w-100 {
    margin-top: 20px !important;
    width: 100% !important;
}

form.w-100 {
    width: 100% !important;
}

/* ========================================
   TASK-048/49/51: Form Validation İkonları
   TEK İKON - JavaScript kontrolü ile
   Input sağında yeşil ✓ veya kırmızı ✗
   ======================================== */

/* Form grup pozisyonu */
.form-group,
.mb-3,
.mb-5,
.form-floating-custom {
    position: relative;
}

/* TASK-049: Input validation wrapper - INPUT'u sarar, label hariç */
.input-validation-wrapper {
    position: relative !important;
    display: block;
    width: 100%;
}

/* Validation için input padding */
input.is-valid,
input.is-invalid,
input.input-validation-error,
textarea.is-valid,
textarea.is-invalid,
textarea.input-validation-error,
select.is-valid,
select.is-invalid,
select.input-validation-error {
    padding-right: 2.5rem !important;
    background-image: none !important; /* Bootstrap default ikonları kaldır */
}

/* TASK-051: Tek validation ikonu - varsayılan gizli */
.validation-icon {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    font-size: 18px;
    font-weight: bold;
    pointer-events: none;
    z-index: 10;
    display: none; /* Varsayılan gizli */
    font-family: Arial, sans-serif;
    line-height: 1;
}

/* Başarılı validation - Yeşil check ✓ */
.validation-icon.success {
    display: block;
    color: #28a745;
}

/* Hata validation - Kırmızı çarpı ✗ */
.validation-icon.error {
    display: block;
    color: #dc3545;
}

/* Textarea için ikon pozisyonu */
textarea ~ .validation-icon,
.input-validation-wrapper textarea ~ .validation-icon {
    top: 1.5rem !important;
}

/* Input group içindeki ikon konumu */
.input-group .validation-icon {
    right: 50px; /* Input group addon için offset */
}

/* Color picker group için ikon */
.color-picker-group .validation-icon {
    right: 55px;
}

.btn-sm {
    padding: calc(0.4rem + .6px) calc(0.8rem + 0.4px) !important
}

.btn-square {
    border-radius: 0 !important;
}

/* Actions column - compact width */
table tr td:last-child,
.datatable-actions {
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    .select-column {
        max-width: 100%;
    }

    .mybutton {
        float: none !important;
        width: 100% !important;
        display: block !important;
    }

    #kt_app_header {
        position: fixed;
        z-index: 99999;
        width: 100%;
    }

    tr td div {
        text-align: center !important;
        margin: auto;
    }

    table tr td:last-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
    }

    #myForm {
        padding: 1rem !important
    }

    .card-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tdProcess {
        margin-right: 0 !important;
    }

    #kt_app_content {
        overflow-x: hidden !important;
    }

    table thead {
        display: none
    }

    table tr td {
        width: 90vw;
        display: grid;
        text-align: center !important;
        margin: auto;
    }


        table tr td a {
            margin-bottom: 1rem
        }

        table tr td span.badge.badge-success {
            max-width: 3rem;
            margin-left: calc(50% + 0.7rem);
            transform: translateX(-50%);
        }

        table tr td:last-child {
            border-bottom: 2px solid currentColor !important
        }

    .hover-scroll-overlay-y {
        overflow-y: scroll !important
    }
}

.dt-button.buttons-html5, .dt-button.buttons-collection.buttons-colvis {
    background-color: #f2f4f8;
    border: none;
}

button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    border-radius: .5rem !important;
    background: #f2f4f8 !important;
}

/* ========================================
   DataTable Action Dropdown Menu Styles
   ======================================== */
.action-dropdown {
    display: inline-block;
}

.action-dropdown-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px !important;
    border: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
}

.action-dropdown-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.action-dropdown-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.action-dropdown-btn i {
    font-size: 12px;
    color: #495057;
}

.action-dropdown .dropdown-menu {
    min-width: 160px;
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
}

.action-dropdown .dropdown-item {
    padding: 8px 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease;
}

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

.action-dropdown .dropdown-item i {
    width: 16px;
    text-align: center;
}

.action-dropdown .dropdown-divider {
    margin: 4px 0;
}

/* ========================================
   DATATABLE BASİT VE SADE STİLLER
   TASK-039: DataTable Clean Design
   ======================================== */

/* ========================================
   TASK-042: DataTable Full Width
   Container kaldırıldı, tablo tam genişlik
   ======================================== */
.dataTables_wrapper {
    width: 100% !important;
    padding: 0 !important;
}

table.dataTable,
.advancedTable,
.myTable {
    width: 100% !important;
}

/* TASK-043: DataTable üst margin - Toolbar ile tablo arası boşluk */
#kt_app_content_container > .dataTables_wrapper {
    margin-top: 16px !important;
}

/* --- Temel Tablo Stilleri --- */
.advancedTable,
.myTable {
    width: 100% !important;
}

/* --- Zebra Stripe (Çift/Tek Satır) --- */
.advancedTable tbody tr:nth-child(even),
.myTable tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.advancedTable tbody tr:nth-child(odd),
.myTable tbody tr:nth-child(odd) {
    background-color: #fff;
}

/* --- Basit Hover Efekti --- */
.advancedTable tbody tr:hover,
.myTable tbody tr:hover {
    background-color: #e9ecef !important;
}

/* --- Action Butonları (Sade) --- */
.tdProcess {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.tdProcess .myBtn {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px !important;
    border: none;
}

/* --- Pagination Basit Stiller --- */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    background: #e9ecef !important;
    color: #212529 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Empty State (Sade) --- */
.dataTables_wrapper .dataTables_empty {
    padding: 40px 20px !important;
    text-align: center;
    color: #6c757d;
}

/* --- Processing/Loading --- */
.dataTables_processing {
    background: rgba(255,255,255,0.9) !important;
    padding: 20px !important;
    border-radius: 4px !important;
}

/* --- Responsive (Mobil) --- */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }
    
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 10px;
    }
}
