:root,
[data-theme="claro"] {
    --ff-primary: #52658f;
    --ff-primary-hover: #435474;
    --ff-primary-soft: #e9edf5;
    --ff-sidebar: #293449;
    --ff-sidebar-hover: #35435c;
    --ff-sidebar-text: #dce3ee;
    --ff-canvas: #eef0f4;
    --ff-surface: #ffffff;
    --ff-surface-muted: #f7f8fa;
    --ff-border: #dfe3ea;
    --ff-text: #273142;
    --ff-muted: #737f91;
    --ff-shadow: 0 8px 24px rgba(39, 49, 66, 0.07);
}

[data-theme="nevoa"] {
    --ff-primary: #68778a;
    --ff-primary-hover: #566475;
    --ff-primary-soft: #edf0f3;
    --ff-sidebar: #323b47;
    --ff-sidebar-hover: #414c5a;
    --ff-sidebar-text: #e1e6ec;
    --ff-canvas: #eceff1;
    --ff-surface: #fbfcfc;
    --ff-surface-muted: #f4f6f7;
    --ff-border: #dce1e5;
    --ff-text: #303943;
    --ff-muted: #74808c;
    --ff-shadow: 0 8px 24px rgba(48, 57, 67, 0.07);
}

[data-theme="oceano"] {
    --ff-primary: #3f7482;
    --ff-primary-hover: #35616d;
    --ff-primary-soft: #e2eef1;
    --ff-sidebar: #23424b;
    --ff-sidebar-hover: #2f5661;
    --ff-sidebar-text: #d8eaee;
    --ff-canvas: #eaf0f1;
    --ff-surface: #fcfefe;
    --ff-surface-muted: #f3f8f8;
    --ff-border: #d7e3e5;
    --ff-text: #263b40;
    --ff-muted: #6d8287;
    --ff-shadow: 0 8px 24px rgba(35, 66, 75, 0.07);
}

[data-theme="salvia"] {
    --ff-primary: #617c6b;
    --ff-primary-hover: #506758;
    --ff-primary-soft: #e7eee9;
    --ff-sidebar: #31443a;
    --ff-sidebar-hover: #40584a;
    --ff-sidebar-text: #dce9e1;
    --ff-canvas: #edf1ee;
    --ff-surface: #fdfefd;
    --ff-surface-muted: #f5f8f6;
    --ff-border: #dce5df;
    --ff-text: #2e3e34;
    --ff-muted: #748078;
    --ff-shadow: 0 8px 24px rgba(49, 68, 58, 0.07);
}

[data-theme="lavanda"] {
    --ff-primary: #75688f;
    --ff-primary-hover: #615777;
    --ff-primary-soft: #edeaf3;
    --ff-sidebar: #3b354b;
    --ff-sidebar-hover: #4c445f;
    --ff-sidebar-text: #e8e2f0;
    --ff-canvas: #f0eef3;
    --ff-surface: #fefdfd;
    --ff-surface-muted: #f8f6fa;
    --ff-border: #e3dee8;
    --ff-text: #3b3545;
    --ff-muted: #7d7487;
    --ff-shadow: 0 8px 24px rgba(59, 53, 75, 0.07);
}

[data-theme="escuro"] {
    color-scheme: dark;
    --ff-primary: #91a4cf;
    --ff-primary-hover: #a9b8d8;
    --ff-primary-soft: #303a50;
    --ff-sidebar: #171c25;
    --ff-sidebar-hover: #242c39;
    --ff-sidebar-text: #d7deea;
    --ff-canvas: #202630;
    --ff-surface: #2a313d;
    --ff-surface-muted: #252c36;
    --ff-border: #3c4655;
    --ff-text: #e6eaf0;
    --ff-muted: #aab3c0;
    --ff-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

html,
body,
#wrapper,
#content-wrapper,
#content {
    min-height: 100%;
}

body,
#content-wrapper,
#content {
    background: var(--ff-canvas) !important;
    color: var(--ff-text);
}

#content > .container-fluid {
    padding-top: 0.35rem;
}

.topbar {
    height: 3.65rem;
    min-height: 3.65rem;
    margin-bottom: 1.25rem !important;
    background: var(--ff-surface) !important;
    border-bottom: 1px solid var(--ff-border);
    box-shadow: 0 2px 12px rgba(30, 41, 59, 0.05) !important;
}

.topbar .nav-item .nav-link {
    height: 3.65rem;
}

.topbar .img-profile {
    width: 2rem;
    height: 2rem;
}

.fortflow-sidebar {
    display: flex;
    min-height: 100vh;
    background: var(--ff-sidebar) !important;
    background-image: none !important;
}

.fortflow-sidebar .sidebar-brand {
    height: 3.65rem;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fortflow-sidebar .sidebar-brand-icon {
    font-size: 1rem;
    opacity: 0.85;
}

.fortflow-sidebar .sidebar-brand-text {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.fortflow-sidebar .sidebar-heading {
    color: rgba(255, 255, 255, 0.47);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

.fortflow-sidebar .nav-item .nav-link,
.fortflow-sidebar .fortflow-nav-disabled {
    width: auto;
    margin: 0.1rem 0.55rem;
    padding: 0.68rem 0.75rem;
    color: var(--ff-sidebar-text);
    border-radius: 0.55rem;
    font-size: 0.86rem;
}

.fortflow-sidebar .nav-item .nav-link:hover,
.fortflow-sidebar .nav-item.active > .nav-link,
.fortflow-sidebar .nav-link.active {
    color: #fff;
    background: var(--ff-sidebar-hover);
}

.fortflow-sidebar .nav-item .nav-link i {
    color: inherit;
    opacity: 0.72;
}

.fortflow-sidebar .nav-item .nav-link:hover i,
.fortflow-sidebar .nav-item.active > .nav-link i {
    opacity: 1;
}

.fortflow-sidebar-primary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fortflow-nav-disabled {
    display: flex !important;
    align-items: center;
    opacity: 0.55;
    cursor: default;
}

.fortflow-nav-disabled small {
    margin-left: auto;
    font-size: 0.57rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fortflow-sidebar .collapse-inner {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: calc(100% - 1.1rem);
    margin: 0.15rem 0.55rem 0.4rem !important;
    padding: 0.45rem !important;
    background: rgba(255, 255, 255, 0.065) !important;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.65rem !important;
}

.fortflow-sidebar .collapse-header {
    color: rgba(255, 255, 255, 0.42) !important;
}

.fortflow-sidebar .collapse-item {
    margin: 0.08rem 0 !important;
    padding: 0.52rem 0.65rem !important;
    color: var(--ff-sidebar-text) !important;
    border-radius: 0.45rem !important;
    font-size: 0.82rem;
}

.fortflow-sidebar .collapse-item:hover,
.fortflow-sidebar .collapse-item.active {
    color: #fff !important;
    background: var(--ff-sidebar-hover) !important;
}

.fortflow-nested-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.fortflow-nested-toggle i {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.fortflow-nested-toggle:not(.collapsed) i {
    transform: rotate(180deg);
}

.fortflow-nested-menu {
    width: auto;
    min-width: 0;
    max-width: calc(100% - 0.35rem);
    margin: 0.2rem 0 0 0.35rem !important;
    padding: 0.3rem !important;
    background: rgba(0, 0, 0, 0.09) !important;
}

.fortflow-sidebar .collapse-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fortflow-sidebar .text-center.d-md-inline {
    display: block !important;
    width: 100%;
}

.fortflow-sidebar #sidebarToggle {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .fortflow-sidebar.toggled {
        width: 5rem !important;
        overflow: visible;
    }

    .fortflow-sidebar.toggled .sidebar-brand {
        justify-content: center;
        padding: 0;
    }

    .fortflow-sidebar.toggled .sidebar-brand-icon {
        margin: 0 !important;
        font-size: 1.25rem;
    }

    .fortflow-sidebar.toggled .sidebar-brand-text,
    .fortflow-sidebar.toggled .sidebar-heading,
    .fortflow-sidebar.toggled .nav-link span,
    .fortflow-sidebar.toggled .fortflow-nav-disabled small,
    .fortflow-sidebar.toggled .fortflow-sidebar-collapse {
        display: none !important;
    }

    .fortflow-sidebar.toggled .fortflow-sidebar-primary {
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }

    .fortflow-sidebar.toggled .nav-item .nav-link,
    .fortflow-sidebar.toggled .fortflow-nav-disabled {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 3.5rem !important;
        height: 3rem;
        margin: 0.18rem auto;
        padding: 0;
    }

    .fortflow-sidebar.toggled .nav-item .nav-link i,
    .fortflow-sidebar.toggled .fortflow-nav-disabled i {
        margin: 0 !important;
        font-size: 1rem;
    }

    .fortflow-sidebar.toggled .nav-item .nav-link[data-bs-toggle="collapse"]::after {
        display: none;
    }

    .fortflow-sidebar.toggled #sidebarToggle {
        margin-right: auto;
        margin-bottom: 0.6rem;
        margin-left: auto;
    }
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.table-responsive,
.breadcrumb,
.fortflow-surface {
    color: var(--ff-text);
    background-color: var(--ff-surface) !important;
    border-color: var(--ff-border) !important;
}

.card {
    box-shadow: var(--ff-shadow) !important;
}

.card-header,
.modal-header,
.modal-footer,
.table thead th {
    color: var(--ff-text);
    background-color: var(--ff-surface-muted) !important;
    border-color: var(--ff-border) !important;
}

.table,
.table td,
.table th {
    color: var(--ff-text);
    border-color: var(--ff-border);
}

.table-hover tbody tr:hover {
    color: var(--ff-text);
    background-color: var(--ff-primary-soft);
}

.form-control,
.custom-select,
select,
textarea,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    color: var(--ff-text);
    background-color: var(--ff-surface) !important;
    border-color: var(--ff-border) !important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus {
    color: var(--ff-text);
    background-color: var(--ff-surface) !important;
    border-color: var(--ff-primary) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ff-primary) 18%, transparent) !important;
}

.form-control:disabled,
.form-control[readonly] {
    color: var(--ff-muted);
    background-color: var(--ff-surface-muted) !important;
}

.btn-primary,
.bg-primary,
.badge-primary,
.icon-circle.bg-primary {
    background-color: var(--ff-primary) !important;
    border-color: var(--ff-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ff-primary-hover) !important;
    border-color: var(--ff-primary-hover) !important;
}

.btn-outline-primary {
    color: var(--ff-primary) !important;
    border-color: var(--ff-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--ff-primary) !important;
}

.text-primary,
.breadcrumb-item a,
.card-body a:not(.btn):not(.dropdown-item):not(.badge),
.fortflow-content-link {
    color: var(--ff-primary) !important;
}

.breadcrumb-item a:hover,
.card-body a:not(.btn):not(.dropdown-item):not(.badge):hover,
.fortflow-content-link:hover {
    color: var(--ff-primary-hover) !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus {
    color: #fff !important;
}

.border-left-primary {
    border-left-color: var(--ff-primary) !important;
}

.text-gray-800,
.text-gray-900,
.text-gray-700,
.text-gray-600 {
    color: var(--ff-text) !important;
}

.text-muted,
.text-gray-500,
.text-gray-400 {
    color: var(--ff-muted) !important;
}

.dropdown-item {
    color: var(--ff-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--ff-text);
    background-color: var(--ff-primary-soft);
}

.dropdown-divider,
hr,
.sidebar-divider {
    border-color: var(--ff-border);
}

footer.sticky-footer {
    color: var(--ff-muted);
    background: var(--ff-surface) !important;
    border-top: 1px solid var(--ff-border);
}

.fortflow-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.fortflow-theme-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0.75rem;
    background: var(--ff-surface-muted);
    border: 1px solid var(--ff-border);
    border-radius: 0.8rem;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.fortflow-theme-option:hover {
    transform: translateY(-1px);
    border-color: var(--ff-primary);
    box-shadow: var(--ff-shadow);
}

.fortflow-theme-option:has(input:checked) {
    border-color: var(--ff-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ff-primary) 18%, transparent);
}

.fortflow-theme-option input {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
}

.fortflow-theme-swatch {
    display: grid;
    grid-template-columns: 32% 1fr;
    grid-template-rows: 1fr 1fr;
    height: 58px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.55rem;
}

.fortflow-theme-swatch span:first-child {
    grid-row: 1 / 3;
}

.fortflow-theme-option[data-theme-option="claro"] .fortflow-theme-swatch span:first-child { background: #293449; }
.fortflow-theme-option[data-theme-option="claro"] .fortflow-theme-swatch span:nth-child(2) { background: #eef0f4; }
.fortflow-theme-option[data-theme-option="claro"] .fortflow-theme-swatch span:nth-child(3) { background: #52658f; }
.fortflow-theme-option[data-theme-option="nevoa"] .fortflow-theme-swatch span:first-child { background: #323b47; }
.fortflow-theme-option[data-theme-option="nevoa"] .fortflow-theme-swatch span:nth-child(2) { background: #eceff1; }
.fortflow-theme-option[data-theme-option="nevoa"] .fortflow-theme-swatch span:nth-child(3) { background: #68778a; }
.fortflow-theme-option[data-theme-option="oceano"] .fortflow-theme-swatch span:first-child { background: #23424b; }
.fortflow-theme-option[data-theme-option="oceano"] .fortflow-theme-swatch span:nth-child(2) { background: #eaf0f1; }
.fortflow-theme-option[data-theme-option="oceano"] .fortflow-theme-swatch span:nth-child(3) { background: #3f7482; }
.fortflow-theme-option[data-theme-option="salvia"] .fortflow-theme-swatch span:first-child { background: #31443a; }
.fortflow-theme-option[data-theme-option="salvia"] .fortflow-theme-swatch span:nth-child(2) { background: #edf1ee; }
.fortflow-theme-option[data-theme-option="salvia"] .fortflow-theme-swatch span:nth-child(3) { background: #617c6b; }
.fortflow-theme-option[data-theme-option="lavanda"] .fortflow-theme-swatch span:first-child { background: #3b354b; }
.fortflow-theme-option[data-theme-option="lavanda"] .fortflow-theme-swatch span:nth-child(2) { background: #f0eef3; }
.fortflow-theme-option[data-theme-option="lavanda"] .fortflow-theme-swatch span:nth-child(3) { background: #75688f; }
.fortflow-theme-option[data-theme-option="escuro"] .fortflow-theme-swatch span:first-child { background: #171c25; }
.fortflow-theme-option[data-theme-option="escuro"] .fortflow-theme-swatch span:nth-child(2) { background: #202630; }
.fortflow-theme-option[data-theme-option="escuro"] .fortflow-theme-swatch span:nth-child(3) { background: #91a4cf; }

@media (max-width: 767.98px) {
    .topbar {
        height: 3.5rem;
        min-height: 3.5rem;
    }

    .topbar .nav-item .nav-link {
        height: 3.5rem;
    }

    .fortflow-sidebar .sidebar-brand {
        height: 3.5rem;
    }

    .fortflow-sidebar .nav-item .nav-link,
    .fortflow-sidebar .fortflow-nav-disabled {
        margin-right: 0.3rem;
        margin-left: 0.3rem;
        padding-right: 0.4rem;
        padding-left: 0.4rem;
    }
}