@media screen {
    body.translucent-page {
        background-image: url('/assets/backgrounds/background_0.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: #ffffff;
    }

    body.translucent-page .shell {
        background: transparent !important;
    }

    body.translucent-page .main {
        margin: 10px auto;
    }

    body.translucent-page .topbar {
        height: 36px !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        background: rgba(0, 0, 0, 0.20) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        font-family: Consolas, "Segoe UI", monospace !important;
    }

    body.translucent-page .topbar-left,
    body.translucent-page .user-area {
        display: flex !important;
        align-items: stretch !important;
        gap: 8px !important;
        height: 100% !important;
    }

    body.translucent-page .logo {
        font-weight: 700 !important;
        font-size: 14px !important;
        letter-spacing: 0.04em !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
        display: inline-flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    body.translucent-page .user-name,
    body.translucent-page .topbar-item,
    body.translucent-page .btn-logout {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }

    body.translucent-page .user-name {
        font-size: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        height: 100% !important;
        padding: 0 8px !important;
    }

    body.translucent-page .topbar-item {
        height: 100% !important;
        padding: 0 8px !important;
        border: none !important;
        background: transparent !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    body.translucent-page .topbar-item-icon {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    body.translucent-page .btn-logout,
    body.translucent-page .topbar-item {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.translucent-page .btn-logout:hover,
    body.translucent-page .btn-logout:focus-visible,
    body.translucent-page .topbar-item:hover,
    body.translucent-page .topbar-item:focus-visible {
        background: rgba(0, 0, 0, 0.18) !important;
        outline: none !important;
    }

    body.translucent-page .container,
    body.translucent-page .login-box,
    body.translucent-page .report-page-header,
    body.translucent-page .report-filters,
    body.translucent-page .report-kpi-card,
    body.translucent-page .report-chart-card,
    body.translucent-page .report-table-card,
    body.translucent-page .filters,
    body.translucent-page .modal-content,
    body.translucent-page .summary-card,
    body.translucent-page .form-card,
    body.translucent-page .stock-summary-card,
    body.translucent-page .movement-summary-card {
        background: rgba(0, 0, 0, 0.30);
        border: 1px solid rgba(255, 255, 255, 0.42);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #ffffff;
    }

    body.translucent-page .header,
    body.translucent-page .footer,
    body.translucent-page .footer-data,
    body.translucent-page .report-page-header,
    body.translucent-page .modal-content > h2,
    body.translucent-page .report-print-header {
        background: rgba(0, 0, 0, 0.24);
        border-color: rgba(255, 255, 255, 0.25);
    }

    body.translucent-page .selector-card,
    body.translucent-page .report-chart-card,
    body.translucent-page .report-table-card,
    body.translucent-page .report-kpi-card,
    body.translucent-page .tab-panel,
    body.translucent-page .details-panel,
    body.translucent-page .content-panel {
        background: rgba(0, 0, 0, 0.18);
        color: #ffffff;
    }

    body.translucent-page .header h1,
    body.translucent-page .header h2,
    body.translucent-page #editView .form-header,
    body.translucent-page h1,
    body.translucent-page h2,
    body.translucent-page h3,
    body.translucent-page h4,
    body.translucent-page .tab-title,
    body.translucent-page .form-section-title,
    body.translucent-page .field-label,
    body.translucent-page .sidebar-title,
    body.translucent-page .report-page-subtitle,
    body.translucent-page .report-kpi-label,
    body.translucent-page .report-filter-label,
    body.translucent-page label {
        color: #ffffff;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
    }

    body.translucent-page p,
    body.translucent-page span,
    body.translucent-page .field-hint,
    body.translucent-page .hint,
    body.translucent-page .tab-description,
    body.translucent-page .report-empty,
    body.translucent-page .settings-row-desc {
        color: rgba(255, 255, 255, 0.84);
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    }

    body.translucent-page .table-wrapper,
    body.translucent-page .report-table-wrapper {
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.14);
        overflow: auto;
    }

    body.translucent-page .activity-table,
    body.translucent-page .selector-table,
    body.translucent-page .movements-table,
    body.translucent-page #tblAudit {
        background: rgba(0, 0, 0, 0.10);
        color: #ffffff;
    }

    body.translucent-page .activity-table thead th,
    body.translucent-page .selector-table thead th,
    body.translucent-page .movements-table thead th,
    body.translucent-page #tblAudit thead th {
        background: rgba(0, 0, 0, 0.24) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.20) !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
    }

    body.translucent-page .activity-table tbody tr,
    body.translucent-page .selector-table tbody tr,
    body.translucent-page .movements-table tbody tr,
    body.translucent-page #tblAudit tbody tr {
        background: rgba(0, 0, 0, 0.10) !important;
        color: #ffffff !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
    }

    body.translucent-page .activity-table tbody td,
    body.translucent-page .selector-table tbody td,
    body.translucent-page .movements-table tbody td,
    body.translucent-page #tblAudit tbody td {
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    body.translucent-page .activity-table tbody tr:hover,
    body.translucent-page .selector-table tbody tr:hover,
    body.translucent-page .movements-table tbody tr:hover,
    body.translucent-page #tblAudit tbody tr:hover {
        background: rgba(255, 255, 255, 0.12) !important;
    }

    body.translucent-page .input-field,
    body.translucent-page .filter-select,
    body.translucent-page .filter-date,
    body.translucent-page .report-filter-input,
    body.translucent-page .report-filter-select,
    body.translucent-page input[type="text"],
    body.translucent-page input[type="number"],
    body.translucent-page input[type="password"],
    body.translucent-page input[type="email"],
    body.translucent-page input[type="date"],
    body.translucent-page input[type="datetime-local"],
    body.translucent-page select,
    body.translucent-page textarea {
        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        color: #ffffff !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    }

    body.translucent-page input::placeholder,
    body.translucent-page textarea::placeholder {
        color: rgba(255, 255, 255, 0.68) !important;
    }

    body.translucent-page .input-field:focus,
    body.translucent-page .filter-select:focus,
    body.translucent-page .filter-date:focus,
    body.translucent-page .report-filter-input:focus,
    body.translucent-page .report-filter-select:focus,
    body.translucent-page input:focus,
    body.translucent-page select:focus,
    body.translucent-page textarea:focus {
        background: rgba(255, 255, 255, 0.16) !important;
        border-color: var(--sirius-glow-border-color) !important;
        box-shadow: var(--sirius-glow-input-shadow) !important;
        outline: none;
    }

    body.translucent-page .btn-bar,
    body.translucent-page .btn-card,
    body.translucent-page .btn-primary,
    body.translucent-page .btn-secondary,
    body.translucent-page button {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.35);
        color: #ffffff;
        box-shadow: none;
    }

    body.translucent-page .btn-bar:hover,
    body.translucent-page .btn-card:hover,
    body.translucent-page .btn-primary:hover,
    body.translucent-page .btn-secondary:hover,
    body.translucent-page button:hover,
    body.translucent-page .btn-bar:focus-visible,
    body.translucent-page .btn-card:focus-visible,
    body.translucent-page .btn-primary:focus-visible,
    body.translucent-page .btn-secondary:focus-visible,
    body.translucent-page button:focus-visible {
        background: rgba(255, 255, 255, 0.22);
        border-color: var(--sirius-glow-border-color);
        box-shadow: var(--sirius-glow-button-shadow);
        outline: none;
    }

    body.translucent-page .btn-card.primary,
    body.translucent-page .btn-primary {
        background: rgba(var(--sirius-glow-rgb), 0.22);
        border-color: var(--sirius-glow-border-strong-color);
    }

    body.translucent-page .report-kpi-value,
    body.translucent-page .report-table-card,
    body.translucent-page .report-chart-card canvas,
    body.translucent-page .table-count-info,
    body.translucent-page .footer-icon {
        color: #ffffff;
    }

    body.translucent-page .sku-sidebar,
    body.translucent-page .settings-sidebar,
    body.translucent-page .sidebar {
        background: rgba(0, 0, 0, 0.20);
        border-right: 1px solid rgba(255, 255, 255, 0.22);
    }

    body.translucent-page .nav-item,
    body.translucent-page .settings-nav-item {
        color: rgba(255, 255, 255, 0.88);
    }

    body.translucent-page .nav-item:hover,
    body.translucent-page .settings-nav-item:hover {
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
    }

    body.translucent-page .nav-item.active,
    body.translucent-page .settings-nav-item.active {
        background: rgba(22, 101, 52, 0.24) !important;
        color: #ffffff !important;
        border-left-color: var(--sirius-glow-border-strong-color) !important;
    }

    body.translucent-page .status-badge,
    body.translucent-page .badge {
        box-shadow: none;
    }

    body.translucent-page .status-badge.status-active,
    body.translucent-page .status-active,
    body.translucent-page .badge.active,
    body.translucent-page .stock-badge.ok,
    body.translucent-page .direction-badge.in,
    body.translucent-page .sale-status-finalized,
    body.translucent-page .badge-status.ativa {
        color: #166534 !important;
    }

    body.translucent-page .sale-status-badge.sale-status-finalized {
        color: #065f46 !important;
    }

    body.translucent-page .open-sale-badge,
    body.translucent-page .stock-badge.low,
    body.translucent-page .sale-status-returned,
    body.translucent-page .badge-type,
    body.translucent-page .badge-event {
        color: #92400e !important;
    }

    body.translucent-page .status-badge.status-inactive,
    body.translucent-page .status-inactive,
    body.translucent-page .badge.inactive,
    body.translucent-page .stock-badge.critical,
    body.translucent-page .direction-badge.out,
    body.translucent-page .sale-status-canceled,
    body.translucent-page .item-status-returned,
    body.translucent-page .refund-value-badge,
    body.translucent-page .badge-status.inativa {
        color: #991b1b !important;
    }

    body.translucent-page .item-status-sold {
        color: #1d4ed8 !important;
    }

    body.translucent-page .badge-status.futura {
        color: #1e3a5f !important;
    }

    body.translucent-page .badge-status.encerrada,
    body.translucent-page .payment-summary-label,
    body.translucent-page .refund-summary-label {
        color: #374151 !important;
    }

    body.translucent-page .payment-summary-positive,
    body.translucent-page .refund-summary-positive {
        color: #047857 !important;
    }

    body.translucent-page .payment-summary-negative,
    body.translucent-page .refund-summary-negative {
        color: #b91c1c !important;
    }

    body.translucent-page ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    body.translucent-page ::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.10);
    }

    body.translucent-page ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.42);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
    }

    body.translucent-page ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.55);
    }
}