/* ==========================================================================
   assets/css/responsive.css
   Мобилна адаптация за Android и iOS (телефони и таблети).

   Зарежда се СЛЕД assets/css/style.css в:
       index.php, login.php, guest_details.php, partner_details.php
   Всички правила за подредба са в media заявки → десктоп изгледът
   остава непроменен.

   Съдържание:
     1. Безопасни глобални подобрения (тъч, iOS, dvh)
     2. Обвивка за широки таблици (.table-scroll)
     3. ≤1024px – таблети
     4. ≤768px – телефони (основен мобилен слой, вкл. картови таблици)
     5. ≤480px – малки телефони
     6. Телефон в landscape
     7. @media (hover: none) – тъч устройства (без „залепнали“ hover ефекти)
   ========================================================================== */

/* ==========================================================================
   1. БЕЗОПАСНИ ГЛОБАЛНИ ПОДОБРЕНИЯ
   (не променят десктоп изгледа – само поведение)
   ========================================================================== */

/* iOS: в landscape Safari увеличава шрифта сам – изключваме това */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Мобилни браузъри: 100vh „под“ адресната лента → използваме dvh, когато има */
body {
    min-height: 100vh;
    min-height: 100dvh;
}

a, button, input, select, textarea, label, [role="button"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
}

button, input[type="submit"], input[type="button"], input[type="checkbox"],
input[type="radio"], select, nav ul li a, .btn-confirm, .btn-cancel {
    touch-action: manipulation;
}

/* Плъзгащите се зони (таблици, легла) да не „изтичат“ към страницата */
.table-scroll, nav ul, #floor-plan {
    overscroll-behavior-x: contain;
}

/* ==========================================================================
   2. ОБВИВКА ЗА ШИРОКИ ТАБЛИЦИ
   main.js автоматично обгражда всяка <table> в <div class="table-scroll">,
   за да скролва само таблицата, а не цялата страница на телефон.
   ========================================================================== */
.table-scroll {
    max-width: 100%;
}

/* ==========================================================================
   3. ≤1024px – ТАБЛЕТИ (iPad portrait, малки лаптопи)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    #app {
        padding: 14px;
    }

    #tab-content {
        padding: 18px;
    }

    /* Табло: етажен план на самостоятелен ред + две колони под него */
    .dash-grid-2 {
        gap: 16px;
    }

    /* Таблиците вече може да скролват хоризонтално вътре в себе си */
    .table-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .table-scroll > table {
        min-width: 640px;
    }
    /* Картовите таблици не се скролват – те се пренареждат на телефон */
    .table-scroll--cards {
        overflow: visible;
    }
    .table-scroll > table.table-cards {
        min-width: 0;
    }
    .table-scroll::-webkit-scrollbar {
        height: 8px;
    }
    .table-scroll::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
    }

    /* Етажен план: картите стават по-гъвкави */
    .rooms-grid {
        gap: 12px;
    }
    .room {
        min-width: 0;
        flex: 1 1 calc(50% - 12px);
    }
    #transfer-floor-plan .room {
        min-width: 0;
    }

    /* Формите в детайл страниците */
    .structure-forms-row {
        gap: 14px;
    }
    .structure-form-container {
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   4. ≤768px – ТЕЛЕФОНИ (основен мобилен слой)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* ---------- Общ layout ---------- */
    #app {
        padding: 12px;
    }
    #tab-content {
        padding: 14px;
        border-radius: 10px;
        min-height: 0;
    }

    /* ---------- Хедър ---------- */
    header {
        padding: 12px 14px;
        border-radius: 10px;
        gap: 8px;
    }
    header h1 {
        font-size: 1.2rem;
    }
    .user-info {
        gap: 10px;
        font-size: 0.85rem;
    }
    #theme-switcher {
        font-size: 1.4rem;
        min-width: 44px;
        min-height: 44px;
        padding: 6px 8px;
    }
    .btn-logout {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 14px;
    }

    /* ---------- Навигация: един ред с хоризонтален swipe ---------- */
    nav {
        position: sticky;
        top: 0;
        z-index: 60;
        margin: 12px -12px;
        padding: 6px 0;
        background: var(--bg-primary);
    }
    nav ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding: 2px 12px 8px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    nav ul::-webkit-scrollbar {
        display: none;
    }
    nav ul li {
        flex: 0 0 auto;
        scroll-snap-align: center;
    }
    nav ul li a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 12px 16px;
        white-space: nowrap;
    }

    /* ---------- Форми: от две колони на една ---------- */
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    .form-grid-2 > * {
        grid-column: 1 / -1;
    }
    /* Предпазна мрежа: ако някъде е останал инлайн grid стил */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-column:1/3"] {
        grid-column: 1 / -1 !important;
    }
    [style*="grid-column:1/2"],
    [style*="grid-column:2/3"] {
        grid-column: auto !important;
    }

    /* Полета: пълна ширина, 16px шрифт (iOS не зумира при фокус), ≥44px */
    #tab-content input:not([type="checkbox"]):not([type="radio"]),
    #tab-content select,
    #tab-content textarea,
    .modal-content input:not([type="checkbox"]):not([type="radio"]),
    .modal-content select,
    .modal-content textarea,
    .filters-row input,
    .filters-row select {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px;
    }
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
    }
    form label {
        display: block;
        margin-right: 0;
        margin-bottom: 4px;
    }
    .filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .filters-row label,
    .filters-row > div {
        width: 100%;
    }

    /* ---------- Бутони: удобни за тъч (≥44px) ---------- */
    #tab-content button:not([class*="-small"]),
    .modal-content button:not(.modal-close),
    .btn-confirm,
    .btn-cancel,
    .archive-controls button {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.95rem;
    }
    .modal-close {
        min-width: 44px;
        min-height: 44px;
        font-size: 2rem;
        top: 4px;
        right: 6px;
    }

    /* ---------- Карти с показатели ---------- */
    .dashboard-kpi-grid,
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .kpi-card {
        padding: 12px;
    }
    .kpi-value {
        font-size: 1.45rem !important;
    }
    .kpi-card > div:first-child {
        font-size: 0.8rem !important;
    }
    .dashboard-stats,
    .bookings-summary {
        gap: 10px;
    }
    .summary-card,
    .stat-card {
        min-width: 0;
        flex: 1 1 calc(50% - 10px);
        padding: 10px 12px;
    }
    .summary-card .value {
        font-size: 1.25rem;
    }

    /* ---------- Табло: двете колони (списъци | баланси) под етажния план ---------- */
    .dash-grid-2 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* ---------- Етажен план, легла, блокове за резервации ---------- */
    .rooms-grid {
        gap: 10px;
    }
    .room {
        flex: 1 1 calc(50% - 10px);
        padding: 12px;
    }
    .bed,
    #transfer-floor-plan .bed {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 40px;
        padding: 8px 10px;
        font-size: 0.8rem;
    }
    .booking-blocks {
        gap: 8px;
    }
    .booking-block {
        min-width: 0;
        flex: 1 1 calc(50% - 8px);
    }

    /* ---------- Таблици ---------- */
    table {
        font-size: 0.9rem;
    }
    th, td {
        padding: 8px;
    }
    .table-scroll > table:not(.table-cards) {
        min-width: 620px;
    }

    /* ---------- Картов изглед на таблици (Резервации, Клиенти, Каса) ---------- */
    .table-cards {
        display: block;
        width: 100%;
        margin: 10px 0;
    }
    .table-cards thead,
    .table-cards tr.table-cards-head {
        display: none;
    }
    .table-cards tr {
        display: block;
        margin: 0 0 10px;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background-color: var(--bg-card);
    }
    .table-cards td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px dashed var(--border-color);
        text-align: right;
    }
    .table-cards tr > td:last-child {
        border-bottom: none;
    }
    .table-cards td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        font-weight: 600;
        color: var(--text-primary);
        text-align: left;
        white-space: normal;
    }
    .table-cards td:not([data-label])::before {
        content: none;
    }
    .table-cards td[data-label="Действия"] {
        justify-content: flex-start;
        gap: 8px;
        padding-top: 10px;
    }
    .table-cards td[data-label="Действия"]::before {
        flex: 0 0 100%;
        margin-bottom: 4px;
    }
    .table-cards td[data-label="Действия"] button,
    .table-cards td[data-label="Действия"] a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }

    /* ---------- Модали: долен лист (bottom sheet) ---------- */
    .modal-overlay {
        align-items: flex-end;
    }
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        max-height: 90dvh;
        margin: 0;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        animation: mobileSheetUp 0.25s ease-out;
    }
    .modal-content form input,
    .modal-content form select {
        width: 100%;
    }

    /* Скролът на страницата се заключва, докато има отворен модал
       (класът се добавя от main.js) */
    body.modal-open {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }

    /* ---------- Footer ---------- */
    .app-footer {
        margin-top: 24px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    }
    .footer-manual-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 18px;
    }
}
@keyframes mobileSheetUp {
    from { transform: translateY(28px); opacity: 0.7; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   5. ≤480px – МАЛКИ ТЕЛЕФОНИ (iPhone SE, Galaxy A серия)
   ========================================================================== */
@media screen and (max-width: 480px) {
    #app {
        padding: 10px;
    }
    #tab-content {
        padding: 12px;
    }
    header {
        padding: 10px 12px;
    }
    header h1 {
        font-size: 1.05rem;
    }
    nav {
        margin: 10px -10px;
    }
    nav ul {
        padding: 2px 10px 8px;
    }
    nav ul li a {
        padding: 11px 14px;
        font-size: 0.9rem;
    }

    .dashboard-kpi-grid,
    .kpi-grid {
        gap: 8px;
    }
    .kpi-card {
        padding: 10px;
    }
    .kpi-value {
        font-size: 1.3rem !important;
    }
    .kpi-card > div:first-child {
        font-size: 0.75rem !important;
    }
    .summary-card,
    .stat-card {
        flex: 1 1 100%;
    }
    .table-cards td::before {
        flex: 0 0 45%;
    }
    .modal-content {
        padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
    }
    .btn-logout {
        padding: 9px 12px;
        font-size: 0.85rem;
    }
}

/* Много тесни екрани – стаите и блоковете минават на цял ред */
@media screen and (max-width: 380px) {
    .room,
    .booking-block {
        flex: 1 1 100%;
    }
    .table-cards td::before {
        flex: 0 0 100%;
        margin-bottom: 2px;
    }
}

/* ==========================================================================
   6. ТЕЛЕФОН В LANDSCAPE (малка височина – модалите заемат целия екран)
   ========================================================================== */
@media screen and (max-height: 480px) and (orientation: landscape) {
    nav {
        position: static;
    }
    .modal-overlay {
        align-items: flex-start;
    }
    .modal-content {
        max-height: 96vh;
        max-height: 96dvh;
        border-radius: 0 0 16px 16px;
    }
}

/* ==========================================================================
   7. ТЪЧ УСТРОЙСТВА – без „залепнали“ hover състояния
   ========================================================================== */
@media (hover: none) {
    tr:hover td {
        background: transparent;
    }
    nav ul li a:hover {
        background: var(--nav-bg);
        color: var(--nav-link);
    }
    nav ul li a.active:hover {
        background: var(--color-primary);
        color: var(--nav-link-active);
    }
    #theme-switcher:hover {
        transform: none;
        background: none;
    }
    .room.available:hover,
    .bed.free:hover {
        box-shadow: none;
    }
    .modal-close:hover,
    .footer-manual-link:hover {
        color: inherit;
        opacity: 1;
    }
    button[type="submit"]:hover,
    form button:hover,
    .btn-confirm:hover,
    .btn-cancel:hover,
    .btn-extend-small:hover, .btn-shorten-small:hover,
    .btn-transfer-small:hover, .btn-checkout-small:hover,
    .btn-details-small:hover, .btn-pay-small:hover {
        opacity: 1;
    }

    /* Ясна обратна връзка при натискане (вместо hover) */
    nav ul li a:active {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
    nav ul li a.active:active {
        background: var(--color-primary);
        color: var(--nav-link-active);
    }
    .btn-confirm:active,
    .btn-cancel:active,
    form button:active,
    button[type="submit"]:active,
    .btn-extend-small:active, .btn-shorten-small:active,
    .btn-transfer-small:active, .btn-checkout-small:active,
    .btn-details-small:active, .btn-pay-small:active {
        opacity: 0.75;
    }
    .table-cards tr:active {
        border-color: var(--color-primary);
    }
}

/* ==========================================================================
   8. ТЪМНА ТЕМА
   Всички правила по-горе използват само CSS променливи на темата
   (--bg-*, --text-*, --border-color, --color-*), затова тъмната тема
   работи без допълнителни дефиниции. По-долу са само козметични
   корекции за мобилната картова таблица (валидни само ≤768px).
   ========================================================================== */
@media screen and (max-width: 768px) {
    .dark-theme .table-cards tr {
        background-color: var(--bg-card);
        border-color: var(--border-color);
    }
    .dark-theme .table-cards td {
        border-bottom-color: var(--border-color);
    }
    .dark-theme .table-scroll::-webkit-scrollbar-thumb {
        background: var(--border-color);
    }
}