/* ============================================================
   FilesMedia.net — Mobile & responsive improvements
   Bendros taisyklės visiems puslapiams (index, radijas, playlist,
   dchub, contacts). Įjungia papildomus pakeitimus tik mažuose
   ekranuose — PC vaizdas lieka kaip buvęs.
   ============================================================ */

/* Visada — geresnis touch atsakymas */
html {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
    /* Fonas iki pat ekrano kraštų (notch, status bar, home indicator zona) */
    background: #1e1e2f;
    min-height: 100%;
}
:root[data-theme="light"] { background: #eef1f6; }
:root[data-theme="oled"]  { background: #000000; }
:root[data-theme="retro"] { background: #001100; }

body { -webkit-tap-highlight-color: rgba(255,193,7,.18); }

/* Saugios zonos (notch'ai iPhone'ams ir t.t.) */
body {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Vaizdai, video, iframe niekada neišlenda už ekrano */
img, video, iframe, audio {
    max-width: 100%;
    height: auto;
}

/* Lentelės — leidžiame horizontalų scroll'ą jei netilpsta */
.table-wrap, .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   TABLET ir žemiau (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
    /* Theme toggle perkeliam šiek tiek į vidų, kad netrukdytų */
    .theme-toggle {
        top: 12px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
}

/* ============================================================
   PHONE (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
    /* Mažiname kraštus, kad turinys užimtų daugiau ploto */
    body { padding: 12px !important; }

    /* Pagrindinis konteinerys */
    .panel, .card, .container, main, .content {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }

    /* Antraštės — mažesnės bet vis dar readable */
    h1 { font-size: 22px !important; line-height: 1.25 !important; }
    h2 { font-size: 18px !important; line-height: 1.3 !important; }
    h3 { font-size: 16px !important; line-height: 1.35 !important; }

    /* Paragrafai */
    p, li, td, th { font-size: 14px !important; line-height: 1.5 !important; }

    /* Mygtukai — minimumas 44px aukščio (Apple HIG / Material guideline) */
    button,
    .btn,
    .link-btn,
    .nav-btn,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
    }

    /* Input'ai — didesni, kad mobile keyboard'ai neišdidintų puslapio */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important; /* iOS auto-zoom prevention */
        min-height: 44px !important;
        padding: 10px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    textarea { min-height: 100px !important; }

    /* Mygtukų grupės — visada wrap'inasi */
    .links, .nav-actions, .button-group, .controls, .actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .links .link-btn,
    .nav-actions .nav-btn {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    /* Sidebar + main content side-by-side - tampa vienas po kito */
    .hub-layout,
    .playlist-wrap,
    .split-layout,
    .two-col {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    /* Playlist'o stočių panel'is — limit'inta aukštis ant mobile */
    .station-panel,
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 220px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Radio player Now Playing - centruojam */
    .now {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
    .now-text { text-align: center !important; }

    /* Lentelės — leidžiame slinkti, jei netinka */
    table { font-size: 13px !important; }
    th, td { padding: 8px !important; white-space: nowrap; }

    /* Slėpiame mažiau svarbius stulpelius (paskutinį) */
    .table-wrap th:last-child,
    .table-wrap td:last-child { display: none; }

    /* Construction puslapio info-row (countdown) — 2x2 grid */
    .info-row {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .info-item {
        flex: 1 1 calc(50% - 12px) !important;
    }
    .info-value { font-size: 18px !important; }

    /* Volume slider — pilnas plotis */
    input[type="range"] {
        width: 100% !important;
        height: 36px !important;
    }

    /* Play mygtukas radio puslapyje — didesnis tap target */
    .play-btn {
        width: 72px !important;
        height: 72px !important;
        font-size: 28px !important;
    }

    /* Modal'ai / overlay'ai užima visą ekraną */
    .modal, .dialog, .overlay-content {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* Footer */
    .footer, footer { font-size: 11px !important; }
}

/* ============================================================
   SMALL PHONE (≤ 380px) — iPhone SE, senesni Android'ai
   ============================================================ */
@media (max-width: 380px) {
    h1 { font-size: 20px !important; }
    h2 { font-size: 16px !important; }
    body { padding: 8px !important; }
    .panel, .card { padding: 16px 12px !important; }

    /* Mygtukų grupė — visi vienas po kito (vienas stulpelis) */
    .links .link-btn,
    .nav-actions .nav-btn {
        flex: 1 1 100% !important;
    }

    /* Info-row countdown'as — 4x1 ne 2x2, kad neužimtų daug aukščio */
    .info-item {
        flex: 1 1 calc(50% - 12px) !important;
    }
    .info-value { font-size: 16px !important; }
}

/* ============================================================
   LANDSCAPE telefonas — mažas aukštis
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
    body { padding: 8px !important; align-items: flex-start !important; }
    .panel, .card { padding: 16px !important; }
    h1 { margin-bottom: 8px !important; }
    .construction, .info-row { margin-bottom: 12px !important; }
}

/* ============================================================
   HIGH DPI ekranai — krašteliai aiškesni
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .panel, .card, .nav-btn, .link-btn {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ============================================================
   PRINT (nelabai aktualus, bet good practice)
   ============================================================ */
@media print {
    .theme-toggle, .nav-actions, .controls { display: none !important; }
    body { background: white !important; color: black !important; padding: 0 !important; }
}