/* ============================================================
 * STARS RCM — SAP Center Full-Screen (Desktop)
 * Menjadikan SAP Integration Center tampil full-screen yang lega
 * di layar lebar (PC/laptop), tanpa mengubah tampilan mobile.
 * Aktif hanya pada viewport >= 900px.
 * ========================================================== */
@media (min-width: 900px) {
  /* Overlay penuh menutupi seluruh layar */
  #pageSap.sap-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    overflow-y: auto;
    padding: 0 0 40px;
    background:
      radial-gradient(circle at 0% 0%, rgba(63,169,245,.10), transparent 38%),
      radial-gradient(circle at 100% 0%, rgba(63,169,245,.08), transparent 42%),
      var(--bg, #0a0f14);
  }

  /* Bar judul lengket di atas dengan aksen */
  #pageSap .sap-hero {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 0 8px;
    padding: 22px clamp(24px, 5vw, 64px);
    border: 0;
    border-bottom: 1px solid rgba(63,169,245,.28);
    border-radius: 0;
    background:
      radial-gradient(circle at 100% 0, rgba(63,169,245,.18), transparent 40%),
      linear-gradient(145deg, #0e1720, var(--surface, #121a22));
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
  }
  #pageSap .sap-hero small { font-size: 11px; letter-spacing: 2px; }
  #pageSap .sap-hero h2 { font-size: 30px; margin: 8px 0 4px; letter-spacing: .3px; }
  #pageSap .sap-hero p { font-size: 13px; line-height: 1.55; max-width: 620px; }
  #pageSap .sap-shield {
    width: 84px; height: 84px; font-size: 24px; border-radius: 22px;
  }

  /* Tab bar horizontal yang lega & terpusat */
  #pageSap .sap-tabs {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px clamp(24px, 5vw, 64px) 12px;
    gap: 10px;
    overflow: visible;
    flex-wrap: wrap;
  }
  #pageSap .sap-tabs button {
    font-size: 12px;
    padding: 11px 20px;
    border-radius: 12px;
    letter-spacing: .4px;
    transition: all .15s ease;
  }
  #pageSap .sap-tabs button:hover {
    border-color: rgba(63,169,245,.5);
    color: #cbe8ff;
  }
  #pageSap .sap-tabs button.active {
    background: rgba(63,169,245,.18);
    box-shadow: 0 4px 14px rgba(63,169,245,.2);
  }

  /* Area konten terpusat dengan lebar nyaman */
  #pageSap .sap-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px clamp(24px, 5vw, 64px) 0;
  }

  /* Kartu-kartu lebih besar & nyaman dibaca */
  #pageSap .sap-card,
  #pageSap .sap-state-card {
    padding: 22px 24px;
    border-radius: 16px;
    margin-bottom: 16px;
  }
  #pageSap .sap-card h3,
  #pageSap .sap-state-head h3 { font-size: 17px; }
  #pageSap .sap-card > h3 + small,
  #pageSap .sap-state-head small { font-size: 10px; letter-spacing: 1.4px; }

  /* Metrik & grid: manfaatkan lebar layar (kolom lebih banyak) */
  #pageSap .sap-state-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
  }
  #pageSap .sap-state-grid div { padding: 16px; border-radius: 13px; }
  #pageSap .sap-state-grid small { font-size: 10px; }
  #pageSap .sap-state-grid b { font-size: 20px; margin-top: 6px; }

  /* Metric cards (overview) berjajar rapi */
  #pageSap .sap-metric {
    padding: 18px 20px;
    border-radius: 14px;
  }
  #pageSap .sap-metric small { font-size: 11px; }
  #pageSap .sap-metric b { font-size: 26px; }
  #pageSap .sap-metric p { font-size: 11px; }

  /* Grid metric jadi baris horizontal yang lega bila memungkinkan */
  #pageSap .sap-metrics,
  #pageSap .sap-overview-grid,
  #pageSap [class*="metric-grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
  }

  /* Catatan aman & checklist lebih terbaca */
  #pageSap .sap-safe-note { font-size: 12px; padding: 14px 16px; }
  #pageSap .sap-check-list { font-size: 13px; }

  /* Tabel (queue, mapping, endpoints) full width & rapi */
  #pageSap table {
    width: 100%;
    font-size: 13px;
  }
  #pageSap th, #pageSap td { padding: 10px 12px; }

  /* Form config: dua kolom yang lega */
  #pageSap .sap-form-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  #pageSap .sap-form-grid input,
  #pageSap .sap-form-grid select { font-size: 14px; padding: 11px 13px; }
  #pageSap .sap-toggle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  #pageSap .sap-actions button {
    font-size: 13px;
    padding: 12px 22px;
  }
}

/* Layar sangat lebar: beri sedikit ruang lebih */
@media (min-width: 1400px) {
  #pageSap .sap-tabs,
  #pageSap .sap-content { max-width: 1320px; }
  #pageSap .sap-state-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
 * SAP Center EMBEDDED di Planning (render di dalam pwContent)
 * ========================================================== */
.sap-embed-wrap { padding: 0; }
.sap-embed-wrap .sap-embed-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 0 14px; margin: 0; overflow: visible;
  border-bottom: 1px solid var(--border, #223);
  margin-bottom: 16px;
}
.sap-embed-wrap .sap-embed-tabs button {
  white-space: nowrap; padding: 9px 18px; border-radius: 10px;
  border: 1px solid var(--border, #223); background: var(--surface, #121a22);
  color: var(--muted, #8b97a6); font-size: 12px; font-weight: 800;
  letter-spacing: .3px; cursor: pointer; transition: all .15s ease;
}
.sap-embed-wrap .sap-embed-tabs button:hover {
  border-color: rgba(63,169,245,.5); color: #cbe8ff;
}
.sap-embed-wrap .sap-embed-tabs button.active {
  color: #9bd8ff; border-color: #3fa9f5; background: rgba(63,169,245,.14);
}
/* Konten SAP di dalam Planning: manfaatkan lebar penuh area */
.sap-embed-wrap .sap-content { padding: 0; max-width: none; }
.sap-embed-wrap .sap-card,
.sap-embed-wrap .sap-state-card { padding: 18px 20px; border-radius: 14px; }
.sap-embed-wrap .sap-card h3,
.sap-embed-wrap .sap-state-head h3 { font-size: 16px; }
.sap-embed-wrap .sap-state-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.sap-embed-wrap .sap-state-grid b { font-size: 18px; }
.sap-embed-wrap .sap-metric b { font-size: 24px; }
.sap-embed-wrap .sap-form-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sap-embed-wrap .sap-form-grid input,
.sap-embed-wrap .sap-form-grid select { font-size: 13px; padding: 10px 12px; }
.sap-embed-wrap table { width: 100%; font-size: 13px; }
.sap-embed-wrap th, .sap-embed-wrap td { padding: 9px 11px; }