/* ApnaPaisa – small custom CSS on top of Tailwind (light theme only) */
html { scroll-behavior: smooth; }
::selection { background: var(--p-100); }
* { scrollbar-width: thin; scrollbar-color: #D0D5DD transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #D0D5DD; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .8; }
.badge-green { background: #E8F8F0; color: #067647; }
.badge-purple { background: #F1EEFE; color: #5925DC; }
.badge-red { background: #FDECEC; color: #B42318; }
.badge-grey { background: #F2F4F7; color: #344054; }
.badge-amber { background: #FEF4E4; color: #B54708; }
.badge-blue { background: #EFF5FF; color: #1A47AD; }

.skeleton { background: linear-gradient(90deg, #EEF1F6 25%, #F6F8FB 37%, #EEF1F6 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.code-block { background: #F8FAFC; border: 1px solid #E6E9F0; border-radius: 10px; padding: 14px 16px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.65; color: #0F1E3D; overflow-x: auto; white-space: pre; }

/* Sidebar */
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 8px; color: #344054; font-weight: 500; font-size: 14px; transition: background .15s; }
.nav-item i.nav-ic { width: 18px; text-align: center; color: #667085; font-size: 15px; }
.nav-item:hover { background: #F8FAFC; }
.nav-item.active { background: var(--p-50); color: var(--p-500); }
.nav-item.active i.nav-ic { color: var(--p-500); }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--p-500); }
.nav-sub .nav-item { height: 36px; padding-left: 42px; font-size: 13.5px; }
.nav-sub .nav-item.active::before { left: -12px; }
.nav-group > button .chev { transition: transform .2s; }
.nav-group.open > button .chev { transform: rotate(180deg); }
.nav-group:not(.open) > .nav-sub { display: none; }
.nav-section { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #98A2B3; font-weight: 600; padding: 16px 12px 6px; }

/* collapsed sidebar (desktop) */
@media (min-width: 1024px) {
  body.sb-collapsed #sidebar { width: 72px; }
  body.sb-collapsed #main-wrap { padding-left: 72px; }
  body.sb-collapsed #sidebar .sb-label, body.sb-collapsed #sidebar .nav-section, body.sb-collapsed #sidebar .chev, body.sb-collapsed #sidebar .sb-hide { display: none !important; }
  body.sb-collapsed #sidebar .nav-sub { display: none !important; }
  body.sb-collapsed #sidebar .nav-item { justify-content: center; padding: 0; }
  body.sb-collapsed #sidebar .collapse-ic { transform: rotate(180deg); }
}

/* Drawer & modal */
.drawer { transform: translateX(100%); transition: transform .25s ease; }
.drawer.open { transform: translateX(0); }
.modal-backdrop { background: rgba(15,30,61,0.45); }
[hidden] { display: none !important; }

/* Toasts */
.toast { animation: toast-in .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Mobile stacked tables */
@media (max-width: 767px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border: 1px solid #E6E9F0; border-radius: 12px; margin: 10px 12px; width: auto; padding: 6px 0; background: #fff; }
  table.stack td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 14px !important; white-space: normal !important; text-align: right; }
  table.stack td::before { content: attr(data-label); font-size: 12px; color: #667085; text-align: left; font-weight: 500; }
}

/* Panel protection (configurable) */
body[data-protect="1"] { -webkit-user-select: none; user-select: none; }
body[data-protect="1"] input, body[data-protect="1"] textarea, body[data-protect="1"] .code-block, body[data-protect="1"] .font-mono, body[data-protect="1"] [data-allow-copy] { -webkit-user-select: text; user-select: text; }

/* Rich text (CMS / docs) */
.prose-ap h1 { font-size: 28px; font-weight: 700; color: #0F1E3D; margin: 0 0 12px; }
.prose-ap h2 { font-size: 20px; font-weight: 600; color: #0F1E3D; margin: 28px 0 10px; scroll-margin-top: 90px; }
.prose-ap h3 { font-size: 16px; font-weight: 600; color: #0F1E3D; margin: 20px 0 8px; scroll-margin-top: 90px; }
.prose-ap p { margin: 0 0 12px; line-height: 1.7; }
.prose-ap ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; }
.prose-ap ol { list-style: decimal; padding-left: 22px; margin: 0 0 12px; }
.prose-ap li { margin: 4px 0; line-height: 1.6; }
.prose-ap a { color: var(--p-500); }
.prose-ap code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; background: #F2F4F7; padding: 1px 6px; border-radius: 5px; color: #0F1E3D; }
.prose-ap pre { background: #F8FAFC; border: 1px solid #E6E9F0; border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 0 0 14px; position: relative; }
.prose-ap pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.65; }
.prose-ap table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13.5px; }
.prose-ap th { text-align: left; background: #F8FAFC; font-weight: 600; color: #344054; }
.prose-ap th, .prose-ap td { border: 1px solid #E6E9F0; padding: 8px 10px; vertical-align: top; }
.prose-ap blockquote { border-left: 3px solid var(--p-300); padding: 4px 14px; color: #475467; background: #F8FAFC; border-radius: 0 8px 8px 0; margin: 0 0 12px; }
.code-tabs .tab-btn.active { color: var(--p-500); border-color: var(--p-500); }

/* Hero glow */
.hero-glow { background: radial-gradient(600px 300px at 70% 20%, rgba(47,107,240,.14), transparent 70%), linear-gradient(180deg, #EFF5FF 0%, #FFFFFF 100%); }
.cta-gradient { background: linear-gradient(135deg, var(--p-500) 0%, var(--p-700) 100%); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.floaty { animation: floaty 5s ease-in-out infinite; }

/* ---------- Docs portal ---------- */
.docs-body pre.doc-code { background: #0F1E3D; color: #E6ECF7; border-radius: 12px; padding: 16px 18px; margin: 14px 0; overflow-x: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.6; }
.docs-body pre.doc-code code { background: transparent; color: inherit; padding: 0; }
.docs-body pre.doc-code::before { content: attr(data-lang); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #8EA2C8; margin-bottom: 6px; }
.docs-body .doc-table { overflow-x: auto; margin: 14px 0; border: 1px solid #E4E7EC; border-radius: 12px; }
.docs-body .doc-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.docs-body .doc-table th { text-align: left; background: #F8FAFC; padding: 10px 14px; font-weight: 600; color: #0F1E3D; border-bottom: 1px solid #E4E7EC; }
.docs-body .doc-table td { padding: 10px 14px; border-bottom: 1px solid #F1F3F6; vertical-align: top; }
.docs-body .doc-note { border-radius: 12px; padding: 12px 16px; margin: 16px 0; font-size: 14px; border: 1px solid; }
.docs-body .doc-note-info { background: #EEF4FF; border-color: #C7D7FE; color: #1E3A8A; }
.docs-body .doc-note-warn { background: #FEF4E4; border-color: #FCD9A1; color: #7A4A06; }