/* Shell layout + auth override — komponenty UI w css/design-system.css */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --ds-app-min-w: 360px;
}

html, body {
    height: 100%;
    min-height: 100vh;
    min-height: var(--esd-viewport-h-px, 100vh);
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-ui) !important;
    font-variant-numeric: var(--ds-font-numeric);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

html.app-authenticated,
html.app-authenticated body {
    height: var(--esd-viewport-h-px, 100vh);
    max-height: var(--esd-viewport-h-px, 100vh);
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

body#esd-app {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.app-layout {
    display: flex;
    height: var(--esd-viewport-h-px, 100vh);
    min-height: var(--esd-viewport-h-px, 100vh);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.main-content {
    flex: 1;
    min-width: var(--ds-app-min-w);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-view {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.flex-fix {
    min-height: 0;
    min-width: 0;
}

.scroll-content {
    flex: 1;
    min-height: 0;
    min-width: 0;
    max-width: none;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Stałe elementy UI — nigdy węższe niż minimalna szerokość aplikacji */
#mobile-bottom-nav,
.mobile-bottom-nav,
#mobile-drawer-backdrop,
.mobile-drawer-backdrop,
#mobile-fab-menu,
.mobile-fab-menu,
.modal,
.code-scanner-overlay,
#toast-container,
.ds-toast-container,
.slide-panel {
    min-width: var(--ds-app-min-w);
}

/* Auth — pełny ekran (bez max(100vw) + right:auto — psuje tablet / Safari) */
#auth-overlay,
.auth-overlay,
#auth-boot,
.auth-boot {
    position: fixed;
    inset: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#mobile-bottom-nav,
.mobile-bottom-nav,
#mobile-drawer-backdrop,
.mobile-drawer-backdrop,
#mobile-fab-menu,
.mobile-fab-menu,
.modal,
.code-scanner-overlay.modal,
.slide-panel {
    width: max(100vw, var(--ds-app-min-w));
    min-width: var(--ds-app-min-w);
    left: 0;
    right: auto;
}

/* Focus fallback — DS ma własne :focus-visible; inset ring jak w DS (outline przycinany w overflow) */
button:focus-visible:not(.btn):not(.icon-btn):not(.nav-item):not(.account-side-nav__item):not(.norms-nav__item):not(.norms-group-pill):not(.norms-product-chip):not(.classif-tabs__item):not(.settings-nav-link):not(.mobile-bottom-nav__item):not(.ds-list-item):not(.cal-cell):not(.entity-card):not(.dash-quick-btn):not(.calendar-day):not(.custom-option),
a:focus-visible:not(.nav-item):not(.account-side-nav__item):not(.norms-nav__item):not(.norms-group-pill):not(.norms-product-chip):not(.classif-tabs__item):not(.settings-nav-link):not(.dropdown-actions-content):not(.ds-actions-menu__item) {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ds-primary);
}

html[data-theme="dark"] body {
    background: var(--bg-color);
}

@media (max-width: 900px) {
    .search-kbd { display: none; }
}

@media (max-width: 1080px) {
    html {
        overflow-x: hidden;
        min-width: 0;
        max-width: 100%;
    }

    body#esd-app,
    #main-app,
    .app-layout,
    .main-content,
    .app-view,
    .dashboard-scroll {
        min-width: 0;
        max-width: 100%;
    }

    #mobile-bottom-nav,
    .mobile-bottom-nav {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

html[data-theme="dark"] .entity-card { background: var(--card-bg); }
html[data-theme="compact"] .app-view { padding: var(--space-md); }
html[data-theme="compact"] .entity-card {
    min-height: unset;
    padding: var(--ds-entity-card-pad, 16px);
}

@media (max-width: 480px) {
    .cal-cell__num { font-size: 11px; }
}

.brand-logo-slot[data-brand-logo] { /* placeholder na przyszłe SVG logo */ }

/* FONT LOCK — #esd-app na body w index.html; wygrywa z klasami DS */
#esd-app,
#esd-app *:not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp) {
    font-family: "ESDInter", sans-serif !important;
    font-feature-settings: "ss01" 1, "liga" 1, "calt" 1 !important;
    -webkit-font-feature-settings: "ss01" 1, "liga" 1, "calt" 1 !important;
    font-variant-numeric: lining-nums proportional-nums !important;
    font-synthesis: none !important;
}

#esd-app .material-symbols-outlined,
#esd-app .material-symbols-rounded,
#esd-app .material-symbols-sharp {
    font-family: "Material Symbols Outlined" !important;
    font-feature-settings: "liga" 1 !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-variant-numeric: normal !important;
}

@keyframes authLoginInputTextFix {
    from, to {
        font-size: 16px;
        line-height: 1.35;
    }
}
@keyframes authAutofillStart {
    from, to {
        font-size: 16px;
        line-height: 1.35;
    }
}

/* Auth login — style.css ładuje się po design-system; wymusza ciemne pola (iOS 16px) */
#auth-overlay input#login-email.auth-login-input,
#auth-overlay input#login-password.auth-login-input {
    border: 1px solid rgba(168, 168, 168, 0.34) !important;
    background: rgba(12, 12, 12, 0.97) !important;
    background-color: rgba(12, 12, 12, 0.97) !important;
    color: rgba(245, 245, 245, 0.94) !important;
    font: 16px/1.35 "ESDInter", system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    padding: 11px 12px !important;
    border-radius: var(--radius-sm) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    animation: authLoginInputTextFix 0.01ms both;
    transition:
        border-color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}
#auth-overlay input#login-email.auth-login-input:-webkit-autofill,
#auth-overlay input#login-password.auth-login-input:-webkit-autofill {
    font: 16px/1.35 "ESDInter", system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    animation: authAutofillStart 0.001s, authLoginInputTextFix 0.01ms both;
}
#auth-overlay .password-field .auth-login-input,
#auth-overlay .password-field #login-password {
    padding-right: 44px !important;
}
#auth-overlay #login-form input::placeholder {
    color: rgba(168, 168, 168, 0.72) !important;
    font-size: 16px !important;
}
#auth-overlay #login-form input:-webkit-autofill,
#auth-overlay #login-form input:-webkit-autofill:hover,
#auth-overlay #login-form input:-webkit-autofill:focus,
#auth-overlay #login-email:-webkit-autofill,
#auth-overlay #login-password:-webkit-autofill {
    -webkit-text-fill-color: rgba(245, 245, 245, 0.94) !important;
    caret-color: rgba(245, 245, 245, 0.94) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    border: 1px solid rgba(168, 168, 168, 0.34) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(14, 14, 14, 0.98) inset !important;
    box-shadow: 0 0 0 1000px rgba(14, 14, 14, 0.98) inset !important;
    transition: background-color 99999s ease-out 0s;
}
#auth-overlay #login-form input:focus,
#auth-overlay #login-form input:focus-visible,
#auth-overlay #login-form .password-field input:focus,
#auth-overlay #login-form .password-field input:focus-visible {
    border-color: rgb(255, 207, 51) !important;
    background: rgba(16, 16, 16, 0.98) !important;
    background-color: rgba(16, 16, 16, 0.98) !important;
    font-size: 16px !important;
    box-shadow: 0 0 0 2px rgba(255, 207, 51, 0.2) !important;
    outline: none !important;
}
#auth-overlay #login-form input:-webkit-autofill:focus,
#auth-overlay #login-email:-webkit-autofill:focus,
#auth-overlay #login-password:-webkit-autofill:focus {
    border-color: rgb(255, 207, 51) !important;
    font-size: 16px !important;
    -webkit-box-shadow:
        0 0 0 1000px rgba(14, 14, 14, 0.98) inset,
        0 0 0 2px rgba(255, 207, 51, 0.2) !important;
    box-shadow:
        0 0 0 1000px rgba(14, 14, 14, 0.98) inset,
        0 0 0 2px rgba(255, 207, 51, 0.2) !important;
}

/* Ekran logowania — wszystkie przeglądarki (nadpisuje globalne html/body) */
html:not(.app-authenticated),
html:not(.app-authenticated) body {
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: var(--esd-viewport-h-px, 100vh);
    max-height: none;
}

#auth-overlay,
.auth-overlay,
#auth-boot,
.auth-boot {
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    min-height: var(--esd-viewport-h-px, 100vh) !important;
}

@media (max-width: 1080px), (display-mode: standalone), (display-mode: fullscreen) {
    html:not(.app-authenticated) #auth-overlay,
    html:not(.app-authenticated) #auth-overlay.is-visible,
    html.auth-login-visible #auth-overlay {
        display: flex !important;
        flex-direction: column !important;
    }
    #auth-boot,
    .auth-boot {
        display: none !important;
    }
}