/* =========================================================
   TTKM ORTAK MOBİL / RESPONSIVE DÜZEN
   - GridView ve veri tabloları: telefonda kart görünümü
   - .ariza-table formları: telefonda etiket + alan dikey görünüm
   - Buton tabloları: telefonda tam genişlik işlem butonları
   ========================================================= */

.ttkm-responsive-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ttkm-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
    }

    .app-content,
    main.app-content,
    .form-card,
    .card,
    .panel,
    .content-wrapper {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .app-content,
    main.app-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .form-card,
    .card {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    img,
    video,
    iframe,
    canvas {
        max-width: 100%;
    }

    img {
        height: auto;
    }

    body .modal-content,
    body .popup-content,
    body .dialog-content {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 40px) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px;
    }

    /* -----------------------------------------------------
       FORM TABLOLARI
       ----------------------------------------------------- */
    table.ariza-table,
    table.ariza-table > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border-spacing: 0 !important;
    }

    table.ariza-table > tbody > tr {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        background: transparent !important;
    }

    table.ariza-table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    table.ariza-table > tbody > tr > td.col-label {
        width: 100% !important;
        white-space: normal !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 7px !important;
        padding: 8px 10px !important;
        border-radius: 9px 9px 0 0 !important;
        line-height: 1.35 !important;
    }

    table.ariza-table > tbody > tr > td.col-input {
        width: 100% !important;
        padding: 8px 0 3px !important;
        height: auto !important;
    }

    table.ariza-table .col-input > input[type="text"],
    table.ariza-table .col-input > input[type="password"],
    table.ariza-table .col-input > input[type="email"],
    table.ariza-table .col-input > input[type="number"],
    table.ariza-table .col-input > input[type="date"],
    table.ariza-table .col-input > input[type="time"],
    table.ariza-table .col-input > input[type="datetime-local"],
    table.ariza-table .col-input > select,
    table.ariza-table .col-input > textarea,
    table.ariza-table .col-input > .input,
    table.ariza-table .col-input > span > input,
    table.ariza-table .col-input > span > select,
    table.ariza-table .col-input > span > textarea {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    table.ariza-table textarea {
        min-height: 100px;
    }

    /* CheckBoxList / RadioButtonList gibi ASP.NET'in ürettiği küçük iç tabloları
       ana form tablosu gibi karta çevirmiyoruz; sadece satır kırmasına izin veriyoruz. */
    table.ariza-table td.col-input > table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    table.ariza-table td.col-input > table td {
        white-space: normal !important;
        padding: 4px 6px !important;
    }

    /* -----------------------------------------------------
       VERİ / GRID TABLOLARI - KART GÖRÜNÜMÜ
       JS .ttkm-mobile-grid sınıfını ve data-label alanlarını ekler.
       ----------------------------------------------------- */
    table.ttkm-mobile-grid,
    table.ttkm-mobile-grid > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        border: 0 !important;
        border-collapse: separate !important;
        background: transparent !important;
    }

    table.ttkm-mobile-grid > thead,
    table.ttkm-mobile-grid > tbody > tr.ttkm-grid-header,
    table.ttkm-mobile-grid > tr.ttkm-grid-header {
        display: none !important;
    }

    table.ttkm-mobile-grid > tbody > tr:not(.ttkm-grid-header),
    table.ttkm-mobile-grid > tr:not(.ttkm-grid-header) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 13px !important;
        border: 1px solid #dfe5ec !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 3px 12px rgba(15, 23, 42, .06) !important;
        overflow: hidden !important;
    }

    table.ttkm-mobile-grid > tbody > tr:not(.ttkm-grid-header) > td,
    table.ttkm-mobile-grid > tr:not(.ttkm-grid-header) > td {
        display: grid !important;
        grid-template-columns: minmax(108px, 40%) minmax(0, 60%) !important;
        align-items: start !important;
        gap: 9px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 39px !important;
        padding: 9px 10px !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-bottom: 1px solid #eef2f7 !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        background: transparent !important;
        float: none !important;
    }

    table.ttkm-mobile-grid > tbody > tr:not(.ttkm-grid-header) > td:last-child,
    table.ttkm-mobile-grid > tr:not(.ttkm-grid-header) > td:last-child {
        border-bottom: 0 !important;
    }

    table.ttkm-mobile-grid td[data-label]::before {
        content: attr(data-label);
        display: block;
        min-width: 0;
        color: #475569;
        font-weight: 800;
        font-size: 12px;
        line-height: 1.35;
        text-align: left;
        white-space: normal;
    }

    table.ttkm-mobile-grid td.ttkm-action-cell {
        display: block !important;
        padding: 10px !important;
        text-align: right !important;
        background: #f8fafc !important;
    }

    table.ttkm-mobile-grid td.ttkm-action-cell::before {
        display: none !important;
    }

    table.ttkm-mobile-grid td.ttkm-action-cell > a,
    table.ttkm-mobile-grid td.ttkm-action-cell > button,
    table.ttkm-mobile-grid td.ttkm-action-cell > input[type="button"],
    table.ttkm-mobile-grid td.ttkm-action-cell > input[type="submit"] {
        margin: 2px !important;
        max-width: 100% !important;
    }

    table.ttkm-mobile-grid tr.ttkm-special-row > td {
        display: block !important;
        width: 100% !important;
        padding: 10px !important;
        text-align: center !important;
    }

    table.ttkm-mobile-grid tr.ttkm-special-row > td::before {
        display: none !important;
    }

    table.ttkm-mobile-grid tr.ttkm-special-row table {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    table.ttkm-mobile-grid input[type="text"],
    table.ttkm-mobile-grid input[type="number"],
    table.ttkm-mobile-grid input[type="date"],
    table.ttkm-mobile-grid input[type="time"],
    table.ttkm-mobile-grid select,
    table.ttkm-mobile-grid textarea {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* -----------------------------------------------------
       SADECE İŞLEM BUTONLARI İÇEREN YARDIMCI TABLOLAR
       ----------------------------------------------------- */
    table.ttkm-action-table,
    table.ttkm-action-table > tbody,
    table.ttkm-action-table > tbody > tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    table.ttkm-action-table > tbody > tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    table.ttkm-action-table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    table.ttkm-action-table input[type="submit"],
    table.ttkm-action-table input[type="button"],
    table.ttkm-action-table button,
    table.ttkm-action-table a.buton {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Filtre/toolbar alanlarında butonların ekrandan taşmasını engelle. */
    .toolbar,
    .page-footer-actions,
    .filter-actions,
    .ariza-actions,
    .dup-actions {
        max-width: 100% !important;
    }

    .search-wrapper {
        max-width: 100% !important;
    }

    .search-wrapper input {
        box-sizing: border-box !important;
    }

    /* Kurumsal sayfalardaki üst menü mobilde ekranı genişletmesin. */
    .main-nav > ul {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    table.ttkm-mobile-grid > tbody > tr:not(.ttkm-grid-header) > td,
    table.ttkm-mobile-grid > tr:not(.ttkm-grid-header) > td {
        grid-template-columns: minmax(96px, 39%) minmax(0, 61%) !important;
        gap: 7px !important;
        padding: 8px !important;
        font-size: 12.5px !important;
    }

    table.ttkm-action-table > tbody > tr {
        grid-template-columns: 1fr !important;
    }
}