:root { --app-height: 100dvh; }

html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.app-root {
    position: relative;
    overflow: hidden;
    height: var(--tg-viewport-height, var(--app-height));
}

.header-safe {
    padding-top: calc(1.25rem + var(--tg-safe-top, 0px) + var(--tg-content-safe-top, 0px));
}

.week-strip {
    touch-action: pan-y;
    overflow: hidden;
}

@keyframes slideFromRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes slideFromLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.week-slide-next { animation: slideFromRight 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.week-slide-prev { animation: slideFromLeft  0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

@keyframes slideToRight {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

@keyframes slideToLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

.week-slide-out-right { animation: slideToRight 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.week-slide-out-left  { animation: slideToLeft  0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.content-scroll {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.content-scroll::-webkit-scrollbar { display: none; }

.fab {
    position: absolute;
    right: 1.25rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.modal-footer {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 520px) {
    html, body {
        overflow: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0d0d14;
    }

    body {
        min-height: 100vh;
        padding: 20px 0;
    }

    .app-root {
        width: 390px;
        height: min(844px, calc(100vh - 40px));
        overflow: hidden;
        flex-shrink: 0;
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.08),
            0 0 0 11px #1c1c28,
            0 0 0 12px rgba(255,255,255,0.06),
            0 40px 80px rgba(0,0,0,0.7);
    }

    .fab {
        position: absolute;
        right: 1.25rem;
        bottom: 1.5rem;
    }

    .modal-footer {
        padding-bottom: 1.25rem;
    }
}

.dark-theme.bg-gray-900,
.dark-theme .bg-gray-900 { background-color: var(--app-dark-bg, #17212b); }

.dark-theme .bg-gray-800 { background-color: var(--app-dark-card, #232e3c); }

.dark-theme .bg-gray-700 { background-color: var(--app-dark-input, #1c2533); }

.dark-theme.text-white,
.dark-theme .text-white { color: var(--app-dark-text, #f0f0f0); }

.dark-theme .bg-blue-500 { background-color: var(--app-dark-button, #5288c1); }

.dark-theme .bg-blue-400 { background-color: var(--app-dark-button, #5288c1); }

.dark-theme .text-blue-400,
.dark-theme .text-blue-500 { color: var(--app-dark-accent, #6ab3f3); }

.dark-theme .border-gray-800 { border-color: #1c2533; }

.dark-theme .border-gray-700 { border-color: #2b3a4e; }

.dark-theme .border-gray-600 { border-color: #354a60; }

.app-root:not(.dark-theme).bg-gray-50,
.app-root:not(.dark-theme) .bg-gray-50 {
    background-color: #efeff4;
}

.app-root:not(.dark-theme) .bg-white {
    background-color: #ffffff;
}

.app-root:not(.dark-theme) .bg-blue-500 {
    background-color: #2481cc;
}

.app-root:not(.dark-theme) .bg-gray-100 {
    background-color: rgba(0, 0, 0, 0.06);
}

.app-root:not(.dark-theme) .bg-gray-200 {
    background-color: rgba(0, 0, 0, 0.08);
}

.app-root:not(.dark-theme) .text-blue-500 {
    color: #2481cc;
}

.app-root:not(.dark-theme).text-gray-900,
.app-root:not(.dark-theme) .text-gray-900 {
    color: #000000;
}

.app-root:not(.dark-theme) .text-gray-700,
.app-root:not(.dark-theme) .text-gray-600 {
    color: #000000;
}

.app-root:not(.dark-theme) .text-gray-500,
.app-root:not(.dark-theme) .text-gray-400 {
    color: #8e8e93;
}

.app-root:not(.dark-theme) .text-gray-300 {
    color: #2481cc;
}

.app-root:not(.dark-theme) .border-gray-100,
.app-root:not(.dark-theme) .border-gray-200 {
    border-color: rgba(0, 0, 0, 0.12);
}

.app-root:not(.dark-theme) .placeholder-gray-400::placeholder {
    color: #8e8e93;
}

.day-selected-light {
    background-color: rgba(36, 129, 204, 0.15);
    color: #2481cc;
}