/* Cloud SEMS Soft UI layer. All rules are inert without .sems-neumorphic. */
.sems-neumorphic {
    --sems-soft-bg: #e9eef2;
    --sems-soft-surface: #e9eef2;
    --sems-soft-highlight: rgba(255, 255, 255, 0.82);
    --sems-soft-shadow: rgba(164, 174, 182, 0.52);
    --sems-soft-inset-light: rgba(255, 255, 255, 0.72);
    --sems-soft-inset-dark: rgba(174, 184, 192, 0.42);
    --sems-soft-radius: 0.75rem;
    --sems-soft-border: rgba(87, 103, 113, 0.22);
    --sems-soft-hover: rgba(22, 135, 91, 0.08);
    --sems-page-bg: var(--sems-soft-bg);
    --sems-surface-bg: var(--sems-soft-surface);
    --sems-surface-soft-bg: var(--sems-soft-surface);
    --sems-surface-border: var(--sems-soft-border);
    --sems-table-bg: var(--sems-soft-surface);
    --sems-table-striped-bg: var(--sems-soft-surface);
    --sems-table-hover-bg: var(--sems-soft-hover);
    --sems-input-bg: var(--sems-soft-surface);
    --sems-input-border: transparent;
    --sems-shadow:
        0.3rem 0.3rem 0.7rem var(--sems-soft-shadow),
        -0.25rem -0.25rem 0.65rem var(--sems-soft-highlight);
    --ct-border-color: var(--sems-soft-border);
    --ct-secondary-bg: var(--sems-soft-surface);
    --ct-tertiary-bg: var(--sems-soft-surface);
    --ct-menu-bg: var(--sems-soft-surface);
    --ct-menu-item-color: #596870;
    --ct-menu-item-hover-color: #16875b;
    --ct-menu-item-active-color: #0d5f41;
    --ct-menu-condensed-link-bg: rgba(22, 135, 91, 0.14);
    --ct-topbar-bg: var(--sems-soft-surface);
    --ct-topbar-item-color: #596870;
    --ct-topbar-item-hover-color: #16875b;
    --ct-topbar-search-bg: var(--sems-soft-surface);
    --ct-topbar-user-bg: transparent;
    --ct-topbar-user-border: transparent;
}

.sems-neumorphic[data-bs-theme="dark"] {
    --sems-soft-bg: #1d262b;
    --sems-soft-surface: #1d262b;
    --sems-soft-highlight: rgba(43, 55, 61, 0.34);
    --sems-soft-shadow: rgba(7, 11, 13, 0.55);
    --sems-soft-inset-light: rgba(46, 59, 65, 0.36);
    --sems-soft-inset-dark: rgba(7, 11, 13, 0.58);
    --sems-soft-border: rgba(136, 155, 165, 0.16);
    --sems-soft-hover: rgba(63, 174, 122, 0.1);
    --ct-menu-bg: var(--sems-soft-surface);
    --ct-menu-item-color: #b8c5cb;
    --ct-menu-item-hover-color: #f1f5f7;
    --ct-menu-item-active-color: #ffffff;
    --ct-menu-condensed-link-bg: rgba(63, 174, 122, 0.2);
    --ct-topbar-bg: var(--sems-soft-surface);
    --ct-topbar-item-color: #b8c5cb;
    --ct-topbar-item-hover-color: #ffffff;
    --ct-topbar-search-bg: var(--sems-soft-surface);
    --ct-topbar-user-bg: transparent;
    --ct-topbar-user-border: transparent;
}

/* Dashboard pages define their own palette after the shared stylesheet. */
.sems-neumorphic .content-page {
    --sems-page-bg: var(--sems-soft-bg);
    --sems-surface-bg: var(--sems-soft-surface);
    --sems-surface-soft-bg: var(--sems-soft-surface);
    --sems-surface-border: var(--sems-soft-border);
    --sems-table-bg: var(--sems-soft-surface);
    --sems-table-striped-bg: var(--sems-soft-surface);
    --sems-table-hover-bg: var(--sems-soft-hover);
    --sems-input-bg: var(--sems-soft-surface);
    --sems-input-border: transparent;
    --sems-shadow:
        0.3rem 0.3rem 0.7rem var(--sems-soft-shadow),
        -0.25rem -0.25rem 0.65rem var(--sems-soft-highlight);
    --dashboard-bg: var(--sems-soft-bg);
    --dashboard-card-bg: var(--sems-soft-surface);
    --dashboard-card-bg-soft: var(--sems-soft-surface);
    --dashboard-card-border: transparent;
    --dashboard-shadow:
        0.3rem 0.3rem 0.7rem var(--sems-soft-shadow),
        -0.25rem -0.25rem 0.65rem var(--sems-soft-highlight);
}

.sems-neumorphic[data-bs-theme="dark"] .content-page {
    --dashboard-bg: var(--sems-soft-bg);
    --dashboard-card-bg: var(--sems-soft-surface);
    --dashboard-card-bg-soft: var(--sems-soft-surface);
    --dashboard-card-border: transparent;
    --dashboard-table-head: var(--sems-soft-surface);
    --dashboard-table-first: var(--sems-soft-surface);
    --dashboard-row-bg: var(--sems-soft-surface);
}

/* Override Hyper's data-attribute menu palette only while Soft UI is active. */
.sems-neumorphic[data-menu-color][data-topbar-color] {
    --ct-menu-bg: var(--sems-soft-surface);
    --ct-menu-item-color: #596870;
    --ct-menu-item-hover-color: #16875b;
    --ct-menu-item-active-color: #0d5f41;
    --ct-menu-condensed-link-bg: rgba(22, 135, 91, 0.14);
    --ct-topbar-bg: var(--sems-soft-surface);
    --ct-topbar-item-color: #596870;
    --ct-topbar-item-hover-color: #16875b;
    --ct-topbar-search-bg: var(--sems-soft-surface);
    --ct-topbar-user-bg: transparent;
    --ct-topbar-user-border: transparent;
}

.sems-neumorphic[data-bs-theme="dark"][data-menu-color][data-topbar-color] {
    --ct-menu-item-color: #b8c5cb;
    --ct-menu-item-hover-color: #f1f5f7;
    --ct-menu-item-active-color: #ffffff;
    --ct-menu-condensed-link-bg: rgba(63, 174, 122, 0.2);
    --ct-topbar-item-color: #b8c5cb;
    --ct-topbar-item-hover-color: #ffffff;
}

.sems-neumorphic body,
.sems-neumorphic .content-page,
.sems-neumorphic .account-pages {
    background-color: var(--sems-soft-bg);
}

.sems-neumorphic :where(.card):not([class*="bg-"]) {
    background-color: var(--sems-soft-surface);
    border-color: transparent;
    border-radius: var(--sems-soft-radius);
    box-shadow:
        0.3rem 0.3rem 0.7rem var(--sems-soft-shadow),
        -0.25rem -0.25rem 0.65rem var(--sems-soft-highlight);
}

.sems-neumorphic .content-page :where(.card, .chart-content-bg, .card-body) {
    border-color: var(--sems-soft-border);
}

.sems-neumorphic :where(
    .card-footer,
    .list-group-item,
    .accordion-item,
    .accordion-button,
    .accordion-button:not(.collapsed)
) {
    background: var(--sems-soft-surface);
    border-color: var(--sems-soft-border);
    color: var(--ct-body-color);
}

.sems-neumorphic .accordion-button:focus {
    border-color: transparent;
    box-shadow: 0 0 0 0.15rem rgba(var(--ct-primary-rgb), 0.18);
}

.sems-neumorphic .content-page :where(.chart-content-bg) {
    background: var(--sems-soft-surface) !important;
    box-shadow: var(--sems-shadow);
}

.sems-neumorphic :where(.card-header):not([class*="bg-"]) {
    background-color: transparent;
}

.sems-neumorphic .content-page .card-header:not([class*="bg-"]),
.sems-neumorphic .content-page .device-status-header,
.sems-neumorphic .content-page .plant-generation-header {
    background: var(--sems-soft-surface) !important;
    border-bottom-color: var(--sems-soft-inset-dark);
}

.sems-neumorphic[data-bs-theme="dark"] .content-page
    :where(.plant-generation-table, .device-status-table)
    :where(th, td) {
    background: var(--sems-soft-surface) !important;
    box-shadow: inset 0 -1px var(--sems-soft-highlight);
}

.sems-neumorphic[data-bs-theme="dark"] .content-page
    :where(.plant-generation-table, .device-status-table)
    tbody td:first-child {
    background: var(--sems-soft-surface) !important;
}

.sems-neumorphic[data-bs-theme="dark"] .content-page
    :where(.plant-generation-table, .device-status-table)
    thead th {
    color: var(--dashboard-heading) !important;
}

.sems-neumorphic[data-bs-theme="dark"] .content-page
    :where(.plant-generation-table, .device-status-table)
    thead th i {
    color: #8fe8d0;
}

.sems-neumorphic {
    scrollbar-color: var(--sems-soft-inset-light) var(--sems-soft-bg);
}

.sems-neumorphic ::-webkit-scrollbar-track {
    background: var(--sems-soft-bg);
}

.sems-neumorphic ::-webkit-scrollbar-thumb {
    background: var(--sems-soft-inset-light);
    border: 2px solid var(--sems-soft-bg);
    border-radius: 999px;
}

.sems-neumorphic :where(.form-control, .form-select) {
    background-color: var(--sems-soft-surface);
    border-color: transparent;
    box-shadow:
        inset 0.18rem 0.18rem 0.38rem var(--sems-soft-inset-dark),
        inset -0.18rem -0.18rem 0.38rem var(--sems-soft-inset-light);
}

.sems-neumorphic :where(.form-control, .form-select):focus {
    background-color: var(--sems-soft-surface);
    border-color: rgba(var(--ct-primary-rgb), 0.72);
    box-shadow:
        inset 0.18rem 0.18rem 0.38rem var(--sems-soft-inset-dark),
        inset -0.18rem -0.18rem 0.38rem var(--sems-soft-inset-light),
        0 0 0 0.15rem rgba(var(--ct-primary-rgb), 0.18);
}

.sems-neumorphic :where(.form-control, .form-select):disabled,
.sems-neumorphic :where(.form-control, .form-select)[readonly] {
    opacity: 0.62;
}

.sems-neumorphic .input-group-text {
    background-color: var(--sems-soft-surface);
    border-color: transparent;
}

/* Tabs stay navigational rather than appearing as another set of cards. */
.sems-neumorphic :where(.nav-tabs, .nav-pills, .bg-nav-pills) {
    background: transparent !important;
    border-color: var(--sems-soft-border);
    box-shadow: none;
    gap: 0.25rem;
}

.sems-neumorphic :where(.nav-tabs, .nav-pills) .nav-link {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ct-secondary-color);
}

.sems-neumorphic :where(.nav-tabs, .nav-pills) .nav-link:hover,
.sems-neumorphic :where(.nav-tabs, .nav-pills) .nav-link:focus {
    color: var(--ct-heading-color);
}

.sems-neumorphic :where(.nav-tabs, .nav-pills) .nav-link.active,
.sems-neumorphic :where(.nav-tabs, .nav-pills) .show > .nav-link {
    background: transparent !important;
    border-bottom-color: #16875b !important;
    color: var(--ct-heading-color) !important;
    font-weight: 800;
}

/* DataTables use one surface; hierarchy comes from type and subtle separators. */
.sems-neumorphic .content-page :where(
    .dataTables_wrapper,
    .dataTables_scroll,
    .dataTables_scrollHead,
    .dataTables_scrollHeadInner,
    .dataTables_scrollBody,
    .table-responsive
) {
    background: var(--sems-soft-surface) !important;
    border-color: transparent !important;
    color: var(--ct-body-color) !important;
}

.sems-neumorphic .content-page .dataTables_wrapper > :where(.row:first-child, .row:last-child) {
    background: var(--sems-soft-surface);
    color: var(--ct-body-color);
}

.sems-neumorphic .content-page :where(table.dataTable, table.table, #reportTable) {
    --ct-table-bg: var(--sems-soft-surface);
    --ct-table-striped-bg: var(--sems-soft-surface);
    --ct-table-hover-bg: var(--sems-soft-hover);
    --ct-table-border-color: var(--sems-soft-border);
    background: var(--sems-soft-surface) !important;
    border-color: transparent !important;
    color: var(--ct-body-color) !important;
}

.sems-neumorphic .content-page :where(table.dataTable, table.table, #reportTable)
    :where(thead, thead tr, thead th, thead td) {
    background: var(--sems-soft-surface) !important;
    border-color: var(--sems-soft-border) !important;
    color: var(--ct-heading-color) !important;
}

.sems-neumorphic .content-page :where(table.dataTable, table.table, #reportTable)
    :where(tbody, tbody tr, tbody th, tbody td) {
    background: var(--sems-soft-surface) !important;
    border-color: var(--sems-soft-border) !important;
    color: var(--ct-body-color) !important;
}

.sems-neumorphic .content-page :where(table.dataTable, table.table, #reportTable)
    tbody tr:hover :where(th, td) {
    background: var(--sems-soft-hover) !important;
    color: var(--ct-heading-color) !important;
}

.sems-neumorphic .content-page .dataTables_wrapper
    :where(.dataTables_filter input, .dataTables_length select) {
    background: var(--sems-soft-surface) !important;
    border-color: transparent !important;
    box-shadow:
        inset 0.18rem 0.18rem 0.38rem var(--sems-soft-inset-dark),
        inset -0.18rem -0.18rem 0.38rem var(--sems-soft-inset-light);
    color: var(--ct-body-color) !important;
}

.sems-neumorphic .content-page .dataTables_wrapper
    .dataTables_paginate .paginate_button {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    color: var(--ct-body-color) !important;
}

.sems-neumorphic .content-page .dataTables_wrapper
    .dataTables_paginate .paginate_button:hover {
    background: var(--sems-soft-hover) !important;
    border-color: transparent !important;
    color: var(--ct-heading-color) !important;
}

.sems-neumorphic .content-page .dataTables_wrapper
    .dataTables_paginate .paginate_button.current,
.sems-neumorphic .content-page .dataTables_wrapper
    .dataTables_paginate .paginate_button.current:hover {
    background: #16875b !important;
    border-color: #16875b !important;
    color: #ffffff !important;
}

/* Footer and secondary overlays belong to the same surface family. */
.sems-neumorphic :where(.footer, .footer-alt) {
    background: var(--sems-soft-surface) !important;
    border-top: 1px solid var(--sems-soft-border);
    box-shadow: 0 -0.2rem 0.55rem var(--sems-soft-shadow);
    color: var(--ct-secondary-color);
}

.sems-neumorphic .content-page + .footer,
.sems-neumorphic .content-page .footer {
    background: var(--sems-soft-surface) !important;
    border-top-color: var(--sems-soft-border) !important;
}

.sems-neumorphic .footer .footer-links a,
.sems-neumorphic .footer a {
    color: var(--ct-secondary-color);
}

.sems-neumorphic .footer .footer-links a:hover,
.sems-neumorphic .footer a:hover {
    color: var(--ct-heading-color);
}

.sems-neumorphic :where(.modal-content, .offcanvas, .dropdown-menu, .toast) {
    background: var(--sems-soft-surface);
    border-color: var(--sems-soft-border);
}

.sems-neumorphic :where(.modal-header, .modal-footer, .offcanvas-header) {
    background: var(--sems-soft-surface);
    border-color: var(--sems-soft-border);
}

/* Sites overview: one surface with inset hierarchy for compact KPI data. */
.sems-neumorphic .content-page .site-overview-card {
    background: var(--sems-soft-surface) !important;
    border-color: transparent !important;
}

.sems-neumorphic .content-page .site-overview-header {
    background: var(--sems-soft-surface) !important;
    border-bottom-color: var(--sems-soft-border) !important;
}

.sems-neumorphic .content-page .site-overview-kpi {
    background: var(--sems-soft-surface) !important;
    border-color: transparent !important;
    border-radius: 0.55rem;
    box-shadow:
        inset 0.14rem 0.14rem 0.32rem var(--sems-soft-inset-dark),
        inset -0.14rem -0.14rem 0.32rem var(--sems-soft-inset-light);
}

.sems-neumorphic .content-page .site-overview-kpi-label {
    background: transparent !important;
    border-bottom-color: var(--sems-soft-border) !important;
}

.sems-neumorphic .content-page .site-overview-section-title {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sems-soft-border) !important;
    border-radius: 0;
}

.sems-neumorphic .content-page .site-summary-table :where(th, td) {
    background: var(--sems-soft-surface) !important;
    border-color: transparent !important;
    box-shadow:
        inset 0.12rem 0.12rem 0.28rem var(--sems-soft-inset-dark),
        inset -0.12rem -0.12rem 0.28rem var(--sems-soft-inset-light);
}

.sems-neumorphic .content-page .site-summary-table
    :where(th:first-child, td:first-child) {
    text-align: left;
}

/* Estimated Loss: flatten legacy gray panels into the shared Soft UI surface. */
.sems-neumorphic .content-page .loss-widget {
    background: var(--sems-soft-surface) !important;
    border-color: transparent !important;
    box-shadow: var(--sems-shadow);
}

.sems-neumorphic .content-page .loss-widget-header {
    background: var(--sems-soft-surface) !important;
    border-bottom-color: var(--sems-soft-border) !important;
}

.sems-neumorphic .content-page :where(.loss-metric-header, .loss-metric-cell) {
    background: var(--sems-soft-surface) !important;
    border-color: transparent !important;
    border-radius: 0.55rem;
    box-shadow:
        inset 0.14rem 0.14rem 0.32rem var(--sems-soft-inset-dark),
        inset -0.14rem -0.14rem 0.32rem var(--sems-soft-inset-light);
}

.sems-neumorphic .content-page .loss-metric-header {
    color: var(--ct-secondary-color);
}

.sems-neumorphic .content-page .loss-metric-cell-primary {
    background: var(--sems-soft-surface) !important;
}

.sems-neumorphic .content-page .loss-availability-tile {
    background: var(--sems-soft-surface) !important;
    border-color: transparent !important;
    border-radius: 0.55rem;
    box-shadow:
        inset 0.14rem 0.14rem 0.32rem var(--sems-soft-inset-dark),
        inset -0.14rem -0.14rem 0.32rem var(--sems-soft-inset-light);
}

.sems-neumorphic .content-page .loss-summary-scroll {
    scrollbar-color: var(--sems-soft-inset-light) var(--sems-soft-surface);
}

.sems-neumorphic .leftside-menu {
    border-right: 0;
    box-shadow:
        0.3rem 0 0.8rem var(--sems-soft-shadow),
        inset -1px 0 var(--sems-soft-highlight);
}

.sems-neumorphic .navbar-custom {
    background-color: var(--sems-soft-surface);
    box-shadow:
        0 0.25rem 0.65rem var(--sems-soft-shadow),
        inset 0 -1px var(--sems-soft-highlight);
}

.sems-neumorphic .side-nav .side-nav-link {
    margin: 0.12rem 0.65rem;
    border-radius: 0.6rem;
}

.sems-neumorphic .side-nav .side-nav-link:hover,
.sems-neumorphic .side-nav .side-nav-link:focus,
.sems-neumorphic .side-nav .menuitem-active > .side-nav-link,
.sems-neumorphic .side-nav .side-nav-item.active > .side-nav-link {
    background-color: var(--sems-soft-surface);
    box-shadow:
        inset 0.14rem 0.14rem 0.32rem var(--sems-soft-inset-dark),
        inset -0.14rem -0.14rem 0.32rem var(--sems-soft-inset-light);
}

.sems-neumorphic .side-nav .side-nav-title {
    color: var(--ct-menu-item-color);
    opacity: 0.72;
}

.sems-neumorphic .navbar-custom .dropdown-menu {
    background-color: var(--sems-soft-surface);
    border-color: transparent;
    box-shadow:
        0.3rem 0.3rem 0.7rem var(--sems-soft-shadow),
        -0.2rem -0.2rem 0.5rem var(--sems-soft-highlight);
}

.sems-neumorphic :where(.btn):not(.btn-link):not(.btn-close) {
    border-radius: 0.6rem;
    box-shadow: 0.2rem 0.2rem 0.45rem var(--sems-soft-shadow);
}

.sems-neumorphic :where(.btn):not(.btn-link):not(.btn-close):active,
.sems-neumorphic :where(.btn.active):not(.btn-link):not(.btn-close) {
    box-shadow: inset 0.15rem 0.15rem 0.35rem rgba(0, 0, 0, 0.22);
}

.sems-neumorphic :where(.btn):disabled {
    box-shadow: none;
    opacity: 0.58;
}

/* Status fills remain color-based for accessibility; only their surface lifts. */
.sems-neumorphic :where(.badge, .alert) {
    box-shadow: 0.12rem 0.12rem 0.28rem var(--sems-soft-shadow);
}

@media (prefers-reduced-motion: reduce) {
    .sems-neumorphic *,
    .sems-neumorphic *::before,
    .sems-neumorphic *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}