/* H2O / JUNO — application-wide UI (loads after Universal Theme + darkmode.css) */
@font-face {
    font-family: "Cairo";
    src: url(#APP_FILES#Cairo-Regular.otf);
    font-display: swap;
}

:root {
    --h2o-navy: #1e3a8a;
    --h2o-blue: #2563eb;
    --h2o-blue-deep: #1d4ed8;
    --h2o-sky: #0ea5e9;
    --h2o-ink: #0f172a;
    --h2o-muted: #64748b;
    --h2o-line: #e2e8f0;
    --h2o-canvas: #f1f5f9;
    --h2o-card: #ffffff;
    --h2o-header: #ffffff;
    --h2o-region-header: linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
    --h2o-hover: #f8fafc;
    --h2o-active: #eff6ff;
    --h2o-th: #f8fafc;
    --h2o-row-hover: #f8fbff;
    --h2o-field-bg: #ffffff;
    --h2o-radius: 16px;
    --h2o-radius-sm: 12px;
    --h2o-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

body.dark-mode {
    --h2o-navy: #93c5fd;
    --h2o-ink: #e2e8f0;
    --h2o-muted: #94a3b8;
    --h2o-line: #1e293b;
    --h2o-canvas: #0f172a;
    --h2o-card: #020617;
    --h2o-header: #020617;
    --h2o-region-header: linear-gradient(180deg, #020617 0%, #0f172a 100%);
    --h2o-hover: #1e293b;
    --h2o-active: #1e3a8a;
    --h2o-th: #0f172a;
    --h2o-row-hover: #1e293b;
    --h2o-field-bg: #020617;
    --h2o-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}

html,
body,
.a-Page,
.t-PageBody,
.t-PageBody--login,
button,
input,
select,
textarea {
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif !important;
}

body {
    background: var(--h2o-canvas) !important;
    color: var(--h2o-ink);
}

/* ---------- Header ---------- */
.t-Header,
.t-Header-branding,
.t-Header-navBar {
    background: var(--h2o-header) !important;
}
.t-Header {
    box-shadow: 0 1px 0 var(--h2o-line), 0 10px 24px rgba(15, 23, 42, 0.05) !important;
    border-bottom: 0 !important;
}
.t-Header-logo img {
    max-height: 40px;
}
.t-Header-navBar .t-Button,
.t-Header .t-Button--header {
    border-radius: 999px !important;
}

/* Numeric notification badges only — gym logo also uses .t-Button-badge */
.t-Header .t-Button--navBar .t-Button-badge:not(:has(img)),
.t-Button--navBar .t-Button-badge:not(:has(img)) {
    background: #ef4444 !important;
    color: #fff !important;
    border-radius: 999px !important;
}

.t-Header .t-Button--navBar:has(.t-Button-badge img) {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 2px !important;
    min-height: 0;
    height: auto !important;
}
.t-Header .t-Button--navBar .t-Button-badge:has(img) {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.t-Header .t-Button--navBar .t-Button-badge img,
.t-Header img.h2o-gym-logo {
    width: 44px !important;
    height: 44px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: block !important;
}

/* ---------- Side navigation ---------- */
.t-Body-nav,
.t-TreeNav,
#t_TreeNav {
    background: var(--h2o-header) !important;
    border-inline-end: 1px solid var(--h2o-line) !important;
}
.t-TreeNav .a-TreeView-content,
.t-TreeNav .a-TreeView-label {
    border-radius: var(--h2o-radius-sm) !important;
}
.t-TreeNav .a-TreeView-content {
    margin: 2px 8px !important;
    padding-block: 7px !important;
}
.t-TreeNav .a-TreeView-content:hover {
    background: var(--h2o-hover) !important;
}
.t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content,
.t-TreeNav .a-TreeView-content.is-current,
.t-TreeNav .a-TreeView-content.is-selected {
    background: var(--h2o-active) !important;
    color: var(--h2o-navy) !important;
    font-weight: 800 !important;
}
.t-TreeNav .a-TreeView-toggle {
    border-radius: 8px;
}

/* ---------- Page body / titles ---------- */
.t-Body-contentInner {
    padding-top: 18px;
}
.t-Body-title,
.t-BreadcrumbRegion {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.t-BreadcrumbRegion-buttons .t-Button {
    border-radius: var(--h2o-radius-sm) !important;
}

/* ---------- Regions as cards ---------- */
.t-Region,
.t-ContentBlock,
.t-Alert,
.t-HeroRegion,
.t-CardsRegion,
.t-AVPList,
.t-Form--stretchInputs .t-Region {
    border-color: transparent !important;
}
.t-Region:not(.t-Dialog-pageWrapper .t-Region),
.t-CardsRegion,
.t-IRR-region,
.t-ContentBlock,
.a-GV-header,
.t-Report {
    border-radius: var(--h2o-radius) !important;
}
.t-Region,
.t-CardsRegion,
.t-IRR-region,
.t-ContentBlock {
    box-shadow: var(--h2o-shadow) !important;
    background: var(--h2o-card) !important;
    border: 1px solid var(--h2o-line) !important;
}
.t-Region > .t-Region-header,
.t-CardsRegion > .t-Region-header,
.t-IRR-region .a-IRR-toolbar {
    background: var(--h2o-region-header) !important;
    border-bottom: 1px solid var(--h2o-line) !important;
}
.t-Region-title,
.t-CardsRegion .t-Region-title,
.t-ContentBlock-title {
    font-weight: 800 !important;
    color: var(--h2o-ink) !important;
}
.t-Region-headerItems--title .t-Icon,
.t-Region-headerIcon {
    border-radius: 12px;
}

/* Hero banners used on many pages */
.t-HeroRegion {
    border-radius: 22px !important;
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.18) !important;
    overflow: hidden;
}
.t-HeroRegion-title,
.t-HeroRegion-col--content {
    font-weight: 800;
}

/* ---------- Forms ---------- */
.t-Form-label,
.t-Form-fieldContainer--floatingLabel .t-Form-label {
    font-weight: 700 !important;
    color: var(--h2o-ink) !important;
}
.apex-item-text,
.apex-item-select,
.apex-item-textarea,
.apex-item-popup-lov,
textarea,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
.a-Button.a-Button--calendar {
    border-radius: var(--h2o-radius-sm) !important;
    border-color: var(--h2o-line) !important;
    background: var(--h2o-field-bg) !important;
    color: var(--h2o-ink) !important;
    min-height: 40px;
    box-shadow: none !important;
}
textarea,
.apex-item-textarea {
    min-height: 96px;
    line-height: 1.6;
}
.apex-item-text:focus,
.apex-item-select:focus,
.apex-item-textarea:focus,
textarea:focus,
input:focus {
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none;
}

/* ---------- Buttons ---------- */
.t-Button {
    border-radius: var(--h2o-radius-sm) !important;
    font-weight: 700 !important;
    min-height: 38px;
}
.t-Button--hot,
.t-Button.is-active.t-Button--hot {
    background: var(--h2o-blue-deep) !important;
    border-color: var(--h2o-blue-deep) !important;
    color: #fff !important;
}
.t-Button--hot:hover,
.t-Button--hot:focus {
    background: var(--h2o-navy) !important;
    border-color: var(--h2o-navy) !important;
}
.t-Button--success {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
}
.t-Button--danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

/* ---------- Interactive / classic reports ---------- */
.a-IRR-toolbar {
    border-radius: var(--h2o-radius) var(--h2o-radius) 0 0 !important;
}
.a-IRR-table th,
.t-Report-report th,
.a-GV-header {
    background: var(--h2o-th) !important;
    color: var(--h2o-ink) !important;
    font-weight: 800 !important;
}
.a-IRR-table tr:hover td,
.t-Report-report tr:hover td,
.a-GV-row:hover {
    background: var(--h2o-row-hover) !important;
}
.a-IRR-pagination {
    padding: 10px 12px;
}

/* ---------- Tabs ---------- */
.t-Tabs,
.a-Tabs {
    gap: 6px;
}
.t-Tabs-item,
.a-Tabs-item {
    border-radius: 999px !important;
}
.t-Tabs-item.is-active,
.a-Tabs-item.is-active,
.a-RDS-item.is-active .a-RDS-label {
    font-weight: 800;
}
.a-RDS {
    background: var(--h2o-card);
    border-radius: var(--h2o-radius);
    box-shadow: var(--h2o-shadow);
    padding: 6px;
}
.a-RDS-label {
    border-radius: 999px !important;
    padding: 8px 14px !important;
}
.a-RDS-item.is-active .a-RDS-label {
    background: var(--h2o-active) !important;
    color: var(--h2o-navy) !important;
}

/* ---------- Cards ---------- */
.t-Cards-item,
.a-CardView-item {
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid var(--h2o-line) !important;
    overflow: hidden;
}
.t-Cards-item:hover,
.a-CardView-item:hover {
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.12) !important;
    transform: translateY(-1px);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* ---------- Dialogs ---------- */
.ui-dialog,
.t-Dialog-page {
    border-radius: 18px !important;
}
.ui-dialog {
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28) !important;
    border: 0 !important;
}
.ui-dialog-titlebar {
    background: linear-gradient(120deg, var(--h2o-sky) 0%, var(--h2o-blue) 55%, var(--h2o-navy) 100%) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 12px 16px !important;
}
.ui-dialog-title {
    color: #fff !important;
    font-weight: 800 !important;
}
.ui-dialog-titlebar-close,
.ui-dialog-titlebar .ui-button {
    color: #fff !important;
}

/* ---------- Alerts / notifications ---------- */
.t-Alert {
    border-radius: var(--h2o-radius) !important;
    box-shadow: var(--h2o-shadow) !important;
    border: 1px solid var(--h2o-line) !important;
}
.t-Alert--success {
    border-color: #bbf7d0 !important;
}
.t-Alert--warning {
    border-color: #fde68a !important;
}
.t-Alert--danger {
    border-color: #fecaca !important;
}

/* ---------- Login ---------- */
body.t-Page--login,
.t-PageBody--login {
    background: #0f172a !important;
}
.t-Login-container {
    background: url(#APP_FILES#h2o_back.jpg) no-repeat center center fixed !important;
    background-size: cover !important;
}
.t-Login-region {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px);
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 8px;
}
.t-Login-header {
    margin-bottom: 8px;
}
.t-Login-title {
    font-weight: 800 !important;
    color: var(--h2o-ink) !important;
}
.t-Login-buttons .t-Button--hot {
    width: 100%;
    min-height: 44px;
    border-radius: 14px !important;
}

/* ---------- Footer ---------- */
.t-Footer {
    background: transparent !important;
    color: var(--h2o-muted) !important;
    border: 0 !important;
}

/* ---------- Status pills used across reports ---------- */
.green, .red, .block, .yellow, .blue {
    display: inline-block;
    padding: 0.35em 0.8em;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 999px;
}
.green { color: #fff; background-color: #059669; }
.red, .block { color: #fff; background-color: #dc2626; }
.yellow { color: #422006; background-color: #facc15; }
.blue { color: #fff; background-color: #2563eb; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .t-Region,
    .t-CardsRegion,
    .t-IRR-region,
    .t-ContentBlock,
    .t-HeroRegion,
    .t-Login-region {
        border-radius: 14px !important;
    }
    .t-Body-contentInner {
        padding-left: 10px;
        padding-right: 10px;
    }
    .t-Button--hot {
        min-width: 0;
    }
}

/* Keep existing invert helper (old .darkmode class on some pages) */
.darkmode img,
.darkmode video,
.darkmode iframe {
    filter: invert(100%) hue-rotate(180deg);
}

body.dark-mode,
body.dark-mode.t-PageBody,
body.dark-mode.send-wa-page,
body.dark-mode.new-sub-page,
body.dark-mode .t-PageBody,
body.dark-mode .t-Body,
body.dark-mode .t-Body-main,
body.dark-mode .t-Body-content,
body.dark-mode .t-Body-contentInner {
    background: var(--h2o-canvas) !important;
    color: var(--h2o-ink) !important;
}
body.dark-mode .t-Region,
body.dark-mode .t-CardsRegion,
body.dark-mode .t-IRR-region,
body.dark-mode .t-ContentBlock,
body.dark-mode #home-search,
body.dark-mode #home-search-bar,
body.dark-mode #send-wa-form,
body.dark-mode #member-cards,
body.dark-mode #member-profile,
body.dark-mode #new-sub-form {
    background: var(--h2o-card) !important;
    border-color: var(--h2o-line) !important;
    color: var(--h2o-ink) !important;
}
body.dark-mode .t-Region > .t-Region-header,
body.dark-mode .t-CardsRegion > .t-Region-header {
    background: var(--h2o-region-header) !important;
}
body.dark-mode .t-Header .t-Button,
body.dark-mode .t-Header .t-Button-label,
body.dark-mode .t-TreeNav .a-TreeView-label,
body.dark-mode .t-Footer {
    color: var(--h2o-ink) !important;
}
body.dark-mode .t-Cards-item,
body.dark-mode .a-CardView-item,
body.dark-mode .t-Card,
body.dark-mode .t-Alert,
body.dark-mode .ui-dialog,
body.dark-mode .ui-dialog-content {
    background: var(--h2o-card) !important;
    color: var(--h2o-ink) !important;
}
body.dark-mode .t-Cards-title,
body.dark-mode .t-Cards-body,
body.dark-mode .t-Card-title,
body.dark-mode .t-Card-desc,
body.dark-mode .t-Region-title,
body.dark-mode .t-Form-label {
    color: var(--h2o-ink) !important;
}
body.dark-mode .a-IRR-table td,
body.dark-mode .t-Report-report td {
    background: var(--h2o-card) !important;
    color: var(--h2o-ink) !important;
    border-color: var(--h2o-line) !important;
}
body.dark-mode .t-Form-helpText,
body.dark-mode .t-Form-error {
    color: var(--h2o-muted) !important;
}

/* Dark-mode toggle lives in the header navigation bar on every page, so the
   old Home-only moon button is redundant and hidden. */
.mem-dark-btn {
    display: none !important;
}

/* Header navigation-bar dark-mode toggle: moon in light mode, sun in dark. */
.t-NavigationBar-item.h2o-darkmode-navbtn .t-Button--navBar {
    cursor: pointer;
}
/* Icon only: keep the label in the DOM for the tooltip/screen readers. */
.t-NavigationBar-item.h2o-darkmode-navbtn .t-Button-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: -1px !important;
}
.t-NavigationBar-item.h2o-darkmode-navbtn .t-Button--navBar .t-Icon {
    font-size: 18px;
}
body.dark-mode .t-NavigationBar-item.h2o-darkmode-navbtn .fa-moon-o::before {
    content: "\f185"; /* fa-sun-o */
}

/* Font APEX ships no brand glyphs, so `fa-whatsapp` renders empty.
   Fall back to the chat-bubble glyph (fa-commenting) wherever it is used. */
.fa-whatsapp::before {
    content: "\f27a";
}