/*
 * Surtalogi API Docs - Custom CSS v13 (Stable Version)
 * Pendekatan disederhanakan agar judul grup pasti muncul di semua perangkat.
 * Oleh: Gemini
 */

/* ==========================================================================
   1. SETUP & VARIABEL GLOBAL (UBAH TEMA DI SINI)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap');

.swagger-ui {
  /* -- Font Families -- */
  --font-primary: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* -- Color Palette (Dark Theme) -- */
  --color-background: #120A2C;
  --color-surface-1: #1C0F40;
  --color-surface-2: #0A041C;
  --color-border: #3A1B6A;
  --color-border-strong: #4A207A;
  
  --color-text-base: #E2E8F0;
  --color-text-heading: #FFFFFF;
  --color-text-muted: #94A3B8;
  --color-text-inverted: #120A2C;

  /* -- Accent Colors -- */
  --color-accent-primary: #6D28D9;
  --color-accent-secondary: #A78BFA;
  --color-accent-success: #22C55E;
  
  /* -- Sizing & Radius -- */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 20px;
}


/* ==========================================================================
   2. GAYA DASAR & GLOBAL
   ========================================================================== */

body, .swagger-ui {
  font-family: var(--font-primary);
  background-color: var(--color-background);
  color: var(--color-text-base);
  font-size: 15px;
  line-height: 1.6;
}

/* -- Topbar -- */
.swagger-ui .topbar {
  background-color: rgba(28, 16, 56, 0.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-strong);
  height: 60px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.swagger-ui .topbar a.link,
.swagger-ui .topbar .topbar-wrapper::before {
  display: none;
}

.swagger-ui .wrapper {
  padding: 0 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* -- Info Section (Header) -- */
.swagger-ui .info {
  margin-top: 20px;
  background: linear-gradient(145deg, var(--color-surface-1), var(--color-surface-2));
  padding: 24px;
  border-radius: var(--radius-medium);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.swagger-ui .info .title {
  color: var(--color-text-heading);
  font-size: 2rem;
  font-weight: 700;
}

.swagger-ui .info .title small {
  background: var(--color-accent-primary);
  padding: 4px 10px;
  border-radius: var(--radius-large);
  font-size: 0.8rem;
  vertical-align: middle;
}

.swagger-ui .info a {
  color: var(--color-accent-secondary);
  font-weight: 500;
}

/* -- Scheme & Servers Container -- */
.swagger-ui .scheme-container {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  padding: 20px;
  border-radius: var(--radius-small);
  margin: 24px 0;
}

.swagger-ui .servers label {
  color: var(--color-text-base);
  font-weight: 500;
}

.swagger-ui .servers select {
  background-color: var(--color-surface-2);
  color: var(--color-text-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}


/* ==========================================================================
   3. TAMPILAN ENDPOINT (MOBILE & DESKTOP)
   ========================================================================== */

/* [DIUBAH] Judul grup endpoint (e.g., "Downloader Endpoints") */
/* GAYA INI BERLAKU UNTUK MOBILE & DESKTOP AGAR KONSISTEN & STABIL */
.swagger-ui .opblock-tag {
  background: none;
  border: none;
  border-bottom: 2px solid var(--color-border);
  border-radius: 0;
  padding: 12px 0;
  margin: 40px 0 16px 0; /* Memberi jarak atas dari grup sebelumnya */
  display: flex;
  align-items: center;
  color: var(--color-text-heading);
  font-size: 1.5rem; /* Sedikit diperbesar */
  font-weight: 700;
}
/* Menampilkan nama tag dari linknya secara langsung */
.swagger-ui .opblock-tag a,
.swagger-ui .opblock-tag a:hover {
    color: var(--color-text-heading);
    text-decoration: none;
}


/* [BARU] Kartu untuk setiap endpoint individual, sekarang diberi background */
.swagger-ui .opblock {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  margin: 16px 0;
}

.swagger-ui .opblock .opblock-summary-method {
  background: var(--color-accent-primary); /* Warna ungu biar serasi */
  color: var(--color-text-heading);
  margin: 0;
}

.swagger-ui .opblock .opblock-summary-path {
  color: var(--color-text-base);
  font-family: var(--font-mono);
}

.swagger-ui .opblock .opblock-summary-description {
  color: var(--color-text-muted);
}


/* ==========================================================================
   4. GAYA DI DALAM ENDPOINT (Tombol, Tabel, dll)
   ========================================================================== */
.swagger-ui .opblock-section-header {
  background: rgba(10, 4, 28, 0.5); /* Dibuat sedikit transparan */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 20px;
}

.swagger-ui .opblock-section-header h4 {
  color: var(--color-text-heading);
  font-weight: 700;
  font-size: 1rem;
}

.swagger-ui table.parameters td,
.swagger-ui .responses-table td {
  border-color: var(--color-border);
  padding: 12px 20px;
}

.swagger-ui .btn.execute {
  background-color: var(--color-accent-success); /* Hijau agar kontras */
  border-color: var(--color-accent-success);
  color: var(--color-text-heading);
}

.swagger-ui .btn.try-out {
  border-color: var(--color-accent-secondary);
  color: var(--color-accent-secondary);
}

.swagger-ui input[type="text"],
.swagger-ui textarea,
.swagger-ui select {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-base);
}

/* ==========================================================================
   5. PENYESUAIAN UNTUK DESKTOP (Layar > 768px)
   ========================================================================== */

/* [DISEDERHANAKAN] Karena gaya mobile sudah mirip desktop, hanya perlu sedikit penyesuaian */
@media (min-width: 769px) {
  .swagger-ui .wrapper {
    padding: 0 24px;
  }

  .swagger-ui .info {
    margin-top: 40px;
    padding: 30px;
  }

  .swagger-ui .info .title {
    font-size: 2.75rem;
  }
  
  .swagger-ui .opblock-tag {
      font-size: 1.75rem; /* Judul grup sedikit lebih besar di desktop */
  }
}

/* BAGIAN KUSTOMISASI IKON & JUDUL DIHAPUS TOTAL KARENA MENYEBABKAN MASALAH */