/* integrasi-langsung.css — Bank ABC Portal API Sandbox
 * L7: Integrasi Langsung (Extension F-05) — 3 zona
 * V1.1 Sesi 11c | Zero hardcoded hex */

.il-root { display:flex; flex-direction:column; gap:var(--space-6); padding-bottom:var(--space-12); }

.dash-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); padding-bottom:var(--space-5); border-bottom:1px solid var(--surface-muted); }
.dash-header__meta { display:flex; flex-direction:column; gap:2px; }
.dash-header__eyebrow { font-size:var(--text-xs); font-weight:var(--font-medium); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.07em; }
.dash-header__title { font-size:var(--text-2xl); font-weight:var(--font-bold); color:var(--text-primary); line-height:var(--leading-tight); margin:0; display:flex; align-items:center; gap:var(--space-3); }
.dash-header__subtitle { font-size:var(--text-sm); color:var(--text-secondary); margin:var(--space-1) 0 0; }
.dash-header__actions { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; margin-top:4px; }

.il-zona-label { font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-3); display:flex; align-items:center; gap:var(--space-2); }
.il-zona-label::after { content:''; flex:1; height:1px; background-color:var(--surface-muted); }

/* Setup cards */
.il-connections-list { display:flex; flex-direction:column; gap:var(--space-3); }
.il-connection-card { background-color:var(--surface-card); border:1px solid var(--surface-muted); border-radius:var(--radius-xl); padding:var(--space-5); display:flex; align-items:flex-start; gap:var(--space-4); }
.il-connection-card__icon { width:40px; height:40px; min-width:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-lg); flex-shrink:0; }
.il-connection-card__icon--active  { background-color:var(--status-success-bg); color:var(--status-success); }
.il-connection-card__icon--pending { background-color:var(--status-warning-bg); color:var(--status-warning); }
.il-connection-card__body { flex:1; min-width:0; }
.il-connection-card__name { font-size:var(--text-sm); font-weight:var(--font-semibold); color:var(--text-primary); display:block; margin-bottom:2px; }
.il-connection-card__meta { font-size:var(--text-xs); color:var(--text-tertiary); display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
.il-connection-card__detail { display:flex; flex-direction:column; gap:var(--space-1); }
.il-detail-row { display:flex; gap:var(--space-2); font-size:var(--text-xs); font-family:var(--font-mono); }
.il-detail-key { color:var(--text-tertiary); min-width:80px; flex-shrink:0; }
.il-detail-value { color:var(--text-primary); }
.il-connection-card__actions { display:flex; flex-direction:column; gap:var(--space-2); flex-shrink:0; align-self:flex-start; }

.il-status-badge { display:inline-flex; align-items:center; gap:4px; padding:2px var(--space-2); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--font-semibold); white-space:nowrap; }
.il-status-badge__dot { width:6px; height:6px; border-radius:var(--radius-full); flex-shrink:0; }
.il-status-badge--active  { background-color:var(--status-success-bg); color:var(--status-success); }
.il-status-badge--active .il-status-badge__dot { background-color:var(--status-success); }
.il-status-badge--pending { background-color:var(--status-warning-bg); color:var(--status-warning); }
.il-status-badge--pending .il-status-badge__dot { background-color:var(--status-warning); animation:pulse 2s infinite; }
.il-status-badge--rejected { background-color:var(--status-danger-bg); color:var(--status-danger); }

/* New connection form */
.il-new-form { background-color:var(--surface-card); border:1px dashed var(--surface-muted); border-radius:var(--radius-xl); overflow:hidden; }
.il-new-form__trigger { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); cursor:pointer; width:100%; background:none; border:none; font-family:var(--font-sans); text-align:left; transition:background-color var(--transition-fast); }
.il-new-form__trigger:hover { background-color:var(--surface-subtle); }
.il-new-form__trigger-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background-color:var(--brand-primary-subtle); border-radius:var(--radius-md); color:var(--brand-primary); flex-shrink:0; }
.il-new-form__trigger-label { font-size:var(--text-sm); font-weight:var(--font-semibold); color:var(--brand-primary); }
.il-new-form__trigger-chevron { margin-left:auto; color:var(--text-tertiary); transition:transform var(--transition-fast); }
.il-new-form__trigger-chevron--open { transform:rotate(180deg); }
.il-new-form__body { padding:var(--space-5); padding-top:0; display:flex; flex-direction:column; gap:var(--space-4); border-top:1px solid var(--surface-muted); }

/* Monitor zone */
.il-monitor-panel { background-color:var(--surface-card); border:1px solid var(--surface-muted); border-radius:var(--radius-xl); overflow:hidden; }
.il-monitor-stats { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--surface-muted); }
.il-stat-cell { padding:var(--space-4) var(--space-5); border-right:1px solid var(--surface-muted); }
.il-stat-cell:last-child { border-right:none; }
.il-stat-label { font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-1); display:block; }
.il-stat-value { font-size:var(--text-xl); font-weight:var(--font-bold); color:var(--text-primary); font-variant-numeric:tabular-nums; display:block; }
.il-stat-value--success { color:var(--status-success); }
.il-stat-value--danger  { color:var(--status-danger); }
.il-stat-sub { font-size:var(--text-xs); color:var(--text-tertiary); display:block; margin-top:2px; }

.il-monitor-status-bar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5); background-color:var(--surface-subtle); border-bottom:1px solid var(--surface-muted); }
.il-monitor-dot { width:8px; height:8px; border-radius:var(--radius-full); background-color:var(--status-success); animation:pulse 2s infinite; flex-shrink:0; }
.il-monitor-dot--paused { background-color:var(--text-tertiary); animation:none; }
.il-monitor-status-text { font-size:var(--text-sm); color:var(--text-primary); font-weight:var(--font-medium); flex:1; }
.il-monitor-counter { font-size:var(--text-xs); color:var(--text-tertiary); font-variant-numeric:tabular-nums; }

@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.il-monitor-table-wrapper { max-height:380px; overflow-y:auto; overflow-x:auto; }
.il-monitor-table { width:100%; border-collapse:collapse; min-width:640px; }
.il-monitor-table thead th { background-color:var(--surface-subtle); padding:var(--space-2) var(--space-4); text-align:left; font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--surface-muted); white-space:nowrap; position:sticky; top:0; z-index:1; }
.il-monitor-table tbody tr { border-bottom:1px solid var(--surface-muted); transition:background-color var(--transition-fast); animation:rowIn 0.3s ease; }
.il-monitor-table tbody tr:hover { background-color:var(--surface-subtle); }
.il-monitor-table tbody td { padding:var(--space-2) var(--space-4); font-size:var(--text-xs); color:var(--text-primary); vertical-align:middle; white-space:nowrap; }
@keyframes rowIn { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} }

/* Shared monitor classes */
.monitor-method-badge { font-size:9px; font-weight:var(--font-bold); font-family:var(--font-mono); padding:1px 5px; border-radius:var(--radius-sm); }
.monitor-method-badge--post   { background-color:var(--status-info-bg);    color:var(--status-info); }
.monitor-method-badge--get    { background-color:var(--status-success-bg); color:var(--status-success); }
.monitor-endpoint { font-family:var(--font-mono); color:var(--text-secondary); }
.monitor-status-pill { display:inline-block; padding:1px var(--space-2); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--font-bold); font-family:var(--font-mono); }
.monitor-status-pill--ok      { background-color:var(--status-success-bg); color:var(--status-success); }
.monitor-status-pill--error   { background-color:var(--status-danger-bg);  color:var(--status-danger); }
.monitor-status-pill--warning { background-color:var(--status-warning-bg); color:var(--status-warning); }
.monitor-latency { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.monitor-latency--slow    { color:var(--status-warning); }
.monitor-latency--timeout { color:var(--status-danger); }
.monitor-time { color:var(--text-tertiary); font-family:var(--font-mono); }
.monitor-ip   { color:var(--text-tertiary); font-family:var(--font-mono); }

/* History zone */
.il-history-toolbar { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
.il-history-search { display:flex; align-items:center; gap:var(--space-2); flex:1; min-width:180px; max-width:280px; height:34px; padding:0 var(--space-3); background-color:var(--surface-card); border:1px solid var(--surface-muted); border-radius:var(--radius-full); transition:border-color var(--transition-fast); }
.il-history-search:focus-within { border-color:var(--brand-primary); }
.il-history-search__icon { color:var(--text-tertiary); flex-shrink:0; width:13px; height:13px; }
.il-history-search__input { flex:1; border:none; outline:none; background:transparent; font-size:var(--text-xs); color:var(--text-primary); font-family:var(--font-sans); }
.il-history-search__input::placeholder { color:var(--text-tertiary); }
.il-history-table-wrapper { background-color:var(--surface-card); border:1px solid var(--surface-muted); border-radius:var(--radius-xl); overflow:hidden; overflow-x:auto; }
.il-history-table { width:100%; border-collapse:collapse; min-width:640px; }
.il-history-table thead th { background-color:var(--surface-subtle); padding:var(--space-3) var(--space-4); text-align:left; font-size:var(--text-xs); font-weight:var(--font-semibold); color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--surface-muted); white-space:nowrap; }
.il-history-table tbody tr { border-bottom:1px solid var(--surface-muted); transition:background-color var(--transition-fast); }
.il-history-table tbody tr:last-child { border-bottom:none; }
.il-history-table tbody tr:hover { background-color:var(--surface-subtle); }
.il-history-table tbody td { padding:var(--space-3) var(--space-4); font-size:var(--text-xs); color:var(--text-primary); vertical-align:middle; white-space:nowrap; }
.il-history-date { color:var(--text-tertiary); font-family:var(--font-mono); }
.il-history-latency { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

@media (max-width:1023px) { .il-monitor-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:639px) { .il-connection-card { flex-direction:column; } .il-monitor-stats { grid-template-columns:1fr 1fr; } }  /* ── Tab navigation ── */
  .il-tabs { display: flex; border-bottom: 2px solid var(--surface-muted); margin-bottom: var(--space-6); gap: 0; }
  .il-tab { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-family: var(--font-sans); transition: color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; }
  .il-tab:hover { color: var(--text-primary); }
  .il-tab--active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: var(--font-semibold); }
  .il-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
  .il-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--surface-muted); border-radius: var(--radius-full); font-size: 10px; font-weight: var(--font-bold); color: var(--text-tertiary); line-height: 1; font-variant-numeric: tabular-nums; }
  .il-tab--active .il-tab__count { background: var(--brand-primary-subtle); color: var(--brand-primary); }

  /* ── Page zone panels ── */
  .il-zone { display: none; }
  .il-zone--active { display: block; }

  /* ── Section heading ── */
  .il-section-heading { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .il-section-heading__count { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--text-tertiary); background: var(--surface-muted); padding: 2px var(--space-2); border-radius: var(--radius-full); }

  /* ── Connection card ── */
  .il-conn-list { display: flex; flex-direction: column; gap: var(--space-3); }
  .il-conn-card { background: var(--surface-card); border: 1px solid var(--surface-muted); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); display: flex; align-items: flex-start; gap: var(--space-4); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
  .il-conn-card:hover { border-color: var(--text-tertiary); box-shadow: var(--shadow-sm); }
  .il-conn-card--pending { border-left: 3px solid var(--status-warning); }
  .il-conn-card__icon { width: 40px; height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); flex-shrink: 0; }
  .il-conn-card__icon--active  { background: var(--status-success-bg); color: var(--status-success); }
  .il-conn-card__icon--pending { background: var(--status-warning-bg); color: var(--status-warning); }
  .il-conn-card__body { flex: 1; min-width: 0; }
  .il-conn-card__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 2px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .il-conn-card__badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: var(--font-semibold); padding: 2px var(--space-2); border-radius: var(--radius-full); }
  .il-conn-card__badge--active  { background: var(--status-success-bg); color: var(--status-success); }
  .il-conn-card__badge--pending { background: var(--status-warning-bg); color: var(--status-warning); }
  .il-conn-card__badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  .il-conn-card__badge--active .il-conn-card__badge-dot { animation: il-pulse 2s ease infinite; }
  @keyframes il-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  .il-conn-card__meta { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
  .il-conn-card__detail-row { display: flex; gap: var(--space-2); font-size: var(--text-xs); font-family: var(--font-mono); align-items: baseline; }
  .il-conn-card__detail-key { color: var(--text-tertiary); min-width: 70px; flex-shrink: 0; }
  .il-conn-card__detail-val { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .il-conn-card__note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--status-warning); display: flex; align-items: center; gap: var(--space-1); }
  .il-conn-card__actions { display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0; align-self: flex-start; padding-top: 2px; }

  /* ── Drawer: slide in dari kanan (sama pola dengan cred-drawer di credentials) ── */
  .il-drawer-backdrop {
    position: fixed; inset: 0;
    background-color: rgba(15, 23, 42, 0.35);
    z-index: calc(var(--z-modal, 200) - 10);
    opacity: 0; transition: opacity 0.22s ease; pointer-events: none;
  }
  .il-drawer-backdrop--open { opacity: 1; pointer-events: auto; }

  .il-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 480px; max-width: 92vw;
    background-color: var(--surface-card);
    box-shadow: -4px 0 32px rgba(15, 23, 42, 0.12);
    z-index: var(--z-modal, 200);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }
  .il-drawer--open { transform: translateX(0); }

  .il-drawer__header {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--surface-muted);
    background: var(--surface-subtle); flex-shrink: 0;
  }
  .il-drawer__header-meta { flex: 1; min-width: 0; }
  .il-drawer__title {
    font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary);
    margin: 0 0 2px; display: flex; align-items: center; gap: var(--space-2);
  }
  .il-drawer__title svg { color: var(--brand-primary); flex-shrink: 0; }
  .il-drawer__subtitle { font-size: var(--text-xs); color: var(--text-secondary); margin: 0; }

  .il-drawer__close {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--radius-md);
    color: var(--text-tertiary); cursor: pointer; flex-shrink: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }
  .il-drawer__close:hover { background-color: var(--surface-muted); color: var(--text-primary); }
  .il-drawer__close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

  .il-drawer__body {
    flex: 1; overflow-y: auto;
    padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
  }
  .il-drawer__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--surface-muted); background: var(--surface-subtle);
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
    flex-shrink: 0;
  }

  @media (max-width: 639px) { .il-drawer { width: 100%; max-width: 100%; } }

  /* ── Success/info banners ── */
  .il-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--font-medium); margin-bottom: var(--space-4); }
  .il-banner[hidden] { display: none; }
  .il-banner--success { background: var(--status-success-bg); border: 1px solid var(--status-success); color: var(--status-success); }
  .il-banner--info    { background: var(--status-info-bg);    border: 1px solid var(--status-info);    color: var(--status-info); }

  /* ── Monitor ── */
  .il-monitor-controls { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
  .il-paused-bar { padding: var(--space-2) var(--space-5); background: var(--status-warning-bg); border-top: 1px solid var(--surface-muted); font-size: var(--text-xs); color: var(--status-warning); font-weight: var(--font-medium); text-align: center; }
  @keyframes il-rowIn { from{opacity:0;background:var(--status-success-bg)} to{opacity:1;background:transparent} }
  .il-row-new { animation: il-rowIn 1s ease; }

  /* ── History toolbar ── */
  .il-history-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
  .il-filter-select { height: 34px; padding: 0 var(--space-3); background: var(--surface-card); border: 1px solid var(--surface-muted); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--text-primary); font-family: var(--font-sans); cursor: pointer; outline: none; transition: border-color var(--transition-fast); }
  .il-filter-select:focus { border-color: var(--brand-primary); }

  /* ── Empty state ── */
  .il-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-10) var(--space-6); color: var(--text-tertiary); text-align: center; }
  .il-empty svg { opacity: 0.3; }
  .il-empty__text { font-size: var(--text-sm); }

  /* ── Page header ── */
  .dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--surface-muted); margin-bottom: var(--space-5); }
  .dash-header__meta { display: flex; flex-direction: column; gap: 2px; }
  .dash-header__eyebrow { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; }
  .dash-header__title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); line-height: var(--leading-tight); margin: 0; }
  .dash-header__subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-1) 0 0; }
  .dash-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; margin-top: 4px; }

  /* ── Environment radio ── */
  .il-env-options { display: flex; gap: var(--space-3); }
  .il-env-option { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
  .il-env-option--disabled { opacity: 0.45; cursor: not-allowed; }
  .il-env-option input { accent-color: var(--brand-primary); }

  /* ── Prerequisite callout (informatif, di atas form fields) ── */
  .il-prereq-callout {
    border: 1px solid var(--surface-muted);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .il-prereq-callout__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--status-info-bg);
    border-bottom: 1px solid var(--surface-muted);
  }
  .il-prereq-callout__head svg { color: var(--status-info); flex-shrink: 0; }
  .il-prereq-callout__title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--status-info);
    margin: 0;
  }
  .il-prereq-callout__list {
    list-style: none;
    margin: 0;
    padding: var(--space-2) var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--surface-card);
  }
  .il-prereq-callout__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
  }
  .il-prereq-callout__item[hidden] { display: none; }
  .il-prereq-callout__item svg { color: var(--text-tertiary); flex-shrink: 0; margin-top: 3px; }
  .il-prereq-callout__item strong { color: var(--text-primary); font-weight: var(--font-semibold); }
  .il-prereq-callout__link {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
  }
  .il-prereq-callout__link:hover { text-decoration: underline; }