/* ============================================================
   Global typography — 18px base on every page.
   The theme is rem-based, so an 18px root scales body text,
   headings and components together. Loaded after the theme and
   Bootstrap CSS in every layout / standalone page.
   ============================================================ */
html {
    font-size: 18px;
}
:root {
    --bs-body-font-size: 1rem; /* body = 18px */
}
body {
    font-size: 18px;
}

/* Common components that hard-code a size of their own. */
.dash-mtext,
.dataTable,
.table,
.form-control,
.form-select,
.form-label,
.form-check-label,
.input-group-text,
.btn,
.dropdown-menu,
.dropdown-item,
.nav-link,
.list-group-item,
.page-link,
.modal-body,
.card-body,
.alert {
    font-size: 1rem;
}

/* ============================================================
   Font floor — no readable text smaller than 18px.
   Overrides the compiled theme (style.css / -dark / -rtl),
   Bootstrap and plugin rules that ship smaller sizes.
   Scoped to text elements (icons/dots untouched).
   ============================================================ */
.f-10, .f-12, .f-14, .f-16, .text-xs, .text-sm, .text-md,
.small, small, .form-text, .figure-caption, .initialism,
.invalid-feedback, .valid-feedback, .invalid-tooltip, .valid-tooltip,
.col-form-label-sm, .form-control-sm, .form-select-sm,
.input-group-sm > .form-control, .input-group-sm > .input-group-text,
.input-group-sm > .form-select, .input-group-sm > .btn,
.btn-sm, .btn-group-sm > .btn, .pagination-sm .page-link,
.dropdown-header, .toast, .toast-header,
.badge, .tooltip, .popover, .popover-body, .popover-header,
.avtar.avtar-xs,
.choices__list--multiple .choices__item,
.choices__list--dropdown .choices__item, .choices__heading,
.dataTables_info, .dataTables_length, .dataTables_filter,
.dataTable-info, .dataTable-dropdown, .dataTable-search, .dataTable-pagination {
    font-size: 18px !important;
}

/* Sidebar navigation + captions */
.dash-sidebar .dash-link,
.dash-sidebar .dash-caption,
.dash-sidebar .dash-caption span:not(.badge) {
    font-size: 18px !important;
}

/* Header, breadcrumbs, table cells, calendar, invoices */
.dash-header .dash-head-link .dash-h-badge,
.dash-header .dash-head-link .user-desc,
.page-header .breadcrumb,
.table thead th,
.fc th.fc-widget-header,
.invoice-summary .label,
.invoice-list .btn,
blockquote .blockquote-footer,
.c-bn, .cc-btn, #cc-main .c-bn {
    font-size: 18px !important;
}

/* Components whose theme sets a small custom property */
.btn-sm, .btn-group-sm > .btn {
    --bs-btn-font-size: 18px !important;
}
.badge {
    --bs-badge-font-size: 18px !important;
}
.dropdown-menu {
    --bs-dropdown-font-size: 18px;
}
.tooltip {
    --bs-tooltip-font-size: 18px;
}
.popover {
    --bs-popover-font-size: 18px;
    --bs-popover-header-font-size: 18px;
}
.pagination-sm {
    --bs-pagination-font-size: 18px;
}
.toast {
    --bs-toast-font-size: 18px;
}

/* ============================================================
   Responsive guards for the 18px base.
   Larger text needs more room, so on small screens toolbars
   wrap instead of pushing the page wider than the viewport.
   ============================================================ */

/* Page-header action buttons (the @yield('action-button') slot) */
.page-header .page-block > .row > .col-auto:last-child {
    max-width: 100%;
}
.page-header .page-block .row,
.page-header .page-block .d-flex,
.all-button-box {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* FullCalendar header (dashboard, calendar) */
.fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 8px;
}

/* Dropdowns with a hard-coded width never exceed the screen */
.dropdown-menu {
    max-width: calc(100vw - 24px);
}

@media (max-width: 575.98px) {
    /* Give content back the width the 18px text needs */
    /* >= half the grid gutter (1.5rem = 27px at the 18px root) so .row's
       negative margins never poke past the screen edge */
    .dash-container .dash-content {
        padding: 14px !important;
    }
    .dash-container .page-header {
        padding: 12px !important;
    }
    .card .card-body {
        padding: 16px;
    }
    .card .card-header {
        padding: 14px 16px;
    }
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }
}