/* Costa Gym — Mobile & WebView / PWA shell */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --app-vh: 1vh;
    --touch-min: 44px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-y: auto;
}

body {
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    padding-bottom: var(--safe-bottom);
}

@media (max-width: 768px) {
    html.is-mobile-app body,
    html.is-standalone body,
    html.is-webview body {
        overscroll-behavior-y: none;
    }
}

/* منع zoom تلقائي على iOS عند focus */
input,
select,
textarea {
    font-size: 16px;
}

@media (min-width: 769px) {
    input,
    select,
    textarea {
        font-size: inherit;
    }
}

/* أزرار وروابط قابلة للمس */
button,
a.btn-buy,
.btn-hero,
.btn-login,
.btn-submit,
.btn-add-plan,
.btn-edit,
.btn-delete,
.tab-btn,
.theme-option,
.login-method-tab,
.menu-toggle,
.admin-notif-btn,
.plan-modal-close,
.food-modal-close,
.legend-modal-close {
    min-height: var(--touch-min);
    touch-action: manipulation;
}

/* ================= الهيدر والفوتر — safe area ================= */
.site-header {
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

body.has-site-header {
    padding-top: calc(var(--site-header-height, 58px) + var(--safe-top));
}

@media (max-width: 768px) {
    :root {
        --site-header-height: 52px;
    }

    .main-nav {
        padding-bottom: calc(16px + var(--safe-bottom));
    }

    .mobile-theme-options {
        padding-bottom: var(--safe-bottom);
    }

    .site-footer {
        padding-bottom: calc(24px + var(--safe-bottom));
    }
}

/* ================= الصفحة الرئيسية ================= */
.home-page .hero-slider {
    height: calc(var(--app-vh, 1vh) * 100 - var(--site-header-height, 58px) - var(--safe-top));
    min-height: 420px;
    max-height: 720px;
}

@media (max-width: 768px) {
    .home-page section {
        padding: 48px 16px;
        padding-left: max(16px, var(--safe-left));
        padding-right: max(16px, var(--safe-right));
    }

    .home-page .section-title {
        font-size: 1.75rem;
        margin-bottom: 32px;
        line-height: 1.25;
    }

    .home-page .slide-content h2 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .home-page .btn-hero {
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: 14px 20px;
    }

    .home-page .services-grid {
        grid-template-columns: 1fr;
        max-width: none;
        gap: 16px;
    }

    .home-page .service-card {
        min-height: 340px;
        border-radius: 16px;
    }

    .home-page .pricing-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-page .pricing-card {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .home-page .pricing-card.popular {
        transform: none;
    }

    .home-page .current-price {
        font-size: 2.4rem;
    }

    .home-page .tabs-container {
        flex-direction: column;
        gap: 8px;
    }

    .home-page .tab-btn {
        width: 100%;
        justify-content: center;
    }

    .home-page .equipment-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-page .form-container {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .home-page .btn-view-all {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .home-page .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }
}

/* ================= لوحة الإدارة — عام ================= */
@media (max-width: 992px) {
    .admin-sidebar {
        padding-top: var(--safe-top);
        height: calc(100% + var(--safe-top));
    }

    .top-navbar {
        padding: 12px 16px;
        padding-top: calc(12px + var(--safe-top));
        padding-left: max(16px, var(--safe-left));
        padding-right: max(16px, var(--safe-right));
    }

    .container {
        padding: 16px 12px;
        padding-left: max(12px, var(--safe-left));
        padding-right: max(12px, var(--safe-right));
        padding-bottom: calc(20px + var(--safe-bottom));
    }

    .card-panel {
        padding: 20px 16px;
        border-radius: 14px;
        margin-bottom: 20px;
    }

    h2.panel-title {
        font-size: 1.15rem;
        flex-wrap: wrap;
    }

    .plans-panel-head,
    .panel-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-add-plan,
    .btn-save-visibility {
        width: 100%;
        justify-content: center;
    }

    .visibility-toggle {
        width: 100%;
        justify-content: flex-start;
    }

    .action-btns {
        flex-direction: column;
        width: 100%;
    }

    .action-btns .btn-edit,
    .action-btns .btn-delete {
        width: 100%;
        justify-content: center;
    }

    /* Modals — شكل bottom sheet على الموبايل */
    .plan-modal,
    .food-modal,
    .legend-modal,
    .pm-modal {
        align-items: flex-end;
        padding: 0;
    }

    .plan-modal-panel,
    .food-modal-panel,
    .legend-modal-panel,
    .pm-modal-panel {
        width: 100%;
        max-height: calc(var(--app-vh, 1vh) * 100 - var(--safe-top) - 12px);
        border-radius: 16px 16px 0 0;
        padding: 20px 16px calc(20px + var(--safe-bottom));
    }

    .plan-modal-actions,
    .food-modal-actions,
    .legend-modal-actions {
        flex-direction: column;
    }

    .plan-modal-actions .btn-submit,
    .plan-modal-actions .btn-cancel,
    .food-modal-actions .btn-submit,
    .food-modal-actions .btn-cancel,
    .legend-modal-actions .btn-submit,
    .legend-modal-actions .btn-cancel {
        width: 100%;
    }

    .admin-notif-menu {
        left: auto;
        right: 0;
        min-width: min(320px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }

    .user-info {
        font-size: 0.95rem;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-footer {
        padding-bottom: calc(20px + var(--safe-bottom));
    }

    .has-admin-shell .form-row,
    .has-admin-shell .copy-plan-form,
    .has-admin-shell .meals-setup,
    .has-admin-shell .admin-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .has-admin-shell .form-col,
    .has-admin-shell .form-col-small {
        min-width: 100%;
        flex: 1 1 100%;
    }

    .has-admin-shell .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .has-admin-shell .filter-bar .filter-btn,
    .has-admin-shell .filter-bar a,
    .has-admin-shell .filter-bar .search-box {
        width: 100%;
    }

    .has-admin-shell .filter-bar .search-box {
        display: flex;
        flex-direction: column;
    }

    .has-admin-shell .filter-bar .search-box input {
        width: 100%;
        box-sizing: border-box;
    }

    .has-admin-shell .foods-panel-head,
    .has-admin-shell .legends-panel-head,
    .has-admin-shell .plans-panel-head,
    .has-admin-shell .panel-title-row,
    .has-admin-shell .header-card {
        flex-direction: column;
        align-items: stretch;
    }

    .has-admin-shell .btn-add-food,
    .has-admin-shell .btn-add-legend,
    .has-admin-shell .btn-add-plan,
    .has-admin-shell .btn-save-visibility,
    .has-admin-shell .btn-submit,
    .has-admin-shell .btn-back {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .has-admin-shell .tabs-nav,
    .has-admin-shell .dashboard-tabs {
        flex-direction: column;
        gap: 8px;
        overflow: visible;
        border-bottom: none;
    }

    .has-admin-shell .tabs-nav .tab-btn,
    .has-admin-shell .dashboard-tabs .tab-btn {
        width: 100%;
        justify-content: center;
        border: 1px solid #e2e5ea;
        border-radius: 12px;
        border-bottom: 1px solid #e2e5ea;
        min-height: 48px;
        padding: 14px 16px;
    }

    .has-admin-shell .tabs-nav .tab-btn.active,
    .has-admin-shell .dashboard-tabs .tab-btn.active {
        border-color: #e63946;
        background: #fff5f5;
    }

    .has-admin-shell .header-card h2 {
        font-size: 1.15rem;
        flex-wrap: wrap;
    }

    .has-admin-shell .profile-grid {
        grid-template-columns: 1fr;
    }

    .has-admin-shell .chat-container {
        height: min(52vh, 420px);
    }

    .has-admin-shell .diet-templates-grid {
        grid-template-columns: 1fr;
    }

    .has-admin-shell .meal-block-head,
    .has-admin-shell .alt-row,
    .has-admin-shell .title-btns,
    .has-admin-shell .daily-totals {
        flex-direction: column;
        align-items: stretch;
    }

    .has-admin-shell .food-picker {
        max-width: none;
        min-width: 100%;
    }

    .has-admin-shell .qty-input,
    .has-admin-shell .unit-select {
        width: 100%;
        min-width: 0;
    }

    .has-admin-shell .dev-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .has-admin-shell .week-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .has-admin-shell .copy-plan-form select,
    .has-admin-shell .copy-plan-form button {
        width: 100%;
    }

    .has-admin-shell .costa-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .has-admin-shell .costa-modal {
        max-width: none;
        border-radius: 16px 16px 0 0;
        padding-bottom: calc(22px + var(--safe-bottom));
    }

    .has-admin-shell .costa-modal-actions {
        flex-direction: column;
    }

    .has-admin-shell .costa-modal-actions .costa-modal-btn {
        width: 100%;
    }

    .has-admin-shell .main-content .container {
        max-width: 100% !important;
    }

    .has-admin-shell #tab-workout .data-table-wrapper {
        overflow: visible !important;
    }

    .has-admin-shell #tab-workout .data-table-wrapper table {
        min-width: 0 !important;
    }
}

/* جداول الإدارة → بطاقات على الموبايل */
@media (max-width: 768px) {
    .has-admin-shell .app-data-table,
    .has-admin-shell .members-table-wrap {
        overflow: visible !important;
    }

    .has-admin-shell .app-data-table table,
    .has-admin-shell .members-table-wrap table {
        min-width: 0 !important;
        width: 100%;
        border: none;
        background: transparent;
    }

    .has-admin-shell .app-data-table thead,
    .has-admin-shell .app-data-table .app-table-header-row {
        display: none !important;
    }

    .has-admin-shell .app-data-table tbody tr,
    .has-admin-shell .app-data-table > table > tr:not(.app-table-header-row):not(.app-table-skip) {
        display: block;
        background: #fff;
        border: 1px solid #e8ecf1;
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 14px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    }

    .has-admin-shell .app-data-table tbody tr:hover,
    .has-admin-shell .app-data-table > table > tr:not(.app-table-header-row):not(.app-table-skip):hover {
        background: #fff;
    }

    .has-admin-shell .app-data-table .app-table-skip {
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    .has-admin-shell .app-data-table .app-table-skip td {
        display: block !important;
        text-align: center !important;
        padding: 24px 12px !important;
        border: none !important;
    }

    .has-admin-shell .app-data-table .app-table-skip td::before {
        display: none !important;
    }

    .has-admin-shell .app-data-table tbody td,
    .has-admin-shell .app-data-table > table > tr:not(.app-table-header-row):not(.app-table-skip) > td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid #f0f2f5;
        text-align: right;
        width: 100%;
        box-sizing: border-box;
    }

    .has-admin-shell .app-data-table tbody td:last-child,
    .has-admin-shell .app-data-table > table > tr:not(.app-table-header-row):not(.app-table-skip) > td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .has-admin-shell .app-data-table tbody td::before,
    .has-admin-shell .app-data-table > table > tr:not(.app-table-header-row):not(.app-table-skip) > td::before {
        content: attr(data-label);
        font-weight: 800;
        color: #1d3557;
        font-size: 0.82rem;
        flex-shrink: 0;
        min-width: 88px;
    }

    .has-admin-shell .app-data-table tbody td[data-label="إجراء"]::before,
    .has-admin-shell .app-data-table tbody td[data-label=""]::before,
    .has-admin-shell .app-data-table > table > tr > td[data-label="إجراء"]::before,
    .has-admin-shell .app-data-table > table > tr > td[data-label=""]::before {
        display: none;
    }

    .has-admin-shell .app-data-table tbody td[data-label="إجراء"],
    .has-admin-shell .app-data-table > table > tr > td[data-label="إجراء"] {
        flex-direction: column;
        padding-top: 12px;
    }

    .has-admin-shell .app-data-table .btn-followup,
    .has-admin-shell .app-data-table .btn-edit,
    .has-admin-shell .app-data-table .btn-delete,
    .has-admin-shell .app-data-table .btn-approve,
    .has-admin-shell .app-data-table .btn-reject {
        width: 100%;
        justify-content: center;
    }

    .has-admin-shell .app-data-table .plan-title {
        font-size: 1rem !important;
    }

    .has-admin-shell .app-data-table .plan-price {
        text-align: left;
    }

    .has-admin-shell .app-data-table .member-link {
        flex-wrap: wrap;
    }
}

/* WebView: إخفاء scroll bounce الزائد */
html.is-webview .site-header {
    position: sticky;
}

html.is-standalone .site-header,
html.is-mobile-app .site-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ================= لوحة العضو ================= */
@media (max-width: 768px) {
    .user-dashboard-page {
        padding-left: max(14px, var(--safe-left));
        padding-right: max(14px, var(--safe-right));
        padding-bottom: calc(40px + var(--safe-bottom));
    }

    .user-dashboard-page .custom-modal {
        align-items: flex-end;
        padding-bottom: var(--safe-bottom);
    }

    .user-dashboard-page .custom-modal .modal-content {
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 16px 16px 0 0;
        max-height: min(92vh, calc(var(--app-vh, 1vh) * 92));
    }

    .user-dashboard-page .chat-form .btn-submit {
        width: 100%;
    }

    .user-dashboard-page .inline-reply-form button[type="submit"] {
        width: 100%;
        min-height: var(--touch-min);
    }
}

/* ================= تسجيل دخول الإدارة ================= */
@media (max-width: 768px) {
    body.admin-auth-page {
        padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
        box-sizing: border-box;
    }

    body.admin-auth-page .auth-card {
        padding: 28px 20px;
        border-radius: 14px;
        max-width: none;
    }

    body.admin-auth-page .auth-card h2 {
        font-size: 1.6rem;
    }

    body.admin-auth-page .btn-submit {
        width: 100%;
        min-height: var(--touch-min);
    }
}