@import url("../../branding/maxiflow_tokens.css");

:root {
    --admin-sidebar-width: 340px;
    --admin-sidebar-collapsed-width: 4.6rem;
    --admin-sidebar-brand-height: 75px;
    --admin-sidebar-active-bg: #EFF6FF;
    --admin-sidebar-hover-bg: #F8FAFC;
}

body {
    background: var(--color-bg-soft);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
}

.wrapper,
.content-wrapper {
    background: var(--color-bg-soft) !important;
}

.main-sidebar,
.main-sidebar::before {
    background: var(--color-bg-card) !important;
    border-right: 1px solid var(--color-border-subtle);
    box-shadow: none !important;
    width: var(--admin-sidebar-width) !important;
}

body:not(.sidebar-collapse) .main-sidebar .sidebar {
    width: var(--admin-sidebar-width) !important;
}

body:not(.sidebar-collapse) .content-wrapper,
body:not(.sidebar-collapse) .main-footer {
    margin-left: var(--admin-sidebar-width) !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar,
body.sidebar-mini.sidebar-collapse .main-sidebar::before {
    width: var(--admin-sidebar-collapsed-width) !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar {
    width: var(--admin-sidebar-collapsed-width) !important;
}

body.sidebar-mini.sidebar-collapse .content-wrapper,
body.sidebar-mini.sidebar-collapse .main-footer {
    margin-left: var(--admin-sidebar-collapsed-width) !important;
}

@media (min-width: 992px) {
    body.sidebar-mini.sidebar-collapse .main-sidebar {
        overflow-x: hidden;
        transition: width 0.18s ease;
        z-index: 1040;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar::before,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover {
        transition: width 0.18s ease;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover::before {
        box-shadow: 18px 0 32px rgba(15, 23, 42, 0.12) !important;
        width: var(--admin-sidebar-width) !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar {
        width: var(--admin-sidebar-width) !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link {
        justify-content: flex-start;
        padding-right: 0.75rem;
        width: var(--admin-sidebar-width) !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .admin-brand-home {
        display: flex;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .info {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-header {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link {
        align-items: center;
        display: flex;
        justify-content: flex-start;
        line-height: 1.25;
        padding-right: 2rem;
        width: calc(var(--admin-sidebar-width) - 1rem);
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link .nav-icon {
        flex: 0 0 1.5rem;
        margin-left: 0;
        margin-right: 0.5rem;
        text-align: center;
        width: 1.5rem;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link .right {
        margin-left: auto;
        position: static;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p {
        display: block !important;
        flex: 1;
        margin: 0;
        min-width: 0;
        opacity: 1 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        visibility: visible !important;
        white-space: nowrap;
        width: auto !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-treeview .nav-link {
        font-size: 0.9rem;
        font-weight: 500;
        min-height: 2.3rem;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        width: calc(var(--admin-sidebar-width) - 2rem);
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link {
        min-height: 2.65rem;
        padding-bottom: 0.55rem;
        padding-top: 0.55rem;
    }
}

.layout-navbar-fixed .wrapper .content-wrapper,
.layout-navbar-fixed .wrapper .main-header + .content-wrapper,
body:not(.layout-navbar-fixed) .content-wrapper {
    margin-top: 0 !important;
}

#jazzy-navbar,
.main-header {
    display: none !important;
}

.brand-link {
    align-items: center;
    background: var(--color-bg-card) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    color: var(--color-text-primary) !important;
    display: flex;
    gap: 0.25rem;
    height: var(--admin-sidebar-brand-height);
    min-height: var(--admin-sidebar-brand-height);
    overflow: visible;
    padding-left: 0.5rem;
    padding-right: 0.25rem;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.brand-link .admin-brand-home {
    align-items: center;
    color: inherit;
    display: flex;
    flex: 0 0 254px;
    justify-content: center;
    min-width: 0;
}

.brand-link .admin-brand-home:hover,
.brand-link .admin-brand-home:focus {
    color: var(--color-action-secondary);
    text-decoration: none;
}

.brand-link .brand-text {
    color: var(--color-text-primary);
    display: block;
    font-size: 1.125rem;
    font-weight: 800 !important;
    letter-spacing: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-link .brand-logo-image {
    display: block;
    height: auto;
    max-width: 254px;
    object-fit: contain;
    width: 254px;
}

.brand-sidebar-toggle {
    align-items: center;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    display: inline-flex;
    flex: 0 0 1.75rem;
    height: 2.25rem;
    justify-content: center;
    width: 1.75rem;
}

.brand-sidebar-toggle:hover,
.brand-sidebar-toggle:focus {
    background: var(--admin-sidebar-active-bg);
    color: var(--color-action-secondary);
    text-decoration: none;
}

body.sidebar-mini.sidebar-collapse .brand-link {
    justify-content: center;
    padding: 0;
    width: var(--admin-sidebar-collapsed-width) !important;
}

body.sidebar-mini.sidebar-collapse .brand-link .admin-brand-home {
    display: none;
}

body.sidebar-mini.sidebar-collapse .brand-sidebar-toggle {
    margin-left: 0;
}

.main-sidebar .sidebar {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
}

.main-sidebar .user-panel {
    align-items: center;
    border-bottom: 1px solid var(--color-border-subtle);
    min-height: 58px;
    margin-bottom: 0.75rem !important;
    margin-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.6rem !important;
}

.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info span,
.main-sidebar .user-profile {
    color: var(--color-text-secondary) !important;
}

.main-sidebar .user-panel .image {
    align-items: center;
    display: flex;
    min-height: 2.25rem;
}

.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info > span:first-child {
    color: var(--color-text-primary) !important;
    font-weight: 600;
}

.main-sidebar .user-panel .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 2.25rem;
    padding-left: 0.75rem;
}

.main-sidebar .user-panel .tenant-name {
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-caption);
    font-weight: 500;
    line-height: 1.25;
    margin-top: 0.15rem;
}

.main-sidebar .user-profile {
    font-size: 1.8rem;
}

.content-header,
.content-wrapper > .content.border-bottom {
    min-height: 74px;
    padding: 0 2rem !important;
}

.content-wrapper > .content.border-bottom {
    align-items: center;
    display: flex;
    margin-bottom: 0 !important;
}

.content-wrapper > .content.border-bottom > .container-fluid {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.content-wrapper > .content.border-bottom .row,
.content-wrapper > .content.border-bottom .col-12.col-md-auto {
    align-items: center;
    flex-wrap: nowrap;
    min-height: 74px;
    min-width: 0;
}

.content-wrapper > .content.border-bottom h1 {
    line-height: 1.2;
    white-space: nowrap;
}

.content-wrapper > .content.border-bottom .breadcrumb {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
    white-space: nowrap;
}

.content-wrapper > .content.border-bottom .breadcrumb-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-sidebar .nav-header {
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0;
    padding: 0.85rem 1rem 0.45rem;
    text-transform: none;
}

.nav-sidebar .nav-link {
    border-radius: var(--radius-md);
    color: var(--color-text-secondary) !important;
    font-weight: 600;
    margin: 0.125rem 0.5rem;
}

body:not(.sidebar-collapse) .nav-sidebar .nav-link {
    align-items: center;
    display: flex;
    line-height: 1.25;
    padding-right: 2rem;
    width: calc(var(--admin-sidebar-width) - 1rem);
}

body:not(.sidebar-collapse) .nav-sidebar .nav-link p {
    display: block;
    flex: 1;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.sidebar-collapse) .nav-sidebar .nav-treeview .nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    min-height: 2.3rem;
    padding-bottom: 0.4rem;
    padding-top: 0.4rem;
    width: calc(var(--admin-sidebar-width) - 2rem);
}

body:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link {
    min-height: 2.65rem;
    padding-bottom: 0.55rem;
    padding-top: 0.55rem;
}

.nav-sidebar .nav-link:hover,
.nav-sidebar .nav-link:focus {
    background: var(--admin-sidebar-hover-bg) !important;
    color: var(--color-text-primary) !important;
}

.nav-sidebar .nav-link.active,
.nav-sidebar > .nav-item.menu-open > .nav-link {
    background: var(--admin-sidebar-active-bg) !important;
    box-shadow: inset 3px 0 0 var(--color-action-secondary) !important;
    color: var(--color-action-secondary) !important;
}

.nav-sidebar .nav-link .nav-icon,
.nav-sidebar .nav-link .right {
    color: inherit !important;
}

.nav-sidebar .nav-treeview {
    background: transparent !important;
    padding-left: 0.35rem;
}

.nav-sidebar .nav-treeview .nav-link .nav-icon {
    color: var(--color-text-muted) !important;
    font-size: 0.8rem;
}

.nav-sidebar .sidebar-logout-item {
    border-top: 1px solid var(--color-border-subtle);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.nav-sidebar .sidebar-logout-item .nav-link {
    color: var(--color-danger-text) !important;
}

.nav-sidebar .sidebar-logout-item .nav-link:hover,
.nav-sidebar .sidebar-logout-item .nav-link:focus {
    background: var(--color-danger-bg) !important;
    color: var(--color-danger-text) !important;
}

body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

a:not(.btn):not(.nav-link):not(.brand-link):not(.admin-brand-home) {
    color: var(--color-action-secondary);
}

a:not(.btn):not(.nav-link):not(.brand-link):not(.admin-brand-home):hover {
    color: var(--color-action-secondary-hover);
}

.content-header h1,
.content h1,
.content h2,
.content h3,
.content h4,
.card-title {
    color: var(--color-text-primary);
    font-weight: 700;
    letter-spacing: 0;
}

.content-wrapper > .content.border-bottom h1,
.content-header h1 {
    color: var(--color-text-primary);
    font-size: var(--font-size-h3);
    font-weight: 800;
    line-height: 1.2;
}

.breadcrumb-item,
.breadcrumb-item.active {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.4;
}

.card,
.card.card-outline {
    background: var(--color-bg-card);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-soft);
}

.card-header {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
}

.change-form .card,
.change-form .card.card-outline,
.change-form .inline-group {
    border-color: var(--color-border-subtle);
}

.change-form .card-body {
    color: var(--color-text-primary);
    font-size: var(--font-size-small);
}

.change-form label,
.change-form .form-row label,
.change-form .form-group label,
.change-form .aligned label,
.change-form fieldset .form-row label {
    color: var(--color-text-primary);
    font-size: var(--font-size-small);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}

.change-form .required label,
.change-form label.required {
    color: var(--color-text-primary);
}

.change-form .help,
.change-form .help-block,
.change-form .readonly,
.change-form p.help {
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    line-height: 1.45;
}

.change-form .inline-group h2,
.change-form .inline-group .card-title,
.change-form .module h2,
.change-form fieldset h2 {
    color: var(--color-text-primary);
    font-size: var(--font-size-small);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
}

.change-form .inline-group {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    margin-top: var(--space-3);
    overflow: visible;
    padding: var(--space-4);
}

.change-form .inline-group table.table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    table-layout: fixed;
    white-space: normal !important;
    width: 100% !important;
}

.change-form .inline-group table.table thead th {
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);
    font-size: var(--font-size-caption);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.3;
    padding: 0.7rem 0.75rem;
    text-transform: none;
    white-space: normal !important;
}

.change-form .inline-group table.table tbody td {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0.75rem;
    vertical-align: top;
    white-space: normal !important;
}

.change-form .inline-group table.table .original {
    display: none;
}

.change-form .inline-group table.table .delete {
    text-align: center;
    width: 5rem;
}

.change-form .inline-group table.table .column-path,
.change-form .inline-group table.table .field-path {
    width: 24%;
}

.change-form .inline-group table.table .column-kind,
.change-form .inline-group table.table .field-kind {
    width: 24%;
}

.change-form .inline-group table.table .column-content,
.change-form .inline-group table.table .field-content {
    width: 46%;
}

.change-form .inline-group table.table input[type="text"],
.change-form .inline-group table.table input[type="email"],
.change-form .inline-group table.table input[type="number"],
.change-form .inline-group table.table input[type="url"],
.change-form .inline-group table.table select,
.change-form .inline-group table.table textarea,
.change-form .inline-group table.table .select2-container {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

.change-form .inline-group table.table textarea {
    min-height: 9rem;
    resize: vertical;
}

.change-form .inline-group table.table .add-row td {
    background: var(--color-bg-card);
    border-bottom: 0;
    padding: var(--space-3) 0 0;
    text-align: right;
}

.table {
    color: var(--color-text-primary);
    font-size: var(--font-size-small);
    line-height: 1.45;
}

.table thead th,
.table thead td {
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1.35;
    padding: 0.65rem 0.75rem;
}

.table td,
.table th {
    border-color: var(--color-border-subtle);
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(244, 247, 250, 0.7);
}

.change-list .results,
.change-list .results table,
#result_list {
    font-size: var(--font-size-small);
}

.change-list .results th,
.change-list .results td,
#result_list th,
#result_list td {
    font-size: var(--font-size-small);
    line-height: 1.4;
}

.change-list .results th a,
.change-list .results td a,
#result_list th a,
#result_list td a {
    font-size: inherit;
    font-weight: 700;
}

.form-control,
.custom-select,
.vTextField,
.vLargeTextField,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea,
select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--color-bg-card);
    border-color: var(--input-border);
    border-radius: var(--input-radius);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: 1.45;
    min-height: var(--input-height-md);
}

.change-form .related-widget-wrapper {
    align-items: flex-start;
    display: flex;
    gap: var(--space-2);
    max-width: 100%;
    min-width: 0;
}

.change-form .related-widget-wrapper .select2-container {
    flex: 1 1 auto;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

.change-form .related-widget-wrapper select,
.change-form .related-widget-wrapper .select2-selection {
    max-width: 100%;
}

.form-control:focus,
.custom-select:focus,
.vTextField:focus,
.vLargeTextField:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--color-focus-ring);
    box-shadow: 0 0 0 0.2rem rgba(10, 146, 213, 0.18);
    outline: 0;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-small) !important;
    font-weight: 400 !important;
    line-height: calc(var(--input-height-md) - 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    min-height: calc(var(--input-height-md) - 2px) !important;
}

.select2-container--default .select2-results__option,
.select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-small) !important;
}

.change-form .related-widget-wrapper-link {
    align-items: center;
    display: inline-flex;
    font-size: var(--font-size-caption);
    justify-content: center;
    min-height: var(--space-5);
}

.change-form .add-row a,
.change-form .inline-related .add-row a,
.change-form .inline-group .button,
.change-form .inline-group .btn {
    font-size: var(--font-size-small);
    font-weight: 600;
}

.btn {
    border-radius: var(--button-radius);
    font-weight: var(--button-font-weight);
    min-height: var(--button-height-md);
    padding-left: var(--button-padding-x);
    padding-right: var(--button-padding-x);
}

.btn-primary,
.btn-success {
    background-color: var(--color-action-primary) !important;
    border-color: var(--color-action-primary) !important;
    color: var(--color-text-inverse) !important;
}

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

.btn-info,
.btn-outline-primary:hover,
.btn-outline-info:hover {
    background-color: var(--color-action-secondary) !important;
    border-color: var(--color-action-secondary) !important;
    color: var(--color-text-inverse) !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--color-action-secondary-hover) !important;
    border-color: var(--color-action-secondary-hover) !important;
}

.btn-outline-primary,
.btn-outline-info {
    border-color: var(--color-action-secondary) !important;
    color: var(--color-action-secondary) !important;
}

.btn-danger {
    background-color: var(--color-danger-text) !important;
    border-color: var(--color-danger-text) !important;
    color: var(--color-text-inverse) !important;
}

.btn-warning {
    background-color: var(--color-warning-text) !important;
    border-color: var(--color-warning-text) !important;
    color: var(--color-text-inverse) !important;
}

.btn-secondary,
.btn-default {
    background-color: var(--color-neutral-bg) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-secondary) !important;
}

.badge-success,
.alert-success {
    background: var(--color-success-bg) !important;
    color: var(--color-success-text) !important;
}

.badge-info,
.alert-info {
    background: var(--color-info-bg) !important;
    color: var(--color-info-text) !important;
}

.badge-warning,
.alert-warning {
    background: var(--color-warning-bg) !important;
    color: var(--color-warning-text) !important;
}

.badge-danger,
.alert-danger {
    background: var(--color-danger-bg) !important;
    color: var(--color-danger-text) !important;
}

.main-footer {
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-muted);
}