/* =========================================================================
   Standard Typography: Title 18px & Subtitle 12px for Cards, Modals, Offcanvas
   ========================================================================= */
.card .card-title,
.card-title,
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
.card-header > span.fw-bold, .card-header > span.fw-semibold,
.card .card-body .card-title,
.modal-title,
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6,
.offcanvas-title,
.offcanvas-header h1, .offcanvas-header h2, .offcanvas-header h3, .offcanvas-header h4, .offcanvas-header h5, .offcanvas-header h6,
[role="dialog"] .modal-title,
[role="dialog"] h2, [role="dialog"] h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.card-subtitle,
.card .card-subtitle,
.card-header p,
.card-header .text-muted,
.card-header small,
.card-body > .card-subtitle,
.modal-subtitle,
.modal-header p,
.modal-header .text-muted,
.modal-header small,
.offcanvas-header p,
.offcanvas-header .text-muted,
.offcanvas-header small,
[role="dialog"] p.text-muted,
[role="dialog"] p.text-xs,
[role="dialog"] p.text-sm {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* =========================================================================
   Responsive Buttons (Desktop: Icon + Text, Mobile: Icon Only)
   ========================================================================= */
@media (max-width: 767.98px) {
    .btn:has(> i, > svg, > [class*="ri-"], > [class*="bx-"], > [class*="mdi-"]) > span:not(.badge):not(.avatar-title):not(.spinner-border):not(.dropdown-toggle),
    .btn:has(> i, > svg, > [class*="ri-"], > [class*="bx-"], > [class*="mdi-"]) > .btn-text,
    .btn:has(> i, > svg, > [class*="ri-"], > [class*="bx-"], > [class*="mdi-"]) > .btn-label-text,
    .btn-responsive > span:not(.badge):not(.avatar-title):not(.spinner-border) {
        display: none !important;
    }

    .btn:has(> i, > svg, > [class*="ri-"], > [class*="bx-"], > [class*="mdi-"]) > i,
    .btn:has(> i, > svg, > [class*="ri-"], > [class*="bx-"], > [class*="mdi-"]) > svg,
    .btn:has(> i, > svg, > [class*="ri-"], > [class*="bx-"], > [class*="mdi-"]) > [class*="ri-"],
    .btn:has(> i, > svg, > [class*="ri-"], > [class*="bx-"], > [class*="mdi-"]) > [class*="bx-"],
    .btn:has(> i, > svg, > [class*="ri-"], > [class*="bx-"], > [class*="mdi-"]) > [class*="mdi-"] {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}