/* =================================================================
   GLOBAL CARD RADIUS — unified rounded-xl across the entire app
   (user pages + admin panel). Loaded after main stylesheets so it
   wins specificity for safe overrides. Keep small badges/pills
   distinctive; only true "card-like" containers get the 12px radius.
   ================================================================= */
:root {
    --app-card-radius: 12px;
    --app-input-radius: 10px;
    --app-pill-radius: 9999px;
}

/* ---------- Generic card classes (Bootstrap, Kaiadmin, Bicrypto) ---------- */
.card,
.card-header,
.card-body,
.card-footer,
.card-deck > .card,
.card-group > .card,
.kt-portlet,
.kt-portlet__head,
.kt-portlet__body,
.kt-card,
.kt-widget,
.kt-stats,
.dashboard-card,
.stat-card,
.stats-card,
.summary-card,
.balance-card,
.wallet-card,
.invest-card,
.plan-card,
.product-card,
.profile-card,
.notification-card,
.kyc-card,
.feature-card,
.pricing-card,
.review-card,
.faq-card,
.service-card,
.about-card,
.contact-card,
.team-card,
.testimonial-card,
.glass-card,
.surface-card,
.panel,
.panel-card,
.panel-default,
.panel-primary,
.well,
.alert,
.modal-content,
.toast,
.popover,
.tooltip-inner { border-radius: var(--app-card-radius) !important; }

/* Card-header to card-body should not double-round when stacked */
.card > .card-header:first-child { border-top-left-radius: var(--app-card-radius) !important; border-top-right-radius: var(--app-card-radius) !important; }
.card > .card-footer:last-child  { border-bottom-left-radius: var(--app-card-radius) !important; border-bottom-right-radius: var(--app-card-radius) !important; }

/* ---------- Form inputs / selects (slightly tighter for hierarchy) ---------- */
.form-control,
.form-select,
select.form-control,
input.form-control,
textarea.form-control,
.input-group-text,
.input-group > .form-control,
.bootstrap-select > .btn,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { border-radius: var(--app-input-radius) !important; }

.input-group > .form-control:not(:last-child),
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child),
.input-group > .input-group-append > .input-group-text { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* ---------- Buttons (rounded-xl for primary actions, pill for tags) ---------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info { border-radius: var(--app-input-radius) !important; }

/* Round button group children consistently */
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.btn-group > .btn:not(:last-child)  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* ---------- Tables wrapped in cards ---------- */
.table-responsive,
.dataTables_wrapper,
.dt-container { border-radius: var(--app-card-radius); overflow: hidden; }
.table { border-radius: var(--app-card-radius); overflow: hidden; }

/* ---------- Modals / dialogs / dropdowns / sheets ---------- */
.modal-dialog .modal-content,
.modal-content,
.dropdown-menu,
.menu-card,
.sheet-card,
[role="dialog"] > .panel,
[role="dialog"] > .card { border-radius: var(--app-card-radius) !important; }

/* Bottom sheets keep top corners only */
.bottom-sheet,
.b-sheet,
.mob-sheet,
.binary-bottom-sheet { border-radius: var(--app-card-radius) var(--app-card-radius) 0 0 !important; }

/* ---------- Sidebar / navbar tweaks (avoid super-square corners) ---------- */
.nav-tabs .nav-link,
.nav-pills .nav-link { border-radius: var(--app-input-radius) !important; }

/* ---------- Images inside cards inherit the card radius edge ---------- */
.card > img:first-child,
.card-img-top,
.card-img { border-top-left-radius: var(--app-card-radius) !important; border-top-right-radius: var(--app-card-radius) !important; }
.card-img-bottom { border-bottom-left-radius: var(--app-card-radius) !important; border-bottom-right-radius: var(--app-card-radius) !important; }

/* ---------- Badges, chips, dots — keep PILL shape ---------- */
.badge,
.badge-pill,
.tag,
.chip,
.pill,
.label,
.status-pill,
.dot { border-radius: var(--app-pill-radius) !important; }

/* Round indicator dots at ~50% so they remain circular regardless of size */
.dot,
.indicator-dot,
.notif-dot { border-radius: 50% !important; }

/* ---------- Avatars / profile images stay circular ---------- */
.avatar,
.user-avatar,
.profile-img-circle,
.rounded-circle,
.avatar-circle { border-radius: 50% !important; }

/* ---------- Avoid breaking elements that explicitly need square corners ---------- */
hr,
.no-radius,
.flat,
.square { border-radius: 0 !important; }
