/* ===== Pull-to-Refresh ===== */
#ptr-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    transform: translateY(-60px);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.ptr-content {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 20px;
    padding: 8px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    margin-top: 8px;
}

.ptr-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e0e0e0;
    border-top-color: #007AFF;
    border-radius: 50%;
    flex-shrink: 0;
}

#ptr-indicator.ptr-ready .ptr-spinner,
#ptr-indicator.ptr-refreshing .ptr-spinner {
    animation: ptr-spin 0.7s linear infinite;
}

@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}

.ptr-text {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

/* ===== Mobile UX improvements (no UI changes) ===== */
@media (max-width: 768px) {
    /* Prevent flash on tap */
    body {
        -webkit-tap-highlight-color: transparent;
    }

    /* Smooth momentum scrolling on iOS */
    .modal-body,
    main,
    [id="pages"] {
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure tap targets meet 44px minimum */
    .btn,
    .nav-link,
    .dropdown-item,
    button:not(.ptr-content button) {
        min-height: 44px;
    }

    /* Prevent accidental double-tap zoom on buttons */
    .btn,
    button,
    a {
        touch-action: manipulation;
    }

    /* Better text readability on small screens */
    input,
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
    }
}

/* ===== Mobile Overflow Fix — Tables & Wide Content ===== */
@media (max-width: 768px) {
    /* Make every table in the main content area scrollable horizontally.
       display:block preserves all internal table rendering while enabling
       overflow-x — this is the same technique Bootstrap's .table-responsive uses. */
    #pages table,
    .modal-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Tables that are already inside a .table-responsive wrapper
       should stay as-is (Bootstrap handles them). */
    .table-responsive table {
        display: table;
        overflow-x: visible;
    }

    /* Prevent page-level horizontal scroll caused by any other wide element */
    #pages,
    #app {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Long unbreakable strings (URLs, IDs, Thai text without spaces) */
    #pages p,
    #pages td,
    #pages th,
    #pages li,
    .modal-body p,
    .modal-body td,
    .modal-body th {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Pre / code blocks (config values, JSON output, etc.) */
    pre,
    code {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: pre;
        max-width: 100%;
    }

    /* Images that might be wider than the viewport */
    #pages img,
    .modal-body img {
        max-width: 100%;
        height: auto;
    }
}

/* ===== iOS Modal Overlay ===== */
.ios-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.ios-modal-content {
    background: #fff;
    width: 90%;
    max-width: 320px;
    border-radius: 14px;
    overflow: hidden;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

.ios-modal-header {
    padding: 20px 20px 10px;
}

.ios-modal-header i {
    font-size: 40px;
    color: #007AFF;
    margin-bottom: 10px;
}

.ios-modal-body {
    padding: 0 20px 20px;
    color: #333;
}

.ios-instruction-box {
    background: #f0f0f5;
    padding: 10px;
    border-radius: 8px;
    margin-top: 15px;
}

.ios-modal-footer {
    display: flex;
    border-top: 1px solid #e5e5e5;
}

.ios-modal-footer button {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    font-size: 17px;
    cursor: pointer;
}

.btn-ios-secondary {
    color: #666;
    border-right: 1px solid #e5e5e5 !important;
}

.btn-ios-primary {
    color: #007AFF;
    font-weight: bold;
}