/**
 * Mobile-First Responsive Styles
 * התאמות למובייל - סדר אמיתי
 */

/* ===========================================
   BASE MOBILE STYLES (up to 576px)
   =========================================== */

/* כותרות מותאמות */
@media (max-width: 576px) {
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }

    /* Navbar */
    .navbar-brand {
        font-size: 1.2rem !important;
    }

    .navbar .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Container padding */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Cards */
    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    /* כפתורי הצבעה */
    .vote-btn {
        min-width: 80px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Vote bar */
    .vote-bar {
        height: 25px;
    }

    /* Tables */
    .table {
        font-size: 0.85rem;
    }

    .table td, .table th {
        padding: 0.5rem;
    }

    /* Badges */
    .badge {
        font-size: 0.7rem;
    }

    /* Forms */
    .form-control, .form-select {
        font-size: 16px; /* מונע zoom באייפון */
    }

    /* Alerts */
    .alert {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    /* Share buttons inline */
    .share-buttons-inline {
        flex-wrap: wrap;
    }

    .share-buttons-inline .btn {
        padding: 0.25rem 0.5rem;
    }

    /* Footer */
    footer .row {
        text-align: center;
    }

    footer .col-md-3 {
        margin-bottom: 1rem;
    }

    footer h6 {
        margin-top: 1rem;
    }

    /* דף הבית - סטטיסטיקות */
    .stats-section .col-md-3 {
        margin-bottom: 0.5rem;
    }

    .stats-section .card-body {
        padding: 0.75rem;
    }

    .stats-section h3 {
        font-size: 1.5rem;
    }

    /* Bill card - כרטיסי הצעות חוק */
    .bill-card .card-title {
        font-size: 1rem;
    }

    .bill-card .card-text {
        font-size: 0.85rem;
    }

    /* שלבי חקיקה */
    .voting-stages-detailed .stage-box {
        padding: 10px !important;
    }

    .voting-stages-detailed .stage-title {
        font-size: 0.85rem;
    }

    .voting-stages-detailed .stage-subtitle {
        font-size: 0.7rem;
    }

    .voting-stages-detailed .stage-date {
        font-size: 0.75rem;
    }

    .voting-stages-detailed .stage-number .badge {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    /* Accordion - הצבעות מפלגות */
    .accordion-button {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .accordion-body {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    /* Progress bars */
    .progress {
        height: 20px !important;
        font-size: 0.75rem;
    }

    /* Modal */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    /* Onboarding modal */
    #onboardingModal .modal-body {
        padding: 1rem;
    }

    #onboardingModal .row.g-4 {
        --bs-gutter-y: 1rem;
    }

    #onboardingModal .col-md-6 {
        padding: 0;
    }

    #onboardingModal h4 {
        font-size: 1.1rem;
    }

    #onboardingModal h6 {
        font-size: 0.9rem;
    }

    #onboardingModal .small, #onboardingModal small {
        font-size: 0.8rem;
    }

    #onboardingModal .row.g-3 .col-md-4 {
        margin-bottom: 0.5rem;
    }

    #onboardingModal .p-3 {
        padding: 0.75rem !important;
    }

    /* Share modal buttons */
    #dynamicShareModal .btn-lg {
        padding: 0.75rem !important;
    }

    #dynamicShareModal .btn-lg .fs-4 {
        font-size: 1.25rem !important;
    }

    /* טאבים */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 0.8rem;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .breadcrumb-item {
        white-space: nowrap;
    }

    /* דף השוואה */
    .compare-page .display-5 {
        font-size: 2rem;
    }

    /* תגובות */
    .comment-item {
        padding: 0.75rem;
    }

    /* FAB - כפתור צף */
    .fab-share {
        bottom: 70px;
        left: 15px;
    }

    /* הסתרת כפתורי שיתוף inline במובייל - יוחלף ב-FAB */
    .hide-on-mobile {
        display: none !important;
    }

    /* הצגת FAB רק במובייל */
    .show-on-mobile {
        display: block !important;
    }
}

/* ===========================================
   TABLET STYLES (577px - 991px)
   =========================================== */

@media (min-width: 577px) and (max-width: 991px) {
    h1, .h1 { font-size: 1.75rem; }

    .card-body {
        padding: 1.25rem;
    }

    .vote-btn {
        min-width: 90px;
    }

    /* שלבי חקיקה */
    .voting-stages-detailed .col-6 {
        padding: 0.5rem;
    }
}

/* ===========================================
   DESKTOP STYLES (992px+)
   =========================================== */

@media (min-width: 992px) {
    .show-on-mobile {
        display: none !important;
    }
}

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

@media (hover: none) and (pointer: coarse) {
    /* הגדלת אזורי לחיצה */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-sm {
        min-height: 36px;
        min-width: 36px;
    }

    /* Dropdown items */
    .dropdown-item {
        padding: 0.75rem 1rem;
    }

    /* Links */
    .nav-link {
        padding: 0.75rem 1rem;
    }

    /* Accordion buttons */
    .accordion-button {
        padding: 1rem;
    }

    /* Form controls */
    .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }

    /* Remove hover effects on touch devices */
    .bill-card:hover {
        transform: none;
        box-shadow: none;
    }
}

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

@media (max-height: 500px) and (orientation: landscape) {
    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }

    #onboardingModal .modal-body {
        padding: 0.75rem;
    }
}

/* ===========================================
   FLOATING ACTION BUTTON (FAB)
   =========================================== */

.fab-container {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Changed from left to right to avoid overlap with accessibility button */
    z-index: 1000;
    display: none;
}

@media (max-width: 576px) {
    .fab-container {
        display: block;
    }
}

.fab-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border: none;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.fab-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.fab-btn:focus {
    outline: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* ===========================================
   BOTTOM NAVIGATION (Optional)
   =========================================== */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 576px) {
    /* הפעלת bottom nav רק אם רוצים */
    /* .bottom-nav { display: flex; } */

    /* padding נוסף ל-body כדי לא להסתיר תוכן */
    /* body { padding-bottom: 60px; } */
}

.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.7rem;
}

.bottom-nav a.active {
    color: #0d6efd;
}

.bottom-nav a i {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

/* ===========================================
   SAFE AREA (iPhone X+)
   =========================================== */

@supports (padding: env(safe-area-inset-bottom)) {
    .fab-container {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: calc(20px + env(safe-area-inset-right));
    }

    footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
    .navbar, footer, .fab-container, .share-buttons-inline, .vote-btn {
        display: none !important;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    body {
        font-size: 12pt;
    }
}

/* ===========================================
   ACCESSIBILITY - REDUCED MOTION
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .bill-card:hover {
        transform: none;
    }
}

/* ===========================================
   DARK MODE SUPPORT (Future)
   =========================================== */

@media (prefers-color-scheme: dark) {
    /* placeholder for dark mode */
}