/* assets/css/mobile.css */
/* SASPOL OPERARIUS - MOBILE STYLES V125 */

/* ============================================ */
/* MOBILE OVERRIDES (V124) - RESPONSIVE LAYER  */
/* ============================================ */

@media (max-width: 768px) {
    .container.mt-5.pt-5 { 
        margin-top: 1rem !important; 
        padding-top: 3.5rem !important; 
    }
    
    .glass-panel { 
        padding: 15px !important; 
        margin-bottom: 15px !important; 
    }
    
    .navbar-brand { font-size: 1.1rem; }
    
    /* Duty Timer fix for small screens */
    .duty-timer { 
        font-size: 1.8rem; 
        margin: 15px 0; 
    }
    
    /* Badge Generator Responsive */
    .badge-display-row { 
        gap: 5px; 
        margin-bottom: 1rem; 
    }
    
    .digit-box { 
        width: 35px; 
        height: 45px; 
        font-size: 1.2rem; 
    }
    
    .digit-dash { 
        font-size: 1.2rem; 
        margin: 0 2px; 
    }
    
    .digit-static { 
        font-size: 1rem; 
        padding: 0 5px; 
    }
    
    /* Table responsiveness */
    .card.glass-panel.p-3 { overflow-x: auto; }
    
    .table-custom { 
        font-size: 0.8rem; 
        min-width: 500px; /* Ensure horizontal scroll works */
    }
    
    .table-custom th, 
    .table-custom td { 
        padding: 10px 5px; 
    }
    
    /* Profile adjustments */
    .insignia-wrapper { 
        min-height: 100px; 
        gap: 10px; 
    }
    
    .rank-box img { max-height: 70px !important; }
    .dept-box img { max-height: 50px !important; }
    .insignia-divider { height: 60px; }
    
    /* Stack controls on mobile */
    .d-flex.gap-2 { flex-direction: column; }
    .d-flex.gap-2 button { 
        width: 100% !important; 
        margin-bottom: 5px; 
    }
}

/* =========================================== */
/* V125: KRYTYCZNE POPRAWKI MOBILE - PRIORYTET */
/* =========================================== */

/* 1. INPUTY I PRZYCISKI DOSTOSOWANE DO DOTYKU */
@media (max-width: 768px) {
    /* Wszystkie elementy dotykowe mają min 44px */
    .form-control, .form-select, .search-input-custom,
    input[type="text"], input[type="password"], 
    input[type="datetime-local"], textarea,
    .btn, .nav-btn, .custom-option, 
    .list-group-item-action, .dept-check-card {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Zapobiega zoomowaniu iOS */
    .form-control, .form-select, input, textarea, select {
        font-size: 16px !important;
    }
    
    /* Większe inputy czasu w interwencjach */
    .inv-start, .inv-end {
        font-size: 18px !important;
        text-align: center;
    }
    
    /* Efekt dotyku dla przycisków */
    .btn:active, .nav-btn:active, .custom-option:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
        opacity: 0.9;
    }
    
    /* Większe ikony */
    .btn i, .nav-btn i {
        font-size: 1.1em !important;
        margin-right: 8px !important;
    }
}

/* 2. TABELE - CZYTELNOŚĆ NA MAŁYCH EKRANACH */
@media (max-width: 768px) {
    .table-responsive-mobile {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        margin-bottom: 15px;
    }
    
    .table-responsive-mobile::after {
        content: '← przewiń →';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        font-size: 0.7rem;
        opacity: 0.7;
        pointer-events: none;
        background: var(--panel-bg);
        padding: 3px 8px;
        border-radius: 10px;
        border: 1px solid var(--panel-border);
    }
    
    /* Dla bardzo małych ekranów */
    @media (max-width: 480px) {
        .table-custom {
            font-size: 0.75rem !important;
            min-width: 600px;
        }
        .table-custom th, .table-custom td {
            padding: 8px 4px !important;
            white-space: nowrap;
        }
        
        /* Kompaktowe nagłówki tabel */
        .table-custom th {
            font-size: 0.65rem !important;
            padding: 10px 4px !important;
        }
    }
}

/* 3. MODALE - DOPASOWANIE DO EKRANU */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 5px !important;
        max-height: 95vh !important;
        display: flex;
        align-items: center;
        min-height: -webkit-fill-available;
    }
    
    .modal-content {
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px !important;
    }
    
    /* Modal footer zawsze widoczny */
    .modal-footer {
        position: sticky !important;
        bottom: 0;
        background: var(--panel-bg) !important;
        border-top: 1px solid var(--panel-border) !important;
        padding: 12px 15px !important;
        z-index: 10;
    }
    
    /* Większe paddingi w modalach */
    .modal-body {
        padding: 20px 15px !important;
    }
    
    /* Specjalny styl dla długich formularzy */
    #dutyReportModal .modal-body {
        padding-bottom: 70px !important; /* Miejsce na footer */
    }
}

/* 4. GENERATOR ODZNAK - UKŁAD MOBILE */
@media (max-width: 768px) {
    #badge-generator .row {
        flex-direction: column-reverse !important;
    }
    
    #badge-generator .col-md-5,
    #badge-generator .col-md-7 {
        width: 100% !important;
        margin-bottom: 20px;
        flex: none !important;
    }
    
    .badge-display-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px;
        margin-bottom: 15px;
    }
    
    .digit-box {
        width: 32px !important;
        height: 42px !important;
        font-size: 1.4rem !important;
        margin: 2px;
    }
    
    .digit-dash {
        font-size: 1.2rem !important;
        margin: 0 1px !important;
    }
    
    .digit-static {
        font-size: 0.9rem !important;
        padding: 0 3px !important;
    }
    
    /* Przyciski w generatorze */
    #btn-confirm-badge {
        min-height: 52px !important;
        font-size: 1rem !important;
    }
}

/* 5. DUTY TIMER - OPTYMALIZACJA MOBILE */
@media (max-width: 768px) {
    .duty-timer {
        font-size: 2.2rem !important;
        letter-spacing: 1px;
        margin: 15px 0 !important;
        text-align: center;
        overflow-wrap: break-word;
        word-break: break-all;
    }
    
    /* Kontrolki służby */
    #duty-controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    #duty-controls .btn {
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 14px !important;
        font-size: 1rem !important;
    }
    
    /* Dla bardzo małych ekranów */
    @media (max-width: 480px) {
        .duty-timer {
            font-size: 1.9rem !important;
            margin: 10px 0 !important;
        }
        
        #duty-greeting {
            font-size: 1.4rem !important;
        }
        
        #duty-status-text {
            font-size: 0.9rem !important;
        }
    }
}

/* 6. NAVIGACJA MOBILE - HAMBURGER OPTIMIZATION */
@media (max-width: 768px) {
    .navbar .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Większy hamburger menu */
    .navbar .btn-outline-secondary {
        padding: 12px 15px !important;
        margin-right: 10px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }
    
    /* Mniejszy brand na mobile */
    .navbar-brand {
        font-size: 1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60vw;
    }
    
    /* Sidebar szerokość */
    .offcanvas-start {
        width: 85% !important;
        max-width: 320px !important;
    }
    
    /* Większe przyciski w sidebar */
    .nav-btn {
        padding: 14px 20px !important;
        font-size: 1rem !important;
        margin-bottom: 5px;
        min-height: 50px !important;
    }
    
    /* Theme switch bardziej dotykowy */
    .theme-switch {
        transform: scale(1.1);
    }
}

/* 7. PROFILE PAGE - UKŁAD MOBILE */
@media (max-width: 768px) {
    #my-profile-page .row {
        flex-direction: column;
    }
    
    #my-profile-page .col-md-4,
    #my-profile-page .col-md-8 {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Insygnia w układzie kolumnowym */
    .insignia-wrapper {
        flex-direction: column;
        min-height: auto;
        padding: 15px 0;
    }
    
    .insignia-divider {
        width: 60px;
        height: 2px;
        margin: 10px 0;
    }
    
    /* Mniejsze obrazy na mobile */
    .rank-box img {
        max-height: 60px !important;
    }
    
    .dept-box img {
        max-height: 40px !important;
    }
    
    /* Ekwipunek - kompaktowy widok */
    #my-equipment-list tr td:nth-child(2),
    #my-equipment-list tr td:nth-child(3) {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* 8. ADMIN PANELE - UKŁAD MOBILE */
@media (max-width: 768px) {
    /* Układ dwóch kolumn -> jedna kolumna */
    #admin-depts .row,
    #admin-ranks .row {
        flex-direction: column;
    }
    
    #admin-depts .col-md-4,
    #admin-depts .col-md-8,
    #admin-ranks .col-md-4,
    #admin-ranks .col-md-8 {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Formularze admina */
    #new-dept-name, #new-dept-short,
    #new-rank-name, #new-rank-hierarchy {
        font-size: 16px !important;
        height: 48px !important;
    }
    
    /* Grid departamentów bardziej kompaktowy */
    .dept-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }
    
    .dept-check-card {
        padding: 8px;
        min-height: 44px !important;
    }
}

/* 9. LOGIN PAGE - CENTROWANIE NA MOBILE */
@media (max-width: 768px) {
    #login-page .card {
        max-width: 95% !important;
        margin: 0 10px;
        padding: 20px 15px !important;
    }
    
    #login-badge, #login-pass {
        height: 52px !important;
        font-size: 17px !important;
    }
    
    #login-page .btn {
        height: 52px !important;
        font-size: 1.1rem !important;
    }
}

/* 10. DODATKOWE POPRAWKI DLA ORIENTACJI PIONOWEJ */
@media (max-width: 480px) and (orientation: portrait) {
    .container.mt-5.pt-5 {
        padding-top: 4rem !important;
    }
    
    /* Zmniejszenie marginesów */
    .glass-panel {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    /* Bardziej kompaktowe statystyki */
    .stat-badge-box {
        padding: 10px 5px !important;
        margin-bottom: 8px;
    }
    
    .stat-label {
        font-size: 0.6rem !important;
    }
    
    .stat-value {
        font-size: 0.9rem !important;
    }
}

/* 11. LANDSCAPE OPTIMIZATION */
@media (max-width: 768px) and (orientation: landscape) {
    .container.mt-5.pt-5 {
        padding-top: 4rem !important;
    }
    
    /* Mniejszy navbar w landscape */
    .navbar {
        min-height: 60px;
    }
    
    /* Większe inputy w landscape */
    .form-control, .form-select {
        min-height: 40px !important;
    }
}