/* Font Size Switcher Styles */
/* Override default font sizes with CSS custom properties */

/* Set default font size to 13px */
:root {
    --base-font-size: 13px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
}

/* Default 13px font size applied to body */
body {
    font-size: var(--base-font-size) !important;
}

/* Font size classes for switching */
body.font-size-12 {
    --base-font-size: var(--font-size-12);
}

body.font-size-13 {
    --base-font-size: var(--font-size-13);
}

body.font-size-14 {
    --base-font-size: var(--font-size-14);
}

/* Apply font size to common elements */
body.font-size-12,
body.font-size-12 p,
body.font-size-12 span,
body.font-size-12 div,
body.font-size-12 td,
body.font-size-12 th,
body.font-size-12 li,
body.font-size-12 a,
body.font-size-12 input,
body.font-size-12 textarea,
body.font-size-12 select,
body.font-size-12 button,
body.font-size-12 .form-control,
body.font-size-12 .btn,
body.font-size-12 .card-body,
body.font-size-12 .table {
    font-size: 12px !important;
}

body.font-size-13,
body.font-size-13 p,
body.font-size-13 span,
body.font-size-13 div,
body.font-size-13 td,
body.font-size-13 th,
body.font-size-13 li,
body.font-size-13 a,
body.font-size-13 input,
body.font-size-13 textarea,
body.font-size-13 select,
body.font-size-13 button,
body.font-size-13 .form-control,
body.font-size-13 .btn,
body.font-size-13 .card-body,
body.font-size-13 .table {
    font-size: 13px !important;
}

body.font-size-14,
body.font-size-14 p,
body.font-size-14 span,
body.font-size-14 div,
body.font-size-14 td,
body.font-size-14 th,
body.font-size-14 li,
body.font-size-14 a,
body.font-size-14 input,
body.font-size-14 textarea,
body.font-size-14 select,
body.font-size-14 button,
body.font-size-14 .form-control,
body.font-size-14 .btn,
body.font-size-14 .card-body,
body.font-size-14 .table {
    font-size: 14px !important;
}

/* Preserve heading sizes with proportional scaling */
body.font-size-12 h1 { font-size: 1.875rem !important; }
body.font-size-12 h2 { font-size: 1.5rem !important; }
body.font-size-12 h3 { font-size: 1.25rem !important; }
body.font-size-12 h4 { font-size: 1rem !important; }
body.font-size-12 h5 { font-size: 0.875rem !important; }
body.font-size-12 h6 { font-size: 0.75rem !important; }

body.font-size-13 h1 { font-size: 2rem !important; }
body.font-size-13 h2 { font-size: 1.625rem !important; }
body.font-size-13 h3 { font-size: 1.375rem !important; }
body.font-size-13 h4 { font-size: 1.125rem !important; }
body.font-size-13 h5 { font-size: 0.9375rem !important; }
body.font-size-13 h6 { font-size: 0.8125rem !important; }

body.font-size-14 h1 { font-size: 2.125rem !important; }
body.font-size-14 h2 { font-size: 1.75rem !important; }
body.font-size-14 h3 { font-size: 1.5rem !important; }
body.font-size-14 h4 { font-size: 1.25rem !important; }
body.font-size-14 h5 { font-size: 1rem !important; }
body.font-size-14 h6 { font-size: 0.875rem !important; }

/* Font size switcher integrated into existing UI - no floating widget needed */

/* Fix DataTables pagination arrow sizing */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 13px !important;
    padding: 0.375rem 0.75rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: 13px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous:before,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:before {
    font-size: 13px !important;
}

/* Fix pagination arrows for different font sizes */
body.font-size-12 .dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 12px !important;
    padding: 0.25rem 0.5rem !important;
}

body.font-size-12 .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
body.font-size-12 .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: 12px !important;
}

body.font-size-13 .dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 13px !important;
    padding: 0.375rem 0.75rem !important;
}

body.font-size-13 .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
body.font-size-13 .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: 13px !important;
}

body.font-size-14 .dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 14px !important;
    padding: 0.5rem 1rem !important;
}

body.font-size-14 .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
body.font-size-14 .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: 14px !important;
}

/* Fix for FontAwesome arrow icons in pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button i {
    font-size: inherit !important;
}

/* Fix for Tabler Icons arrow icons in pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button .ti {
    font-size: inherit !important;
}

/* Ensure pagination text is properly sized */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: inherit !important;
}

/* Fix pagination container spacing */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem !important;
}

/* Responsive pagination adjustments */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.25rem 0.5rem !important;
        margin: 0 0.125rem !important;
    }
}

/* Fix Flatpickr date picker arrow sizing */
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
    line-height: 24px !important;
}

.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
    width: 12px !important;
    height: 12px !important;
}

.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* Flatpickr arrow sizing for different font sizes */
body.font-size-12 .flatpickr-calendar .flatpickr-prev-month,
body.font-size-12 .flatpickr-calendar .flatpickr-next-month {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
    line-height: 20px !important;
}

body.font-size-12 .flatpickr-calendar .flatpickr-prev-month svg,
body.font-size-12 .flatpickr-calendar .flatpickr-next-month svg {
    width: 10px !important;
    height: 10px !important;
}

body.font-size-13 .flatpickr-calendar .flatpickr-prev-month,
body.font-size-13 .flatpickr-calendar .flatpickr-next-month {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
    line-height: 24px !important;
}

body.font-size-13 .flatpickr-calendar .flatpickr-prev-month svg,
body.font-size-13 .flatpickr-calendar .flatpickr-next-month svg {
    width: 12px !important;
    height: 12px !important;
}

body.font-size-14 .flatpickr-calendar .flatpickr-prev-month,
body.font-size-14 .flatpickr-calendar .flatpickr-next-month {
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;
    line-height: 26px !important;
}

body.font-size-14 .flatpickr-calendar .flatpickr-prev-month svg,
body.font-size-14 .flatpickr-calendar .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
}

/* Fix Flatpickr calendar overall sizing */
.flatpickr-calendar {
    font-size: inherit !important;
    display: block !important;
    visibility: visible !important;
}

.flatpickr-calendar .flatpickr-day {
    font-size: inherit !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    width: 39px !important;
    height: 39px !important;
    text-align: center !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
}

.flatpickr-calendar .flatpickr-current-month {
    font-size: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flatpickr-calendar .flatpickr-weekday {
    font-size: inherit !important;
    display: inline-block !important;
    width: 39px !important;
    text-align: center !important;
    font-weight: 600 !important;
}

/* Fix Flatpickr calendar container and grid layout */
.flatpickr-calendar .flatpickr-days {
    display: block !important;
    width: 273px !important;
}

.flatpickr-calendar .dayContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 273px !important;
    min-width: 273px !important;
    max-width: 273px !important;
}

.flatpickr-calendar .flatpickr-weekdays {
    display: flex !important;
    width: 273px !important;
    align-items: center !important;
}

/* Ensure proper calendar structure */
.flatpickr-calendar .flatpickr-months {
    display: flex !important;
    align-items: center !important;
}

.flatpickr-calendar .flatpickr-month {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
}

/* Fix calendar positioning */
.flatpickr-calendar.open {
    display: block !important;
    position: absolute !important;
    z-index: 99999 !important;
}

/* Hide any malformed calendar elements */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled {
    color: rgba(57, 57, 57, 0.3) !important;
}

/* Responsive adjustments for smaller font sizes */
body.font-size-12 .flatpickr-calendar .flatpickr-day,
body.font-size-12 .flatpickr-calendar .flatpickr-weekday {
    width: 35px !important;
    height: 35px !important;
}

body.font-size-12 .flatpickr-calendar .flatpickr-days,
body.font-size-12 .flatpickr-calendar .dayContainer,
body.font-size-12 .flatpickr-calendar .flatpickr-weekdays {
    width: 245px !important;
}

body.font-size-14 .flatpickr-calendar .flatpickr-day,
body.font-size-14 .flatpickr-calendar .flatpickr-weekday {
    width: 42px !important;
    height: 42px !important;
}

body.font-size-14 .flatpickr-calendar .flatpickr-days,
body.font-size-14 .flatpickr-calendar .dayContainer,
body.font-size-14 .flatpickr-calendar .flatpickr-weekdays {
    width: 294px !important;
}