/* ========================================================================
 *  KX-PAY V2 dashboard  ·  07-tabs.css
 * -----------------------------------------------------------------------
 *  Tab-specific styling: Test Supplier, PDGFID product codes,
 *  Automation, Check Name
 *
 *  Lifted verbatim from V1 dashboard.html lines 1077-1368.
 *  Load order matters — see the numeric prefix.
 * =======================================================================
 */

  /* ----------------------------------------------------------- TEST SUPPLIER API */
  #tab-testsupplier .ts-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  }
  #tab-testsupplier .ts-row label {
    width: 160px; flex-shrink: 0;
    color: #475569; font-size: 13px; font-weight: 500;
  }
  #tab-testsupplier .ts-row input,
  #tab-testsupplier .ts-row select {
    flex: 1; min-width: 0; max-width: 340px; padding: 7px 10px;
    border: 1px solid #cbd5e1; border-radius: 6px; outline: none;
    font-family: inherit; font-size: 13px; text-align: left;
  }
  #tab-testsupplier .ts-row input:focus,
  #tab-testsupplier .ts-row select:focus { border-color: #f59e0b; }
  #tab-testsupplier h4 {
    font-size: 13px; font-weight: 600; color: #0f172a; margin: 16px 0 8px 0;
  }
  #tab-testsupplier .ts-warn-box {
    background: #fef3c7; color: #78350f; border: 1px solid #fcd34d;
    border-radius: 6px; padding: 10px 12px; font-size: 13px; margin: 12px 0;
  }
  #tab-testsupplier .ts-resp-status {
    font-size: 13px; font-weight: 600; padding: 8px 12px;
    border-radius: 6px; margin-bottom: 10px;
    background: #f1f5f9; color: #475569;
  }
  #tab-testsupplier .ts-resp-status.ok   { background: #dcfce7; color: #166534; }
  #tab-testsupplier .ts-resp-status.warn { background: #fef3c7; color: #92400e; }
  #tab-testsupplier .ts-resp-status.err  { background: #fee2e2; color: #991b1b; }
  #tab-testsupplier pre.ts-pre {
    background: #0f172a; color: #e2e8f0; border-radius: 6px;
    padding: 12px; font-size: 12px; line-height: 1.5; margin: 0 0 4px 0;
    overflow: auto; max-height: 360px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap; word-break: break-word;
  }
  #tab-testsupplier .ts-cb-item,
  #tab-callbacks    .ts-cb-item {
    border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 10px 12px; margin-bottom: 8px;
  }
  #tab-testsupplier .ts-cb-head,
  #tab-callbacks    .ts-cb-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px; font-size: 13px;
  }
  #tab-testsupplier .ts-cb-status,
  #tab-callbacks    .ts-cb-status {
    font-weight: 700; font-size: 11px; text-transform: uppercase;
    padding: 2px 8px; border-radius: 99px;
    background: #f1f5f9; color: #475569;
  }
  #tab-testsupplier .ts-cb-status.ok,
  #tab-callbacks    .ts-cb-status.ok   { background: #dcfce7; color: #166534; }
  #tab-testsupplier .ts-cb-status.err,
  #tab-callbacks    .ts-cb-status.err  { background: #fee2e2; color: #991b1b; }
  #tab-testsupplier .ts-cb-status.warn,
  #tab-callbacks    .ts-cb-status.warn { background: #fef3c7; color: #92400e; }
  #tab-testsupplier .ts-cb-ref,
  #tab-callbacks    .ts-cb-ref  { font-weight: 600; color: #0f172a; }
  #tab-testsupplier .ts-cb-time,
  #tab-callbacks    .ts-cb-time { color: #94a3b8; margin-left: auto; font-size: 12px; }
  /* Small provider badge — PDGFID vs PJVID — on each callback row. */
  #tab-testsupplier .ts-cb-prov,
  #tab-callbacks    .ts-cb-prov {
    font-weight: 700; font-size: 10px; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 4px;
    background: #e0e7ff; color: #3730a3;
  }
  #tab-testsupplier .ts-cb-prov.pdgfid,
  #tab-callbacks    .ts-cb-prov.pdgfid { background: #ede9fe; color: #5b21b6; }
  /* Also style <pre> JSON payload inside #tab-callbacks (Test Supplier has its
     own .ts-pre rule; mirror it here so payloads look the same on Callbacks). */
  #tab-callbacks .ts-pre {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px;
    padding: 8px 10px; margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap; word-break: break-word;
  }

  /* ---------------------------------------- PDGFID APC fee badges + Browse modal */
  /* Fee badge under each SKU input on the PDGFID APC card. We wrap the badge
     to its own line (flex-basis:100% inside .apc-active) so the SKU input
     can take the FULL cell width — letting long codes like
     "DANABBSNANEKA1JT" render in full instead of being truncated. */
  #dapc-card .apc-active { flex-wrap: wrap; }
  .dapc-fee-badge {
    display:inline-block; min-width:48px; font-size:11px; font-weight:600;
    padding:2px 6px; border-radius:4px; margin-top:3px; text-align:center;
    white-space:nowrap; line-height:1.2;
    flex-basis:100%;     /* forces the badge onto its own line below the input */
    margin-left:22px;    /* indent past the radio bullet so the badge lines up with the input */
  }
  .dapc-fee-badge.ok      { background:#dcfce7; color:#166534; }   /* fee + active */
  .dapc-fee-badge.inactive{ background:#fee2e2; color:#991b1b; }   /* in cache but flagged inactive */
  .dapc-fee-badge.unknown { background:#fef3c7; color:#92400e; }   /* not in pricelist */
  .dapc-fee-badge.empty   { display:none; }                         /* slot is blank */

  /* "Browse SKUs" link button (one per wallet row). */
  .dapc-browse-btn {
    background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe;
    font-size:11px; font-weight:600; padding:3px 8px; border-radius:4px;
    cursor:pointer; white-space:nowrap;
  }
  .dapc-browse-btn:hover { background:#e0e7ff; }

  /* Modal that lists all PDGFID pasca SKUs for a wallet. */
  .dapc-modal-backdrop {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(15,23,42,0.55); z-index:1000;
    display:flex; align-items:center; justify-content:center;
  }
  .dapc-modal {
    background:white; border-radius:8px; padding:0;
    max-width:920px; width:92%; max-height:85vh; display:flex; flex-direction:column;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
  }
  .dapc-modal-header {
    padding:14px 18px; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; gap:10px;
  }
  .dapc-modal-header h3 { margin:0; font-size:16px; }
  .dapc-modal-header .close-x {
    margin-left:auto; background:none; border:none; font-size:22px; cursor:pointer; color:#64748b;
  }
  .dapc-modal-body { padding:14px 18px; overflow-y:auto; }
  .dapc-modal-search {
    width:100%; padding:8px 10px; border:1px solid #cbd5e1; border-radius:6px;
    font-size:13px; margin-bottom:10px;
  }
  .dapc-modal-table { width:100%; border-collapse:collapse; font-size:13px; }
  .dapc-modal-table th, .dapc-modal-table td { padding:7px 10px; text-align:left; border-bottom:1px solid #f1f5f9; }
  .dapc-modal-table th { background:#f8fafc; color:#475569; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
  .dapc-modal-table td.r { text-align:right; }
  .dapc-modal-table .sku-cell { font-family:monospace; color:#0f172a; }
  .dapc-modal-table .use-btn  {
    background:#1d4ed8; color:white; border:none; font-size:11px; font-weight:600;
    padding:4px 10px; border-radius:4px; cursor:pointer;
  }
  .dapc-modal-table .use-btn:hover { background:#1e40af; }
  .dapc-modal-table .use-btn:disabled { background:#94a3b8; cursor:not-allowed; }
  .dapc-modal-table .sku-inactive { color:#94a3b8; }
  .dapc-modal-footer { padding:10px 18px; border-top:1px solid #e2e8f0; font-size:12px; color:#64748b; }

  /* ----------------------------------------------------------- AUTOMATION (robotkx-style) */
  .ac-card {
    background: white; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    max-width: 1200px;
  }
  .ac-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
  }
  .ac-toolbar h3 { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0; }
  .ac-status-badge {
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px;
  }
  .ac-status-badge.offline { background: #fee2e2; color: #b91c1c; }
  .ac-status-badge.online  { background: #d1fae5; color: #065f46; }
  .ac-status-badge.stale   { background: #fef3c7; color: #92400e; }

  .ac-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  .ac-grid > .span-3 { grid-column: 1 / -1; }
  .ac-grid > .span-2 { grid-column: span 2; }

  /* Read-only "Brand identity" card on the Automation tab.
     The actual data lives on the Brands tab — this just shows it for context. */
  .ac-brand-card {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 14px 16px; margin-bottom: 18px;
  }
  .ac-brand-card-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; font-weight: 700; color: #64748b;
    letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px;
  }
  .ac-brand-card-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  .ac-brand-card-grid > .span-3 { grid-column: 1 / -1; }
  .ac-readonly-label {
    font-size: 10px; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px;
  }
  .ac-readonly-value {
    font-size: 13px; color: #0f172a; font-weight: 500;
    padding: 4px 0;
  }
  .ac-readonly-value.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
  .ac-edit-link {
    background: white; border: 1px solid #cbd5e1; color: #475569;
    padding: 4px 10px; border-radius: 6px; font-weight: 600; cursor: pointer;
    font-size: 11px; font-family: inherit; text-transform: none; letter-spacing: 0;
  }
  .ac-edit-link:hover { background: #4338ca; color: white; border-color: #4338ca; }
  /* Brand-side users can't access the Brands tab anyway, so don't tease the
     button. Hidden for brand_admin / brand_operator / brand_viewer. */
  body.brand-role .ac-edit-link { display: none; }

  /* ---------- Check Name Provider tab ---------- */
  /* Status badges (used in the providers table — kept after card layout was retired) */
  .cn-status-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.4px; display: inline-block; }
  .cn-status-online  { background: #d1fae5; color: #065f46; }
  .cn-status-stale   { background: #fef3c7; color: #92400e; }
  .cn-status-offline { background: #f1f5f9; color: #64748b; }

  /* result pills shown in the recent-checks table */
  .cn-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
  .cn-pill-matched         { background: #d1fae5; color: #065f46; }
  .cn-pill-mismatch        { background: #fee2e2; color: #991b1b; }
  .cn-pill-invalid-account { background: #fee2e2; color: #991b1b; }
  .cn-pill-failed          { background: #f1f5f9; color: #64748b; }
  .cn-pill-pending         { background: #fef3c7; color: #92400e; }
  /* small hint line under the pill, e.g. "Nomor salah/produk gangguan…" */
  .cn-error-hint { display: block; font-size: 11px; color: #991b1b; margin-top: 2px; line-height: 1.3; }

  .ac-label {
    display: block; font-size: 11px; font-weight: 700; color: #64748b;
    letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px;
  }
  .ac-input {
    width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px;
    font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box;
    background: white; color: #0f172a;
  }
  .ac-input:focus {
    border-color: #818cf8; box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);
  }
  .ac-input:disabled, .ac-input[readonly] {
    background: #f1f5f9; color: #475569; cursor: not-allowed;
  }
  .ac-hint { font-size: 11px; color: #94a3b8; margin-top: 4px; line-height: 1.4; }
  .ac-hint code { background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-size: 11px; }

  /* .ac-rj-row / .ac-rj-label deleted with the "Auto Reject Ticket If" block.
     Rules for markup that no longer exists are a trap: the next person to
     write a checkbox row in this tab reaches for a class that looks designed
     for it and inherits styling nobody meant them to have. */

  .ac-bank-table {
    width: 100%; border-collapse: collapse; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden;
  }
  .ac-bank-table thead tr { background: #f1f5f9; border-bottom: 2px solid #e2e8f0; }
  .ac-bank-table th {
    padding: 8px; font-size: 11px; color: #64748b;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  }
  .ac-bank-table td { padding: 6px 8px; }
  .ac-bank-table tbody tr { border-top: 1px solid #e2e8f0; }
  .ac-bank-table input[type="text"] {
    width: 100%; padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 4px;
    font-size: 12px; outline: none; background: white;
  }
  .ac-bank-table input[type="text"]:disabled { background: #f1f5f9; }

  .ac-button-row {
    display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end;
    align-items: center;
  }
  .ac-btn-primary {
    background: #4338ca; color: white; border: 0; padding: 8px 18px;
    border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 13px;
    font-family: inherit;
  }
  .ac-btn-primary:hover { background: #3730a3; }
  .ac-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
  .ac-btn-secondary {
    background: white; border: 1px solid #cbd5e1; color: #475569;
    padding: 8px 18px; border-radius: 8px; font-weight: 600; cursor: pointer;
    font-size: 13px; font-family: inherit;
  }
  .ac-btn-secondary:hover { background: #f8fafc; }
  .ac-saved-msg { color: #047857; font-size: 12px; align-self: center; }

  /* Heartbeat dot */
  .hb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
  .hb-online  { background: #10b981; }
  .hb-stale   { background: #f59e0b; }
  .hb-offline { background: #94a3b8; }