/* Mobile Responsive CSS for Politext */

/* ============================================
   BASE MOBILE STYLES
   ============================================ */

/* Prevent horizontal scrolling on mobile */
body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Ensure containers don't overflow */
.container, .container-fluid {
    max-width: 100%;
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

/* Mid-width devices (many Android tablets/landscape phones): keep nav usable even when expanded */
@media (min-width: 576px) and (max-width: 991.98px) {
    .navbar-expand-sm .topbar-actions,
    .navbar-expand-sm .navbar-nav {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .navbar-expand-sm .topbar-actions .btn,
    .navbar-expand-sm .navbar-nav .btn {
        white-space: nowrap;
    }
}

/* Phone: Stack navbar items vertically */
@media (max-width: 767px) {
    .navbar-collapse {
        padding-top: 0.75rem;
    }

    .navbar-nav {
        margin-top: 1rem;
    }
    
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
    }
    
    /* Full width buttons in mobile nav */
    .navbar-nav .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .dropdown-menu {
        width: 100%;
    }
}

/* ============================================
   MOBILE TYPOGRAPHY
   ============================================ */

@media (max-width: 767px) {
    /* Scale down headings on mobile */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    h5 { font-size: 1rem !important; }
    
    /* Adjust lead text */
    .lead {
        font-size: 1.1rem !important;
    }
}

/* ============================================
   MOBILE FORMS
   ============================================ */

@media (max-width: 767px) {
    /* Full width form inputs on mobile */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        width: 100%;
    }
    
    /* Stack form labels and inputs */
    .form-group label,
    .mb-3 label {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    /* Full width buttons */
    .btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        min-height: 44px; /* iOS recommended touch target */
    }
    
    /* Stack button groups */
    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        border-radius: 0.25rem !important;
    }
}

/* ============================================
   MOBILE CARDS
   ============================================ */

@media (max-width: 767px) {
    /* Full width cards on mobile */
    .card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Reduce card header padding */
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    /* Stack card columns */
    .row-cols-1,
    .row-cols-md-2,
    .row-cols-lg-3,
    .row-cols-xl-4,
    .row-cols-xl-5 {
        display: flex;
        flex-direction: column;
    }
}

/* ============================================
   MOBILE TABLES
   ============================================ */

@media (max-width: 767px) {
    /* Make tables scrollable horizontally */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Reduce table font size */
    .table {
        font-size: 0.875rem;
    }
    
    .table td,
    .table th {
        padding: 0.5rem;
        white-space: nowrap;
    }
    
    /* Hide less important columns on mobile */
    .table .d-none-mobile {
        display: none !important;
    }
}

/* ============================================
   MOBILE PRICING CARDS
   ============================================ */

@media (max-width: 767px) {
    /* Stack pricing cards vertically */
    .pricing-card,
    .plan-card {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1.5rem;
    }
    
    /* Adjust pricing card padding */
    .pricing-card .card-body,
    .plan-card .card-body {
        padding: 1.5rem 1rem;
    }
    
    /* Reduce price font size */
    .pricing-card h2,
    .plan-card h2 {
        font-size: 2rem !important;
    }
}

/* ============================================
   MOBILE DASHBOARD
   ============================================ */

@media (max-width: 767px) {
    /* Stack dashboard cards */
    .dashboard-card {
        margin-bottom: 1rem;
    }
    
    /* Full width stats cards */
    .stats-card {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Reduce dashboard padding */
    .dashboard-container {
        padding: 1rem 0.5rem;
    }
}

/* ============================================
   MOBILE MESSAGES
   ============================================ */

@media (max-width: 767px) {
    /* Message list items */
    .message-item {
        padding: 1rem;
        border-bottom: 1px solid #dee2e6;
    }
    
    /* Truncate long message content */
    .message-content {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    
    /* Stack message metadata */
    .message-meta {
        display: block;
        margin-top: 0.5rem;
    }
    
    .message-meta span {
        display: block;
        margin-bottom: 0.25rem;
    }
}

/* ============================================
   MOBILE MODALS
   ============================================ */

@media (max-width: 767px) {
    /* Full screen modals on mobile */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }
    
    .modal-content {
        height: 100%;
        border-radius: 0;
    }
    
    .modal-header,
    .modal-footer {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
        overflow-y: auto;
    }
}

/* ============================================
   MOBILE ALERTS
   ============================================ */

@media (max-width: 767px) {
    .alert {
        font-size: 0.875rem;
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .alert-heading {
        font-size: 1rem !important;
    }
}

/* ============================================
   MOBILE FOOTER
   ============================================ */

@media (max-width: 767px) {
    footer {
        padding: 2rem 1rem;
        text-align: center;
    }
    
    footer .row {
        display: flex;
        flex-direction: column;
    }
    
    footer .col,
    footer .col-md-4,
    footer .col-md-6 {
        margin-bottom: 1.5rem;
    }
}

/* ============================================
   TABLET SPECIFIC (768px - 991px)
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {
    /* Two column layout for tablets */
    .row-cols-md-2 > * {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Adjust container padding */
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    /* Tablet-sized headings */
    h1 { font-size: 2.25rem !important; }
    h2 { font-size: 1.875rem !important; }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

/* Increase touch target sizes */
@media (hover: none) and (pointer: coarse) {
    /* Minimum touch target size of 44x44px */
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"],
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    .nav-link:hover,
    .card:hover {
        transform: none;
    }
}

/* ============================================
   LANDSCAPE MODE ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
}

/* ============================================
   ACCESSIBILITY & READABILITY
   ============================================ */

@media (max-width: 767px) {
    /* Improve line height for readability */
    body,
    p,
    li {
        line-height: 1.6;
    }
    
    /* Ensure sufficient color contrast */
    .text-muted {
        color: #6c757d !important;
    }
    
    /* Make links more tappable */
    a {
        padding: 0.25rem 0;
        display: inline-block;
    }
}

/* ============================================
   PREVENT ZOOM ON INPUT FOCUS (iOS)
   ============================================ */

@media (max-width: 767px) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"] {
        font-size: 16px !important;
    }
}