/* ═══════════════════════════════════════════════════════════════
   HabitLab — mobile.css v7.0
   Goals:
   1. Tighter forms — 16px font (iOS zoom) but compact height
   2. Super console layout fixed
   3. App Store / Play Store polish
═══════════════════════════════════════════════════════════════ */

/* ─── 1. BASE FONT — slightly smaller ─── */
body { font-size: 13px !important; }

/* ─── 2. SAFE AREA — iPhone notch / home bar support ─── */
body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ─── 3. INPUTS — 16px prevents iOS zoom, but compact height ─── */
.inp,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
    font-size: 16px !important;       /* iOS zoom prevention — do not lower */
    padding: 8px 11px !important;     /* tighter height */
    margin-bottom: 7px !important;
    line-height: 1.3 !important;
}

/* Field labels — tighter */
.field-label {
    font-size: 0.65rem !important;
    margin-bottom: 3px !important;
    letter-spacing: 0.06em !important;
}

/* Form rows — less gap */
.form-row {
    gap: 8px !important;
    margin-bottom: 0 !important;
}

/* ─── 4. CARDS — tighter padding ─── */
.card {
    padding: 14px !important;
    margin-bottom: 10px !important;
}

/* Card titles */
.card-title, h3.card-title {
    font-size: 0.95rem !important;
    margin-bottom: 12px !important;
}

/* ─── 5. BUTTONS — compact but still tappable ─── */
.btn {
    padding: 11px 18px !important;
    font-size: 0.85rem !important;
    min-height: 44px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.btn.sm {
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
    min-height: 30px !important;
}

/* ─── 6. TOGGLE GROUP (Metric/Imperial) — tighter ─── */
.toggle-group {
    margin-bottom: 12px !important;
}
.toggle-opt {
    padding: 7px !important;
    font-size: 0.82rem !important;
}

/* ─── 7. SLIDER CARDS — compact ─── */
.slider-card {
    padding: 11px 13px !important;
    margin-bottom: 8px !important;
}
.slider-head { margin-bottom: 8px !important; }
.slider-title { font-size: 0.84rem !important; }
.slider-val { font-size: 0.68rem !important; padding: 2px 8px !important; }
input[type=range] { height: 6px !important; }

/* ─── 8. CHECK ITEMS — keep 2-col grid ─── */
.check-item {
    padding: 10px 8px !important;
    font-size: 0.78rem !important;
    min-height: 44px !important;
    touch-action: manipulation;
}

/* ─── 9. SECTION LABEL ─── */
.section-label {
    font-size: 0.64rem !important;
    margin: 0 0 6px !important;
}

/* ─── 10. RANK ROWS ─── */
.rank-row {
    padding: 9px 11px !important;
    margin-bottom: 5px !important;
}

/* ─── 11. BOTTOM NAV — active pill indicator ─── */
.nav-item {
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-size: 0.58rem !important;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 3px;
    background: var(--primary);
    border-radius: 0 0 4px 4px;
}

/* ─── 12. SUPER CONSOLE — stat grid ─── */
.sa-stat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.sa-stat-card {
    border-radius: 12px !important;
    padding: 13px 12px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.sa-stat-val { font-size: 1.9rem !important; line-height: 1.1 !important; }
.sa-stat-label { font-size: 0.60rem !important; margin-top: 2px !important; }

/* ─── 13. SUPER CONSOLE — group rows (fix name wrap + button overflow) ─── */
#list-all-groups .rank-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 10px 11px !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
}
#list-all-groups .rank-row > div:first-child {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
#list-all-groups .rank-row > div:first-child > div:first-child {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
#list-all-groups .rank-row > div:first-child > div:nth-child(2) {
    font-size: 0.67rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text-2) !important;
    margin-top: 2px !important;
}
/* Inline PAID/UNPAID badge inside name div */
#list-all-groups span[style*="background:#dcfce7"],
#list-all-groups span[style*="background:#fef9c3"],
#list-all-groups span[style*="background:#fee2e2"] {
    font-size: 0.58rem !important;
    padding: 1px 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}
/* Buttons column */
#list-all-groups .rank-row > div:last-child {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
}
#list-all-groups .rank-row .btn.sm {
    padding: 4px 7px !important;
    font-size: 0.65rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* ─── 14. SUPER CONSOLE — user rows ─── */
#list-all-users .rank-row {
    gap: 6px !important;
    padding: 9px 11px !important;
}
#list-all-users .rank-row .btn.sm {
    padding: 4px 8px !important;
    font-size: 0.67rem !important;
}

/* ─── 15. SUPER CONSOLE — bottom tab nav ─── */
.super-tab-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #ffffff;
    border-top: 1px solid var(--border-2);
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 200;
    height: 56px;
    box-shadow: 0 -4px 20px rgba(26,26,46,0.06);
}
.super-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none; border: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 0.58rem;
    font-weight: 600;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 5px 4px;
    position: relative;
    min-height: 44px;
    transition: color 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.super-tab-btn.active { color: var(--primary); }
.super-tab-btn.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 3px;
    background: var(--primary);
    border-radius: 0 0 4px 4px;
}
.super-tab-btn svg { width: 19px; height: 19px; fill: currentColor; }
.super-tab-panel { display: none; }
.super-tab-panel.active { display: block; }

/* ─── 16. SCROLL & TAP POLISH ─── */
#main-app, #app-admin {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
button, .btn, .nav-item, .check-item, .rank-row, a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ─── 17. CONTAINER PADDING ─── */
@media (max-width: 390px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ─── 18. APP STORE POLISH — prevent text resize on rotate ─── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ─── 19. MODAL — safe area on iPhone ─── */
.modal-overlay {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
}

/* ─── 20. TOAST — sits above nav bar ─── */
#toast-container {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ─── 21. ADMIN GROUP OVERVIEW TILES — compact ─── */
#admin-summary-cards {
    padding: 12px !important;
    margin-bottom: 10px !important;
}
#admin-summary-cards > div:first-child {
    /* "GROUP OVERVIEW" heading */
    font-size: 0.65rem !important;
    margin-bottom: 8px !important;
}
#admin-summary-cards > div:last-child {
    gap: 7px !important;
}
/* The 4 stat tiles — target by their parent grid */
#admin-summary-cards > div:last-child > div {
    padding: 10px 8px !important;
    border-radius: 10px !important;
}
/* Big numbers inside tiles */
#gs-total, #gs-pending, #gs-active, #gs-overdue {
    font-size: 1.5rem !important;
    line-height: 1 !important;
}
/* Tile labels */
#gs-total + div, #gs-pending + div,
#gs-active + div, #gs-overdue + div {
    font-size: 0.62rem !important;
    margin-top: 2px !important;
}

/* ─── 22. DANGER ZONE BUTTONS — prevent text wrap ─── */
#app-admin .btn.danger,
#app-admin .card[style*="border:1px solid #ef4444"] .btn,
#app-admin .card[style*="border: 1px solid #ef4444"] .btn {
    font-size: 0.80rem !important;
    padding: 10px 14px !important;
    min-height: 40px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ─── 23. PROFILE FORM — tighter field spacing ─── */
/* Profile tab inputs already covered by rule 3 (8px padding)
   Extra fix: reduce gap between label+input pairs */
#tab-profile .field-label,
#tab-profile label.field-label {
    margin-top: 8px !important;
    margin-bottom: 2px !important;
    font-size: 0.63rem !important;
}
#tab-profile .inp,
#tab-profile input,
#tab-profile select,
#tab-profile textarea {
    margin-bottom: 0 !important;
}
#tab-profile .card {
    padding: 13px !important;
}

/* ─── 24. SAVE PROFILE BUTTON ─── */
#tab-profile .btn--save,
#tab-profile .btn {
    margin-top: 10px !important;
    padding: 11px !important;
    font-size: 0.85rem !important;
}

/* ─── 25. GENERAL — h3 inside cards ─── */
.card h3 {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}

/* ─── 26. MEMBER ACCESS CARD button ─── */
#app-admin .card[style*="linear-gradient(135deg,#f0effe"] .btn,
#app-admin .card[style*="linear-gradient(135deg, #f0effe"] .btn {
    padding: 9px 16px !important;
    font-size: 0.82rem !important;
    width: auto !important;
    min-height: 38px !important;
}