:root,
[data-bs-theme="light"] {
    --globo-orange: #ff8d19;
    --globo-terracotta: #6d3222;
    --globo-coffee: #9a5b37;
    --globo-coffee-light: #b99f81;
    --globo-cream: #efebe4;
    --bs-theme: var(--globo-terracotta);
    --bs-theme-color: #ffffff;
    --bs-primary: var(--globo-terracotta);
    --bs-primary-rgb: 109, 50, 34;
    --bs-info: var(--globo-coffee);
    --bs-info-rgb: 154, 91, 55;
    --bs-success: #24734f;
    --bs-success-rgb: 36, 115, 79;
    --bs-warning: var(--globo-orange);
    --bs-warning-rgb: 255, 141, 25;
    --bs-inverse: #39271f;
    --bs-inverse-rgb: 57, 39, 31;
    --bs-theme-color-rgb: 255, 255, 255;
    --bs-app-header-bg: #ffffff;
    --bs-app-header-link-color: var(--globo-terracotta);
    --bs-app-header-link-color-rgb: 109, 50, 34;
    --bs-app-header-link-hover-color: var(--globo-coffee);
    --bs-app-sidebar-menu-header-color: rgba(239, 235, 228, 0.62);
    --bs-app-sidebar-menu-link-color: rgba(239, 235, 228, 0.86);
    --bs-app-sidebar-menu-link-hover-color: var(--globo-orange);
    --bs-app-sidebar-menu-link-active-color: var(--globo-orange);
    --bs-app-sidebar-mobile-bg: var(--globo-terracotta);
    --bs-body-bg: #faf8f4;
    --bs-body-bg-rgb: 250, 248, 244;
    --bs-body-color: #39271f;
    --bs-body-color-rgb: 57, 39, 31;
    --bs-component-bg: #ffffff;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: "Origin", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
}

.app-header {
    border-bottom: 3px solid var(--globo-orange);
    box-shadow: 0 2px 12px rgba(57, 39, 31, 0.08);
}

.app-header .brand .brand-logo {
    gap: 0.75rem;
    color: var(--globo-terracotta);
    letter-spacing: 0.01em;
}

.app-header .brand .brand-logo img {
    width: auto !important;
    height: auto !important;
    max-width: 145px;
    max-height: 28px;
    object-fit: contain;
}

.app-header .menu-toggler .bar {
    background: var(--globo-terracotta);
}

.app-sidebar {
    background: var(--globo-terracotta);
}

.app-sidebar .app-sidebar-content .menu .menu-header {
    color: rgba(239, 235, 228, 0.62);
    letter-spacing: 0.12em;
}

.app-sidebar .app-sidebar-content .menu .menu-item .menu-link {
    transition: color 0.15s ease, background-color 0.15s ease;
}

.app-sidebar .app-sidebar-content .menu .menu-item .menu-link .menu-icon,
.app-sidebar .app-sidebar-content .menu .menu-item.active > .menu-link .menu-icon {
    color: var(--globo-orange) !important;
}

.app-sidebar .app-sidebar-content .menu .menu-item .menu-link:focus,
.app-sidebar .app-sidebar-content .menu .menu-item .menu-link:hover {
    color: var(--globo-orange);
    background-color: rgba(239, 235, 228, 0.08);
}

.app-sidebar .app-sidebar-content .menu .menu-item.active:not(.has-sub) > .menu-link {
    color: var(--globo-orange);
    background-color: rgba(239, 235, 228, 0.1);
    box-shadow: inset 3px 0 0 var(--globo-orange);
}

.app-sidebar .menu-submenu {
    background-color: rgba(57, 39, 31, 0.16);
}

.app-content {
    background-color: var(--bs-body-bg);
}

.app-content h1,
.app-content h2,
.app-content h3,
.app-content h4,
.app-content h5,
.app-content h6,
.app-content .page-header {
    color: var(--globo-terracotta) !important;
}

.app-content h1.text-white,
.app-content h2.text-white,
.app-content h3.text-white,
.app-content h4.text-white,
.app-content h5.text-white,
.app-content h6.text-white,
.app-content .modal-title.text-white {
    color: var(--globo-terracotta) !important;
}

.card {
    border-color: rgba(109, 50, 34, 0.12);
    border-radius: 0.75rem;
    box-shadow: 0 3px 14px rgba(57, 39, 31, 0.05);
}

.app-content .card {
    background-color: #ffffff;
    color: var(--globo-ink, #39271f);
}

.card > .card-header,
.card-header:first-child {
    background-color: var(--globo-cream);
    color: var(--globo-terracotta);
}

.app-content .table,
.app-content .table-dark,
.modal .table,
.modal .table-dark {
    --bs-table-color: #39271f;
    --bs-table-bg: #ffffff;
    --bs-table-hover-color: #39271f;
    --bs-table-hover-bg: rgba(239, 235, 228, 0.65);
    color: #39271f;
}

.app-content .table thead th {
    border-color: rgba(109, 50, 34, 0.14);
    background-color: var(--globo-cream);
    color: var(--globo-coffee);
}

.modal .table thead th {
    border-color: rgba(109, 50, 34, 0.14);
    background-color: var(--globo-cream);
    color: var(--globo-coffee);
}

.app-content .table tbody td {
    border-color: rgba(109, 50, 34, 0.09);
}

.modal .table tbody td {
    border-color: rgba(109, 50, 34, 0.09);
}

.app-content .text-inverse {
    color: #39271f !important;
}

.app-content .form-control,
.app-content .form-select,
.app-content .form-control-glass {
    border-color: rgba(109, 50, 34, 0.2);
    background-color: #ffffff !important;
    color: #39271f;
}

.app-content .form-control::placeholder,
.app-content .form-control-glass::placeholder {
    color: #9a5b37;
    opacity: 0.7;
}

.app-content .input-group-text,
.app-content .input-group-text-glass {
    border-color: rgba(109, 50, 34, 0.16);
    background-color: var(--globo-cream);
    color: var(--globo-terracotta);
}

.modal .modal-content,
.modal .modal-content.bg-dark {
    border-color: rgba(109, 50, 34, 0.14);
    background-color: #ffffff !important;
    color: #39271f !important;
}

.modal .modal-header,
.modal .modal-footer {
    border-color: rgba(109, 50, 34, 0.12) !important;
    background-color: var(--globo-cream);
}

.modal .modal-body {
    color: #39271f;
}

.modal .modal-title,
.modal .modal-title.text-white {
    color: var(--globo-terracotta) !important;
}

.modal .glass-input,
.modal .form-control-glass {
    border-color: rgba(109, 50, 34, 0.2) !important;
    background-color: #ffffff !important;
    color: #39271f !important;
}

.modal .glass-input::placeholder,
.modal .form-control-glass::placeholder {
    color: var(--globo-coffee) !important;
    opacity: 0.7;
}

.modal .ts-wrapper.glass-input .ts-control,
.modal .ts-wrapper.glass-input .ts-control > input,
.modal .ts-wrapper.glass-input .ts-control .item {
    color: #39271f !important;
}

.modal .ts-wrapper.glass-input .ts-dropdown,
.modal .dropdown-menu-dark.bg-dark {
    border-color: rgba(109, 50, 34, 0.16) !important;
    background-color: #ffffff !important;
    color: #39271f !important;
}

.modal .ts-wrapper.glass-input .ts-dropdown .option {
    color: #39271f;
}

.modal .ts-wrapper.glass-input .ts-dropdown .active,
.modal .ts-wrapper.glass-input .ts-dropdown .option:hover {
    background-color: var(--globo-cream) !important;
    color: var(--globo-terracotta) !important;
}

.modal .btn-close-white {
    filter: none;
}

.app-content .breadcrumb-item,
.app-content .breadcrumb-item.active {
    color: var(--globo-coffee);
}

.btn-primary,
.btn-theme,
.btn-outline-theme:hover,
.btn-outline-theme:focus-visible {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--globo-terracotta);
    --bs-btn-border-color: var(--globo-terracotta);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--globo-coffee);
    --bs-btn-hover-border-color: var(--globo-coffee);
    --bs-btn-active-bg: var(--globo-coffee);
    --bs-btn-active-border-color: var(--globo-coffee);
}

.btn-outline-theme {
    --bs-btn-color: var(--globo-terracotta);
    --bs-btn-border-color: var(--globo-terracotta);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--globo-terracotta);
    --bs-btn-hover-border-color: var(--globo-terracotta);
    color: var(--globo-terracotta) !important;
}

.btn-primary,
.btn-theme,
.btn-success,
.btn-info,
.btn-danger,
.btn-secondary,
.btn-dark {
    color: #ffffff !important;
}

.btn-warning {
    color: var(--globo-terracotta) !important;
}

.btn-default {
    border-color: var(--globo-terracotta);
    background-color: #ffffff;
    color: var(--globo-terracotta) !important;
}

.btn-default:hover,
.btn-default:focus-visible {
    border-color: var(--globo-terracotta);
    background-color: var(--globo-terracotta);
    color: #ffffff !important;
}

.btn-outline-success {
    color: #24734f !important;
}

.btn-outline-info {
    color: #087c9f !important;
}

.btn-outline-danger {
    color: #a8352a !important;
}

.btn-outline-warning {
    color: var(--globo-coffee) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--globo-orange);
    box-shadow: 0 0 0 0.2rem rgba(255, 141, 25, 0.2);
}

.form-check-input:checked {
    background-color: var(--globo-terracotta);
    border-color: var(--globo-terracotta);
}

a {
    color: var(--globo-coffee);
}

a:hover {
    color: var(--globo-terracotta);
}

.el-globo-auth .login {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(255, 141, 25, 0.12), transparent 34%),
        radial-gradient(ellipse at 88% 82%, rgba(109, 50, 34, 0.1), transparent 38%),
        var(--globo-cream);
}

.el-globo-auth .login-content {
    max-width: 27rem;
    padding: 2.5rem;
    border: 1px solid rgba(109, 50, 34, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1rem 3rem rgba(57, 39, 31, 0.12);
}

.el-globo-auth .el-globo-login-logo {
    display: block;
    width: min(100%, 15rem);
    height: auto;
    margin: 0 auto 1.75rem;
}

.el-globo-auth .login h1 {
    color: var(--globo-terracotta) !important;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.el-globo-auth .login .text-light,
.el-globo-auth .login .text-inverse {
    color: var(--globo-terracotta) !important;
}

.el-globo-auth .login .text-opacity-60,
.el-globo-auth .login .text-opacity-50 {
    opacity: 0.76;
}

.el-globo-auth .login .form-control {
    background-color: #ffffff;
    border-color: rgba(109, 50, 34, 0.22);
}

.el-globo-auth .login a {
    color: var(--globo-terracotta);
}

.el-globo-auth .btn-outline-theme {
    color: #ffffff !important;
    background-color: var(--globo-terracotta);
    border-color: var(--globo-terracotta);
}

.el-globo-auth .btn-outline-theme:hover,
.el-globo-auth .btn-outline-theme:focus-visible {
    color: #ffffff !important;
    background-color: var(--globo-coffee);
    border-color: var(--globo-coffee);
}

@media (max-width: 767.98px) {
    .el-globo-auth .login-content {
        padding: 1.75rem;
    }
}
