@font-face {
    font-family: "Epika Serif Regular";
    src: url('../fonts/EpikaSerifPremium-Regular.woff2') format('woff2'), url('../fonts/EpikaSerifPremium-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Soehne Breit';
    src: url('../fonts/soehne-breit-dreiviertelfett.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Soehne Breit';
    src: url('../fonts/soehne-breit-dreiviertelfett-kursiv.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Soehne Buch';
    src: url('../fonts/soehne-buch.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Soehne Buch';
    src: url('../fonts/soehne-buch-kursiv.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

/* BASE: Typography & Layout */
body {
    background: var(--surface-page, #F0F0F0);
    color: var(--text-body, #030F13);

    font-family: 'Soehne Buch', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    letter-spacing: -0.42px;

    margin: 0;
    padding-top: 0;
    padding-bottom: 80px;
    /* for bottom nav */
    overflow-x: hidden;
    min-height: 100vh;
}

img {
    max-width: 100%;
    width: max-content;
    margin: 0 auto;
}

p {
    margin: 0;
}

.icon {
    width: 16px;
    height: 16px;
}

svg.icon {
    filter: none;
    fill: none;
}

.text-body {
    color: var(--text-body, #030F13) !important;
}

.text-muted {
    color: var(--text-muted, #969B9C) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

.page {
    position: fixed;
    top: 0;
    padding-top: 96px;
    padding-bottom: 80px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    opacity: 0;
    left: 100%;
    /*transition: all 0.5s ease-in-out;*/
    transition: opacity 0.1s ease-in-out;
    
    z-index: 0;

    overflow-x: hidden;
}

.page.noInfo {
    top: 40px;
    height: calc(100% - 40px);
}

.page-next {
    left: 100%;
}

.page-prev {
    left: -100%;
}

.page.active {
    opacity: 1;
    left: 0;
    z-index: 1;
}

.page.slide-in-left {
    left: -100%;
    opacity: 0;
}

.page.slide-in-right {
    left: 100%;
    opacity: 0;
}

.page.slide-out-left {
    left: -100%;
    opacity: 0;
}

.page.slide-out-right {
    left: 100%;
    opacity: 0;
}

.page.noMenu {
    padding-bottom: 20px;
}



.container,
.remote-only,
.on-board-only {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-page-section-gap, 20px);
}

.container:has(.remote-only) {
    min-height: 100%;
}

.remote-only {
    margin-top: auto;
    margin-bottom: auto;
}

.container .row .col-12 {
    display: flex;
    /*padding: 0 var(--spacing-page-horizontal, 16px);*/
    flex-direction: column;
    gap: var(--spacing-card-grid-gap, 8px);
}


#splashLoading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    overflow: hidden;
}

#splashLoading .splash-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

@media (orientation: portrait) {
    #splashLoading .splash-video-landscape {
        display: none;
    }
    #splashLoading .splash-video-portrait {
        display: block;
    }
}

@media (orientation: landscape) {
    #splashLoading .splash-video-portrait {
        display: none;
    }
    #splashLoading .splash-video-landscape {
        display: block;
    }
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 999999;

    display: none;

    background: var(--color-dark-300, rgba(3, 15, 19, 0.30));
    backdrop-filter: blur(15px);
    color: white;
}

#loading .icon {
    width: 48px;
    height: 48px;
}

.spinIcon {
    text-align: center;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear
}

.pulseIcon {
    -webkit-animation: spin 1s infinite steps(8);
    animation: spin 1s infinite steps(8);
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}





/* 
 * BUTTONS 
 */
.btn {
    border: none;
    height: 48px;
    padding: 8px var(--spacing-button-form-padding, 16px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-button-form-icon-gap, 8px);
    border-radius: var(--radius-button, 9999px);
}

.btn:has(.icon) {
    padding: 13px 16px;
}

.btn.small {
    height: 32px;
    padding: 4px var(--spacing-button-form-padding-sm, 12px);
}

.btn.small:has(.icon) {
    padding: 8px;
}

.btn-primary {
    display: inline-flex;

    background: var(--button-primary-bg, #FFF);
    color: var(--button-primary-label, #030F13);
}

.btn-primary:hover {
    background: var(--button-primary-bg-hover, #F0F0F0);
    color: var(--button-primary-label, #030F13);
}

.btn-primary.active,
:not(.btn-check)+.btn-primary:active {
    background: var(--button-primary-bg-active, #02778E);
    color: var(--text-on-dark, #FFF);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--button-primary-bg, #FFF);
    color: var(--button-primary-label-disabled, rgba(3, 15, 19, 0.20));
}

.btn-secondary {
    display: inline-flex;
    background: var(--button-secondary-bg, #02778E);
    color: var(--button-secondary-label, #FFF);
}

.btn-secondary:hover {
    background: var(--button-secondary-bg-hover, rgba(2, 119, 142, 0.80));
    color: var(--button-secondary-label, #FFF);
}

.btn-secondary.active,
:not(.btn-check)+.btn-secondary:active {
    background: var(--button-secondary-bg, #02778E) !important;
    color: var(--button-secondary-label, #FFF);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    background: var(--button-secondary-bg-disabled, rgba(3, 15, 19, 0.15));
    color: var(--button-secondary-label-disabled, rgba(3, 15, 19, 0.20));
}


.btn-outline-secondary {
    display: inline-flex;
    background: none;
    border: 1px solid var(--button-secondary-bg, #02778E);
    color: var(--text-body, #000);
}

.btn-outline-secondary:hover {
    background: var(--button-secondary-bg-hover, rgba(2, 119, 142, 0.80));
    color: var(--button-secondary-label, #FFF);
}

.btn-outline-secondary.active,
:not(.btn-check)+.btn-outline-secondary:active {
    background: var(--button-secondary-bg, #02778E) !important;
    color: var(--text-on-dark, #FFF);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    border: 1px solid var(--button-secondary-bg-disabled, rgba(3, 15, 19, 0.15));
    background: none;
    color: var(--button-primary-label-disabled, rgba(3, 15, 19, 0.20));
}



.btn-link {
    display: inline-flex;
    padding: var(--spacing-button-form-padding-h, 4px) var(--spacing-card-padding, 16px);
    justify-content: center;
    align-items: center;
    gap: 8px;

    color: var(--button-link-label, #FFF);
    text-decoration: none;
}

.btn-link.active,
:not(.btn-check)+.btn-link:active {
    color: var(--button-link-label, #FFF) !important;
}

.btn-link:hover {
    color: var(--button-link-label-hover, #969B9C);
}

.btn-link.disabled,
.btn-link:disabled {
    color: var(--button-link-label-disabled, rgba(255, 255, 255, 0.60));
}



.btn-base {
    border-radius: var(--radius-button-base, 24px);
    background: var(--button-base-bg, #F0F0F0);
    height: 96px;
    min-width: 96px;
    flex-direction: column;
    color: var(--button-base-icon, #02778E);
}

.btn-base .icon {
    height: 32px;
    width: 32px;
}

.btn-base:hover,
.btn-base.active,
.btn-base:active {
    background: var(--button-base-bg-active, #02778E);
    color: var(--button-base-icon-active, #ffffff);
}

.btn-base.disabled,
.btn-base:disabled {
    background: var(--button-base-bg-disabled, #F0F0F0);
    color: var(--button-base-icon-disabled, rgba(255, 255, 255, 0.2));
}



.card:has(.bg-danger) {
    border: 1px solid var(--status-danger-emphasis, #DE6060);
}

.badge {
    display: flex;
    padding: 4.2px var(--spacing-badge-padding, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-badge-icon-gap, 4px);
    border-radius: var(--radius-badge, 9999px);
    text-transform: capitalize;
    background: var(--color-grey-100, #F0F0F0);
    color: var(--text-body, #030F13);

    font-family: 'Soehne Buch', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 12px */
    letter-spacing: -0.5px;

    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/old Edge */
    user-select: none;
}

.badge.outline {
    border: 1px solid var(--badge-badge-secondary, #969B9C);
    background: none;
}

.badge.onboard.online {
    background: var(--status-success-subtle, #D0F0E0);
    color: var(--status-success-emphasis, #0D9C49);
    text-align: center;
}

.badge.onboard.offline,
.badge.remote.online {
    background: var(--status-warning-subtle, #FFF0DF);
    color: var(--status-warning-emphasis, #F58F14);
}

.badge.remote.offline {
    background: var(--status-danger-subtle, #FCEFEF);
    color: var(--status-danger-emphasis, #DE6060);
}

.badge.bg-success {
    background: var(--status-success-subtle, #D0F0E0) !important;
    color: var(--status-success-emphasis, #0D9C49);
}

.badge.bg-danger {
    background: var(--status-danger-subtle, #FCEFEF) !important;
    color: var(--status-danger-emphasis, #DE6060);
}

.badge.bg-warning {
    background: var(--status-warning-subtle, #FFF0DF) !important;
    color: var(--status-warning-emphasis, #F58F14);
}

.badge.bg-info {
    background: var(--status-info-subtle, rgba(2, 119, 142, 0.20));
    color: var(--status-info-emphasis, #F58F14);
}

.badge.bg-off:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-danger-emphasis, #DE6060);
}

.badge.bg-on:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-success-emphasis, #0D9C49);
}

.progress {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-teal-100, rgba(2, 119, 142, 0.10));
    margin: var(--spacing-card-gap, 8px) 0;
}

.progress-bar {
    border-radius: var(--radius-full, 9999px);
    background: var(--surface-accent, #02778E);
}

.progress.red {
    background: var(--status-danger-subtle, #FCEFEF);
}

.progress.red .progress-bar {
    background: var(--status-danger-emphasis, #DE6060);
}


.progress.orange {
    background: var(--status-warning-subtle, #FFF0DF);
}

.progress.orange .progress-bar {
    background: var(--status-warning-emphasis, #F58F14);

}

.progress.green {
    background: var(--status-success-subtle, #D0F0E0);
}

.progress.green .progress-bar {
    background: var(--status-success-emphasis, #0D9C49);
}


.card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-card-grid-gap, 8px);
}

.card-container.scrollable {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
}

.card.full {
    grid-column: 1 / -1;
}

.card {
    border-radius: var(--radius-card, 24px);
    background: var(--surface-card, #FFF);
    color: var(--text-body, #fff);
    padding: var(--spacing-card-padding-inner, 12px);
    gap: var(--spacing-card-gap, 20px);

    justify-content: space-between;

    border: none;
    transition: all 0.5s;
    min-width: 50%;
}

.card.control {
    min-width: 150px;
    height: 160px;
}

.card.area {
    height: 100px;
}

.card.scene {
    height: 160px;
    min-width: 160px;
    width: 160px;
}

.card-header {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
    color: var(--text-body, #fff);

    background: none;
    border-bottom: none;

    padding: 0;
}

.card.control .card-header {
    align-items: flex-start;
    justify-content: space-between;
}

.card-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
    margin: 0;

    color: var(--text-muted, #969B9C);
}

.card.control .card-title,
.card.area .card-title {
    color: var(--text-body, #030F13);
}

.card.value .card-icon {
    border-radius: var(--radius-full, 9999px);
    background: var(--surface-icon, #030F13);
    color: var(--text-on-dark, #ffffff);

    display: flex;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

.card-icon img,
.card-icon svg {
    height: 22px;
    width: 22px;
}

.card-body {
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: baseline;
    flex: 1;
}

.card-body.data-two {
    gap: 2px;
}

.card .content {
    display: flex;
    align-items: self-end;
}

.card .content-grid {
    display: inline-grid;
    row-gap: var(--spacing-card-grid-gap, 8px);
    column-gap: var(--spacing-card-grid-gap, 8px);
    align-self: stretch;
    grid-template-rows: repeat(2, fit-content(100%));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
}

.card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    word-break: break-word;
    color: var(--text-body, #030F13);

    margin: 0;
}

.card-subtitle {
    color: var(--text-muted, #969B9C);
    text-transform: capitalize;
}

.card-subtitle .icon {
    filter: none;
}


.card.monitor {
    gap: var(--spacing-card-gap-lg, 20px);
    justify-content: start;
}


ul.componentsList {
    padding: 0;
    margin: 0;
    list-style: none;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-card-grid-gap, 8px);
    align-self: stretch;
}

ul.componentsList li {
    width: 100%;
    display: flex;
    padding: var(--spacing-list-item-padding, 12px);
    align-items: center;
    gap: 12px;
    justify-content: space-between;

    border-radius: var(--radius-list-item, 16px);
    border: 1px solid var(--stroke-grey, #F0F0F0);
    background: var(--surface-item, #FFF);
}

ul.componentsList li .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start !important;
    flex: 1 0 0;
}


.yachtSelectionModal {
    display: inline-block;
}


/* ═══════════════════════════════════════════════════════════════
   Connection State Utilities
   Applied via body classes: state-remote-offline, state-remote-online,
   state-onboard-offline, state-onboard-online
   ═══════════════════════════════════════════════════════════════ */

/* Features that need On Board mode (AI only) */
body.state-remote-offline .needs-onboard,
body.state-remote-online .needs-onboard {
    display: none !important;
}

/* Features that need Online (cloud API: tickets, account, user management) */
body.state-remote-offline .needs-online,
body.state-onboard-offline .needs-online {
    display: none !important;
}

/* Features that need any connection — either onboard or online (domotics, monitoring, CCTV) */
body.state-remote-offline .needs-connection {
    display: none !important;
}

/* Messages shown when On Board is required but user is remote */
.show-when-remote {
    display: none !important;
}

body.state-remote-offline .show-when-remote,
body.state-remote-online .show-when-remote {
    display: block !important;
}

/* Messages shown when Online is required but user is offline */
.show-when-offline {
    display: none !important;
}

body.state-remote-offline .show-when-offline,
body.state-onboard-offline .show-when-offline {
    display: block !important;
}

/* Messages shown only when fully offline (Remote + Offline = nothing works) */
.show-when-fully-offline {
    display: none !important;
}

body.state-remote-offline .show-when-fully-offline {
    display: block !important;
}

/* Inline offline banner — subtle, matching AI page style */
.state-banner {
    display: none !important;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

.state-banner .state-banner-title {
    margin-bottom: 4px;
}

.state-banner .state-banner-text {
    margin-bottom: 4px;
}

body.state-remote-offline .state-banner.show-when-fully-offline,
body.state-remote-offline .state-banner.show-when-offline,
body.state-onboard-offline .state-banner.show-when-offline,
body.state-remote-offline .state-banner.show-when-remote,
body.state-remote-online .state-banner.show-when-remote {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

/* HA connection error banner — shown/hidden via JS class toggle */
.state-banner.ha-connection-error {
    display: none !important;
}

.state-banner.ha-connection-error.visible {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

/* When fully offline, the offline banner already shows — hide the HA error to avoid duplicates */
body.state-remote-offline .state-banner.ha-connection-error.visible {
    display: none !important;
}

.ha-error-retry-btn {
    margin-top: 8px;
}