/* Global late-loaded theme overrides for every page extending base.html. */
:root {
    --primary: var(--primary-color) !important;
    --primary-dark: var(--primary-hover-color) !important;
    --accent: var(--info-color) !important;
    --success: var(--success-color) !important;
    --warning: var(--warning-color) !important;
    --danger: var(--danger-color) !important;
    --light-bg: var(--neutral-100-color) !important;
    --card-color: var(--primary-color);
}

body {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 245, 242, 0.96) 260px),
        var(--background-color) !important;
    color: var(--text-color) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

.main-content > .container,
.main-content > .container-fluid,
.profile-container,
.payment-container,
.subscription-container,
.portier-container,
.dashboard-container {
    max-width: 1160px !important;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5 {
    color: var(--neutral-900-color) !important;
    letter-spacing: 0 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.main-content h1,
.subscription-header h1,
.stock-header h1 {
    font-weight: 800 !important;
}

.subscription-header h1,
.payment-header h1,
.stock-header h1,
.page-header h1,
.profile-info h2 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
}

.main-content p,
.main-content li,
.card-text,
.text-muted {
    color: var(--text-muted) !important;
}

.text-primary,
.text-success,
.text-info,
.text-warning,
.text-danger {
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}

.text-primary { color: var(--primary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-warning { color: #976515 !important; }
.text-danger { color: var(--danger-color) !important; }

.bg-primary,
.bg-success,
.bg-info,
.bg-warning,
.bg-gradient {
    background-image: none !important;
}

.bg-primary,
.bg-success {
    background-color: var(--neutral-900-color) !important;
}

.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: var(--box-shadow-soft) !important;
}

.rounded,
.rounded-3,
.rounded-4 {
    border-radius: 8px !important;
}

.alert,
.info-banner,
.comparison-note {
    border-radius: 8px !important;
    box-shadow: none !important;
}

.alert-info,
.info-banner {
    background: linear-gradient(90deg, rgba(31, 127, 134, 0.1), rgba(184, 115, 51, 0.08)) !important;
    border: 1px solid rgba(31, 127, 134, 0.2) !important;
    color: #234846 !important;
}

.alert-info p,
.info-banner p,
.alert-info strong,
.info-banner strong {
    color: #234846 !important;
}

.alert-warning,
.comparison-note {
    background: #fff7e8 !important;
    border-color: rgba(217, 154, 43, 0.28) !important;
    color: #765016 !important;
}

.card,
.card-event,
.login-card,
.profile-header,
.info-card,
.content-card,
.plan-card,
.payment-card,
.payment-summary,
.interface-card,
.scanner-card,
.stats-card,
.stat-card,
.graph-wrapper,
.table-card,
.stock-container,
.empty-state,
.events-list,
.quota-item,
.toast-custom,
form.shadow-lg,
form.bg-white {
    background: var(--surface-color) !important;
    border: 1px solid rgba(203, 213, 208, 0.86) !important;
    border-radius: 8px !important;
    box-shadow: var(--box-shadow-soft) !important;
}

.card:hover,
.card-event:hover,
.plan-card:hover,
.content-card:hover,
.stat-card:hover,
.graph-wrapper:hover {
    transform: translateY(-2px) !important;
    border-color: var(--secondary-dark-color) !important;
    box-shadow: var(--box-shadow) !important;
}

.card-header,
.card-header-custom,
.profile-header,
.payment-header,
.login-card .card-header,
.register-card .card-header,
.interface-header,
.portier-header,
.table-header,
.section-header {
    background:
        linear-gradient(90deg, rgba(184, 115, 51, 0.16), transparent 42%),
        var(--neutral-900-color) !important;
    color: #ffffff !important;
    border-radius: 8px 8px 0 0 !important;
    border: 0 !important;
}

.profile-header {
    border-radius: 8px !important;
}

.agent-hero,
.agent-hero h1,
.agent-hero p,
.agent-hero i,
.agent-event-id {
    color: #ffffff !important;
}

.event-detail-hero,
.event-detail-hero h1,
.event-detail-hero p,
.event-detail-hero i,
.event-date-pill {
    color: #ffffff !important;
}

.stats-hero,
.stats-hero h1,
.stats-hero p,
.stats-hero i,
.stats-event-pill {
    color: #ffffff !important;
}

.tables-hero,
.tables-hero h1,
.tables-hero p,
.tables-hero i,
.tables-count-pill {
    color: #ffffff !important;
}

.table-detail-hero,
.table-detail-hero h1,
.table-detail-hero p,
.table-detail-hero i,
.table-detail-pill {
    color: #ffffff !important;
}

.invite-hero,
.invite-hero h1,
.invite-hero p,
.invite-hero i,
.invite-pill {
    color: #ffffff !important;
}

.invite-detail-hero,
.invite-detail-hero h1,
.invite-detail-hero p,
.invite-detail-hero i,
.invite-detail-pill {
    color: #ffffff !important;
}

.category-hero,
.category-hero h1,
.category-hero p,
.category-hero i,
.category-pill {
    color: #ffffff !important;
}

.drink-hero,
.drink-hero h1,
.drink-hero p,
.drink-hero i,
.drink-pill {
    color: #ffffff !important;
}

.stock-hero,
.stock-hero h1,
.stock-hero p,
.stock-hero i {
    color: #ffffff !important;
}

.orders-hero,
.orders-hero h1,
.orders-hero p,
.orders-hero i {
    color: #ffffff !important;
}

.stock-add-hero,
.stock-add-hero h1,
.stock-add-hero p,
.stock-add-hero i,
.drink-create-hero,
.drink-create-hero h1,
.drink-create-hero p,
.drink-create-hero i,
.choice-hero,
.choice-hero h1,
.choice-hero p,
.choice-hero i {
    color: #ffffff !important;
}

.manager-hero,
.manager-hero h1,
.manager-hero p,
.manager-hero i {
    color: #ffffff !important;
}

.server-hero,
.server-hero h1,
.server-hero p,
.server-hero i {
    color: #ffffff !important;
}

.door-hero,
.door-hero h1,
.door-hero p,
.door-hero i {
    color: #ffffff !important;
}

.event-form-hero,
.event-form-hero h1,
.event-form-hero p,
.event-form-hero i,
.event-edit-hero,
.event-edit-hero h1,
.event-edit-hero p,
.event-edit-hero i,
.confirm-hero,
.confirm-hero h1,
.confirm-hero p,
.confirm-hero i,
.event-type-hero,
.event-type-hero h1,
.event-type-hero p,
.event-type-hero i,
.event-structure-hero,
.event-structure-hero h1,
.event-structure-hero p,
.event-structure-hero i,
.event-drinks-hero,
.event-drinks-hero h1,
.event-drinks-hero p,
.event-drinks-hero i,
.event-categories-hero,
.event-categories-hero h1,
.event-categories-hero p,
.event-categories-hero i {
    color: #ffffff !important;
}

.profile-header h2,
.profile-header p,
.card-header h1,
.card-header h2,
.card-header-custom h1,
.card-header-custom p,
.payment-header h1,
.payment-header p,
.interface-header h1,
.interface-header p,
.portier-header h1,
.portier-header h2,
.portier-header p {
    color: #ffffff !important;
}

.main-content:has(.login-container) {
    display: grid !important;
    place-items: center !important;
    padding: 2rem 1rem !important;
}

.login-container {
    margin-inline: auto !important;
}

.profile-avatar,
.avatar-circle,
.icon-circle {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    border-radius: 8px !important;
}

.btn,
.btn-action,
.btn-login,
.btn-submit,
.btn-plan,
.btn-pay,
.btn-back,
.btn-primary-custom,
.btn-modal-submit,
.btn-modal-cancel,
.btn-edit,
.btn-scan,
.btn-whatsapp,
.btn-export {
    border-radius: 8px !important;
    min-height: 40px;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

.btn:hover,
.btn-action:hover,
.btn-login:hover,
.btn-submit:hover,
.btn-plan:hover,
.btn-pay:hover,
.btn-back:hover,
.btn-primary-custom:hover,
.btn-modal-submit:hover,
.btn-edit:hover,
.btn-scan:hover,
.btn-whatsapp:hover {
    transform: translateY(-1px) !important;
}

.btn-primary,
.btn-success,
.btn-login,
.btn-submit,
.btn-plan-primary,
.btn-plan-success,
.btn-pay,
.btn-primary-custom,
.btn-modal-submit,
.btn-edit,
.btn-scan,
.btn-subscription,
.btn-whatsapp {
    background: var(--neutral-900-color) !important;
    border-color: var(--neutral-900-color) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-login:hover,
.btn-submit:hover,
.btn-plan-primary:hover,
.btn-plan-success:hover,
.btn-pay:hover,
.btn-primary-custom:hover,
.btn-modal-submit:hover,
.btn-edit:hover,
.btn-scan:hover,
.btn-subscription:hover,
.btn-whatsapp:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-secondary,
.btn-outline-light,
.btn-back,
.btn-modal-cancel {
    background: #ffffff !important;
    border-color: var(--neutral-300-color) !important;
    color: var(--neutral-700-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-back:hover,
.btn-modal-cancel:hover {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-dark-color) !important;
    color: var(--neutral-900-color) !important;
}

.btn-danger,
.btn-outline-danger:hover {
    background: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: #ffffff !important;
}

.form-control,
.form-select,
.input-group,
textarea,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"] {
    border-radius: 8px !important;
    border-color: var(--neutral-300-color) !important;
}

.form-control:focus,
.form-select:focus,
.input-group:focus-within,
textarea:focus,
select:focus,
input:focus {
    border-color: var(--info-color) !important;
    box-shadow: var(--focus-ring) !important;
}

.input-group-icon {
    background: var(--surface-soft-color) !important;
    color: var(--primary-color) !important;
}

.table-responsive,
.table,
.stock-table {
    background: var(--surface-color) !important;
}

.table-responsive {
    border: 1px solid rgba(203, 213, 208, 0.86) !important;
    border-radius: 8px !important;
    box-shadow: var(--box-shadow-soft) !important;
}

.table th,
.stock-table th {
    background: var(--surface-soft-color) !important;
    color: var(--neutral-700-color) !important;
    border-color: var(--neutral-200-color) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.table td,
.stock-table td {
    border-color: var(--neutral-200-color) !important;
    color: var(--text-color) !important;
}

.table-hover tbody tr:hover,
.stock-table tbody tr:hover {
    background: var(--secondary-light-color) !important;
}

.badge,
.plan-badge,
.badge-subscription,
.status-badge {
    border-radius: 999px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

.badge-subscription,
.plan-badge {
    background: var(--neutral-900-color) !important;
    color: #ffffff !important;
}

.plan-badge.active,
.badge.bg-success,
.status-success {
    background: rgba(37, 122, 87, 0.14) !important;
    color: #176342 !important;
}

.badge.bg-warning,
.status-warning {
    background: rgba(217, 154, 43, 0.18) !important;
    color: #765016 !important;
}

.badge.bg-danger,
.status-danger {
    background: rgba(189, 75, 68, 0.14) !important;
    color: #8a302a !important;
}

.login-container,
.register-container,
.payment-container,
.subscription-page,
.auth-page {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 245, 242, 0.96) 260px),
        var(--background-color) !important;
}

.subscription-header,
.stock-header,
.payment-title,
.page-header {
    color: var(--neutral-900-color) !important;
}

.plan-header,
.quota-item,
.events-list,
.modal-body {
    background: var(--surface-soft-color) !important;
}

.plan-card.active {
    border-color: var(--primary-color) !important;
    box-shadow: var(--box-shadow) !important;
}

.plan-price,
.quota-value,
.stock-value,
.stat-card h4 {
    color: var(--primary-color) !important;
}

.stock-value,
.quota-item {
    background: var(--primary-light-color) !important;
}

.stat-card::before {
    background: var(--card-color, var(--primary-color)) !important;
}

.stat-card.card-primary,
.stat-card.card-success,
.stat-card.card-warning,
.stat-card.card-danger,
.stat-card.card-info,
.graph-wrapper {
    background: var(--surface-color) !important;
    border-left-color: var(--card-color, var(--primary-color)) !important;
}

.stat-card.card-primary { --card-color: var(--primary-color) !important; }
.stat-card.card-success { --card-color: var(--success-color) !important; }
.stat-card.card-warning { --card-color: var(--warning-color) !important; }
.stat-card.card-danger { --card-color: var(--danger-color) !important; }
.stat-card.card-info { --card-color: var(--info-color) !important; }

.graph-wrapper[style],
.stat-card[style] {
    --card-color: var(--primary-color) !important;
}

.modal-content {
    border-radius: 8px !important;
    border: 1px solid var(--neutral-200-color) !important;
    box-shadow: 0 26px 80px rgba(17, 24, 23, 0.24) !important;
}

.modal-header {
    background:
        linear-gradient(90deg, rgba(184, 115, 51, 0.16), transparent 42%),
        var(--neutral-900-color) !important;
    color: #ffffff !important;
}

.modal-title,
.modal-header h5 {
    color: #ffffff !important;
}

.offcanvas {
    background: var(--surface-color) !important;
}

.footer-action {
    border-top: 1px solid var(--neutral-200-color) !important;
}

@media (max-width: 768px) {
    .card-footer,
    .action-buttons,
    .footer-action {
        display: grid !important;
        gap: 0.65rem !important;
    }

    .card-footer .btn,
    .action-buttons .btn,
    .action-buttons a,
    .footer-action .btn,
    .footer-action a {
        width: 100% !important;
    }
}