/* mobile.css — Digicam Archaeology
   Estratégia 4: ajustes cirúrgicos por tipo de página.
   Usa :has() para evitar que regras de um contexto vazem para outro.
   ------------------------------------------------------------------ */

@media (max-width: 768px) {

/* ═══════════════════════════════════════════════════════════════════
   INDEX.HTML — intervenção mínima
   O desktop Win95 já funciona bem no mobile. Não tocar em proporções.
   Único problema real: itens do menu são pequenos demais para toque.
   ═══════════════════════════════════════════════════════════════════ */

    body:has(#main-window) .start-menu-item {
        padding: 14px 10px !important;
        font-size: 13px !important;
    }

    /* Garante que o menu não saia da tela pelo lado direito */
    body:has(#main-window) #start-menu {
        max-width: calc(100vw - 8px) !important;
    }


/* ═══════════════════════════════════════════════════════════════════
   PÁGINAS IE4 — gallery.html, bio.html, {id}_gallery.html
   Estas páginas já renderizam em 100vw — o chrome (title bar, menu
   bar, toolbar, systray, taskbar) já está no tamanho certo.
   Só precisamos: liberar scroll, ajustar grids e o viewer modal.
   ═══════════════════════════════════════════════════════════════════ */

    /* Chrome fixo — body e html não scrollam.
       Apenas o content-area interno tem scroll. */
    html:has(.ie-window),
    body:has(.ie-window) {
        overflow: hidden !important;
        height: 100% !important;
    }

    body:has(.ie-window) .ie-window {
        height: calc(100vh - 28px) !important;
    }

    /* Address bar — opção C: toque abre teclado, usuário lê e copia o caminho */
    body:has(.ie-window) .address-input {
        pointer-events: auto !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        cursor: text !important;
        color: #000 !important;
    }

    /* Start menu — único tap target pequeno que vale a pena ajustar */
    body:has(.ie-window) #start-menu {
        max-width: calc(100vw - 8px) !important;
    }

    body:has(.ie-window) .start-menu-item {
        padding: 14px 10px !important;
        font-size: 13px !important;
    }

    /* Folder grid (gallery.html hub) */
    body:has(.ie-window) .folder-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 12px !important;
    }

    /* Photo grid ({id}_gallery.html) */
    body:has(.ie-window) .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 10px !important;
    }

    body:has(.ie-window) .photo-thumb-frame {
        width: 100% !important;
        height: 80px !important;
    }

    /* Toolbar IE4 — ocultar tudo após Home em mobile
       Ordem no DOM: divider, Back, Forward, Stop, Refresh, Home,
       divider, Search, Favorites, History, divider, Channels, divider, Print
       Mantemos só Back→Home; o resto desaparece. */
    body:has(.ie-window) .standard-toolbar .toolbar-btn:nth-child(n+7) {
        display: none !important;
    }
    body:has(.ie-window) .standard-toolbar .divider-vertical:nth-child(n+7) {
        display: none !important;
    }
    /* Throbber também some — sobra espaço */
    body:has(.ie-window) #ie-throbber {
        display: none !important;
    }

    /* Viewer modal — ocupa quase toda a tela */
    body:has(.ie-window) .viewer-window {
        max-width: 100vw !important;
        max-height: 96vh !important;
        width: 100vw !important;
    }

    /* Botões do viewer — menores, só navegação essencial */
    body:has(.ie-window) .win-btn {
        padding: 4px 10px !important;
        font-size: 11px !important;
        min-height: 28px !important;
    }

    /* Imagem ocupa toda a área disponível */
    body:has(.ie-window) .viewer-content {
        flex: 1 !important;
    }

    body:has(.ie-window) .viewer-content img {
        max-width: 100vw !important;
        max-height: calc(96vh - 80px) !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }


/* ═══════════════════════════════════════════════════════════════════
   CAMERA PAGES — {id}.html
   Layout de duas colunas que precisa empilhar em mobile.
   ═══════════════════════════════════════════════════════════════════ */

    body:has(#container) #container > div[style*="flex"] {
        flex-wrap: wrap !important;
    }

    body:has(#container) #container > div[style*="flex"] > div {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Title bar das camera pages (usa <header>, não .title-bar) */
    body:has(#container) header {
        height: 32px !important;
    }

    body:has(#container) .title-btn {
        width: 28px !important;
        height: 26px !important;
    }

    body:has(#container) .btn-min {
        background-size: 56px 26px !important;
        background-position: 0 0 !important;
    }

    body:has(#container) .btn-max {
        background-size: 56px 26px !important;
        background-position: -28px 0 !important;
    }

    body:has(#container) .btn-close {
        background-size: 28px 26px !important;
    }


/* ═══════════════════════════════════════════════════════════════════
   INVENTORY — inventory.html
   Painel de filtros lateral + tabela com 7 colunas.
   ═══════════════════════════════════════════════════════════════════ */

    body:has(.app-body) {
        overflow: auto !important;
        font-size: 13px !important;
    }

    body:has(.app-body) .taskbar {
        height: 44px !important;
    }

    body:has(.app-body) #start-button {
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }

    body:has(.app-body) .systray {
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    body:has(.app-body) #start-menu {
        bottom: 44px !important;
        max-width: calc(100vw - 8px) !important;
    }

    body:has(.app-body) .start-menu-item {
        padding: 14px 10px !important;
        font-size: 13px !important;
    }

    body:has(.app-body) .window {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: calc(100vw - 20px) !important;
        height: auto !important;
        margin: 10px auto 54px !important;
    }

    body:has(.app-body) .title-bar {
        height: 32px !important;
    }

    body:has(.app-body) .title-btn {
        width: 28px !important;
        height: 26px !important;
    }

    body:has(.app-body) .btn-min {
        background-size: 56px 26px !important;
        background-position: 0 0 !important;
    }

    body:has(.app-body) .btn-max {
        background-size: 56px 26px !important;
        background-position: -28px 0 !important;
    }

    body:has(.app-body) .btn-close {
        background-size: 28px 26px !important;
    }

    body:has(.app-body) .app-body {
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
    }

    body:has(.app-body) .filter-panel {
        width: 100% !important;
    }

    body:has(.app-body) .table-panel {
        overflow-x: auto !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    /* Oculta Year, Sensor, MP — mantém ícone, Brand, Model, links */
    body:has(.app-body) table th:nth-child(4),
    body:has(.app-body) table th:nth-child(5),
    body:has(.app-body) table th:nth-child(6),
    body:has(.app-body) table td:nth-child(4),
    body:has(.app-body) table td:nth-child(5),
    body:has(.app-body) table td:nth-child(6) {
        display: none !important;
    }

    body:has(.app-body) .terminal-box {
        min-height: 40px !important;
        flex: none !important;
    }

}