/**
 * ==============================================================================
 * Kuesio Modular Theme Stylesheet: Creator Studio (creator-studio.css)
 * Mengatur khusus variabel Warna, Ukuran, dan Posisi/Tata Letak untuk tema Creator Studio:
 * - Floating Island Navbar (56px, melayang terpusat di grid 1240px)
 * - Single Studio Bar 54px & Kanvas Builder luas (calc(100vh - 74px))
 * - Tombol Aksi Utama Gradien (Biru -> Ungu Aksen) & Kartu Taktil
 * Di-load secara terpisah setelah kuesio-ui.css.
 * ==============================================================================
 */
:root {
  /* 1. WARNA TEMA (Color Tokens) */
  --primary: #2D6BED;
  --primary-dark: #1A52CB;
  --primary-tint: #EBF2FE;
  --primary-light: #F2F7FE;
  --primary-subtle: #F8FAFE;
  --accent: #8B5CF6;
  --accent-dark: #7C3AED;
  --accent-tint: #F5F3FF;
  --success: #4BC680;
  --success-dark: #379159;
  --success-deep: #257A44;
  --success-text: #166534;
  --success-tint: #ECFDF5;
  --danger: #EF4444;
  --danger-dark: #DC2626;
  --danger-text: #991B1B;
  --danger-tint: #FEF2F2;
  --warning: #F59E0B;
  --warning-dark: #D97706;
  --warning-text: #92400E;
  --warning-tint: #FEF3C7;
  --bg: #F8FAFC;
  --background: #F8FAFC;
  --surface: #FFFFFF;
  --surface-alt: #F1F5F9;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-light: #F8FAFC;
  --text: #0F172A;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-navy: #0F172A;
  --muted: #64748B;
  --badge-primary-text: #2D6BED;
  --badge-primary-border: rgba(45, 107, 237, 0.25);
  --color-scheme: light;
  --widget-invert: 0;
  color-scheme: light;

  /* 2. TIPOGRAFI & UKURAN (Typography & Sizing Tokens) */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --header-h: 56px;
  --studio-bar-h: 54px;
  --sidebar-w: 260px;
  --container-max-w: 1240px;

  /* 3. POSISI & ELEVASI (Position & Elevation Tokens) */
  --header-top-offset: 16px;
  --header-width: calc(100% - 48px);
  --header-radius: 16px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.08);
}

/* 4. OVERRIDE POSISI & UKURAN TATA LETAK KHUSUS CREATOR STUDIO */
.builder-layout {
  height: calc(100vh - 74px) !important;
}
@media (max-width: 860px) {
  .builder-layout {
    height: auto !important;
  }
}

/* Floating Island Navbar (56px) — Melayang Terpusat di Grid 1240px */
.kuesio-main-header {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  max-width: var(--container-max-w, 1240px) !important;
  width: var(--header-width, calc(100% - 48px)) !important;
  margin: var(--header-top-offset, 16px) auto 0 !important;
  border-radius: var(--header-radius, 16px) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  position: sticky !important;
  top: var(--header-top-offset, 16px) !important;
  z-index: 100 !important;
}
.kuesio-header-inner {
  height: var(--header-h, 56px) !important;
  padding: 0 20px !important;
}
@media (max-width: 768px) {
  .kuesio-main-header {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
  }
}

/* Tombol Aksi Utama Gradien Creator Studio */
:is(.btn-primary, .k-btn-primary, .btn-cta):not(:is(.btn-outline, .k-btn-outline, :disabled)) {
  background: linear-gradient(135deg, var(--primary, #2D6BED) 0%, var(--accent, #8B5CF6) 100%) !important;
  border: 0 !important;
  box-shadow: 0 3px 12px rgba(139, 92, 246, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
:is(.btn-primary, .k-btn-primary, .btn-cta):not(:is(.btn-outline, .k-btn-outline, :disabled)):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 18px rgba(139, 92, 246, 0.40) !important;
  color: #FFFFFF !important;
}

/* Cockpit Header & Badges Creator Studio */
.cockpit-header-left h1 {
  font-family: var(--font-heading, 'Outfit'), sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.total-badge {
  background: var(--accent-tint, #F5F3FF) !important;
  color: var(--accent-dark, #7C3AED) !important;
  border-color: rgba(139, 92, 246, 0.25) !important;
  font-weight: 700 !important;
}

/* Filter Toolbar & Tab Aktif */
.filter-toolbar {
  border-radius: var(--radius-lg, 18px) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}
.tab-link.active {
  background: linear-gradient(135deg, #EBF2FE 0%, #F5F3FF 100%) !important;
  color: #1A52CB !important;
  border-color: rgba(45, 107, 237, 0.25) !important;
  font-weight: 700 !important;
}

/* Survey Cards Tactile Micro-Interactions */
.survey-card {
  border-radius: var(--radius-lg, 18px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.survey-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}