/* ==========================================================================
   Panelim theme on top of Bootstrap 5.3 (shared by the site and the admin panel)
   1) brand colors and font   2) small components Bootstrap does not have
   ========================================================================== */
:root, [data-bs-theme="light"] {
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-text-emphasis: #2f2a89;
    --bs-primary-bg-subtle: #edecfc;
    --bs-primary-border-subtle: #b9b5f5;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #3f38b7;
    --bs-link-hover-color-rgb: 63, 56, 183;
    --pn-page-bg: #f4f6fa;
    --pn-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
[data-bs-theme="dark"] {
    --bs-primary: #7c74ff;
    --bs-primary-rgb: 124, 116, 255;
    --bs-primary-text-emphasis: #b0abff;
    --bs-primary-bg-subtle: #1d1b45;
    --bs-primary-border-subtle: #3e3a8a;
    --bs-link-color: #9d97ff;
    --bs-link-color-rgb: 157, 151, 255;
    --bs-link-hover-color: #b9b5ff;
    --bs-link-hover-color-rgb: 185, 181, 255;
    --pn-page-bg: #16181c;
    --pn-shadow: none;
}
:root {
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-font-monospace: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --pn-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    /* Extra palette (badges, avatars, stat icons): bg-<name>-lt, bg-<name>, text-<name> */
    --pn-blue-rgb: 6, 111, 209;   --pn-azure-rgb: 66, 153, 225;  --pn-indigo-rgb: 66, 99, 235;
    --pn-purple-rgb: 174, 62, 201; --pn-pink-rgb: 214, 51, 108;   --pn-red-rgb: 214, 57, 57;
    --pn-orange-rgb: 247, 103, 7;  --pn-yellow-rgb: 245, 159, 0;  --pn-lime-rgb: 116, 184, 22;
    --pn-green-rgb: 47, 179, 68;   --pn-teal-rgb: 12, 166, 120;   --pn-cyan-rgb: 23, 162, 184;
}
body { background-color: var(--pn-page-bg); }

/* Bootstrap compiles the primary color into these components, so repaint them with the brand color */
.btn-primary {
    --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .88); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .8); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), .55); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }

/* Plain .btn (no color variant) is a white bordered button, like the old theme */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; font-weight: 500; }
.btn:not([class*="btn-primary"], [class*="btn-secondary"], [class*="btn-success"], [class*="btn-danger"], [class*="btn-warning"],
         [class*="btn-info"], [class*="btn-light"], [class*="btn-dark"], [class*="btn-link"], [class*="btn-outline"], [class*="btn-ghost"], .btn-close) {
    --bs-btn-bg: var(--bs-body-bg); --bs-btn-border-color: var(--bs-border-color); --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color); --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-disabled-bg: var(--bs-body-bg); --bs-btn-disabled-border-color: var(--bs-border-color); --bs-btn-disabled-color: var(--bs-secondary-color);
    box-shadow: var(--pn-shadow);
}
.btn-icon { padding-left: 0; padding-right: 0; aspect-ratio: 1; }
.btn-list { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Soft (-lt) and ghost buttons */
.btn-primary-lt { --c: var(--bs-primary-rgb); }
.btn-success-lt { --c: var(--bs-success-rgb); }
.btn-danger-lt { --c: var(--bs-danger-rgb); }
.btn-warning-lt { --c: var(--bs-warning-rgb); }
.btn-secondary-lt { --c: var(--bs-secondary-rgb); }
[class*="-lt"].btn {
    --bs-btn-bg: rgba(var(--c), .1); --bs-btn-color: rgb(var(--c)); --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: rgb(var(--c)); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: rgb(var(--c)); --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent;
}
.btn-ghost-primary { --c: var(--bs-primary-rgb); }
.btn-ghost-secondary { --c: var(--bs-secondary-rgb); }
.btn-ghost-danger { --c: var(--bs-danger-rgb); }
[class*="btn-ghost-"] {
    --bs-btn-bg: transparent; --bs-btn-color: rgb(var(--c)); --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: rgba(var(--c), .1); --bs-btn-hover-color: rgb(var(--c)); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: rgba(var(--c), .16); --bs-btn-active-color: rgb(var(--c)); --bs-btn-active-border-color: transparent;
}
.btn-ghost-secondary { --bs-btn-color: var(--bs-secondary-color); }

/* Icons (Tabler Icons webfont) */
.icon { font-size: 1.25rem; line-height: 1; vertical-align: -.2em; }
.btn .icon { font-size: 1.2em; vertical-align: 0; }
.alert-icon { font-size: 1.25rem; line-height: 1.25; flex-shrink: 0; }
.dropdown-item { display: flex; align-items: center; }
.dropdown-item-icon { width: 1.25rem; margin-right: .5rem; text-align: center; color: var(--bs-secondary-color); font-size: 1.1rem; }
.dropdown-item.text-danger .dropdown-item-icon { color: inherit; }

/* Soft color backgrounds: bg-<color>-lt (badges, avatars, icons) and a few extra solid colors */
.bg-primary-lt { --c: var(--bs-primary-rgb); }   .bg-secondary-lt { --c: var(--bs-secondary-rgb); }
.bg-success-lt { --c: var(--bs-success-rgb); }   .bg-danger-lt { --c: var(--bs-danger-rgb); }
.bg-warning-lt { --c: var(--bs-warning-rgb); }   .bg-info-lt { --c: var(--bs-info-rgb); }
.bg-blue-lt, .bg-blue, .text-blue { --c: var(--pn-blue-rgb); }       .bg-azure-lt, .bg-azure, .text-azure { --c: var(--pn-azure-rgb); }
.bg-indigo-lt, .bg-indigo, .text-indigo { --c: var(--pn-indigo-rgb); } .bg-purple-lt, .bg-purple, .text-purple { --c: var(--pn-purple-rgb); }
.bg-pink-lt, .bg-pink, .text-pink { --c: var(--pn-pink-rgb); }       .bg-red-lt, .bg-red, .text-red { --c: var(--pn-red-rgb); }
.bg-orange-lt, .bg-orange, .text-orange { --c: var(--pn-orange-rgb); } .bg-yellow-lt, .bg-yellow, .text-yellow { --c: var(--pn-yellow-rgb); }
.bg-lime-lt, .bg-lime, .text-lime { --c: var(--pn-lime-rgb); }       .bg-green-lt, .bg-green, .text-green { --c: var(--pn-green-rgb); }
.bg-teal-lt, .bg-teal, .text-teal { --c: var(--pn-teal-rgb); }       .bg-cyan-lt, .bg-cyan, .text-cyan { --c: var(--pn-cyan-rgb); }
[class*="-lt"]:not(.btn) { background-color: rgba(var(--c), .12) !important; color: rgb(var(--c)) !important; }
.bg-secondary-lt:not(.btn) { color: var(--bs-secondary-color) !important; }
.bg-blue, .bg-azure, .bg-indigo, .bg-purple, .bg-pink, .bg-red, .bg-orange, .bg-yellow, .bg-lime, .bg-green, .bg-teal, .bg-cyan { background-color: rgb(var(--c)) !important; color: #fff; }
.text-blue, .text-azure, .text-indigo, .text-purple, .text-pink, .text-red, .text-orange, .text-yellow, .text-lime, .text-green, .text-teal, .text-cyan { color: rgb(var(--c)) !important; }

/* Page skeleton (header, title, body) */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
.page-center { justify-content: center; }
.container-tight { max-width: 30rem; margin-left: auto; margin-right: auto; }
.page-header { display: flex; flex-direction: column; justify-content: center; min-height: 2.25rem; }
.page-wrapper > .page-header { margin: 1.25rem 0 1rem; }
.page-title { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.35; display: flex; align-items: center; gap: .5rem; }
.page-pretitle, .subheader, .datagrid-title {
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.6; color: var(--bs-secondary-color);
}
.page-body { padding: 1.25rem 0; }
.page-header + .page-body { padding-top: 0; }

/* Cards */
.card { box-shadow: var(--pn-shadow); }
.card-header { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; background: transparent; }
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.card-header .card-title { margin: 0; display: flex; align-items: center; }
.card-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.card-sm > .card-body { padding: 1rem; }
@media (min-width: 768px) { .card-md > .card-body { padding: 2rem; } }
.card-table { margin-bottom: 0; }
.card-table > :not(caption) > * > :first-child { padding-left: 1rem; }
.card-table > :not(caption) > * > :last-child { padding-right: 1rem; }
.card > .table-responsive > .table, .card > .table { margin-bottom: 0; }
.card-table thead th { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); white-space: nowrap; }
.table-vcenter > :not(caption) > * > * { vertical-align: middle; }
.row-cards { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; min-width: 0; }
.row-deck > [class*="col"] { display: flex; align-items: stretch; }
.row-deck > [class*="col"] > .card { flex: 1 1 auto; }

/* Avatar */
.avatar {
    --size: 2.5rem; width: var(--size); height: var(--size); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-weight: 600; font-size: calc(var(--size) / 2.6);
    line-height: 1; vertical-align: bottom; user-select: none;
}
.avatar .icon { font-size: calc(var(--size) / 2); vertical-align: 0; }
.avatar-sm { --size: 2rem; }
.avatar-lg { --size: 3rem; }
.avatar-xl { --size: 5rem; }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; text-align: center; }
.empty-icon { margin-bottom: .75rem; color: var(--bs-secondary-color); line-height: 1; }
.empty-icon .icon { font-size: 2.75rem; }
.empty-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 .25rem; }
.empty-subtitle { margin: 0; }
.empty-action { margin-top: 1.25rem; }

/* Key / value grid (details pages) */
.datagrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.datagrid-title { margin-bottom: .2rem; }

/* Search box with a leading icon */
.input-icon { position: relative; }
.input-icon-addon { position: absolute; top: 0; bottom: 0; left: 0; z-index: 5; width: 2.5rem; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); pointer-events: none; }
.input-icon-addon ~ .form-control { padding-left: 2.5rem; }

/* Box radio group (deposit currency) */
.form-selectgroup { display: flex; flex-wrap: wrap; gap: .5rem; }
.form-selectgroup-item { position: relative; display: block; cursor: pointer; margin: 0; }
.form-selectgroup-input { position: absolute; opacity: 0; pointer-events: none; }
.form-selectgroup-label { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); transition: border-color .15s, box-shadow .15s; }
.form-selectgroup-input:checked + .form-selectgroup-label { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); background: rgba(var(--bs-primary-rgb), .04); }
.form-selectgroup-input:focus-visible + .form-selectgroup-label { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* Forms */
.form-label { font-weight: 500; }
.form-label.required::after { content: "*"; margin-left: .2rem; color: var(--bs-danger); }
.form-hint { display: block; font-size: .85em; color: var(--bs-secondary-color); }
.form-footer { margin-top: 1.5rem; }

/* Status dot (wallets on the dashboard) */
.status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; position: relative; }
.status-green { color: rgb(var(--pn-green-rgb)); }
.status-yellow { color: rgb(var(--pn-yellow-rgb)); }
.status-secondary { color: var(--bs-secondary-color); }
.status-dot-animated::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pn-pulse 1.4s ease-out infinite; }
@keyframes pn-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }

/* Small helpers */
.progress-sm { height: .25rem; }
.min-w-0 { min-width: 0 !important; }
.w-1 { width: 1% !important; }
.mt-n1 { margin-top: -.25rem !important; }
.list-group-flush > .list-group-item { background: transparent; }

.brand-logo { width: 32px; height: 32px; border-radius: 9px; }
.mono { font-family: var(--bs-font-monospace); word-break: break-all; }
.text-gradient { background: var(--pn-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-brand { background: var(--pn-gradient) !important; color: #fff; }
/* Bootstrap's .d-* utilities use !important; make sure the hidden attribute still wins. */
img[hidden], div[hidden], p[hidden] { display: none !important; }

/* Tom Select (searchable selects) with Bootstrap colors, light and dark */
.ts-dropdown { background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); z-index: 1050; }
.ts-dropdown .option { padding: .55rem .75rem; }
.ts-dropdown .active { background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-body-color); }
.ts-dropdown .no-results { padding: .55rem .75rem; color: var(--bs-secondary-color); }
.ts-wrapper.multi .ts-control > .item { background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); border: 0; border-radius: 999px; padding: 2px 4px 2px 10px; }
.ts-wrapper.multi .ts-control > .item .remove { border-left: 0; color: inherit; }
.ts-wrapper .ts-control { background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }

/* Links without underline (underline on hover only), like the old theme */
a { text-decoration: none; }
a:not(.btn, .nav-link, .dropdown-item, .list-group-item, .page-link, .navbar-brand, .tabbar a, .app-back, .invite-hero-sub):hover { text-decoration: underline; }

/* Tabs: inactive tabs in the text color (Bootstrap paints them in the link color) */
.nav-tabs .nav-link:not(.active), .nav-pills .nav-link:not(.active) { color: var(--bs-secondary-color); }
.nav-tabs .nav-link:not(.active):hover { color: var(--bs-body-color); }
.btn-icon.btn-sm { min-width: calc(1.5em + .5rem + 2px); }
.btn-icon:not(.btn-sm) { min-width: calc(1.5em + .75rem + 2px); }

/* Lighter, smaller type: 14px base, bold = 600 (heavier fonts look bold at Bootstrap's 16px / 700) */
:root { --bs-body-font-size: .875rem; --bs-body-font-weight: 400; }
b, strong, .fw-bold { font-weight: 600 !important; }
.fw-bolder { font-weight: 600 !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; }
.h1, h1 { font-size: 1.6rem; } .h2, h2 { font-size: 1.35rem; } .h3, h3 { font-size: 1.15rem; } .h4, h4 { font-size: 1rem; } .h5, h5, .h6, h6 { font-size: .9rem; }
.page-title { font-size: 1.2rem; font-weight: 600; }
.btn { --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500; }
.btn-sm { --bs-btn-font-size: .8rem; }
.btn-lg { --bs-btn-font-size: 1rem; }
.form-control, .form-select, .input-group-text { font-size: .875rem; }
.form-label { font-weight: 500; font-size: .85rem; }
.badge { font-weight: 600; }
.card-title { font-size: .95rem; }
.navbar-brand { font-weight: 600 !important; font-size: 1rem; }
.dropdown-menu { --bs-dropdown-font-size: .875rem; }
.list-group-item, .table { font-size: .875rem; }
.alert { font-size: .875rem; }
.bg-warning-lt:not(.btn) { background-color: rgba(245, 159, 0, .15) !important; color: #b06f00 !important; }
[data-bs-theme="dark"] .bg-warning-lt:not(.btn) { color: #ffc14d !important; }