/* ---------- Color Picker Modular (kcp) ---------- */
.kcp-color-area {
  position: relative;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid var(--k-border);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.06);
  touch-action: none;
}
.kcp-hue-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 9999px;
  background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  outline: none;
  cursor: pointer;
  border: 1px solid var(--k-border);
}
.kcp-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--k-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: grab;
  -webkit-transition: transform 0.15s ease;
  transition: transform 0.15s ease;
}
.kcp-hue-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.kcp-hue-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--k-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: grab;
}
.kcp-swatch {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  background-clip: padding-box;
}
.kcp-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-color: rgba(5, 150, 105, 0.55);
}
.kcp-swatch-selected {
  border-color: var(--k-primary);
  box-shadow: 0 0 0 2px var(--k-primary-bg), 0 4px 12px rgba(0,0,0,0.12);
  transform: scale(1.05);
}
.kcp-hex-input {
  flex: 1;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: var(--k-font-sm);
  font-weight: 600;
  color: var(--k-text);
  background: white;
  border: 1px solid var(--k-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kcp-hex-input:focus {
  border-color: var(--k-primary);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.08);
  outline: none;
}
.kcp-eyedropper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--k-border);
  background: var(--k-bg);
  color: var(--k-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.kcp-eyedropper-btn:hover {
  color: var(--k-primary);
  border-color: var(--k-primary);
  background: var(--k-primary-bg);
}
/* ---------- Form Input ---------- */
.kedai-input, input.kedai-input, input[type].kedai-input {
  width: 100%; background: var(--k-surface); border: 1px solid var(--k-border);
  border-radius: var(--k-radius); padding: 0.75rem 1rem; font-size: var(--k-font-sm);
  color: #1e293b; transition: all var(--k-transition); outline: none;
  font-family: inherit;
}
.kedai-input:focus { border-color: var(--k-primary); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.08); }
.kedai-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset !important; -webkit-text-fill-color: #475569 !important; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; }
.kedai-input::-moz-placeholder { color: #64748b; opacity: 1; }
.kedai-input::placeholder { color: #64748b; opacity: 1; }

/* ---------- Form Validation States ---------- */
.kedai-input.input-error {
  border-color: var(--k-danger);
  background: #fef2f2;
}

/* ---------- Readonly Input ---------- */
.kedai-input[readonly] {
  background-color: #f1f5f9 !important;
  color: #94a3b8;
  cursor: not-allowed;
}

/* ---------- Password Toggle Button ---------- */
.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--k-transition-fast);
}
.password-toggle:hover {
  color: var(--k-primary);
}
.password-toggle:focus-visible {
  outline: 2px solid var(--k-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.kedai-input.input-error:focus {
  border-color: var(--k-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.kedai-error-text {
  display: block;
  color: var(--k-danger);
  font-size: var(--k-font-xs);
  margin-top: 0.4rem;
  font-weight: 500;
}
.kedai-error-text.hidden {
  display: none;
}
.kedai-textarea {
  width: 100%; background: var(--k-surface); border: 1px solid var(--k-border);
  border-radius: var(--k-radius); padding: 0.75rem 1rem; font-size: var(--k-font-sm);
  transition: all var(--k-transition); outline: none; resize: vertical; font-family: inherit;
}
.kedai-textarea:focus { border-color: var(--k-primary); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.08); }

/* ---------- Tombol ---------- */
.kedai-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; border-radius: var(--k-radius); box-shadow: 0 2px 8px rgba(5,150,105,0.12);
  transition: all var(--k-transition); border: none; padding: 0.625rem 1.5rem;
  font-size: var(--k-font-sm); background: linear-gradient(135deg, var(--k-primary), var(--k-primary-dark)); color: white; cursor: pointer;
  font-family: inherit; letter-spacing: 0.01em;
}
.kedai-btn-primary:hover { box-shadow: 0 8px 20px rgba(5,150,105,0.25); transform: translateY(-2px); filter: brightness(1.05); }
.kedai-btn-primary:active { transform: translateY(0); }
.kedai-btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500;
  border-radius: var(--k-radius); border: 1px solid var(--k-border); color: #475569;
  background: var(--k-surface); transition: all var(--k-transition); padding: 0.625rem 1.5rem;
  font-size: var(--k-font-sm); cursor: pointer; font-family: inherit;
}
.kedai-btn-outline:hover { border-color: var(--k-primary); color: var(--k-primary); background: #f0fdf6; transform: translateY(-1px); }

/* ---------- Icon Picker ---------- */
.icon-option-admin {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.1rem; border-radius: 8px; border: 2px solid transparent;
  transition: all 0.15s ease; color: #94a3b8; margin: 2px;
}
.icon-option-admin:hover { border-color: var(--k-primary); background: #f0fdf6; color: var(--k-primary); }
.icon-option-admin.selected { background: var(--k-primary); color: white; border-color: var(--k-primary); }
.icon-picker-admin {
  display: flex; flex-wrap: wrap; gap: 2px; max-height: 200px; overflow-y: auto;
  padding: 8px; background: var(--k-bg); border-radius: 12px; border: 1px solid var(--k-border);
}

/* ---------- Badge Status ---------- */
.badge-status {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  border-radius: var(--k-radius-full); font-size: var(--k-font-xs); font-weight: 600; cursor: pointer;
  transition: all var(--k-transition);
}
.badge-status.aktif { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.badge-status.nonaktif { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.badge-status:hover { transform: scale(1.04); }

/* ---------- Custom Radio Button ---------- */
.kedai-radio {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--k-border);
  border-radius: 50%;
  background: var(--k-surface);
  cursor: pointer;
  position: relative;
  transition: all var(--k-transition-fast);
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  flex-shrink: 0;
}

.kedai-radio:hover {
  border-color: var(--k-primary);
}

.kedai-radio:checked {
  border-color: var(--k-primary);
  background: var(--k-surface);
}

.kedai-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--k-primary);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: all var(--k-transition-fast);
}

.kedai-radio:checked::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.kedai-radio:focus-visible {
  outline: 2px solid var(--k-primary);
  outline-offset: 2px;
}


/* ---------- Tombol Aksi Tabel ---------- */
.btn-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; padding: 0; border-radius: 8px;
  transition: all 0.15s ease; cursor: pointer; background: transparent; border: none; font-size: 0.875rem;
}
.btn-action.edit { color: #f59e0b; } .btn-action.edit:hover { color: #d97706; background: #fffbeb; }
.btn-action.delete { color: #f87171; } .btn-action.delete:hover { color: #dc2626; background: #fef2f2; }

/* ---------- Tabel ---------- */
.kedai-table {
  width: 100%; font-size: var(--k-font-sm); background: var(--k-surface);
  border: 1px solid var(--k-border); border-radius: var(--k-radius-lg);
  overflow: hidden; border-collapse: separate; border-spacing: 0;
}
.kedai-table thead { }
.kedai-table thead th {
  padding: 0.875rem 1.25rem; text-align: left; font-size: var(--k-font-xs);
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 2px solid var(--k-border); white-space: nowrap;
}
.kedai-table tbody td { padding: 0.75rem 1.25rem; }
.kedai-table tbody tr { transition: background 0.15s ease; }
.kedai-table tbody tr:nth-child(even) { background: var(--k-bg); }
.kedai-table tbody tr:hover { background: #f0fdf6; }
.kedai-table .sortable-header { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.kedai-table .sortable-header:hover { color: var(--k-primary); }
.sort-indicator { font-size: 0.65rem; margin-left: 0.25rem; transition: opacity 0.15s; }
/* ---------- Form Card ---------- */
.form-card {
  background: var(--k-surface); border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow); border: 1px solid #f1f5f9;
  padding: 1.5rem; margin-bottom: 2rem; transition: all 0.3s ease;
}

/* ---------- Stat Card ---------- */
.stat-card {
  background: var(--k-surface); border-radius: var(--k-radius-lg);
  padding: 1.5rem; border: 1px solid var(--k-border);
  box-shadow: var(--k-shadow-xs); transition: all var(--k-transition);
}
.stat-card:hover { box-shadow: var(--k-shadow); transform: translateY(-2px); }
.stat-card .stat-value { font-size: var(--k-font-3xl); font-weight: 800; color: var(--k-primary); line-height: 1.1; }
.stat-card .stat-label { font-size: var(--k-font-xs); color: var(--k-text-muted); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- View Toggle ---------- */
.view-toggle-btn { transition: all var(--k-transition-fast); }
.view-toggle-btn.active { background: white; color: var(--k-primary); box-shadow: var(--k-shadow-sm); }

/* ---------- Filter Chips ---------- */
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.875rem; border-radius: var(--k-radius-full);
  font-size: var(--k-font-xs); font-weight: 500; cursor: pointer;
  background: var(--k-bg); color: var(--k-text); border: 1px solid var(--k-border);
  transition: all var(--k-transition-fast);
}
.filter-chip.active { background: var(--k-primary-bg); color: var(--k-primary); border-color: var(--k-primary); }
.filter-chip:hover { border-color: var(--k-primary); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: var(--k-font-sm); color: var(--k-text-muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--k-text-muted); text-decoration: none; transition: color 0.15s; }
.breadcrumb a:hover { color: var(--k-primary); }
.breadcrumb .separator { color: #cbd5e1; }

/* ---------- FAQ Accordion ---------- */
.faq-item { border-bottom: 1px solid var(--k-border); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 0; font-weight: 600; font-size: var(--k-font-base);
  color: var(--k-text); background: none; border: none; cursor: pointer;
  text-align: left; font-family: inherit; transition: color var(--k-transition-fast);
}
.faq-question:hover { color: var(--k-primary); }
.faq-question i { transition: transform var(--k-transition); font-size: 0.75rem; color: var(--k-text-muted); }
.faq-item.open .faq-question i { transform: rotate(180deg); color: var(--k-primary); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--k-transition-slow), padding var(--k-transition); }
.faq-item.open .faq-answer { max-height: 20rem; padding-bottom: 1.25rem; }
.faq-answer p { color: var(--k-text-muted); line-height: 1.7; font-size: var(--k-font-sm); }

/* ---------- Dropdown Kategori (legacy) ---------- */
#kategoriDropdown li a { padding: 0.625rem 1rem; border-radius: var(--k-radius-sm); transition: background 0.15s ease; font-size: var(--k-font-sm); }
#kategoriDropdown li a:hover { background: #f0fdf6 !important; color: var(--k-primary) !important; }

/* ---------- Virtual Scroll ---------- */
.kedai-vscroll { content-visibility: auto; contain-intrinsic-size: auto 380px; }
.kedai-skeleton-card { content-visibility: auto; contain-intrinsic-size: auto 380px; }

/* ---------- Styling Tab Aktif untuk Dashboard Admin (Desktop + Mobile) ---------- */
.tabs.tabs-bordered .tab-btn-admin {
  font-weight: 500;
  color: var(--k-text-muted);
  border-bottom: 2px solid transparent;
  transition: all var(--k-transition-fast);
  position: relative;
  padding-bottom: 0.5rem;
}