/* TOKİ Taksit - Desktop: 1 row x 4 col (label+input pairs). Mobile: stacked */

/* Base 8x1 grid (4 label+input pairs) */
.hb-grid-8x1{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:15px;
  margin-top:15px;
}
.hb-cell{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.hb-empty{visibility:hidden; height:0}

/* Inputs inherit global look from style.css; radius & borders are consistent there */
.hb-label{display:block}
.hb-input{display:block; width:100%}

/* Existing shared UI - Sekme stilleri artık style.css'ten geliyor */

.hb-warn{display:none;margin:15px 0;padding:10px;border:1px solid #d9d9d9;background:#fff5f5;color:#7a0b0b;border-radius:10px}
.hb-warn.show{display:block}

.hb-panel{display:none;margin:15px 0 0 0;border:none;border-radius:10px;background:#fff}
.hb-panel.show{display:block}

.hb-info{margin-bottom:10px}
.hb-badge{display:inline-block;padding:5px 8px;border-radius:8px;background:#DFF0D8;border:1px solid #d9d9d9;color:#2B542C;font-weight:700}

.hb-table{width:100%;border-collapse:separate;border-spacing:2px;margin:8px 0 0 0;border:none}
.hb-table th,.hb-table td{border:1px solid #d9d9d9;border-radius:5px;padding:8px;text-align:right;background:#fff;margin:2px}
.hb-table th:first-child,.hb-table td:first-child{text-align:center}
.hb-table thead th{background:#FCF8E3;color:#66512C;font-weight:600}


.hb-note{margin-top:8px;font-size:.95em;opacity:.9}

.hb-actions{margin:15px 0 0 0}
.hb-actions-after{margin:15px 0 0 0;display:flex;gap:10px}
#tk_excel,
#kr_excel{background:#00a651 !important;border-color:#00a651 !important;color:#fff !important}
#tk_excel:hover,
#kr_excel:hover{background:#008f47 !important;border-color:#008f47 !important}

.hb-pane{margin:15px 0}

/* Mobile: stack per field (label then input) */
@media (max-width: 768px) {
  .hb-toki .hb-grid-8x1 {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .hb-toki .hb-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  .hb-toki .hb-label {
    text-align: left;
  }
  
  .hb-toki .hb-input {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }
  
  .hb-toki .hb-empty {
    display: none;
  }
}