/**
 * Bootstrap 3 to Bootstrap 5 Compatibility Layer
 *
 * This file maps deprecated Bootstrap 3 classes to their Bootstrap 5 equivalents.
 * It allows the existing AdminPortal templates to work with SmartAdmin 5 (Bootstrap 5.3.7)
 * without requiring immediate changes to all HTML templates.
 *
 * IMPORTANT: Do NOT add layout styles here that override SmartAdmin 5's smartapp.min.css.
 * The SmartAdmin 5 CSS already provides correct layout for app-header, app-sidebar, app-body, etc.
 *
 * Once templates are migrated, this file can be removed.
 */

/* ==========================================================================
   HIDE SMARTADMIN 2014 LAYOUT ELEMENTS
   When SmartAdmin 5 is active AND we're in the authenticated admin layout,
   ensure old layout elements are hidden. We use JavaScript to add a class
   to body when app-wrap is present to enable these rules.

   NOTE: Login page (notAuthenticatedPart) uses #header and #main but NOT
   app-wrap, so we must NOT unconditionally hide these elements.
   ========================================================================== */

/* Hide SmartAdmin 2014 elements only when body has smartadmin5-active class */
body.smartadmin5-active #header,
body.smartadmin5-active #left-panel,
body.smartadmin5-active #main,
body.smartadmin5-active .page-footer,
body.smartadmin5-active #shortcut {
    display: none !important;
}

/* ==========================================================================
   LAYOUT FIX: Content Area Scrolling
   Ensure the main content area scrolls properly within the fixed header layout
   The SmartAdmin 5 grid uses min-height: 100vh which allows content to grow
   beyond viewport. We need to constrain height and enable scrolling.
   ========================================================================== */

/* Constrain app-wrap to viewport height for proper scrolling */
.app-wrap {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

/* App body: flex column with footer pinned at bottom */
.app-body {
    overflow: hidden;
    min-height: 0; /* Important for flex/grid children to allow shrinking */
}

/* Content area scrolls independently so footer stays visible */
.app-content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.app-content .content-wrapper {
    min-height: 0;
    overflow: visible;
}

/* Footer stays pinned at bottom of app-body */
.app-footer {
    flex-shrink: 0;
}

/* Sidebar should also scroll if content is tall */
.app-sidebar {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ==========================================================================
   FLOAT UTILITIES
   BS3: pull-left, pull-right
   BS5: float-start, float-end
   ========================================================================== */

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

/* ==========================================================================
   TEXT ALIGNMENT
   BS3: text-left, text-right, text-center, text-justify
   BS5: text-start, text-end, text-center, text-justify (same)
   ========================================================================== */

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

/* ==========================================================================
   BUTTON VARIANTS
   BS3: btn-default, btn-xs
   BS5: btn-secondary (replaces default), btn-sm (xs removed)
   ========================================================================== */

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* ==========================================================================
   PANELS → CARDS
   BS3: panel, panel-default, panel-heading, panel-body, panel-footer
   BS5: card, card-header, card-body, card-footer
   ========================================================================== */

.panel {
    margin-bottom: 1rem;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-default {
    border-color: #ddd;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.panel-body {
    padding: 15px;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* Panel color variants */
.panel-primary > .panel-heading {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.panel-success > .panel-heading {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.panel-info > .panel-heading {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.panel-warning > .panel-heading {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.panel-danger > .panel-heading {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

/* ==========================================================================
   WELLS → CARDS
   BS3: well, well-sm, well-lg
   BS5: (removed, use cards or bg-light with padding)
   ========================================================================== */

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.well-sm {
    padding: 9px;
    border-radius: 3px;
}

.well-lg {
    padding: 24px;
    border-radius: 6px;
}

/* ==========================================================================
   FORMS
   BS3: form-group, control-label, form-control, input-sm, input-lg
   BS5: mb-3, form-label, form-control, form-control-sm, form-control-lg
   ========================================================================== */

.form-group {
    margin-bottom: 1rem;
}

.control-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33333;
    border-radius: 6px;
}

/* ==========================================================================
   FORM HORIZONTAL
   BS3: form-horizontal with control-label sizing
   ========================================================================== */

.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}

/* ==========================================================================
   INPUT GROUPS
   BS3: input-group-addon, input-group-btn
   BS5: input-group-text, (buttons go directly in input-group)
   ========================================================================== */

.input-group-addon {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

.input-group-btn > .btn {
    position: relative;
}

/* ==========================================================================
   LABELS / BADGES
   BS3: label, label-default, label-primary, etc.
   BS5: badge, bg-secondary, bg-primary, etc.
   ========================================================================== */

.label {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.label-default {
    background-color: #777;
    color: #fff;
}

.label-primary {
    background-color: #337ab7;
    color: #fff;
}

.label-success {
    background-color: #5cb85c;
    color: #fff;
}

.label-info {
    background-color: #5bc0de;
    color: #fff;
}

.label-warning {
    background-color: #f0ad4e;
    color: #fff;
}

.label-danger {
    background-color: #d9534f;
    color: #fff;
}

/* ==========================================================================
   GRID / COLUMNS
   BS3: col-xs-*, visible-xs, hidden-xs, etc.
   BS5: col-* (xs is default), d-none d-sm-block, etc.
   ========================================================================== */

/* xs columns (BS3) map to default columns (BS5) */
.col-xs-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
.col-xs-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

/* Offsets */
.col-xs-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-6 { margin-left: 50%; }
.col-xs-offset-7 { margin-left: 58.33333333%; }
.col-xs-offset-8 { margin-left: 66.66666667%; }
.col-xs-offset-9 { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }

/* Also map col-sm-offset, col-md-offset, col-lg-offset */
.col-sm-offset-1 { margin-left: 8.33333333%; }
.col-sm-offset-2 { margin-left: 16.66666667%; }
.col-sm-offset-3 { margin-left: 25%; }
.col-sm-offset-4 { margin-left: 33.33333333%; }
.col-sm-offset-6 { margin-left: 50%; }

.col-md-offset-1 { margin-left: 8.33333333%; }
.col-md-offset-2 { margin-left: 16.66666667%; }
.col-md-offset-3 { margin-left: 25%; }
.col-md-offset-4 { margin-left: 33.33333333%; }

.col-lg-offset-1 { margin-left: 8.33333333%; }
.col-lg-offset-2 { margin-left: 16.66666667%; }
.col-lg-offset-3 { margin-left: 25%; }

/* ==========================================================================
   VISIBILITY UTILITIES
   BS3: visible-xs, visible-sm, hidden-xs, hidden-sm, etc.
   BS5: d-none, d-sm-none, d-sm-block, etc.
   ========================================================================== */

/* Hidden utilities */
.hidden-xs {
    display: none !important;
}

@media (min-width: 576px) {
    .hidden-xs {
        display: block !important;
    }
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hidden-sm {
        display: block !important;
    }
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .hidden-md {
        display: block !important;
    }
    .hidden-lg {
        display: none !important;
    }
}

/* Visible utilities (inverse of hidden) */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}

@media (max-width: 575.98px) {
    .visible-xs {
        display: block !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .visible-sm {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .visible-md {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .visible-lg {
        display: block !important;
    }
}

/* ==========================================================================
   TABLES
   BS3: table-condensed
   BS5: table-sm
   ========================================================================== */

.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
    padding: 5px;
}

/* ==========================================================================
   PAGINATION
   BS3: pagination sizing
   ========================================================================== */

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33333;
}

/* ==========================================================================
   THUMBNAILS
   BS3: thumbnail class
   BS5: (removed, use cards)
   ========================================================================== */

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border 0.2s ease-in-out;
}

.thumbnail > img,
.thumbnail a > img {
    margin-right: auto;
    margin-left: auto;
}

/* ==========================================================================
   HELPER CLASSES
   BS3: Various utility classes
   ========================================================================== */

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-rounded {
    border-radius: 6px;
}

.img-circle {
    border-radius: 50%;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.invisible {
    visibility: hidden;
}

/* Clearfix */
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

/* ==========================================================================
   NAVS
   BS3: nav-pills, nav-stacked
   BS5: nav-pills, flex-column
   ========================================================================== */

.nav-stacked > li {
    float: none;
}

.nav-stacked > li + li {
    margin-top: 2px;
    margin-left: 0;
}

/* ==========================================================================
   DROPDOWN
   BS3: divider class in dropdowns
   BS5: dropdown-divider
   ========================================================================== */

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

/* ==========================================================================
   CARET
   BS3: .caret pseudo-element for dropdowns
   BS5: (uses CSS instead)
   ========================================================================== */

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* ==========================================================================
   CLOSE BUTTON
   BS3: .close styling
   ========================================================================== */

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    appearance: none;
}

/* ==========================================================================
   CONTEXTUAL COLORS
   BS3: text-muted, text-primary, etc. (ensure they exist)
   ========================================================================== */

.text-muted {
    color: #6c757d !important;
}

/* ==========================================================================
   SPACING (map old margin/padding patterns)
   ========================================================================== */

/* Common spacing patterns used in BS3 that might not map directly */
.margin-top-10 { margin-top: 10px; }
.margin-bottom-10 { margin-bottom: 10px; }
.padding-10 { padding: 10px; }
.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }

/* ==========================================================================
   DATATABLES COMPATIBILITY
   Ensure DataTables works properly with Bootstrap 5 and SmartAdmin 5
   ========================================================================== */

/* DataTables wrapper - standard block layout */
.dataTables_wrapper {
    width: 100%;
    position: relative;
}

/* Bootstrap 5 Pagination for DataTables (SmartAdmin 5 mode) */
.dataTables_wrapper .pagination {
    margin: 0;
    flex-wrap: wrap;
}

.dataTables_wrapper .pagination .page-item .page-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--bs-body-color, #333);
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.dataTables_wrapper .pagination .page-item .page-link:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-color: var(--bs-border-color, #dee2e6);
    color: var(--bs-primary, #3B5360);
}

.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--bs-primary, #3B5360);
    border-color: var(--bs-primary, #3B5360);
    color: #fff;
}

.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
    background-color: var(--bs-body-bg, #fff);
    border-color: var(--bs-border-color, #dee2e6);
    opacity: 0.65;
}

/* The table element needs to clear and be block */
.dataTables_wrapper table.dataTable {
    clear: both;
    margin-bottom: 1rem !important;
}

/* Bottom row container - the div that wraps info, length, pagination */
.dataTables_wrapper > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color, #eee);
    clear: both;
}

/* DataTables info - left side */
.dataTables_wrapper .dataTables_info {
    flex: 0 0 auto;
    order: 1;
}

/* DataTables length selector - middle (if present) */
.dataTables_wrapper .dataTables_length {
    flex: 0 0 auto;
    order: 2;
}

/* DataTables pagination - right side with SmartAdmin 5 style */
.dataTables_wrapper .dataTables_paginate {
    flex: 0 0 auto;
    order: 3;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.25rem;
    cursor: pointer;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #333);
    font-size: 0.875rem;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-color: var(--bs-border-color, #dee2e6);
    color: var(--bs-primary, #3B5360);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--bs-primary, #3B5360);
    color: #fff !important;
    border-color: var(--bs-primary, #3B5360);
    font-weight: 500;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    color: var(--bs-secondary-color, #6c757d);
}

/* DataTables info */
.dataTables_wrapper .dataTables_info {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
}

/* DataTables length selector */
.dataTables_wrapper .dataTables_length {
    display: flex;
    align-items: center;
}

.dataTables_wrapper .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--bs-body-color, #333);
}

.dataTables_wrapper .dataTables_length select {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.25rem;
    background-color: var(--bs-body-bg, #fff);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.75rem;
    appearance: none;
}

/* DataTables filter/search */
.dataTables_wrapper .dataTables_filter {
    display: flex;
    align-items: center;
}

.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.25rem;
    min-width: 200px;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #333);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--bs-primary, #3B5360);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(59, 83, 96, 0.25);
}

/* DataTables table styling */
table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
    font-size: 0.875rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

table.dataTable thead th {
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    padding: 0.75rem;
    font-weight: 600;
    text-align: left;
    color: var(--bs-body-color, #333);
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    white-space: nowrap;
}

table.dataTable tbody td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #eee);
    vertical-align: middle;
}

table.dataTable tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb, 59, 83, 96), 0.04);
}

/* Alternating row colors */
table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

table.dataTable.table-striped tbody tr:nth-of-type(odd):hover {
    background-color: rgba(var(--bs-primary-rgb, 59, 83, 96), 0.06);
}

/* DataTables sorting icons */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    opacity: 0.5;
}

table.dataTable thead .sorting::after {
    content: "\f0dc";
}

table.dataTable thead .sorting_asc::after {
    content: "\f0de";
    opacity: 1;
}

table.dataTable thead .sorting_desc::after {
    content: "\f0dd";
    opacity: 1;
}

/* ==========================================================================
   SMARTADMIN-SPECIFIC COMPATIBILITY
   Styles specific to SmartAdmin 2014 widgets that need to work in SA5
   ========================================================================== */

/* Jarvis widgets - map to SmartAdmin 5 panel styles */
.jarviswidget {
    margin-bottom: 1rem;
}

.jarviswidget > header {
    padding: 0 1rem;
    line-height: 2.5rem;
}

.jarviswidget > div {
    padding: 1rem;
}

.jarviswidget-editbox {
    display: none;
}

/* Widget grid spacing */
#widget-grid {
    padding: 0;
}

/* ==========================================================================
   SMARTADMIN 2014 SPECIFIC CLASSES
   Classes that are specific to SmartAdmin 2014 templates
   ========================================================================== */

/* Smart forms */
.smart-form {
    margin: 0;
    padding: 0;
}

.smart-form header {
    display: block;
    padding: 10px 14px;
    background: rgba(248, 248, 248, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.smart-form section {
    margin-bottom: 1rem;
}

.smart-form .label {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 600;
}

.smart-form .input,
.smart-form .select,
.smart-form .textarea,
.smart-form .radio,
.smart-form .checkbox {
    position: relative;
    display: block;
}

.smart-form .input input,
.smart-form .select select,
.smart-form .textarea textarea {
    display: block;
    width: 100%;
    padding: 7px 10px;
    font-size: 14px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out;
}

.smart-form .input input:focus,
.smart-form .select select:focus,
.smart-form .textarea textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Toggle button styling */
.onoffswitch {
    position: relative;
    width: 62px;
    display: inline-block;
}

/* Icon styling */
.icon-append,
.icon-prepend {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    text-align: center;
    color: #a2a2a2;
}

.icon-prepend {
    left: 5px;
}

.icon-append {
    right: 5px;
}

/* ==========================================================================
   DARK MODE TOGGLE ICON VISIBILITY
   Handle showing/hiding sun/moon icons based on current theme
   ========================================================================== */

/* Light mode: show sun, hide moon */
.sa-mode-dark {
    display: none !important;
}

/* Dark mode: show moon, hide sun */
[data-theme="dark"] .sa-mode-light {
    display: none !important;
}

[data-theme="dark"] .sa-mode-dark {
    display: inline !important;
}

/* ==========================================================================
   SMARTADMIN 5 DARK NAV HEADER STYLING
   Extends set-nav-dark to also apply dark gradient styling to the header
   This matches the SmartAdmin 5 demo appearance with purple gradient header/sidebar
   ========================================================================== */

/* Apply dark gradient background to header when set-nav-dark is active (light mode) */
.set-nav-dark:not([data-bs-theme=dark]) .app-header {
    /*--app-header-background: var(--primary-900, #141c21);
    background-color: var(--app-header-background);
    background-image: linear-gradient(270deg, rgba(var(--bs-info-rgb, 75,100,110), 0.18), transparent);
    border-bottom-color: rgba(255, 255, 255, 0.1);*/
}

/* Make header icons/buttons visible against dark background */
.set-nav-dark:not([data-bs-theme=dark]) .app-header .btn-system {
    color: rgba(255, 255, 255, 0.8);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-header .btn-system:hover {
    color: rgba(255, 255, 255, 1);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-header .btn-system i {
    color: rgba(255, 255, 255, 0.8);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-header .btn-system:hover i {
    color: rgba(255, 255, 255, 1);
}

/* Collapse icon visibility in dark nav */
.set-nav-dark:not([data-bs-theme=dark]) .app-header .collapse-icon {
    /*border-color: rgba(255, 255, 255, 0.3);*/
}

.set-nav-dark:not([data-bs-theme=dark]) .app-header .collapse-icon svg polygon {
    fill: rgba(255, 255, 255, 0.6);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-header .collapse-icon:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-header .collapse-icon:hover svg polygon {
    fill: rgba(255, 255, 255, 0.9);
}

/* Ensure app-sidebar has proper dark gradient styling */
.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar {
    --app-nav-bg: var(--primary-900, #141c21);
    background-color: var(--app-nav-bg);
    background-image: linear-gradient(270deg, rgba(var(--bs-info-rgb, 75,100,110), 0.18), transparent);
}

/* Navigation link colors in dark sidebar */
.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-menu .nav-item > a {
    color: rgba(255, 255, 255, 0.7);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-menu .nav-item > a:hover {
    color: rgba(255, 255, 255, 0.95);
    background-color: rgba(255, 255, 255, 0.05);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-menu .nav-item.active > a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-menu .nav-item .nav-icon {
    color: rgba(255, 255, 255, 0.6);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-menu .nav-item:hover .nav-icon,
.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-menu .nav-item.active .nav-icon {
    color: rgba(255, 255, 255, 0.9);
}

/* Submenu styling in dark nav */
.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-menu .has-ul > ul {
    background-color: rgba(0, 0, 0, 0.15);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-menu .has-ul > ul li a {
    color: rgba(255, 255, 255, 0.6);
}

.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-menu .has-ul > ul li a:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Collapse sign in dark nav */
.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .collapse-sign {
    color: rgba(255, 255, 255, 0.5);
}

/* Nav footer in dark mode */
.set-nav-dark:not([data-bs-theme=dark]) .app-sidebar .nav-footer {
    color: rgba(255, 255, 255, 0.6);
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   TINYMCE STYLING
   Ensure TinyMCE integrates well with Bootstrap 5 / SmartAdmin 5
   ========================================================================== */

.tinymce-editor-container {
    min-height: 200px;
}

/* Hide the original textarea when TinyMCE takes over */
.tinymce-editor-container .tinymce-element {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* TinyMCE wrapper styling */
.tinymce-editor-container .tox-tinymce {
    border-color: var(--bs-border-color, #ced4da) !important;
    border-radius: 0.375rem !important;
}

/* TinyMCE toolbar styling to match Bootstrap 5 */
.tinymce-editor-container .tox .tox-toolbar,
.tinymce-editor-container .tox .tox-toolbar__primary {
    background: var(--bs-tertiary-bg, #f8f9fa) !important;
}

/* TinyMCE editor area focus state */
.tinymce-editor-container .tox.tox-tinymce--focus {
    border-color: var(--bs-primary, #3B5360) !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 83, 96, 0.25) !important;
}

/* Ensure proper width */
.tinymce-editor-container .tox-tinymce {
    width: 100%;
}

/* TinyMCE status bar styling */
.tinymce-editor-container .tox .tox-statusbar {
    border-top-color: var(--bs-border-color, #ced4da) !important;
}