/* =============================================
   MOBILE.CSS - Responzivní styly pro tablety a mobily
   Testovací soubor - po dokončení integrovat do hlavního CSS
   ============================================= */

/* === STŘEDNÍ DESKTOP (1200px - 1400px) - skrýt /100g sloupce === */
@media screen and (max-width: 1400px) and (min-width: 1201px) {
    /* Tabulka kalkulačky - skrýt /100g sloupce, více místa pro potravinu */
    .table-header, .table-row {
        grid-template-columns: 120px 1fr 80px 90px 75px 75px 75px 40px;
    }
    .header-separator, .row-separator,
    .table-header > *:nth-child(9),
    .table-header > *:nth-child(10),
    .table-header > *:nth-child(11),
    .table-header > *:nth-child(12),
    .table-row > *:nth-child(9),
    .table-row > *:nth-child(10),
    .table-row > *:nth-child(11),
    .table-row > *:nth-child(12) {
        display: none;
    }
    
    .totals-section, .target-section, .diff-section {
        grid-template-columns: 120px 1fr 80px 90px 75px 75px 75px 40px;
    }
    .totals-section > *:nth-child(8),
    .totals-section > *:nth-child(9),
    .totals-section > *:nth-child(10),
    .totals-section > *:nth-child(11),
    .totals-section > *:nth-child(12),
    .totals-section > *:nth-child(13),
    .target-section > *:nth-child(8),
    .target-section > *:nth-child(9),
    .target-section > *:nth-child(10),
    .target-section > *:nth-child(11),
    .target-section > *:nth-child(12),
    .target-section > *:nth-child(13),
    .diff-section > *:nth-child(8),
    .diff-section > *:nth-child(9),
    .diff-section > *:nth-child(10),
    .diff-section > *:nth-child(11),
    .diff-section > *:nth-child(12),
    .diff-section > *:nth-child(13) {
        display: none;
    }
}

/* === TABLET (769px - 1200px) === */
/* Všechny mobilní styly jen pro obrazovku, ne pro tisk */
@media screen and (max-width: 1200px) and (min-width: 769px) {
    .container { 
        padding: 1rem; 
    }
    
    /* Header */
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .user-area {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Target inputs - 2 řádky */
    .target-inputs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    .target-inputs .form-group {
        min-width: 0;
    }
    .target-inputs input {
        width: 100%;
    }
    
    /* Tabulka kalkulačky - skrýt /100g sloupce */
    .table-header, .table-row {
        grid-template-columns: 100px 1fr 70px 80px 65px 65px 65px 35px;
    }
    .header-separator, .row-separator,
    .table-header > *:nth-child(9),
    .table-header > *:nth-child(10),
    .table-header > *:nth-child(11),
    .table-header > *:nth-child(12),
    .table-row > *:nth-child(9),
    .table-row > *:nth-child(10),
    .table-row > *:nth-child(11),
    .table-row > *:nth-child(12) {
        display: none;
    }
    
    .totals-section, .target-section, .diff-section {
        grid-template-columns: 100px 1fr 70px 80px 65px 65px 65px 35px;
    }
    .totals-section > *:nth-child(8),
    .totals-section > *:nth-child(9),
    .totals-section > *:nth-child(10),
    .totals-section > *:nth-child(11),
    .totals-section > *:nth-child(12),
    .totals-section > *:nth-child(13),
    .target-section > *:nth-child(8),
    .target-section > *:nth-child(9),
    .target-section > *:nth-child(10),
    .target-section > *:nth-child(11),
    .target-section > *:nth-child(12),
    .target-section > *:nth-child(13),
    .diff-section > *:nth-child(8),
    .diff-section > *:nth-child(9),
    .diff-section > *:nth-child(10),
    .diff-section > *:nth-child(11),
    .diff-section > *:nth-child(12),
    .diff-section > *:nth-child(13) {
        display: none;
    }
    
    /* Food list - kompaktnější */
    .food-list-header, .food-list-item {
        grid-template-columns: 1fr 80px 55px 50px 50px 50px 45px 35px 30px 50px;
        font-size: 0.8rem;
    }
    
    /* Ratio */
    .ratio-value {
        font-size: 1.5rem;
    }
}

/* === MOBILE (do 768px) === */
@media screen and (max-width: 768px) {
    .container { 
        padding: 0.75rem; 
    }
    
    /* Header */
    header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .logo h1 {
        font-size: 1.4rem;
    }
    .user-area {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .user-info {
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Tabs - scrollovatelné */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        flex-shrink: 0;
    }
    
    /* Sections */
    .section {
        padding: 1rem;
        border-radius: 8px;
    }
    .section h2 {
        font-size: 1rem;
    }
    
    /* Forms */
    .form-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    .form-group.flex-1, .form-group.flex-2 {
        min-width: 100%;
    }
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
    .form-grid .wide {
        grid-column: span 2;
    }
    
    /* Target inputs - 2 sloupce */
    .target-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        padding: 0.75rem;
    }
    .target-inputs .form-group {
        width: 100%;
        min-width: 0;
    }
    .target-inputs input {
        width: 100%;
    }
    
    /* === TABULKA KALKULAČKY - MOBILNÍ KARTY === */
    .table-container {
        border-radius: 8px;
    }
    
    .table-header {
        display: none !important;
    }
    
    .table-body {
        max-height: none;
        overflow-y: visible;
    }
    
    .table-row {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
        padding-top: 2.5rem; /* prostor pro delete tlačítko */
        margin-bottom: 0.5rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-secondary) !important;
        position: relative;
    }
    .table-row:nth-child(odd) {
        background: var(--bg-row) !important;
    }
    
    /* Skrýt separátor a /100g */
    .table-row .row-separator,
    .table-row > *:nth-child(8),
    .table-row > *:nth-child(9),
    .table-row > *:nth-child(10),
    .table-row > *:nth-child(11),
    .table-row > *:nth-child(12) {
        display: none !important;
    }
    
    /* Kategorie - plná šířka */
    .table-row > *:nth-child(1) {
        order: 1;
        width: 100%;
    }
    .table-row select.row-select {
        width: 100%;
    }
    
    /* Potravina - plná šířka */
    .table-row > *:nth-child(2) {
        order: 2;
        width: 100%;
    }
    .table-row .food-wrapper {
        width: 100%;
    }
    .table-row .food-input {
        width: 100%;
        font-size: 1rem;
        padding: 0.5rem;
        text-align: left;
    }
    
    /* Gramáž - plná šířka */
    .table-row > *:nth-child(3) {
        order: 3;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .table-row > *:nth-child(3)::before {
        content: 'Gramáž:';
        font-size: 0.8rem;
        color: var(--text-muted);
        font-weight: 600;
        min-width: 55px;
    }
    .table-row .grams-input {
        width: 80px;
        font-size: 1rem;
        padding: 0.5rem;
    }
    
    /* Nutriční hodnoty - v řádku vedle sebe */
    .table-row > *:nth-child(4),
    .table-row > *:nth-child(5),
    .table-row > *:nth-child(6),
    .table-row > *:nth-child(7) {
        order: 4;
        display: inline-flex !important;
        align-items: center;
        gap: 0.25rem;
        padding: 0.35rem 0.5rem;
        background: var(--bg-primary);
        border-radius: 4px;
        font-size: 0.85rem;
    }
    .table-row > *:nth-child(4)::before { content: 'E:'; color: var(--energy); font-weight: 600; }
    .table-row > *:nth-child(5)::before { content: 'B:'; color: var(--protein); font-weight: 600; }
    .table-row > *:nth-child(6)::before { content: 'T:'; color: var(--fat); font-weight: 600; }
    .table-row > *:nth-child(7)::before { content: 'S:'; color: var(--carbs); font-weight: 600; }
    
    /* Delete tlačítko - vpravo nahoře */
    .table-row > *:nth-child(13) {
        order: 0;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }
    .delete-btn {
        width: 32px;
        height: 32px;
    }
    
    /* Souhrn sekce - mobilní layout */
    .totals-section, .target-section, .diff-section {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .totals-section > *,
    .target-section > *,
    .diff-section > * {
        display: none;
    }
    
    /* Label vlevo */
    .totals-section > *:nth-child(1),
    .target-section > *:nth-child(1),
    .diff-section > *:nth-child(1) {
        display: block;
        font-weight: 700;
        min-width: 55px;
    }
    
    /* Hodnoty v řádku */
    .totals-section > *:nth-child(3),
    .totals-section > *:nth-child(4),
    .totals-section > *:nth-child(5),
    .totals-section > *:nth-child(6),
    .totals-section > *:nth-child(7) {
        display: inline-flex !important;
        align-items: center;
        gap: 0.2rem;
        padding: 0.3rem 0.4rem;
        background: rgba(255,255,255,0.5);
        border-radius: 4px;
        font-size: 0.8rem;
    }
    .totals-section > *:nth-child(3)::before { content: 'g:'; color: var(--text-muted); font-weight: 600; }
    .totals-section > *:nth-child(4)::before { content: 'E:'; color: var(--energy); font-weight: 600; }
    .totals-section > *:nth-child(5)::before { content: 'B:'; color: var(--protein); font-weight: 600; }
    .totals-section > *:nth-child(6)::before { content: 'T:'; color: var(--fat); font-weight: 600; }
    .totals-section > *:nth-child(7)::before { content: 'S:'; color: var(--carbs); font-weight: 600; }
    
    .target-section > *:nth-child(4),
    .target-section > *:nth-child(5),
    .target-section > *:nth-child(6),
    .target-section > *:nth-child(7) {
        display: inline-flex !important;
        align-items: center;
        gap: 0.2rem;
        padding: 0.3rem 0.4rem;
        background: rgba(255,255,255,0.5);
        border-radius: 4px;
        font-size: 0.8rem;
    }
    .target-section > *:nth-child(4)::before { content: 'E:'; color: var(--energy); font-weight: 600; }
    .target-section > *:nth-child(5)::before { content: 'B:'; color: var(--protein); font-weight: 600; }
    .target-section > *:nth-child(6)::before { content: 'T:'; color: var(--fat); font-weight: 600; }
    .target-section > *:nth-child(7)::before { content: 'S:'; color: var(--carbs); font-weight: 600; }
    
    .diff-section > *:nth-child(4),
    .diff-section > *:nth-child(5),
    .diff-section > *:nth-child(6),
    .diff-section > *:nth-child(7) {
        display: inline-flex !important;
        align-items: center;
        gap: 0.2rem;
        padding: 0.3rem 0.4rem;
        border-radius: 4px;
        font-size: 0.8rem;
    }
    .diff-section > *:nth-child(4)::before { content: 'E:'; font-weight: 600; }
    .diff-section > *:nth-child(5)::before { content: 'B:'; font-weight: 600; }
    .diff-section > *:nth-child(6)::before { content: 'T:'; font-weight: 600; }
    .diff-section > *:nth-child(7)::before { content: 'S:'; font-weight: 600; }
    
    /* Akce - vertikálně */
    .actions {
        flex-direction: column;
    }
    .actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Ratio display */
    .ratio-display {
        padding: 1rem;
    }
    .ratio-numeric {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .ratio-value {
        font-size: 1.75rem;
    }
    .ratio-legend {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* === RECEPTY === */
    .recipe-card {
        flex-direction: column;
        align-items: stretch;
    }
    .recipe-actions {
        margin-top: 0.75rem;
        justify-content: flex-end;
    }
    .recipe-values {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    /* === SEZNAM POTRAVIN === */
    .food-list {
        max-height: none;
    }
    
    .food-list-header {
        display: none;
    }
    
    .food-list-item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
        position: relative;
    }
    
    .food-list-item .food-name {
        font-size: 1rem;
        white-space: normal;
        padding-right: 80px; /* prostor pro tlačítka */
    }
    
    .food-list-item .food-category {
        font-size: 0.85rem;
    }
    
    /* Nutriční hodnoty v řádku */
    .food-list-item .food-value {
        display: inline-block;
        padding: 0.2rem 0.4rem;
        background: var(--bg-primary);
        border-radius: 4px;
        font-size: 0.8rem;
    }
    .food-list-item .food-value:nth-of-type(1)::before { content: 'E: '; color: var(--energy); }
    .food-list-item .food-value:nth-of-type(2)::before { content: 'B: '; color: var(--protein); }
    .food-list-item .food-value:nth-of-type(3)::before { content: 'T: '; color: var(--fat); }
    .food-list-item .food-value:nth-of-type(4)::before { content: 'S: '; color: var(--carbs); }
    
    /* Akce v pravém horním rohu */
    .food-list-item .toggle-btn,
    .food-list-item .btn-ghost,
    .food-list-item .food-actions {
        position: absolute;
        top: 0.75rem;
    }
    .food-list-item .toggle-btn { right: 70px; }
    .food-list-item .btn-ghost { right: 40px; }
    .food-list-item .food-actions { right: 0.75rem; }
    
    /* Search box */
    .search-box {
        flex-direction: column;
        align-items: stretch !important;
    }
    .search-box input {
        max-width: none;
    }
    .search-box select {
        width: 100%;
    }
    
    /* Stats bar */
    .stats-bar {
        justify-content: space-around;
    }
    .stat-item {
        align-items: center;
        text-align: center;
    }
    
    /* === SKUPINY === */
    .group-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .member-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    /* === MODALY === */
    .modal-overlay {
        padding: 0.5rem;
    }
    .modal {
        padding: 1rem;
        border-radius: 8px;
        max-height: 95vh;
    }
    .modal h2 {
        font-size: 1.1rem;
    }
    .modal-actions {
        flex-direction: column;
    }
    .modal-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Guest notice */
    .guest-notice {
        flex-direction: column;
        text-align: center;
    }
    
    /* Dropdown na mobilu */
    .food-dropdown {
        position: fixed !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-height: 50vh;
    }
    .food-option {
        padding: 0.75rem;
        font-size: 1rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    .btn-small {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* === EXTRA MALÉ OBRAZOVKY (do 400px) === */
@media screen and (max-width: 400px) {
    .container {
        padding: 0.5rem;
    }
    
    .logo h1 {
        font-size: 1.2rem;
    }
    
    .tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .section {
        padding: 0.75rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-grid .wide {
        grid-column: span 1;
    }
    
    .ratio-value {
        font-size: 1.5rem;
    }
    
    .stats-bar {
        gap: 0.5rem;
    }
    .stat-value {
        font-size: 1rem;
    }
}

/* === LANDSCAPE MODE NA MOBILU === */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .table-body {
        max-height: 40vh;
        overflow-y: auto;
    }
    
    .food-dropdown {
        max-height: 40vh;
    }
    
    .modal {
        max-height: 85vh;
    }
}

/* === DOTYKOVÉ ZAŘÍZENÍ - větší touch targets === */
@media screen and (pointer: coarse) {
    .btn {
        min-height: 44px;
    }
    
    .tab {
        min-height: 44px;
    }
    
    .delete-btn, .edit-btn, .toggle-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .food-option {
        min-height: 48px;
    }
    
    input, select, textarea {
        min-height: 44px;
        font-size: 16px; /* zabrání zoomu na iOS */
    }
}