/* ============================================
   TAPIS – Custom CSS
   BPS Provinsi Lampung
   ============================================ */

/* ============================================
   TAPIS Color Theme Variables
   Supported themes: orange (default), blue, emerald, purple, rose, teal
   ============================================ */
:root, [data-theme="orange"] {
  --color-secondary: #904d00;
  --color-secondary-container: #fe932c;
  --color-secondary-hover: #ea580c;
  --color-theme-light: rgba(254, 147, 44, 0.12);
  --color-theme-text: #904d00;
  --color-theme-badge-bg: #fff7ed;
  --color-theme-badge-border: #fed7aa;
}

[data-theme="blue"] {
  --color-secondary: #1e40af;
  --color-secondary-container: #2563eb;
  --color-secondary-hover: #1d4ed8;
  --color-theme-light: rgba(37, 99, 235, 0.12);
  --color-theme-text: #1e40af;
  --color-theme-badge-bg: #eff6ff;
  --color-theme-badge-border: #bfdbfe;
}

[data-theme="emerald"] {
  --color-secondary: #065f46;
  --color-secondary-container: #059669;
  --color-secondary-hover: #047857;
  --color-theme-light: rgba(5, 150, 105, 0.12);
  --color-theme-text: #065f46;
  --color-theme-badge-bg: #ecfdf5;
  --color-theme-badge-border: #a7f3d0;
}

[data-theme="purple"] {
  --color-secondary: #5b21b6;
  --color-secondary-container: #7c3aed;
  --color-secondary-hover: #6d28d9;
  --color-theme-light: rgba(124, 58, 237, 0.12);
  --color-theme-text: #5b21b6;
  --color-theme-badge-bg: #f5f3ff;
  --color-theme-badge-border: #ddd6fe;
}

[data-theme="rose"] {
  --color-secondary: #9f1239;
  --color-secondary-container: #e11d48;
  --color-secondary-hover: #be123c;
  --color-theme-light: rgba(225, 29, 72, 0.12);
  --color-theme-text: #9f1239;
  --color-theme-badge-bg: #fff1f2;
  --color-theme-badge-border: #fecdd3;
}

[data-theme="teal"] {
  --color-secondary: #115e59;
  --color-secondary-container: #0d9488;
  --color-secondary-hover: #0f766e;
  --color-theme-light: rgba(13, 148, 136, 0.12);
  --color-theme-text: #115e59;
  --color-theme-badge-bg: #f0fdfa;
  --color-theme-badge-border: #99f6e4;
}

/* Dynamic theme element overrides */
.bg-secondary-container {
  background-color: var(--color-secondary-container) !important;
}
.bg-secondary-container:hover,
[data-theme] .hover\:bg-orange-400:hover,
[data-theme] .hover\:bg-orange-500:hover {
  background-color: var(--color-secondary-hover) !important;
}
.text-secondary-container {
  color: var(--color-secondary-container) !important;
}
.text-secondary {
  color: var(--color-secondary) !important;
}
.border-secondary {
  border-color: var(--color-secondary) !important;
}
.border-secondary-container {
  border-color: var(--color-secondary-container) !important;
}
.ring-secondary-container {
  --tw-ring-color: var(--color-secondary-container) !important;
}
.focus\:ring-secondary-container:focus {
  --tw-ring-color: var(--color-secondary-container) !important;
  border-color: var(--color-secondary-container) !important;
}
.theme-badge {
  background-color: var(--color-theme-badge-bg) !important;
  color: var(--color-theme-text) !important;
  border-color: var(--color-theme-badge-border) !important;
}
.theme-text {
  color: var(--color-secondary-container) !important;
}

/* ---------- Tab switching ---------- */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* ---------- Sidebar scrollbar ---------- */
.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ---------- Notification badge pulse ---------- */
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.badge-pulse {
  animation: badge-pulse 2s ease-in-out infinite;
}

/* ---------- FAQ collapsible ---------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer.open {
  max-height: 600px;
}

/* ---------- Print styles ---------- */
@media print {
  nav, .sidebar, .top-header-bar, footer, button, .no-print {
    display: none !important;
  }
  main {
    margin: 0 !important;
    padding: 0 !important;
  }
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
}

/* ---------- Rich Text Content Styling ---------- */
.rich-content ul {
  list-style-type: disc;
  margin-left: 1.25rem;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}
.rich-content ol {
  list-style-type: decimal;
  margin-left: 1.25rem;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}
.rich-content p {
  margin-bottom: 0.4rem;
}
.rich-content p:last-child {
  margin-bottom: 0;
}
.rich-content strong {
  font-weight: 600;
  color: #111827;
}
.rich-content a {
  color: var(--color-secondary-container, #fe932c);
  text-decoration: none !important;
  font-weight: 600;
}
.rich-content a:hover {
  text-decoration: none !important;
  opacity: 0.85;
}
.rich-content blockquote {
  border-left: 3px solid #cbd5e1;
  padding-left: 0.75rem;
  color: #64748b;
  font-style: italic;
  margin: 0.5rem 0;
}