/* ===========================================
   TekYourTime - Mobile CSS
   Chargé uniquement sur écrans < 768px
   =========================================== */

/* ============================================
   Styles communs mobile (portrait + paysage)
   ============================================ */

/* Masquer les panneaux latéraux */
.panel-left,
.panel-right {
    display: none !important;
}

/* Tabs pour ouvrir les panneaux */
.panel-tab {
    display: flex !important;
    position: fixed;
    left: 10px;
    top: 10px;
    transform: none;
    z-index: 100;
    background: var(--panel-bg, #1a1a1a);
    padding: 8px 12px;
    border-radius: 6px;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.panel-tab .tab-icon {
    font-size: 14px;
}

.panel-tab .tab-text {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 10px;
}

.panel-right-tab {
    display: flex !important;
    position: fixed;
    right: 10px;
    top: 10px;
    transform: none;
    z-index: 100;
    background: var(--panel-bg, #1a1a1a);
    padding: 8px 12px;
    border-radius: 6px;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.panel-right-tab .tab-icon {
    font-size: 14px;
}

.panel-right-tab .tab-text {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 10px;
}

/* Layout principal */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
}

.panel-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px;
    gap: 6px;
    overflow-y: auto;
}

/* Masquer les handles de resize */
.resize-handle {
    display: none !important;
}

/* ============================================
   Timer Control - Compact (en haut)
   ============================================ */
.timer-control {
    flex: 0 0 auto;
    padding: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    order: 1;
}

.timer-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    width: 100%;
}

.timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.unit-box {
    min-width: 10vw;
}

.unit-input {
    font-size: 5.5vw !important;
    width: 10vw !important;
    padding: 1vw !important;
}

.timer-separator {
    font-size: 5.5vw;
    margin: 0 0.5vw;
}

.timer-label {
    font-size: 2vw !important;
}

/* Flèches compactes */
.digit-arrow {
    font-size: 2.5vw !important;
    padding: 0.5vw 1.5vw !important;
}

.arrows-row {
    gap: 0.5vw;
}

/* Bouton play/pause compact */
.btn-playpause {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
}

.btn-playpause .play-icon {
    font-size: 14px !important;
}

/* Boutons restart/reset */
.btn-timer {
    padding: 6px 8px !important;
    font-size: 9px !important;
}

/* ============================================
   Preview - Flexible (en bas sur mobile)
   ============================================ */
.preview-master {
    flex: 0 0 auto;
    padding: 4px;
    order: 3;
    width: 100%;
}

.preview-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.preview-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-screen {
    width: 95vw;
    height: calc(95vw * 9 / 16);
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

/* Masquer le bouton ouvrir sur mobile */
.btn-fullscreen {
    display: none !important;
}

/* ============================================
   Zone texte - Compact (avant preview)
   ============================================ */
.text-control {
    flex: 0 0 auto;
    padding: 6px;
    order: 2;
}

.text-input-row {
    gap: 6px;
}

.text-main-row {
    gap: 6px;
}

.text-input {
    font-size: 12px !important;
    padding: 6px !important;
    min-height: 32px !important;
    resize: none !important;
}

.text-mode-buttons-vertical {
    gap: 3px;
}

.text-mode-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
}

.btn-toggle-text {
    padding: 8px 12px !important;
    font-size: 10px !important;
}

/* ============================================
   Mode PORTRAIT - Stack vertical
   ============================================ */
@media (orientation: portrait) {
    .panel-center {
        padding: 6px;
        padding-top: 50px;
        gap: 4px;
    }
    
    .timer-control {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .timer-display {
        gap: 2vw;
        width: 100%;
        max-width: 95vw;
        justify-content: center;
    }
    
    /* Masquer les heures - garder seulement mm:ss */
    .timer-unit[data-unit="h"] {
        display: none !important;
    }
    
    /* Masquer le premier séparateur (après les heures) */
    .timer-display > .timer-separator:first-of-type {
        display: none !important;
    }
    
    .timer-unit {
        flex-shrink: 1;
    }
    
    .unit-box {
        min-width: 18vw;
    }
    
    .unit-input {
        font-size: 10vw !important;
        width: 20vw !important;
        padding: 1.5vw !important;
    }
    
    .timer-separator {
        font-size: 10vw;
        margin: 0 2vw;
    }
    
    .timer-label {
        display: none !important;
    }
    
    .digit-arrow {
        font-size: 5vw !important;
        padding: 1vw 3vw !important;
    }
    
    .arrows-row {
        gap: 1vw;
    }
    
    /* Bouton play rectangulaire (large et moins haut) */
    .btn-playpause {
        width: 40vw !important;
        height: 12vw !important;
        min-width: 120px !important;
        min-height: 45px !important;
        border-radius: 10px !important;
        margin-top: -48px !important;
    }
    
    .btn-timer {
        padding: 2.4vw 4.8vw !important;
        font-size: 3.2vw !important;
    }
    
    /* Zone texte */
    .text-input {
        min-height: 28px !important;
        font-size: 11px !important;
    }
    
    .btn-toggle-text {
        padding: 6px 10px !important;
        font-size: 9px !important;
    }
}

/* ============================================
   Mode PAYSAGE - Optimisé horizontal
   ============================================ */
@media (orientation: landscape) {
    .timer-control {
        flex-wrap: nowrap;
    }
    
    .unit-input {
        font-size: 5vw !important;
        width: 9vw !important;
    }
    
    .timer-separator {
        font-size: 5vw;
    }
    
    .digit-arrow {
        font-size: 2vw !important;
        padding: 0.3vw 1.2vw !important;
    }
}

/* ============================================
   Très petits écrans (< 360px largeur)
   ============================================ */
@media (max-width: 360px) {
    .btn-playpause {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }
}

/* ============================================
   Panneau paramètres en overlay
   ============================================ */
.panel-left.mobile-open {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85vw;
    max-width: 300px;
    z-index: 1000;
    animation: slideInLeft 0.3s ease;
    overflow-y: auto;
}

.panel-right.mobile-open {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 75vw;
    max-width: 260px;
    z-index: 1000;
    animation: slideInRight 0.3s ease;
    overflow-y: auto;
}

/* Overlay sombre derrière les panneaux */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

.mobile-overlay.active {
    display: block;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}