/* ===================================================
   FRAUD TABLE — WRAPPER & LAYOUT
   =================================================== */
.ft-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    background: #f8f9fa;
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
}

/* ===================================================
   HEADER
   =================================================== */
.ft-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    flex-shrink: 0;
    gap: 16px;
}
.ft-header-left  { display: flex; align-items: center; gap: 12px; }
.ft-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.ft-back-btn {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    background: #fff0f0; border: 1.5px solid #B71C1C;
    border-radius: 20px; color: #B71C1C;
    font-size: 12px; font-weight: 700;
    text-decoration: none; transition: background .2s; flex-shrink: 0;
}
.ft-back-btn:hover { background: #fee2e2; }

.ft-title    { font-weight: 700; font-size: 15px; color: #212529; }
.ft-subtitle { font-size: 11px; color: #888; margin-top: 1px; }

/* ===================================================
   CHIPS
   =================================================== */
.ft-chips { display: flex; gap: 8px; }
.ft-chip  {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 14px; border-radius: 10px; min-width: 72px;
}
.ft-chip.red    { background: #fee2e2; }
.ft-chip.orange { background: #fff3e0; }
.ft-chip.blue   { background: #e3f2fd; }

.ft-chip-num { font-size: 18px; font-weight: 800; line-height: 1; }
.ft-chip.red    .ft-chip-num { color: #B71C1C; }
.ft-chip.orange .ft-chip-num { color: #E65100; }
.ft-chip.blue   .ft-chip-num { color: #1565C0; }

.ft-chip-lbl {
    font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
    margin-top: 3px; color: #888;
}

/* ===================================================
   DOWNLOAD BUTTON
   =================================================== */
.ft-download-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; background: #1565C0; color: #fff;
    border: none; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.ft-download-btn:hover { background: #0D47A1; }

/* ===================================================
   FILTER BAR
   =================================================== */
.ft-filter-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; background: #fff;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0; flex-wrap: wrap;
}

.ft-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.ft-search-icon {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%); font-size: 13px; pointer-events: none;
}
.ft-search-wrap input {
    width: 100%; padding: 7px 12px 7px 32px;
    border: 1px solid #dee2e6; border-radius: 8px;
    font-size: 12px; outline: none; transition: border-color .2s;
}
.ft-search-wrap input:focus { border-color: #B71C1C; }

.ft-filter-bar select {
    padding: 7px 10px; border: 1px solid #dee2e6;
    border-radius: 8px; font-size: 12px; outline: none;
    background: #fff; cursor: pointer; color: #495057;
    transition: border-color .2s;
}
.ft-filter-bar select:focus { border-color: #B71C1C; }

.ft-reset-btn {
    padding: 7px 14px; background: #f5f5f5;
    border: 1px solid #dee2e6; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: #666;
    cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.ft-reset-btn:hover { background: #fee2e2; color: #B71C1C; border-color: #B71C1C; }

/* ===================================================
   TABLE WRAPPER — sticky thead butuh overflow di sini
   =================================================== */
.ft-table-wrap {
    flex: 1;
    overflow: auto;
    padding: 0 20px 16px 20px;
    position: relative;
}

/* ===================================================
   TABLE
   =================================================== */
.ft-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    font-size: 12px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

/* ===================================================
   THEAD STICKY
   =================================================== */
.ft-table thead tr { background: #B71C1C; }
.ft-table thead th {
    padding: 11px 13px;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    letter-spacing: .3px;
    user-select: none;
    background: #B71C1C;
}
.ft-table thead th[onclick] { cursor: pointer; }
.ft-table thead th[onclick]:hover { background: #9b1111; }

.sort-icon { font-size: 10px; opacity: .7; margin-left: 3px; }

/* ===================================================
   SEPARATOR KOLOM PSB | CBASE
   =================================================== */
.th-sep {
    width: 6px !important;
    padding: 0 !important;
    background: #9b1111 !important;
}
.td-sep { width: 6px; padding: 0 !important; background: #f0f0f0; }

/* ===================================================
   ROW GROUPING — sekarang pakai rowspan asli,
   jadi tidak ada lagi sel kosong / "td-cont"
   =================================================== */
.tr-psb-first td {
    border-top: 2px solid #dee2e6 !important;
}
.tr-psb-first:first-child td {
    border-top: none !important;
}

/* Baris Cbase ke-2, 3, dst (bukan baris pertama grup) dikasih tint halus
   biar tetap kebaca sebagai "bagian dari" grup yang sama */
.tr-cbase-cont td:not(.td-sep) {
    background: #fafbfc;
}

.tr-new td               { background: #FFF8F5 !important; }
.tr-new.tr-cbase-cont td:not(.td-sep) { background: #fff4f0 !important; }

.td-sep-first { border-top: 2px solid #ddd !important; }
.td-sep-last  { border-bottom: 2px solid #ddd; }

/* ===================================================
   CELLS
   =================================================== */
.ft-table td {
    padding: 8px 13px;
    color: #495057;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}

/* Sel dengan rowspan (kolom PSB) align ke atas biar enak dibaca
   saat 1 PSB punya banyak Cbase match */
.ft-table td[rowspan] {
    vertical-align: top;
    padding-top: 10px;
}

.ft-table tbody tr:hover td:not(.td-sep) {
    background: #fffbf5;
}

.td-no {
    font-weight: 800; color: #B71C1C;
    text-align: center; font-size: 11px; width: 36px;
}

.td-order    { min-width: 130px; }
.td-order-id { font-weight: 700; color: #212529; font-size: 12px; }
.td-new-badge {
    display: inline-block; font-size: 10px;
    background: #FF6D00; color: #fff;
    padding: 1px 6px; border-radius: 8px;
    margin-left: 4px; font-weight: 700;
}

.td-nama { font-weight: 600; color: #212529; min-width: 140px; }

.td-sto {
    display: inline-block;
    background: #E3F2FD; color: #1565C0;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 6px;
}

.td-sa      { min-width: 130px; }
.td-sa-code { font-weight: 700; color: #212529; font-size: 11px; }
.td-sa-name { color: #888; font-size: 11px; margin-top: 1px; }

.td-tanggal { color: #6c757d; min-width: 100px; font-size: 11px; }

/* FIX: sebelumnya rule ini "td-status span" padahal HTML-nya
   <span class="td-status">, jadi badge hijau status nggak pernah
   ke-style. Sekarang rule-nya langsung target .td-status */
.td-status {
    display: inline-block;
    background: #E8F5E9; color: #2E7D32;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 8px;
}

.td-cbase-ke { text-align: center; }
.cbase-ke-badge {
    display: inline-block;
    background: #FCE4EC; color: #AD1457;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
}

.td-cbase-nama   { font-weight: 600; color: #212529; min-width: 140px; }
.td-cbase-nomor  { color: #495057; min-width: 110px; font-size: 11px; }
.td-cbase-alamat {
    color: #6c757d; font-size: 11px;
    min-width: 160px; max-width: 200px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.td-jarak     { text-align: center; white-space: nowrap; }
.jarak-badge  {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 20px;
}
.jarak-kritis { background: #FFEBEE; color: #B71C1C; }
.jarak-tinggi { background: #FFF3E0; color: #E65100; }
.jarak-normal { background: #F3E5F5; color: #7B1FA2; }

.td-alasan { font-size: 11px; color: #6c757d; min-width: 130px; }

.td-aksi { text-align: center; }
.aksi-btn-map {
    padding: 5px 11px;
    background: #fff0f0; border: 1.5px solid #B71C1C;
    border-radius: 8px; color: #B71C1C;
    font-size: 11px; font-weight: 700;
    cursor: pointer; transition: background .2s; white-space: nowrap;
}
.aksi-btn-map:hover { background: #fee2e2; }

/* ===================================================
   COLUMN WIDTHS
   =================================================== */
.th-no    { width: 40px; }
.th-jarak { width: 90px; }
.th-aksi  { width: 80px; }

/* ===================================================
   EMPTY & LOADING
   =================================================== */
.ft-loading, .ft-empty {
    text-align: center; padding: 48px; color: #aaa; font-size: 14px;
}

/* ===================================================
   SCROLLBAR
   =================================================== */
.ft-table-wrap::-webkit-scrollbar       { width: 6px; height: 6px; }
.ft-table-wrap::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.ft-table-wrap::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.ft-table-wrap::-webkit-scrollbar-thumb:hover { background: #B71C1C; }

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 768px) {
    .ft-header     { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ft-chips      { flex-wrap: wrap; }
    .ft-filter-bar { gap: 8px; }
    .ft-search-wrap { max-width: 100%; }
}