/* ========================================================================== 
   EWER 2.0 CMS — INTERNAL DATA + FORM TRANSPARENCY v36 (v1.0.73)

   Approved visual scope only:
   - make authenticated cards, form sections, filters and tables visibly
     translucent so the existing HRC watermark can be seen underneath;
   - keep text, icons, badges and action buttons fully opaque;
   - preserve authentication, API, database, navigation and workflows.
   ========================================================================== */

:root {
    --ewer-web-content-surface: rgba(255, 255, 255, 0.76);
    --ewer-web-section-surface: rgba(255, 255, 255, 0.70);
    --ewer-web-table-surface: rgba(255, 255, 255, 0.58);
    --ewer-web-table-head-surface: rgba(238, 244, 252, 0.76);
    --ewer-web-table-row-surface: rgba(255, 255, 255, 0.24);
    --ewer-web-table-row-alt-surface: rgba(255, 255, 255, 0.34);
    --ewer-web-table-row-hover-surface: rgba(255, 255, 255, 0.52);
    --ewer-web-control-surface: rgba(255, 255, 255, 0.86);
    --ewer-web-readonly-surface: rgba(242, 247, 253, 0.84);
    --ewer-web-modal-surface: rgba(255, 255, 255, 0.84);
    --ewer-web-surface-border: rgba(37, 87, 214, 0.15);
    --ewer-web-surface-shadow: 0 12px 32px rgba(23, 58, 112, 0.07);
}

/* Authenticated page cards and data/form surfaces. Background shorthand is
   intentionally overridden so older opaque gradients cannot hide the HRC mark. */
#appScreen:not(.hidden) .app-main .card,
#appScreen:not(.hidden) .app-main .stat-card,
#appScreen:not(.hidden) .app-main .chart-card,
#appScreen:not(.hidden) .app-main .content-card,
#appScreen:not(.hidden) .app-main .data-card,
#appScreen:not(.hidden) .app-main .dashboard-card,
#appScreen:not(.hidden) .app-main .analytics-card,
#appScreen:not(.hidden) .app-main .report-card,
#appScreen:not(.hidden) .app-main .settings-card,
#appScreen:not(.hidden) .app-main .profile-card,
#appScreen:not(.hidden) .app-main .security-settings-card,
#appScreen:not(.hidden) .app-main .panel,
#appScreen:not(.hidden) .app-main .form-card,
#appScreen:not(.hidden) .app-main .form-panel,
#appScreen:not(.hidden) .app-main .form-container,
#appScreen:not(.hidden) .app-main .form-section,
#appScreen:not(.hidden) .app-main .pfs-form,
#appScreen:not(.hidden) .app-main .pfs-form-section,
#appScreen:not(.hidden) .app-main .pfs-choice-card,
#appScreen:not(.hidden) .app-main form:not(.auth-form),
#appScreen:not(.hidden) .app-main fieldset {
    background: var(--ewer-web-content-surface) !important;
    background-image: none !important;
    border-color: var(--ewer-web-surface-border) !important;
    box-shadow: var(--ewer-web-surface-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Card internals must not restore an opaque white sheet. */
#appScreen:not(.hidden) .app-main .card-header,
#appScreen:not(.hidden) .app-main .card-body,
#appScreen:not(.hidden) .app-main .pfs-section-body,
#appScreen:not(.hidden) .app-main .panel-body,
#appScreen:not(.hidden) .app-main .content-body {
    background: transparent !important;
    background-image: none !important;
}

/* Search/filter bars and ordinary form sections. */
#appScreen:not(.hidden) .app-main .filter-toolbar,
#appScreen:not(.hidden) .app-main .filter-panel,
#appScreen:not(.hidden) .app-main .filters-form,
#appScreen:not(.hidden) .app-main .search-form,
#appScreen:not(.hidden) .app-main .pipeline-filter-toolbar,
#appScreen:not(.hidden) .app-main .form-grid,
#appScreen:not(.hidden) .app-main .form-row,
#appScreen:not(.hidden) .app-main .form-group {
    background-color: transparent !important;
    background-image: none !important;
}

/* Data tables are part of the form/work surface in records screens. */
#appScreen:not(.hidden) .app-main .table-container,
#appScreen:not(.hidden) .app-main .user-table-container {
    background: var(--ewer-web-table-surface) !important;
    background-image: none !important;
    border-color: var(--ewer-web-surface-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#appScreen:not(.hidden) .app-main table.table,
#appScreen:not(.hidden) .app-main table.professional-data-table,
#appScreen:not(.hidden) .app-main .table tbody {
    background: transparent !important;
    background-image: none !important;
}

#appScreen:not(.hidden) .app-main .table thead,
#appScreen:not(.hidden) .app-main .professional-data-table thead {
    background: var(--ewer-web-table-head-surface) !important;
    background-image: none !important;
}

#appScreen:not(.hidden) .app-main .table tbody tr,
#appScreen:not(.hidden) .app-main .professional-data-table tbody tr {
    background: var(--ewer-web-table-row-surface) !important;
    background-image: none !important;
}

#appScreen:not(.hidden) .app-main .table tbody tr:nth-child(even),
#appScreen:not(.hidden) .app-main .professional-data-table tbody tr:nth-child(even) {
    background: var(--ewer-web-table-row-alt-surface) !important;
}

#appScreen:not(.hidden) .app-main .table tbody tr:hover,
#appScreen:not(.hidden) .app-main .professional-data-table tbody tr:hover {
    background: var(--ewer-web-table-row-hover-surface) !important;
}

#appScreen:not(.hidden) .app-main .table th,
#appScreen:not(.hidden) .app-main .table td,
#appScreen:not(.hidden) .app-main .professional-data-table th,
#appScreen:not(.hidden) .app-main .professional-data-table td {
    background-color: transparent !important;
    background-image: none !important;
}

/* Inputs, selects and text areas retain high readability with visible translucency. */
#appScreen:not(.hidden) .app-main .form-input,
#appScreen:not(.hidden) .app-main .form-select,
#appScreen:not(.hidden) .app-main .form-control,
#appScreen:not(.hidden) .app-main .input-control,
#appScreen:not(.hidden) .app-main .input-shell,
#appScreen:not(.hidden) .app-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
#appScreen:not(.hidden) .app-main select,
#appScreen:not(.hidden) .app-main textarea,
.modal-content .form-input,
.modal-content .form-select,
.modal-content .form-control,
.modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.modal-content select,
.modal-content textarea {
    background: var(--ewer-web-control-surface) !important;
    background-image: none !important;
    border-color: var(--ewer-web-surface-border) !important;
}

#appScreen:not(.hidden) .app-main input[readonly],
#appScreen:not(.hidden) .app-main textarea[readonly],
#appScreen:not(.hidden) .app-main input:disabled,
#appScreen:not(.hidden) .app-main select:disabled,
#appScreen:not(.hidden) .app-main textarea:disabled {
    background: var(--ewer-web-readonly-surface) !important;
}

/* Modals and drawers remain slightly more solid than page forms. */
.modal-content,
.modal-body,
.record-form-modal,
.auth-recovery-modal,
.auth-required-update-modal,
.dialog-content,
.drawer-content,
.offcanvas-body,
.pfs-view-modal .modal,
.pfs-view-modal .card {
    background: var(--ewer-web-modal-surface) !important;
    background-image: none !important;
    border-color: var(--ewer-web-surface-border) !important;
}

/* Text, icons, badges and buttons remain fully opaque. */
#appScreen:not(.hidden) .app-main .btn,
#appScreen:not(.hidden) .app-main .badge,
#appScreen:not(.hidden) .app-main i,
#appScreen:not(.hidden) .app-main svg,
#appScreen:not(.hidden) .app-main img {
    opacity: 1 !important;
}

/* Dark mode equivalent. */
html.dark #appScreen:not(.hidden) .app-main .card,
body.dark-mode #appScreen:not(.hidden) .app-main .card,
html.dark #appScreen:not(.hidden) .app-main .stat-card,
body.dark-mode #appScreen:not(.hidden) .app-main .stat-card,
html.dark #appScreen:not(.hidden) .app-main .chart-card,
body.dark-mode #appScreen:not(.hidden) .app-main .chart-card,
html.dark #appScreen:not(.hidden) .app-main .form-card,
body.dark-mode #appScreen:not(.hidden) .app-main .form-card,
html.dark #appScreen:not(.hidden) .app-main .form-section,
body.dark-mode #appScreen:not(.hidden) .app-main .form-section,
html.dark #appScreen:not(.hidden) .app-main .pfs-form-section,
body.dark-mode #appScreen:not(.hidden) .app-main .pfs-form-section,
html.dark #appScreen:not(.hidden) .app-main form:not(.auth-form),
body.dark-mode #appScreen:not(.hidden) .app-main form:not(.auth-form),
html.dark .modal-content,
body.dark-mode .modal-content,
html.dark .modal-body,
body.dark-mode .modal-body {
    background: rgba(15, 27, 46, 0.78) !important;
    background-image: none !important;
    border-color: rgba(125, 162, 255, 0.18) !important;
}

html.dark #appScreen:not(.hidden) .app-main .table-container,
body.dark-mode #appScreen:not(.hidden) .app-main .table-container,
html.dark #appScreen:not(.hidden) .app-main .user-table-container,
body.dark-mode #appScreen:not(.hidden) .app-main .user-table-container {
    background: rgba(15, 27, 46, 0.60) !important;
}

html.dark #appScreen:not(.hidden) .app-main .table thead,
body.dark-mode #appScreen:not(.hidden) .app-main .table thead,
html.dark #appScreen:not(.hidden) .app-main .professional-data-table thead,
body.dark-mode #appScreen:not(.hidden) .app-main .professional-data-table thead {
    background: rgba(23, 39, 64, 0.78) !important;
}

html.dark #appScreen:not(.hidden) .app-main .table tbody tr,
body.dark-mode #appScreen:not(.hidden) .app-main .table tbody tr,
html.dark #appScreen:not(.hidden) .app-main .professional-data-table tbody tr,
body.dark-mode #appScreen:not(.hidden) .app-main .professional-data-table tbody tr {
    background: rgba(15, 27, 46, 0.28) !important;
}

html.dark #appScreen:not(.hidden) .app-main .table tbody tr:nth-child(even),
body.dark-mode #appScreen:not(.hidden) .app-main .table tbody tr:nth-child(even),
html.dark #appScreen:not(.hidden) .app-main .professional-data-table tbody tr:nth-child(even),
body.dark-mode #appScreen:not(.hidden) .app-main .professional-data-table tbody tr:nth-child(even) {
    background: rgba(15, 27, 46, 0.40) !important;
}

html.dark #appScreen:not(.hidden) .app-main .form-input,
html.dark #appScreen:not(.hidden) .app-main .form-select,
html.dark #appScreen:not(.hidden) .app-main .form-control,
html.dark #appScreen:not(.hidden) .app-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
html.dark #appScreen:not(.hidden) .app-main select,
html.dark #appScreen:not(.hidden) .app-main textarea,
body.dark-mode #appScreen:not(.hidden) .app-main .form-input,
body.dark-mode #appScreen:not(.hidden) .app-main .form-select,
body.dark-mode #appScreen:not(.hidden) .app-main .form-control,
body.dark-mode #appScreen:not(.hidden) .app-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
body.dark-mode #appScreen:not(.hidden) .app-main select,
body.dark-mode #appScreen:not(.hidden) .app-main textarea {
    background: rgba(18, 32, 53, 0.88) !important;
}