/**
 * shadcn/ui Style Overrides for Tabler
 * ---
 * Non-destructive overlay that gives Tabler a shadcn/ui look & feel.
 * Loaded AFTER tabler.css, global.css, and dark-mode-override.css.
 *
 * Covers: typography, border-radius, buttons, cards, inputs, badges,
 *         dropdowns, modals, tables, alerts, avatars, and more.
 *
 * Respects existing [data-bs-theme="dark"] system.
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES — shadcn design tokens mapped to Tabler vars
   ========================================================================== */

:root,
[data-bs-theme='light'] {
    /* Unified control height — compact */
    --control-h: 1.75rem; /* 28px — default */
    --control-h-sm: 1.5rem; /* 24px — small */
    --control-h-lg: 2rem; /* 32px — large */
    --control-h-xs: 1.25rem; /* 20px — extra small */

    /* shadcn radius system — tight/subtle */
    --radius: 0.3rem;
    --tblr-border-radius: 0.2rem;
    --tblr-border-radius-sm: 0.125rem;
    --tblr-border-radius-lg: 0.3rem;
    --tblr-border-radius-xl: 0.4rem;
    --tblr-border-radius-xxl: 0.5rem;
    --tblr-border-radius-2xl: 0.5rem;

    /* shadcn-like neutral palette (zinc scale) */
    --shadcn-background: #ffffff;
    --shadcn-foreground: #09090b;
    --shadcn-card: #ffffff;
    --shadcn-card-foreground: #09090b;
    --shadcn-popover: #ffffff;
    --shadcn-popover-foreground: #09090b;
    --shadcn-muted: #f4f4f5;
    --shadcn-muted-foreground: #71717a;
    --shadcn-accent: #f4f4f5;
    --shadcn-accent-foreground: #18181b;
    --shadcn-border: #e4e4e7;
    --shadcn-input: #e4e4e7;
    --shadcn-ring: #18181b;
    --shadcn-destructive: #ef4444;
    --shadcn-destructive-foreground: #fafafa;
    --shadcn-secondary: #f4f4f5;
    --shadcn-secondary-foreground: #18181b;

    /* Map some Tabler variables */
    --tblr-border-color: var(--shadcn-border);
    --tblr-muted: var(--shadcn-muted-foreground);
}

[data-bs-theme='dark'] {
    --shadcn-background: #09090b;
    --shadcn-foreground: #fafafa;
    --shadcn-card: #0a0a0a;
    --shadcn-card-foreground: #fafafa;
    --shadcn-popover: #09090b;
    --shadcn-popover-foreground: #fafafa;
    --shadcn-muted: #27272a;
    --shadcn-muted-foreground: #a1a1aa;
    --shadcn-accent: #27272a;
    --shadcn-accent-foreground: #fafafa;
    --shadcn-border: #3f3f46;
    --shadcn-input: #3f3f46;
    --shadcn-ring: #d4d4d8;
    --shadcn-destructive: #7f1d1d;
    --shadcn-destructive-foreground: #fafafa;
    --shadcn-secondary: #27272a;
    --shadcn-secondary-foreground: #fafafa;
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.011em;
    font-feature-settings: 'cv03', 'cv04', 'cv11';
    font-size: 0.75rem; /* 12px — ultra-compact SaaS baseline */
    font-weight: 400;
    line-height: 1.45;
}

h1,
.h1 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}
h2,
.h2 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}
h3,
.h3 {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
h4,
.h4 {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.015em;
}
h5,
.h5 {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}
h6,
.h6 {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0;
}

small,
.small,
.text-sm {
    font-size: 0.6875rem;
    letter-spacing: 0;
}

p {
    line-height: 1.45;
    margin-bottom: 0.375rem;
}

/* ==========================================================================
   3. BUTTONS — shadcn variants
   ========================================================================== */

/* Base reset for all .btn */
.btn {
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: -0.011em;
    border-radius: var(--tblr-border-radius);
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
    box-shadow: none;
    line-height: 1;
    padding: 0 0.625rem;
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.btn:focus-visible {
    outline: 2px solid var(--shadcn-ring);
    outline-offset: 2px;
    box-shadow: none;
}

/* ==========================================================================
   3a. BUTTON COLOR HOMOLOGATION
   Unified color system by intention:
     Primary CTA  → btn-primary, btn-github        (dark zinc / white)
     Success       → btn-success                    (green — Publish, Activate)
     Secondary     → btn-secondary                  (muted — Cancel, Close)
     Destructive   → btn-danger, btn-warning        (red — Delete, Remove)
     Outline       → btn-outline-*, btn-primary-outlined (border only)
     Ghost         → btn-ghost-*, btn-link          (minimal)
     Info          → btn-info                       (blue utility)
   ========================================================================== */

/* --- Primary CTA (dark zinc) --- */
.btn-primary,
.btn-github {
    background-color: var(--shadcn-foreground, #18181b) !important;
    border-color: var(--shadcn-foreground, #18181b) !important;
    color: var(--shadcn-background, #fafafa) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-github:hover,
.btn-github:focus {
    background-color: #27272a !important;
    border-color: #27272a !important;
    color: var(--shadcn-background, #fafafa) !important;
    opacity: 1;
}

[data-bs-theme='dark'] .btn-primary,
[data-bs-theme='dark'] .btn-github {
    background-color: #fafafa !important;
    border-color: #fafafa !important;
    color: #18181b !important;
}

[data-bs-theme='dark'] .btn-primary:hover,
[data-bs-theme='dark'] .btn-primary:focus,
[data-bs-theme='dark'] .btn-github:hover,
[data-bs-theme='dark'] .btn-github:focus {
    background-color: #e4e4e7 !important;
    border-color: #e4e4e7 !important;
    color: #18181b !important;
    opacity: 1;
}

/* --- Success (green — Publish, Activate, Reactivate) --- */
.btn-success {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

[data-bs-theme='dark'] .btn-success {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #052e16 !important;
}

[data-bs-theme='dark'] .btn-success:hover,
[data-bs-theme='dark'] .btn-success:focus {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

/* --- Secondary (muted — Cancel, Close, Back) --- */
.btn-secondary,
.btn-default {
    background-color: var(--shadcn-secondary) !important;
    border-color: var(--shadcn-secondary) !important;
    color: var(--shadcn-secondary-foreground) !important;
}

.btn-secondary:hover,
.btn-default:hover {
    background-color: #e4e4e7 !important;
    border-color: #e4e4e7 !important;
    color: var(--shadcn-accent-foreground) !important;
}

[data-bs-theme='dark'] .btn-secondary,
[data-bs-theme='dark'] .btn-default {
    background-color: var(--shadcn-secondary) !important;
    border-color: var(--shadcn-secondary) !important;
    color: var(--shadcn-secondary-foreground) !important;
}

[data-bs-theme='dark'] .btn-secondary:hover,
[data-bs-theme='dark'] .btn-default:hover {
    background-color: #3f3f46 !important;
    border-color: #3f3f46 !important;
    color: #fafafa !important;
}

/* --- Destructive (red — Delete, Remove, Deactivate) --- */
.btn-danger,
.btn-warning {
    background-color: var(--shadcn-destructive) !important;
    border-color: var(--shadcn-destructive) !important;
    color: var(--shadcn-destructive-foreground) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-warning:hover,
.btn-warning:focus {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

[data-bs-theme='dark'] .btn-danger,
[data-bs-theme='dark'] .btn-warning {
    background-color: #991b1b !important;
    border-color: #991b1b !important;
    color: #fafafa !important;
}

[data-bs-theme='dark'] .btn-danger:hover,
[data-bs-theme='dark'] .btn-danger:focus,
[data-bs-theme='dark'] .btn-warning:hover,
[data-bs-theme='dark'] .btn-warning:focus {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

/* --- Outline variants (border only, transparent bg) --- */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-default,
.btn-primary-outlined,
.btn-github-outlined {
    background-color: transparent !important;
    border: 1px solid var(--shadcn-input) !important;
    color: var(--shadcn-foreground, #09090b) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-default:hover,
.btn-primary-outlined:hover,
.btn-github-outlined:hover {
    background-color: var(--shadcn-accent) !important;
    color: var(--shadcn-accent-foreground) !important;
}

[data-bs-theme='dark'] .btn-outline-primary,
[data-bs-theme='dark'] .btn-outline-secondary,
[data-bs-theme='dark'] .btn-outline-default,
[data-bs-theme='dark'] .btn-primary-outlined,
[data-bs-theme='dark'] .btn-github-outlined {
    border-color: var(--shadcn-input) !important;
    color: var(--shadcn-foreground) !important;
}

[data-bs-theme='dark'] .btn-outline-primary:hover,
[data-bs-theme='dark'] .btn-outline-secondary:hover,
[data-bs-theme='dark'] .btn-outline-default:hover,
[data-bs-theme='dark'] .btn-primary-outlined:hover,
[data-bs-theme='dark'] .btn-github-outlined:hover {
    background-color: var(--shadcn-accent) !important;
    color: var(--shadcn-accent-foreground) !important;
}

/* --- Outline Success (green border — Add Action) --- */
.btn-outline-success {
    background-color: transparent !important;
    border: 1px solid #16a34a !important;
    color: #16a34a !important;
}

.btn-outline-success:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

[data-bs-theme='dark'] .btn-outline-success {
    border-color: #22c55e !important;
    color: #22c55e !important;
}

[data-bs-theme='dark'] .btn-outline-success:hover {
    background-color: #22c55e !important;
    color: #052e16 !important;
}

/* --- Outline Danger (red border — Remove) --- */
.btn-outline-danger {
    background-color: transparent !important;
    border-color: var(--shadcn-destructive) !important;
    color: var(--shadcn-destructive) !important;
}

.btn-outline-danger:hover {
    background-color: var(--shadcn-destructive) !important;
    color: var(--shadcn-destructive-foreground) !important;
}

[data-bs-theme='dark'] .btn-outline-danger {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

[data-bs-theme='dark'] .btn-outline-danger:hover {
    background-color: #991b1b !important;
    color: #fafafa !important;
}

/* --- Ghost variants (no bg/border — sidebar, minimal) --- */
.btn-ghost,
.btn-ghost-secondary,
.btn-ghost-primary {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--shadcn-foreground, #09090b) !important;
    box-shadow: none !important;
}

.btn-ghost:hover,
.btn-ghost-secondary:hover,
.btn-ghost-primary:hover {
    background-color: var(--shadcn-accent) !important;
    color: var(--shadcn-accent-foreground) !important;
}

[data-bs-theme='dark'] .btn-ghost,
[data-bs-theme='dark'] .btn-ghost-secondary,
[data-bs-theme='dark'] .btn-ghost-primary {
    color: var(--shadcn-foreground) !important;
}

[data-bs-theme='dark'] .btn-ghost:hover,
[data-bs-theme='dark'] .btn-ghost-secondary:hover,
[data-bs-theme='dark'] .btn-ghost-primary:hover {
    background-color: var(--shadcn-accent) !important;
    color: var(--shadcn-accent-foreground) !important;
}

/* --- Link variant (underlined text button) --- */
.btn-link,
.btn.link-secondary {
    color: var(--shadcn-muted-foreground, #71717a) !important;
    text-decoration: none !important;
    text-underline-offset: 4px;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.btn-link:hover,
.btn.link-secondary:hover {
    color: var(--shadcn-foreground) !important;
    text-decoration: underline !important;
    opacity: 1;
}

[data-bs-theme='dark'] .btn-link,
[data-bs-theme='dark'] .btn.link-secondary {
    color: var(--shadcn-muted-foreground) !important;
}

[data-bs-theme='dark'] .btn-link:hover,
[data-bs-theme='dark'] .btn.link-secondary:hover {
    color: var(--shadcn-foreground) !important;
}

/* --- Info (blue utility — rare) --- */
.btn-info {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

[data-bs-theme='dark'] .btn-info {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

[data-bs-theme='dark'] .btn-info:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* --- bg-*-lt icon buttons (used in users table) — normalize to subtle pills --- */
.btn.bg-warning-lt {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: none !important;
}

.btn.bg-warning-lt:hover {
    background-color: #fde68a !important;
}

.btn.bg-success-lt {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border: none !important;
}

.btn.bg-success-lt:hover {
    background-color: #bbf7d0 !important;
}

.btn.bg-info-lt {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: none !important;
}

.btn.bg-info-lt:hover {
    background-color: #bfdbfe !important;
}

.btn.bg-purple-lt {
    background-color: #f3e8ff !important;
    color: #6b21a8 !important;
    border: none !important;
}

.btn.bg-purple-lt:hover {
    background-color: #e9d5ff !important;
}

.btn.bg-blue-lt {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: none !important;
}

.btn.bg-blue-lt:hover {
    background-color: #bfdbfe !important;
}

[data-bs-theme='dark'] .btn.bg-warning-lt {
    background-color: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
}

[data-bs-theme='dark'] .btn.bg-success-lt {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}

[data-bs-theme='dark'] .btn.bg-info-lt,
[data-bs-theme='dark'] .btn.bg-blue-lt {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

[data-bs-theme='dark'] .btn.bg-purple-lt {
    background-color: rgba(168, 85, 247, 0.15) !important;
    color: #c084fc !important;
}

/* --- Button sizes aligned with shadcn --- */
.btn-sm {
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    border-radius: var(--tblr-border-radius-sm);
    height: var(--control-h-sm);
    line-height: 1;
}

.btn-lg {
    padding: 0 1rem;
    font-size: 0.8125rem;
    border-radius: var(--tblr-border-radius);
    height: var(--control-h-lg);
    line-height: 1;
}

.btn-xs {
    padding: 0 0.25rem;
    font-size: 0.625rem;
    height: var(--control-h-xs);
    line-height: 1;
    border-radius: var(--tblr-border-radius-sm);
}

/* Icon-only button (square) — shadcn "icon" size */
.btn-icon {
    border-radius: var(--tblr-border-radius);
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
}

.btn-icon.btn-sm {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
}

/* ==========================================================================
   4. CARDS
   ========================================================================== */

.card {
    border-radius: var(--tblr-border-radius-lg);
    border: 1px solid var(--shadcn-border);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    overflow: visible;
}

.card-header {
    border-bottom: 1px solid var(--shadcn-border);
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    font-size: 0.75rem;
}

.card-footer {
    border-top: 1px solid var(--shadcn-border);
    background-color: transparent;
    padding: 0.375rem 0.75rem;
}

.card-title {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.0625rem;
}

.card-body {
    padding: 0.75rem;
}

[data-bs-theme='dark'] .card {
    border-color: var(--shadcn-border);
    box-shadow: none;
}

[data-bs-theme='dark'] .card-header {
    background-color: transparent;
    border-color: var(--shadcn-border);
}

[data-bs-theme='dark'] .card-footer {
    background-color: transparent;
    border-color: var(--shadcn-border);
}

/* ==========================================================================
   5. FORM CONTROLS / INPUTS
   ========================================================================== */

.form-control,
.form-select {
    border: 1px solid var(--shadcn-input);
    border-radius: var(--tblr-border-radius);
    font-size: 0.75rem;
    padding: 0 0.5rem !important;
    height: var(--control-h);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    background-color: transparent;
}

[data-bs-theme='dark'] .form-control,
[data-bs-theme='dark'] .form-select {
    background-color: transparent !important;
    border-color: var(--shadcn-input) !important;
    color: var(--shadcn-foreground) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--shadcn-ring);
    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.12);
    outline: none;
}

[data-bs-theme='dark'] .form-control:focus,
[data-bs-theme='dark'] .form-select:focus {
    border-color: var(--shadcn-ring) !important;
    box-shadow: 0 0 0 2px rgba(212, 212, 216, 0.15);
}

.form-control::placeholder {
    color: var(--shadcn-muted-foreground);
}

[data-bs-theme='dark'] .form-control::placeholder {
    color: var(--shadcn-muted-foreground);
}

/* Textarea */
textarea.form-control {
    border-radius: var(--tblr-border-radius);
    min-height: 3rem;
    height: auto;
    padding: 0.25rem 0.5rem !important;
}

/* ==========================================================================
   5b. CHECKBOXES & RADIOS — shadcn style
   ========================================================================== */

.form-check-input {
    width: 1rem;
    height: 1rem;
    background-color: transparent;
    border: 1px solid var(--shadcn-foreground, #18181b);
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.form-check-input[type='checkbox'] {
    border-radius: var(--tblr-border-radius-sm);
}

.form-check-input:focus {
    border-color: var(--shadcn-ring);
    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.08);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--shadcn-foreground, #18181b);
    border-color: var(--shadcn-foreground, #18181b);
}

.form-check-input:checked:focus {
    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.08);
}

/* Dark mode checkboxes */
[data-bs-theme='dark'] .form-check-input {
    background-color: transparent;
    border-color: #52525b;
}

[data-bs-theme='dark'] .form-check-input:focus {
    border-color: var(--shadcn-ring);
    box-shadow: 0 0 0 2px rgba(212, 212, 216, 0.1);
}

[data-bs-theme='dark'] .form-check-input:checked {
    background-color: #fafafa;
    border-color: #fafafa;
}

/* Checked checkbox SVG — dark check on white bg in dark mode */
[data-bs-theme='dark'] .form-check-input:checked[type='checkbox'] {
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%2318181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
}

[data-bs-theme='dark'] .form-check-input:checked[type='radio'] {
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%2318181b' cx='8' cy='8' /%3e%3c/svg%3e");
}

/* Switch — borderless track (shadcn style) */
.form-switch .form-check-input {
    border: none;
    background-color: #a1a1aa; /* zinc-400 — visible on white */
}

.form-switch .form-check-input:checked {
    background-color: var(--shadcn-foreground, #18181b);
    border: none;
}

[data-bs-theme='dark'] .form-switch .form-check-input {
    background-color: #3f3f46;
    border: none;
}

[data-bs-theme='dark'] .form-switch .form-check-input:checked {
    background-color: #d4d4d8; /* zinc-300 — visible but distinct from white thumb */
    border: none;
}

/* Form labels */
.form-label,
label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.011em;
    margin-bottom: 0.125rem;
}

/* Input group */
.input-group-text {
    border: 1px solid var(--shadcn-input);
    background-color: var(--shadcn-muted);
    font-size: 0.6875rem;
    padding: 0 0.375rem;
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    border-radius: var(--tblr-border-radius);
}

/* Collapse borders between adjacent input-group children */
.input-group > :not(:first-child) > .input-group-text,
.input-group > :not(:first-child).input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.input-group > :not(:last-child) > .input-group-text,
.input-group > :not(:last-child).input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control,
.input-group .form-select {
    height: var(--control-h);
}

.input-group .btn {
    height: var(--control-h);
}

[data-bs-theme='dark'] .input-group-text {
    background-color: var(--shadcn-muted);
    border-color: var(--shadcn-input);
    color: var(--shadcn-muted-foreground);
}

/* Form check / switch — shadcn cleaner look */
.form-check-input {
    border-radius: var(--tblr-border-radius-sm);
    border: 1px solid var(--shadcn-foreground, #18181b);
    width: 0.875rem;
    height: 0.875rem;
}

.form-check-label {
    font-size: 0.75rem;
}

.form-check-input:checked {
    background-color: var(--shadcn-foreground, #18181b);
    border-color: var(--shadcn-foreground, #18181b);
}

[data-bs-theme='dark'] .form-check-input {
    border-color: #52525b;
    background-color: transparent;
}

[data-bs-theme='dark'] .form-check-input:checked {
    background-color: var(--shadcn-foreground);
    border-color: var(--shadcn-foreground);
}

.form-switch .form-check-input {
    border-radius: 9999px;
    border: none;
}

/* ==========================================================================
   6. BADGES
   ========================================================================== */

.badge {
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0;
    border-radius: 9999px;
    padding: 0 0.375rem;
    line-height: 1rem;
}

/* Soft / light badge variants — shadcn-like muted backgrounds */
.badge.bg-primary-lt,
.badge.bg-blue-lt {
    background-color: rgba(var(--tblr-primary-rgb), 0.1) !important;
    color: var(--tblr-primary) !important;
    border: none;
}

.badge.bg-success-lt,
.badge.bg-green-lt {
    background-color: rgba(var(--tblr-success-rgb), 0.1) !important;
    color: var(--tblr-success) !important;
    border: none;
}

.badge.bg-danger-lt,
.badge.bg-red-lt {
    background-color: rgba(var(--tblr-danger-rgb), 0.1) !important;
    color: var(--tblr-danger) !important;
    border: none;
}

.badge.bg-warning-lt,
.badge.bg-orange-lt,
.badge.bg-yellow-lt {
    background-color: rgba(var(--tblr-warning-rgb), 0.1) !important;
    color: var(--tblr-warning) !important;
    border: none;
}

.badge.bg-secondary-lt {
    background-color: var(--shadcn-secondary) !important;
    color: var(--shadcn-secondary-foreground) !important;
    border: 1px solid var(--shadcn-border) !important;
}

[data-bs-theme='dark'] .badge {
    border-color: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   7. DROPDOWN MENUS
   ========================================================================== */

/* Dropdown toggle buttons — same height as other buttons */
.btn.dropdown-toggle,
.btn[data-bs-toggle='dropdown'] {
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.btn.dropdown-toggle::after {
    margin-left: 0.25rem;
    vertical-align: middle;
}

.dropdown-menu {
    border: 1px solid var(--shadcn-border);
    border-radius: var(--tblr-border-radius-lg);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 0.25rem;
    animation: shadcn-dropdown-in 0.1s ease-out;
}

@keyframes shadcn-dropdown-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.dropdown-item {
    border-radius: var(--tblr-border-radius-sm);
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    color: var(--shadcn-foreground, #09090b);
    transition: background-color 0.1s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--shadcn-accent);
    color: var(--shadcn-accent-foreground);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--shadcn-accent);
    color: var(--shadcn-accent-foreground);
}

.dropdown-divider {
    border-color: var(--shadcn-border);
    margin: 0.25rem 0;
}

[data-bs-theme='dark'] .dropdown-menu {
    border-color: var(--shadcn-border);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.4),
        0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

[data-bs-theme='dark'] .dropdown-item {
    color: var(--shadcn-foreground);
}

[data-bs-theme='dark'] .dropdown-item:hover,
[data-bs-theme='dark'] .dropdown-item:focus {
    background-color: var(--shadcn-accent);
    color: var(--shadcn-accent-foreground);
}

/* ==========================================================================
   8. MODALS
   ========================================================================== */

.modal-content {
    border-radius: var(--tblr-border-radius-lg);
    border: 1px solid var(--shadcn-border);
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.modal-header {
    border-bottom: 1px solid var(--shadcn-border);
    padding: 0.5rem 0.75rem;
}

.modal-header .modal-title {
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: -0.02em;
}

.modal-body {
    padding: 0.75rem;
}

.modal-footer {
    border-top: 1px solid var(--shadcn-border);
    padding: 0.375rem 0.75rem;
}

[data-bs-theme='dark'] .modal-content {
    border-color: var(--shadcn-border);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

[data-bs-theme='dark'] .modal-header,
[data-bs-theme='dark'] .modal-footer {
    border-color: var(--shadcn-border);
}

/* Modal backdrop - slightly more opaque like shadcn */
.modal-backdrop.show {
    opacity: 0.6;
}

[data-bs-theme='dark'] .modal-backdrop.show {
    opacity: 0.7;
}

/* ==========================================================================
   9. TABLES
   ========================================================================== */

.table {
    font-size: 0.75rem;
}

/* Prevent double borders when a bordered table sits inside a card */
.card > .table-bordered,
.card > .card-body > .table-bordered {
    border: 0;
}

.card > .table-bordered > :not(caption) > *:last-child > * {
    border-bottom: 0;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--shadcn-border);
    padding: 0.25rem 0.5rem;
}

.table thead th {
    font-weight: 500;
    font-size: 0.6875rem;
    color: var(--shadcn-muted-foreground);
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--shadcn-border);
    padding: 0.25rem 0.5rem;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--shadcn-muted);
}

[data-bs-theme='dark'] .table > :not(caption) > * > * {
    border-bottom-color: var(--shadcn-border);
}

[data-bs-theme='dark'] .table thead th {
    color: var(--shadcn-muted-foreground);
    border-bottom-color: var(--shadcn-border);
}

[data-bs-theme='dark'] .table-hover > tbody > tr:hover > * {
    background-color: var(--shadcn-muted);
}

/* ==========================================================================
   10. ALERTS
   ========================================================================== */

.alert {
    border-radius: var(--tblr-border-radius-lg);
    font-size: 0.75rem;
    border: 1px solid;
    padding: 0.375rem 0.625rem;
}

/* ==========================================================================
   11. AVATARS
   ========================================================================== */

.avatar {
    border-radius: var(--tblr-border-radius);
}

.avatar-rounded {
    border-radius: 9999px;
}

/* ==========================================================================
   12. TABS
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--shadcn-border);
}

.nav-tabs .nav-link {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--shadcn-muted-foreground);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.25rem 0.5rem;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--shadcn-foreground);
    border-bottom-color: var(--shadcn-border);
}

.nav-tabs .nav-link.active {
    color: var(--shadcn-foreground);
    border-bottom-color: var(--shadcn-foreground);
    background-color: transparent;
}

[data-bs-theme='dark'] .nav-tabs {
    border-bottom-color: var(--shadcn-border);
}

[data-bs-theme='dark'] .nav-tabs .nav-link {
    color: var(--shadcn-muted-foreground);
}

[data-bs-theme='dark'] .nav-tabs .nav-link:hover {
    color: var(--shadcn-foreground);
}

[data-bs-theme='dark'] .nav-tabs .nav-link.active {
    color: var(--shadcn-foreground);
    border-bottom-color: var(--shadcn-foreground);
}

/* ==========================================================================
   13. PAGINATION
   ========================================================================== */

.page-link {
    border: 1px solid var(--shadcn-input);
    border-radius: var(--tblr-border-radius);
    font-size: 0.6875rem;
    color: var(--shadcn-foreground, #09090b);
    padding: 0 0.375rem;
    height: var(--control-h-sm);
    display: inline-flex;
    align-items: center;
}

.page-link:hover {
    background-color: var(--shadcn-accent);
    color: var(--shadcn-accent-foreground);
    border-color: var(--shadcn-input);
}

.page-item.active .page-link {
    background-color: var(--shadcn-foreground, #18181b);
    border-color: var(--shadcn-foreground, #18181b);
    color: var(--shadcn-background, #fff);
}

[data-bs-theme='dark'] .page-link {
    border-color: var(--shadcn-input);
    color: var(--shadcn-foreground);
}

[data-bs-theme='dark'] .page-link:hover {
    background-color: var(--shadcn-accent);
    color: var(--shadcn-accent-foreground);
}

[data-bs-theme='dark'] .page-item.active .page-link {
    background-color: var(--shadcn-foreground);
    border-color: var(--shadcn-foreground);
    color: var(--shadcn-background);
}

/* ==========================================================================
   14. PROGRESS BARS
   ========================================================================== */

.progress {
    border-radius: 9999px;
    background-color: var(--shadcn-secondary);
    height: 0.5rem;
}

[data-bs-theme='dark'] .progress {
    background-color: var(--shadcn-secondary);
}

/* ==========================================================================
   15. LIST GROUPS
   ========================================================================== */

.list-group-item {
    border-color: var(--shadcn-border);
    font-size: 0.75rem;
    padding: 0.3125rem 0.5rem;
}

.list-group-item:first-child {
    border-top-left-radius: var(--tblr-border-radius-lg);
    border-top-right-radius: var(--tblr-border-radius-lg);
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--tblr-border-radius-lg);
    border-bottom-right-radius: var(--tblr-border-radius-lg);
}

.list-group-item:hover {
    background-color: var(--shadcn-accent);
}

[data-bs-theme='dark'] .list-group-item {
    border-color: var(--shadcn-border);
    color: var(--shadcn-foreground);
}

[data-bs-theme='dark'] .list-group-item:hover {
    background-color: var(--shadcn-accent);
}

/* ==========================================================================
   16. ACCORDION
   ========================================================================== */

.accordion-item {
    border: 1px solid var(--shadcn-border);
    border-radius: 0 !important;
}

.accordion-item:not(:first-of-type) {
    border-top: 0;
}

.accordion-item:first-of-type {
    border-top-left-radius: var(--tblr-border-radius-lg) !important;
    border-top-right-radius: var(--tblr-border-radius-lg) !important;
}

.accordion-item:last-of-type {
    border-bottom-left-radius: var(--tblr-border-radius-lg) !important;
    border-bottom-right-radius: var(--tblr-border-radius-lg) !important;
}

.accordion-button {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--shadcn-foreground);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--shadcn-border);
}

[data-bs-theme='dark'] .accordion-item {
    border-color: var(--shadcn-border);
}

[data-bs-theme='dark'] .accordion-button {
    color: var(--shadcn-foreground);
}

[data-bs-theme='dark'] .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--shadcn-foreground);
    border-color: var(--shadcn-border);
}

/* ==========================================================================
   17. TOASTS / OFFCANVAS
   ========================================================================== */

.toast {
    border-radius: var(--tblr-border-radius-lg);
    border: 1px solid var(--shadcn-border);
}

.offcanvas {
    border-color: var(--shadcn-border) !important;
}

[data-bs-theme='dark'] .toast {
    border-color: var(--shadcn-border);
}

[data-bs-theme='dark'] .offcanvas {
    border-color: var(--shadcn-border) !important;
}

/* ==========================================================================
   18. TOOLTIPS & POPOVERS
   ========================================================================== */

.tooltip-inner {
    border-radius: var(--tblr-border-radius);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--shadcn-foreground);
    color: var(--shadcn-background);
}

.popover {
    border-radius: var(--tblr-border-radius-lg);
    border: 1px solid var(--shadcn-border);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.popover-header {
    border-bottom: 1px solid var(--shadcn-border);
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    background-color: transparent;
    border-radius: var(--tblr-border-radius-lg) var(--tblr-border-radius-lg) 0 0;
}

[data-bs-theme='dark'] .popover {
    border-color: var(--shadcn-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

[data-bs-theme='dark'] .popover-header {
    border-color: var(--shadcn-border);
    background-color: transparent;
}

/* ==========================================================================
   19. BREADCRUMBS
   ========================================================================== */

.breadcrumb {
    font-size: 0.75rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--shadcn-muted-foreground);
}

.breadcrumb-item.active {
    color: var(--shadcn-muted-foreground);
}

.breadcrumb-item a {
    color: var(--shadcn-foreground);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ==========================================================================
   20. SCROLLBAR — shadcn-like minimal
   ========================================================================== */

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--shadcn-border);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--shadcn-muted-foreground);
}

[data-bs-theme='dark'] ::-webkit-scrollbar-thumb {
    background: var(--shadcn-border);
}

[data-bs-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}

/* ==========================================================================
   21. SEPARATOR / DIVIDER — shadcn <Separator>
   ========================================================================== */

hr,
.dropdown-divider {
    border-color: var(--shadcn-border);
    opacity: 1;
}

/* ==========================================================================
   22. SKELETON / PLACEHOLDER — shadcn-like pulse
   ========================================================================== */

.placeholder,
.skeleton-line {
    border-radius: var(--tblr-border-radius);
    background-color: var(--shadcn-muted);
    animation: shadcn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes shadcn-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ==========================================================================
   23. MISC COMPONENT REFINEMENTS
   ========================================================================== */

/* Subtle selection color */
::selection {
    background-color: rgba(24, 24, 27, 0.15);
    color: inherit;
}

[data-bs-theme='dark'] ::selection {
    background-color: rgba(250, 250, 250, 0.2);
    color: inherit;
}

/* Close button */
.btn-close {
    border-radius: var(--tblr-border-radius-sm);
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.btn-close:hover {
    opacity: 1;
}

/* Ribbon (Tabler-specific) — soften radius */
.ribbon {
    border-radius: var(--tblr-border-radius);
}

/* Page pretitle (Tabler) — shadcn muted style */
.page-pretitle {
    color: var(--shadcn-muted-foreground);
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: none;
    letter-spacing: 0.025em;
}

/* Page title */
.page-title {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.025em;
}

/* Empty state (Tabler) */
.empty-title {
    font-weight: 600;
    font-size: 0.875rem;
}

.empty-subtitle {
    color: var(--shadcn-muted-foreground);
    font-size: 0.75rem;
}

/* Tom Select — force exact same height as buttons/inputs (--control-h: 2rem)
   Overrides: tabler-vendors.css, tabler-vendors.min.css, CDN tom-select.css, global.css */

/* Wrapper — make it invisible so .ts-control is the only visible box.
   The wrapper inherits .form-select styles (border, height) which creates a
   double-border/extra-height problem. Strip everything from the wrapper. */
.ts-wrapper,
.ts-wrapper.single,
.ts-wrapper.multi,
.ts-wrapper.form-control,
.ts-wrapper.form-select,
.ts-wrapper:not(.form-control):not(.form-select),
.input-group .ts-wrapper,
.input-group-sm > .ts-wrapper,
.input-group-lg > .ts-wrapper,
.ts-wrapper.form-control-sm,
.ts-wrapper.form-select-sm,
.ts-wrapper.form-control-lg,
.ts-wrapper.form-select-lg {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Control — the actual visible box (must match .form-control / .form-select exactly) */
.ts-control,
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.multi.has-items .ts-control,
.input-group .ts-wrapper .ts-control,
.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select .ts-control,
.ts-wrapper:not(.form-control):not(.form-select) .ts-control {
    border: 1px solid var(--shadcn-input) !important;
    border-radius: var(--tblr-border-radius) !important;
    font-size: 0.75rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    height: var(--control-h) !important;
    min-height: var(--control-h) !important;
    max-height: var(--control-h) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    background-color: transparent !important;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

/* Tom Select dark mode — must match [data-bs-theme='dark'] .form-control exactly.
   Uses high specificity to beat global.css dark rules. */
[data-bs-theme='dark'] .ts-control,
[data-bs-theme='dark'] .ts-wrapper .ts-control,
[data-bs-theme='dark'] .ts-wrapper.single .ts-control,
[data-bs-theme='dark'] .ts-wrapper.form-select .ts-control,
[data-bs-theme='dark'] .ts-wrapper.form-control .ts-control,
[data-bs-theme='dark'] .ts-wrapper:not(.form-control):not(.form-select) .ts-control {
    background-color: transparent !important;
    border-color: var(--shadcn-input) !important;
    color: var(--shadcn-foreground) !important;
}

[data-bs-theme='dark'] .ts-wrapper .ts-control input,
[data-bs-theme='dark'] .ts-wrapper.single .ts-control input {
    color: var(--shadcn-foreground) !important;
}

[data-bs-theme='dark'] .ts-wrapper .ts-control input::placeholder {
    color: var(--shadcn-muted-foreground) !important;
}

/* Allow multi-select to grow when there are many items */
.ts-wrapper.multi .ts-control {
    max-height: none !important;
    flex-wrap: wrap !important;
}

/* Tom Select inner input — no extra height */
.ts-control input,
.ts-wrapper .ts-control input,
.ts-wrapper.single .ts-control input,
.ts-wrapper.multi .ts-control input {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 0.75rem !important;
    border: none !important;
    box-shadow: none !important;
}

/* Multi-select items inside control — compact */
.ts-wrapper.multi .ts-control > div {
    margin: 1px 2px 1px 0 !important;
    padding: 0 0.25rem !important;
    font-size: 0.6875rem !important;
    line-height: calc(var(--control-h) - 6px) !important;
    height: calc(var(--control-h) - 6px) !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Small variant */
.input-group-sm > .ts-wrapper .ts-control,
.ts-wrapper.form-control-sm .ts-control,
.ts-wrapper.form-select-sm .ts-control,
.input-group-sm > .ts-wrapper.has-items .ts-control,
.input-group-sm > .ts-wrapper.multi.has-items .ts-control {
    height: var(--control-h-sm) !important;
    min-height: var(--control-h-sm) !important;
    max-height: var(--control-h-sm) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ts-wrapper .ts-control:hover {
    border-color: var(--shadcn-ring) !important;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--shadcn-ring) !important;
    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.08) !important;
}

[data-bs-theme='dark'] .ts-wrapper.focus .ts-control {
    border-color: var(--shadcn-ring) !important;
    box-shadow: 0 0 0 2px rgba(212, 212, 216, 0.1) !important;
}

.ts-dropdown {
    border: 1px solid var(--shadcn-border) !important;
    border-radius: var(--tblr-border-radius-lg) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    padding: 0.25rem !important;
}

.ts-dropdown .option {
    border-radius: var(--tblr-border-radius-sm) !important;
    font-size: 0.75rem;
    padding: 0.1875rem 0.375rem;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: var(--shadcn-accent) !important;
    color: var(--shadcn-accent-foreground) !important;
}

/* Flatpickr — match radius */
.flatpickr-calendar {
    border-radius: var(--tblr-border-radius-lg) !important;
}

.flatpickr-day {
    border-radius: var(--tblr-border-radius) !important;
}

/* ==========================================================================
   24. COMPACT SaaS GLOBAL SPACING REFINEMENTS
   ========================================================================== */

/* Tighter spacing for common Tabler wrappers */
.page-header {
    margin-bottom: 0.5rem;
}

.page-body {
    padding-top: 0;
}

/* Compact navbar */
.navbar {
    font-size: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.navbar-brand {
    font-size: 0.875rem;
    font-weight: 600;
}

.nav-link {
    font-size: 0.75rem;
    padding: 0.1875rem 0.5rem;
}

/* Compact sidebar nav items */
.navbar-vertical .nav-link {
    padding: 0.1875rem 0.5rem;
    font-size: 0.75rem;
}

/* Tighter form groups */
.mb-3 {
    margin-bottom: 0.5rem !important;
}

/* DataTables compact overrides */
.dataTables_wrapper {
    font-size: 0.75rem;
}

.dataTables_filter input {
    font-size: 0.75rem;
    padding: 0 0.375rem;
    height: var(--control-h);
}

.dataTables_length select {
    font-size: 0.75rem;
    padding: 0 0.25rem;
    height: var(--control-h);
}

.dataTables_info {
    font-size: 0.6875rem;
}

/* Thin borders everywhere */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-width: 1px !important;
}

/* Compact dropdown-menu size override from main.ejs */
.dropdown-menu {
    font-size: 0.75rem !important;
}

/* ==========================================================================
   25. ULTRA-COMPACT GLOBAL TIGHTENING
   ========================================================================== */

/* Reduce container padding */
/*.container-xl,
.container-lg,
.container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
*/
/* Tighter row gutters */
.row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.5rem;
}

/* Compact page wrapper */
.page-wrapper {
    min-height: 100vh;
}

/* Reduce common spacing utilities */
/*.mb-2 {
    margin-bottom: 0.375rem !important;
}

.mb-4 {
    margin-bottom: 0.75rem !important;
}

.mt-3 {
    margin-top: 0.5rem !important;
}

.mt-4 {
    margin-top: 0.75rem !important;
}

.py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.px-3 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.gap-2 {
    gap: 0.375rem !important;
}

.gap-3 {
    gap: 0.5rem !important;
}*/

/* Compact progress bar */
.progress {
    height: 0.375rem;
}