/* ══════════════════════════════════════════════════════════════
 *  ft_tablo.css — Ortak form tablosu şablonu
 *
 *  Sistem genelinde formlar bu düzenle kurulur: sol sütun etiket,
 *  sağ sütun alan. Daha önce her dosyada satır içi kopyalanıyordu;
 *  yeni/dönüştürülen formlar bu dosyayı link'ler.
 *
 *  Kullanım:
 *      <link rel="stylesheet" href="/assets/css/ft_tablo.css">
 *
 *      <div class="ft-tb-wrap">              <!-- autocomplete varsa: ft-tb-visible -->
 *        <table class="ft-tablo">            <!-- uzun etiket varsa: ft-tablo-esit -->
 *          <tr>
 *            <td class="ft-etiket"><label for="x">Başlık <span class="ft-zorunlu">*</span></label></td>
 *            <td><input id="x" type="text"></td>
 *          </tr>
 *        </table>
 *      </div>
 *
 *  Tema: sarmalayıcıya .ft-tema-mor / .ft-tema-indigo / .ft-tema-amber
 *        verilerek renk değiştirilir (varsayılan yeşil).
 * ══════════════════════════════════════════════════════════════ */

.ft-tb-wrap {
    --ft-cizgi:       #a7f3d0;   /* dış çerçeve + etiket ayıracı */
    --ft-ic-cizgi:    #d1fae5;   /* satır ayıracı */
    --ft-etiket-bg:   #f0fdf4;
    --ft-etiket-renk: #065f46;
    --ft-odak:        #1D9E75;   /* alan focus rengi */

    border: 1px solid var(--ft-cizgi);
    border-radius: 6px;
    overflow: hidden;
}

/* Alan içinde açılır liste (autocomplete) varsa kırpılmasın */
.ft-tb-wrap.ft-tb-visible { overflow: visible; }

/* ── Tema varyantları ────────────────────────────────────────── */
.ft-tema-mor {
    --ft-cizgi:       #ddd6fe;
    --ft-ic-cizgi:    #ede9fe;
    --ft-etiket-bg:   #f5f3ff;
    --ft-etiket-renk: #4c3d9e;
    --ft-odak:        #534AB7;
}
.ft-tema-indigo {
    --ft-cizgi:       #c7d2fe;
    --ft-ic-cizgi:    #e0e7ff;
    --ft-etiket-bg:   #eef2ff;
    --ft-etiket-renk: #3730a3;
    --ft-odak:        #6366f1;
}
.ft-tema-amber {
    --ft-cizgi:       #fde68a;
    --ft-ic-cizgi:    #fef3c7;
    --ft-etiket-bg:   #fffbeb;
    --ft-etiket-renk: #92400e;
    --ft-odak:        #f59e0b;
}

/* ── Tablo ───────────────────────────────────────────────────── */
.ft-tablo { width: 100%; border-collapse: collapse; }
.ft-tablo td {
    padding: 6px 10px;
    vertical-align: middle;
    font-size: 13px;
    border-bottom: 1px solid var(--ft-ic-cizgi);
}
.ft-tablo tr:last-child td { border-bottom: none; }

.ft-tablo .ft-etiket {
    font-weight: 600;
    color: var(--ft-etiket-renk);
    background: var(--ft-etiket-bg);
    width: 1%;
    white-space: nowrap;
    font-size: 12px;
    padding-right: 16px;
    border-right: 2px solid var(--ft-cizgi);
}
/* Etiket hücresinde gerçek <label> — tıklayınca alana odaklanır */
.ft-tablo .ft-etiket label {
    display: block;
    font: inherit;
    color: inherit;
    cursor: pointer;
    margin: 0;
}
/* Etiket altı açıklama */
.ft-tablo .ft-etiket small {
    display: block;
    font-weight: 400;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    white-space: normal;
}
.ft-tablo .ft-zorunlu { color: #ef4444; }

/* Yan yana iki etiket-alan çifti kullanıldığında ikinci etiketin sol çizgisi */
.ft-tablo .ft-etiket + td + .ft-etiket { border-left: 1px solid var(--ft-cizgi); }

/* Uzun etiketli formlar: sabit yerleşim + etiket satır kırabilir.
   table-layout:fixed olduğu için .ft-etiket'in width:1%'i sütunu çökertirdi;
   varsayılan bir oran veriyoruz. Farklı oran gerekiyorsa <colgroup> ile
   (ör. 4 sütunlu etiket/alan-etiket/alan tabloları) ezilebilir. */
.ft-tablo.ft-tablo-esit { table-layout: fixed; }
.ft-tablo.ft-tablo-esit .ft-etiket { white-space: normal; width: 34%; }

/* Çok satırlı alanlarda etiket yukarı hizalansın */
.ft-tablo .ft-etiket.ft-ust { vertical-align: top; padding-top: 10px; }

/* ── Alanlar ─────────────────────────────────────────────────── */
.ft-tablo input[type=text],
.ft-tablo input[type=url],
.ft-tablo input[type=email],
.ft-tablo input[type=tel],
.ft-tablo input[type=date],
.ft-tablo input[type=time],
.ft-tablo input[type=datetime-local],
.ft-tablo input[type=number],
.ft-tablo input[type=search],
.ft-tablo select,
.ft-tablo textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #1e293b;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.ft-tablo select   { cursor: pointer; }
.ft-tablo textarea { resize: vertical; }
.ft-tablo textarea.auto-grow { overflow: hidden; resize: none; min-height: 38px; }
.ft-tablo input:focus,
.ft-tablo select:focus,
.ft-tablo textarea:focus { border-color: var(--ft-odak); }
.ft-tablo input:disabled,
.ft-tablo select:disabled,
.ft-tablo textarea:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }

/* Alan altı ipucu */
.ft-tablo .ft-ipucu { font-size: 11px; color: #94a3b8; margin-top: 3px; }

/* ── Mobil: satırlar üst üste yığılır ────────────────────────── */
@media (max-width: 640px) {
    .ft-tablo,
    .ft-tablo tbody,
    .ft-tablo tr,
    .ft-tablo td { display: block; width: auto; }

    .ft-tablo.ft-tablo-esit { table-layout: auto; }

    .ft-tablo tr { border-bottom: 1px solid var(--ft-ic-cizgi); }
    .ft-tablo tr:last-child { border-bottom: none; }
    .ft-tablo td { border-bottom: none; }

    .ft-tablo .ft-etiket,
    .ft-tablo .ft-etiket + td + .ft-etiket {
        width: auto;
        white-space: normal;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid var(--ft-ic-cizgi);
        padding-top: 7px;
        padding-bottom: 5px;
    }
    .ft-tablo .ft-etiket.ft-ust { padding-top: 7px; }
}

/* ══════════════════════════════════════════════════════════════
 *  Ayarlanabilir sütunlar — .ft-tablo-sutun (bkz. varliklar/js/tablo.js)
 *
 *  Excel'deki gibi sütun çizgisinden tutup sürükleme. Yalnız LİSTE
 *  tablolarına verilir; form yerleşimlerinde (sol etiket / sağ alan)
 *  sürüklenecek bir şey yok.
 * ══════════════════════════════════════════════════════════════ */

.ft-tablo-sutun td { position: relative; }

/* Sabit yerleşimde uzun içerik hücreyi taşırırdı; kırpılıp
   noktalanır. Kullanıcı sütunu genişletirse tam metni görür. */
.ft-tablo-sutun-hazir td { overflow: hidden; text-overflow: ellipsis; }

/* Hücre içi küçük açıklamalar yine satır kırabilsin */
.ft-tablo-sutun-hazir td small { white-space: normal; }

.sutun-tutamak {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
    /* Görünmez ama dokunulabilir: çizgi zaten hücre kenarlığında.
       Üstüne gelince belirginleşir, böylece keşfedilebilir kalır. */
    background: transparent;
    transition: background .12s;
}
.sutun-tutamak:hover,
.sutun-tutamak:focus-visible {
    background: var(--ft-odak, #1D9E75);
    outline: none;
}

/* Sürükleme boyunca imleç her yerde aynı kalsın ve metin seçilmesin */
body.sutun-suruklerken,
body.sutun-suruklerken * { cursor: col-resize !important; user-select: none !important; }