/**
 * Mobiilityylit - Korjaa ja yhtenäistää mobiilinäkymä
 * Käytetään vain mobiilissa (max-width: 768px)
 * @author Kaido Mägi
 * @copyright 2025
 */

/* ============================================================
   YLEISET MOBIILIASETUKSET
   ============================================================ */

/* Estä horisontaalinen scroll */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

* {
    box-sizing: border-box;
}

/* ============================================================
   HEADER + HAMBURGER
   ============================================================ */

.topbar {
    padding: 8px 12px;
    padding-left: 60px; /* Tilaa hamburger-menulle */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.topbar-inner {
    gap: 8px;
    flex-wrap: nowrap;
    position: relative;
    justify-content: flex-end; /* Siirrä napit oikealle mobiilissa */
}

/* Keskiosa: Company switch (Superadmin) - mobiilissa myös keskellä */
.topbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 0;
}

/* Logo: piilota kokonaan mobiilissa */
.logo {
    display: none !important;
}

/* Hamburger menu -nappi: position fixed */
.mobile-menu-toggle {
    display: flex !important;
    position: fixed !important;
    top: 8px !important;
    left: 12px !important;
    z-index: 1100 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #f9fafb !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px;
    pointer-events: auto !important;
    cursor: pointer;
    font-size: 24px;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:active,
.mobile-menu-toggle:focus {
    background: rgba(255, 255, 255, 0.15);
    outline: none;
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

/* Language Switch: mobiilissa kompaktimpi */
.lang-switch {
    gap: 6px;
    margin-right: 0;
}

/* Lang-switch käyttäjäalueen sisällä vierekkäin käyttäjälinkkien kanssa */
.user .lang-switch {
    margin-right: 0;
    margin-left: 0;
}

.lang-btn {
    min-width: 40px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

/* Piilota aktiivinen kieli mobiilissa (vain span.lang-btn.is-active) */
/* Yleinen sääntö (home.php, jne. - ei wrapperia) */
.lang-switch span.lang-btn.is-active {
    display: none;
}

/* Auth-sivut (login.php, register.php - on .login-lang-switcher wrapper) */
.login-lang-switcher .lang-switch span.lang-btn.is-active {
    display: none;
}

/* Pienet näytöt: vielä pienemmät kielinapit */
@media (max-width: 420px) {
    .lang-switch {
        gap: 6px;
    }
    
    .lang-btn {
        min-width: 36px;
        height: 28px;
        padding: 0 8px;
        border-radius: 9px;
        font-size: 12px;
    }
    
    /* Varmista että aktiivinen kieli on piilossa myös pienissä näytöissä */
    /* Yleinen sääntö (home.php, jne.) */
    .lang-switch span.lang-btn.is-active {
        display: none;
    }
    
    /* Auth-sivut (login.php, register.php) */
    .login-lang-switcher .lang-switch span.lang-btn.is-active {
        display: none;
    }
}

/* Käyttäjälinkit: piilota tekstit, näytä vain ikonit */
.user {
    gap: 6px;
}

.user-link {
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

.user-link-text {
    display: none;
}

.user-link-icon {
    font-size: 18px;
}

/* Company switch: piilota mobiilissa */
.company-switch {
    display: none;
}

/* ============================================================
   SIDEBAR + OVERLAY
   ============================================================ */

/* Sidebar: piilota oletuksena mobiilissa, näytä hamburger-menu */
.side-nav {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 280px;
    max-width: 85vw;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    top: 48px; /* Topbarin korkeus */
    /* Varmista sama design kuin desktopissa */
    background: #020617 !important;
    color: #e5e7eb !important;
    border-right: 1px solid #111827 !important;
}

.side-nav.mobile-open {
    transform: translateX(0);
}

/* Varmista että side-linkit käyttävät oikeita värejä mobiilissa */
.side-nav .side-link {
    color: #cbd5e1 !important;
    background: transparent !important;
}

.side-nav .side-link:hover {
    color: #ffffff !important;
}

.side-nav .side-link.active {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #ffffff !important;
}

.side-nav .nav-group__header {
    color: #6b7280 !important;
    background: transparent !important;
}

.side-nav .nav-group__header:hover {
    color: #9ca3af !important;
}

/* Overlay kun sidebar on auki */
.mobile-overlay {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    pointer-events: none;
}

.mobile-overlay.active {
    display: block !important;
    pointer-events: auto;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   SISÄLTÖ (PAGE, CARDS, FORMS, TABLES)
   ============================================================ */

/* Pääsisältö: riittävät paddingsit headerin alle */
.page {
    padding: 0 12px;
    margin-top: 56px;
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
    overflow-x: hidden; /* Estä horisontaalinen scroll koko sivulla */
    box-sizing: border-box;
}

/* Kun sidebar on auki, piilota pääsisältö */
.page.menu-open {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Kortit: vähemmän paddingia, ei mene ruudun ulkopuolelle */
.card {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Estä horisontaalinen scroll kortissa */
}

/* Varmista että kaikki cardin sisällöt eivät mene ulos */
.card > * {
    max-width: 100%;
    box-sizing: border-box;
}

.card h1 {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 12px;
}

.card h2 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Top actions: flex-wrap mobiilissa */
.top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* ============================================================
   LOMAKKEET
   ============================================================ */

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.form-row {
    width: 100%;
    max-width: 100%;
}

.form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row input[type="datetime-local"],
.form-row select,
.form-row textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    font-size: 16px; /* Estää zoom iOS:ssä */
    border: 1px solid #d1d5db;
    border-radius: 6px;
    min-height: 44px; /* Touch-friendly */
    box-sizing: border-box;
}

.form-row textarea {
    min-height: 100px;
    resize: vertical;
}

/* Checkbox ja radio: suuremmat touch-alueet */
.form-row input[type="checkbox"],
.form-row input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
    margin-right: 8px;
}

/* ============================================================
   TAULUKOT
   ============================================================ */

/* Varmista että kaikki taulukot ovat wrapperissa tai niillä on overflow */
/* Jos taulukko on suoraan cardissa ilman wrapperia, lisää overflow */
.card > .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px; /* Negatiivinen margin ulottuu kortin ulkopuolelle */
    padding: 0 16px;
    width: calc(100% + 32px);
    max-width: calc(100% + 32px);
}

.card > .table > thead,
.card > .table > tbody,
.card > .table > tr {
    display: table;
    width: 100%;
    min-width: 600px;
}

.table-wrapper {
    margin: 12px -12px;
    padding: 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);
}

/* Taulukot ilman wrapperia: lisää overflow suoraan */
.table {
    font-size: 14px;
    width: 100%;
    min-width: 600px; /* Vähimmäisleveys horisontaaliseen scrollaukseen */
    display: table; /* Varmista että table-layout säilyy */
}

.table th,
.table td {
    padding: 10px 6px;
    font-size: 13px;
    white-space: nowrap;
}

/* Sticky "Toiminnot" sarake (yleinen) */
.data-table th:last-child,
.data-table td:last-child {
    position: sticky;
    right: 0;
    background: white;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    min-width: 180px;
    padding-left: 8px;
    padding-right: 8px;
}

.data-table th:last-child {
    background: #f9fafb;
    z-index: 11;
}

.data-table tr:hover td:last-child {
    background: #f9fafb;
}

/* Row-actions: yleinen (jos ei ole data-table) */
.row-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    width: 100%;
}

.row-actions .chip-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    margin: 0;
}

/* ============================================================
   NAPPULAT
   ============================================================ */

.btn,
.chip-btn {
    padding: 12px 20px;
    font-size: 15px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.chip-btn.chip-xs {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 36px;
}

/* ============================================================
   ILMOITUKSET
   ============================================================ */

.notice {
    padding: 12px;
    font-size: 14px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   MUUT ELEMENTIT
   ============================================================ */

/* Subtle tekstit */
.subtle {
    font-size: 12px;
}

/* Status-badget: pienemmät */
.status-badge-modern,
.badge {
    font-size: 12px;
    padding: 4px 10px;
}

/* Listat */
ul, ol {
    padding-left: 20px;
}

/* Grid-layoutit: yksi sarake mobiilissa */
.grid,
.two-cols,
.three-cols {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Flex-layoutit: wrap mobiilissa */
.flex-row {
    flex-wrap: wrap;
    gap: 8px;
}

/* Modals: täysi leveys mobiilissa */
.modal,
.modal-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
}

/* ============================================================
   ASIAKASREKISTERI-SIVU KORJAUKSET
   ============================================================ */

/* Julkinen linkki -kenttä: estä overflow */
.subtle-small {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Taulukon "Julkinen linkki" -sarake: salli rivittyminen */
.table td:nth-child(5) {
    max-width: 200px;
    word-break: break-all;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Taulukon "Toiminnot" -sarake: flex-wrap nappien kanssa */
.table td:last-child {
    white-space: normal;
    min-width: 150px;
}

.table td:last-child form {
    display: inline-block;
    margin: 2px;
    vertical-align: top;
}

.table td:last-child .chip-btn {
    margin: 2px 0;
    white-space: nowrap;
    display: block;
    width: 100%;
    max-width: 100%;
}

/* ============================================================
   TYÖKOHTEET-SIVU KORJAUKSET - KORTTINÄKYMÄ MOBIILISSA
   ============================================================ */

/* Piilota taulukon otsikkorivi mobiilissa */
.data-table thead,
.latest-table thead {
    display: none;
}

/* Muuta taulukko korttinäkymäksi */
.data-table,
.data-table tbody,
.data-table tr,
.latest-table,
.latest-table tbody,
.latest-table tr {
    display: block;
    width: 100%;
}

.data-table tbody,
.latest-table tbody {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Jokainen rivi on kortti */
.data-table tr,
.latest-table tr {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0;
}

/* Sarakkeet (td) ovat kortin sisällä pystysuunnassa */
.data-table td,
.latest-table td {
    display: block;
    width: 100%;
    padding: 8px 0;
    border: none;
    text-align: left;
    word-break: break-word;
    white-space: normal;
}

/* Näytä sarakeotsikot ::before pseudo-elementillä */
.data-table td:first-child::before,
.latest-table td:first-child::before {
    content: "Kohde: ";
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td:nth-child(2)::before,
.latest-table td:nth-child(2)::before {
    content: "Asiakas: ";
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td:nth-child(3)::before {
    content: "Osoite: ";
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td:nth-child(4)::before,
.latest-table td:nth-child(3)::before {
    content: "Tila: ";
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* "Julkinen linkki" -sarake (jos näkyy) */
.data-table td:nth-child(5)::before {
    content: "Julkinen linkki: ";
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* "Luotu" -sarake (Hallintapaneeli) */
.latest-table td:nth-child(4)::before {
    content: "Luotu: ";
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* "Toiminnot" -sarake */
.data-table td:last-child::before,
.latest-table td:last-child::before {
    content: "Toiminnot: ";
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Kohde-otsikko: korostettu */
.data-table td:first-child,
.latest-table td:first-child {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

.data-table td:first-child::before,
.latest-table td:first-child::before {
    display: none; /* Piilota "Kohde:" otsikko, koska se on jo selvä */
}

.data-table td:first-child .subtle-small {
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
    font-weight: normal;
    display: block;
}

/* Asiakas ja Osoite: normaalit */
.data-table td:nth-child(2),
.data-table td:nth-child(3),
.latest-table td:nth-child(2) {
    font-size: 14px;
    color: #374151;
}

/* Tila: status-badge */
.data-table td:nth-child(4),
.latest-table td:nth-child(3) {
    padding: 8px 0;
}

.data-table td:nth-child(4) .status-badge,
.latest-table td:nth-child(3) .status-badge {
    display: inline-block;
    margin-top: 4px;
}

/* Luotu: normaalit (Hallintapaneeli) */
.latest-table td:nth-child(4) {
    font-size: 14px;
    color: #374151;
    padding: 8px 0;
}

/* Julkinen linkki: pienempi fontti */
.data-table td:nth-child(5) {
    font-size: 12px;
    color: #6b7280;
}

.data-table .public-link-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.data-table .public-link {
    max-width: 220px;
    word-break: break-all;
    font-size: 11px;
    color: #6b7280;
    flex: 1;
    min-width: 0;
    margin-top: 4px;
    display: block;
}

.data-table .copy-link-btn {
    flex-shrink: 0;
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.3);
}

.data-table .copy-link-btn .copy-icon {
    font-size: 16px !important;
}

.data-table .copy-link-btn .copy-text {
    font-size: 12px !important;
}

.data-table .copy-link-btn:active {
    transform: scale(0.95);
}

/* Sähköpostin lähetyslomake mobiilissa */
.data-table .send-email-form {
    width: 100%;
    margin-top: 8px;
}

.data-table .send-email-form > div {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.data-table .send-email-form input[type="email"] {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 44px;
}

/* Toiminnot: napit allekkain */
.data-table td:last-child,
.latest-table td:last-child {
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    margin-top: 8px;
}

.data-table .row-actions,
.latest-table .row-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    margin-top: 8px;
}

.data-table .row-actions .chip-btn,
.latest-table .row-actions .chip-btn,
.data-table .row-actions .btn-primary,
.latest-table .row-actions .btn-primary {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    min-height: 44px;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
    border-radius: 6px;
}

/* Chip-sm: normaalit napit mobiilissa */
.chip-btn.chip-sm {
    padding: 12px 16px;
    font-size: 14px;
    min-height: 44px;
}

/* Table-wrapper: ei overflow mobiilissa Työkohteet-sivulla */
.card .table-wrapper {
    overflow-x: visible;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* Varmista että kortit eivät mene ulos */
.data-table tr {
    max-width: 100%;
    box-sizing: border-box;
}

/* Varmista että kaikki sisällöt mahtuvat */
.data-table td * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Top-actions: flex-wrap mobiilissa */
.top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
}

.top-actions .chip-btn {
    flex: 1 1 auto;
    min-width: 120px;
}

/* Empty-state: keskity mobiilissa */
.empty-state {
    text-align: center;
    padding: 24px 12px;
}

.empty-state .chip-btn {
    margin-top: 12px;
    display: inline-block;
}

/* Sertifikaatti-varoitus: flex-wrap mobiilissa */
.page > div[style*="background: #fef3c7"],
.card > div[style*="background: #fef3c7"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
}

.page > div[style*="background: #fef3c7"] > div,
.card > div[style*="background: #fef3c7"] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.page > div[style*="background: #fef3c7"] .chip-btn,
.card > div[style*="background: #fef3c7"] .chip-btn {
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    min-height: 44px;
}

/* Status-badge: varmista että se näkyy oikein */
.status-badge {
    font-size: 11px;
    padding: 4px 8px;
    white-space: nowrap;
    display: inline-block;
}

/* Subtle-small: varmista rivittyminen */
.subtle-small {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    line-height: 1.4;
}

/* ============================================================
   PIENIMMÄT PUHELIMET (≤480px)
   ============================================================ */

@media (max-width: 480px) {
    .topbar {
        padding: 6px 8px;
        padding-left: 52px;
    }
    
    .mobile-menu-toggle {
        top: 6px !important;
        left: 8px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .page {
        padding: 0 8px;
        margin-top: 52px;
    }
    
    .card {
        padding: 12px;
    }
    
    .card h1 {
        font-size: 16px;
    }
    
    .card h2 {
        font-size: 14px;
    }
    
    .table {
        font-size: 12px;
        min-width: 500px;
    }
    
    .table th,
    .table td {
        padding: 8px 4px;
        font-size: 12px;
    }
    
    /* Data-table kortit: pienemmät paddingit */
    .data-table tr,
    .latest-table tr {
        padding: 12px;
    }
    
    .data-table td,
    .latest-table td {
        padding: 6px 0;
        font-size: 13px;
    }
    
    .data-table td:first-child,
    .latest-table td:first-child {
        font-size: 15px;
        padding-bottom: 8px;
    }
    
    .data-table .row-actions .chip-btn,
    .latest-table .row-actions .chip-btn,
    .data-table .row-actions .btn-primary,
    .latest-table .row-actions .btn-primary {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 44px;
    }
    
    .btn,
    .chip-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    /* Top-actions: täysi leveys pienissä puhelimissa */
    .top-actions .chip-btn {
        width: 100%;
        min-width: 100%;
    }
}

/* ============================================================
   LOGIN JA REGISTER -SIVUT MOBIILISSA
   ============================================================ */

@media (max-width: 768px) {
    /* Estä horisontaalinen scroll - Mobiili: top-aligned (ei center, kuten home.php) */
    body.login-page,
    body.auth-page {
        overflow-x: hidden;
        max-width: 100%;
        padding: 16px; /* Sivuttain padding - vähennetty jotta kortti mahtuu leveämmäksi */
        padding-top: 72px; /* Tilaa kielinapeille (riittää mobiilissa) */
        padding-bottom: 24px; /* Pieni alareunan padding */
        align-items: flex-start !important; /* Mobiilissa EI keskelle - aloitetaan ylhäältä (kuten home.php) */
        justify-content: flex-start !important; /* Ei center vaakatasossa mobiilissa */
    }
    
    /* Login-lang-switcher positioning hoituu style.css:n body.login-page .lang-switch selectoriin */
    /* Ei tarvita erillistä positioning:ia - käytetään keskitystä */
    
    .login-lang-switcher .lang-switch {
        gap: 6px;
    }
    
    .login-lang-switcher .lang-btn {
        min-width: 40px;
        height: 28px;
        padding: 0 10px;
        font-size: 12px;
    }
    
    /* Vanha .login-brand piilotetaan (ei enää käytössä) */
    .login-brand {
        display: none;
    }
    
    /* Uusi .auth-brand (wrapperin sisällä, kortin yläpuolella) */
    .auth-brand {
        margin-bottom: 24px;
    }
    
    .auth-brand-logo {
        font-size: 24px;
        letter-spacing: 0.3px;
    }
    
    .auth-brand-slogan {
        font-size: 13px;
    }
    
    /* Wrapper: leveämpi mobiilissa, käyttää ruutua tehokkaammin (kuten home.php .page) */
    .login-wrapper {
        width: 100%;
        max-width: 100%; /* Käyttää koko available tilan (body padding huomioon ottaen) */
        padding: 0;
        margin: 0; /* Ei margin auto mobiilissa - täysi leveys */
    }
    
    /* Register-wrapper (laajempi - valintasivulle) */
    .register-wrapper-wide {
        max-width: 100%; /* Käyttää koko available tilan */
    }
    
    /* Kortti: leveämpi mobiilissa, käyttää ruutua tehokkaammin (käyttää koko body padding:in sisällä olevan tilan) */
    .login-card,
    .register-choice-card {
        width: 100% !important;
        max-width: 100%; /* Käyttää koko wrapperin leveyden (body padding:in sisällä) */
        padding: 24px 20px;
        border-radius: 12px;
        margin: 0; /* Ei margin auto - täysi leveys wrapperissa */
        box-sizing: border-box;
    }
    
    /* Otsikko: isompi fontti */
    .login-card h1 {
        font-size: 24px;
        margin-bottom: 8px;
    }
    
    /* Subtle-teksti: isompi fontti */
    .login-card p.subtle {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    /* Form-grid: varmista että kaikki mahtuu */
    .login-card .form-grid {
        gap: 16px;
        width: 100%;
    }
    
    /* Form-row: isommat fontit ja paddingit */
    .login-card .form-row {
        gap: 8px;
        font-size: 16px; /* Estää zoomauksen iOS:ssa */
    }
    
    /* Label: isompi fontti */
    .login-card .form-row label {
        font-size: 15px;
        font-weight: 500;
    }
    
    /* Input-kentät: isommat, mobiiliystävälliset (touch-friendly) */
    .login-card input[type="text"],
    .login-card input[type="password"],
    .login-card input[type="email"],
    .login-card input[type="tel"],
    .register-choice-card input[type="text"],
    .register-choice-card input[type="password"],
    .register-choice-card input[type="email"],
    .register-choice-card input[type="tel"] {
        font-size: 16px; /* Estää zoomauksen iOS:ssa */
        padding: 12px 14px;
        min-height: 44px; /* Mobiili tap-target (Apple/Google standard) */
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Select-kentät (jos käytössä) */
    .login-card select,
    .register-choice-card select {
        font-size: 16px; /* Estää zoomauksen iOS:ssa */
        padding: 12px 14px;
        min-height: 44px; /* Mobiili tap-target */
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Nappi: isompi, helpompi painaa */
    .login-card button[type="submit"],
    .register-choice-card button[type="submit"],
    .login-primary-btn {
        font-size: 16px; /* Estää zoomauksen iOS:ssa */
        padding: 14px 16px;
        min-height: 44px; /* Mobiili tap-target */
        margin-top: 8px;
        border-radius: 8px;
        width: 100%;
        height: auto; /* Sallii min-height:n toimia */
    }
    
    /* Error- ja success-viestit: isommat fontit */
    .login-card .error,
    .login-card .success {
        font-size: 14px;
        padding: 14px 16px;
        margin-bottom: 20px;
        border-radius: 8px;
    }
    
    /* Linkit: isommat, helpompi painaa */
    .login-card a {
        font-size: 15px;
        padding: 4px 0;
        display: inline-block;
        min-height: 44px;
        line-height: 36px;
    }
    
    /* Rekisteröintilomakkeen erityispiirteet */
    .login-card .form-row small {
        font-size: 13px;
        margin-top: 4px;
    }
    
    /* Grid-layout rekisteröintilomakkeessa (postinumero + postitoimipaikka) */
    .login-card .form-row[style*="grid-template-columns"],
    .register-choice-card .form-row[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px;
    }
    
    /* Register-options grid: mobiilissa yksi sarake */
    .register-options {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    
    /* Register-option: optimoitu mobiiliin */
    .register-option {
        padding: 20px 16px;
        min-height: auto; /* Poistaa liian suuren min-height:n */
    }
    
    .register-option-icon {
        font-size: 3rem; /* Pienempi ikoni mobiilissa */
        margin-bottom: 12px;
    }
    
    .register-option-title {
        font-size: 1.25rem; /* Pienempi fontti mobiilissa */
    }
    
    .register-option-desc {
        font-size: 0.9rem; /* Pienempi fontti mobiilissa */
    }
    
    /* Salasanan tarkistusviestit */
    .login-card #salasana_tila,
    .login-card #salasana_tasmaa_tila,
    .login-card #salasana_suositukset {
        font-size: 14px;
        margin-top: 8px;
    }
    
    /* Takaisin-linkki rekisteröintisivulla */
    .login-card > div[style*="text-align: center"] {
        margin-top: 20px;
        padding-top: 20px;
    }
    
    .login-card > div[style*="text-align: center"] a {
        font-size: 15px;
        padding: 8px 12px;
        min-height: 44px;
        display: inline-block;
    }
}

/* Pienimmät puhelimet (≤480px) - sama layout kuin home.php */
@media (max-width: 480px) {
    body.login-page,
    body.auth-page {
        padding: 12px; /* Sivuttain padding (kuten home.php .page) */
        padding-top: 70px; /* Tilaa kielinapeille */
        padding-bottom: 20px;
        align-items: flex-start !important; /* Varmista että ei center */
        justify-content: flex-start !important; /* Varmista että ei center */
    }
    
    /* Wrapper: käyttää koko available tilan pienillä ruuduilla */
    .login-wrapper {
        max-width: 100%; /* Käyttää koko available tilan (body padding huomioon ottaen) */
        padding: 0;
    }
    
    .register-wrapper-wide {
        max-width: 100%; /* Käyttää koko available tilan */
        padding: 0;
    }
    
    /* Auth-brand pienimmällä ruudulla */
    .auth-brand {
        margin-bottom: 16px;
    }
    
    .auth-brand-logo {
        font-size: 20px;
    }
    
    .auth-brand-slogan {
        font-size: 11px;
    }
    
    /* Kortti: pienemmät paddingit pienillä ruuduilla, leveämpi (100% wrapperissa) */
    .login-card,
    .register-choice-card {
        padding: 20px 16px;
        max-width: 100%; /* Käyttää koko wrapperin leveyden (body padding:in sisällä) */
        margin: 0; /* Ei margin auto - täysi leveys */
    }
    
    .login-card h1 {
        font-size: 22px;
    }
    
    .login-card .form-row {
        gap: 6px;
    }
    
    .login-card input[type="text"],
    .login-card input[type="password"],
    .login-card input[type="email"],
    .login-card input[type="tel"] {
        padding: 12px 10px;
        font-size: 16px;
    }
    
    .login-card button[type="submit"],
    .login-primary-btn {
        padding: 12px 14px;
        font-size: 16px;
        height: 44px;
    }
}

/* ============================================================
   Pikapaketit – Mobiili (max-width: 600px)
   ============================================================ */
@media (max-width: 600px) {

  /* Tarvikkeet paketissa rivit – override mobile form-tyylit */
  .paketti-item-row > div { min-width: 0; }

  .paketti-item-row select,
  .paketti-item-row input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .paketti-item-row .col-maara input {
    width: 72px;
    max-width: 72px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .paketti-item-row .col-maara input::-webkit-outer-spin-button,
  .paketti-item-row .col-maara input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .paketti-item-row .col-poista {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .paketti-item-row .btn-icon {
    width: 40px;
    height: 40px;
  }

  /* Selkeä mobiiligridi: Tarvike täysleveä, Määrä+Yksikkö vierekkäin, Poista oikealla */
  .paketti-item-header-row { display: none; } /* optional */

  /* Poista overflow leikkaus "Tarvikkeet paketissa" -kortista */
  .paketti-form-card,
  .paketti-form-card .card-content,
  .paketti-form-card .form-section,
  .paketti-items {
    overflow: visible !important;
  }

  /* Lisää spacingiä otsikon ja kenttien väliin */
  .form-section-highlight .section-title {
    margin-bottom: 10px;
  }

  /* Grid-layout ja z-index yhdessä */
  .paketti-item-row {
    display: grid;
    grid-template-columns: 1fr 1fr 44px;
    grid-template-areas:
      "tarvike tarvike poista"
      "maara   yksikko poista";
    gap: 10px;
    position: relative;
    z-index: 2;
    margin-top: 8px;
  }
  .paketti-item-row .col-tarvike {
    grid-area: tarvike;
    position: relative;
    z-index: 3;
  }
  .paketti-item-row .col-maara {
    grid-area: maara;
  }
  .paketti-item-row .col-yksikko {
    grid-area: yksikko;
  }
  .paketti-item-row .col-poista {
    grid-area: poista;
  }

  /* Nosta selectin z-index, jotta dropdown pysyy "päällä" */
  .paketti-item-row select {
    position: relative;
    z-index: 4;
  }

  /* Lisää labelit suoraan kenttien yläpuolelle mobiilissa (jos tarvitaan) */
  .paketti-item-row .col-tarvike:before {
    content: "Tarvike";
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
    opacity: 0.85;
    color: #374151;
  }
  .paketti-item-row .col-maara:before {
    content: "Määrä";
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
    opacity: 0.85;
    color: #374151;
  }
  .paketti-item-row .col-yksikko:before {
    content: "Yksikkö";
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
    opacity: 0.85;
    color: #374151;
  }

  /* Pakettikorttien napit: piilota tekstit, näytä vain ikonit */
  .pill .btn-text,
  .icon-btn .btn-text {
    display: none !important;
  }

  /* Muuta pillit ikonipainikkeiksi */
  .pill {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    justify-content: center;
    gap: 0;
  }

  /* Varmista että ikonit näkyvät oikein */
  .pill--on {
    background: var(--ok-bg);
    border-color: var(--ok-border);
  }
  .pill--on .icon {
    stroke: var(--ok);
  }

  .pill--off {
    background: var(--danger-bg);
    border-color: var(--danger-border);
  }
  .pill--off .icon {
    stroke: var(--danger);
  }

  .icon-btn {
    width: 36px;
    height: 36px;
  }

  /* ============================================================
     Tarvikkeet – Mobiili (max-width: 600px)
     ============================================================ */
  @media (max-width: 600px) {
    /* 2-palstainen layout -> 1 sarake */
    .tarvikkeet-layout {
      grid-template-columns: 1fr;
    }

    /* Taulukko piiloon, näytetään kortit (jos tulevaisuudessa) */
    .tarvikkeet-table {
      display: none;
    }

    /* Toiminnot: piilota tekstit */
    .actions .btn-text {
      display: none !important;
    }

    /* Pienennä napit */
    .actions .pill,
    .actions .icon-btn {
      width: 36px;
      height: 36px;
      padding: 0;
    }

    /* Form-grid-2 -> 1 sarake mobiilissa */
    .form-grid-2 {
      grid-template-columns: 1fr;
    }

    /* Chip-grid mobiilissa */
    .chip-grid--collapsed {
      max-height: 120px;
    }

    /* A) TARVIKKEET-LISTA: Pakota näkyvyys ja korkeus */
    .table-card {
      display: block !important;
      width: 100% !important;
      overflow: visible !important;
    }
    
    .table-scroll {
      display: block !important;
      height: auto !important;
      max-height: none !important;
      min-height: 220px !important;
      overflow: auto !important;
      overflow-x: hidden !important; /* Ei vaakascrollia mobiilissa (vain nimi-sarake näkyy) */
      overflow-y: auto !important;
      padding: 10px 12px;
      -webkit-overflow-scrolling: touch;
    }
    
    .tarvikkeet-table,
    table.tarvikkeet-table {
      display: table !important;
      width: 100% !important;
      min-width: 0 !important; /* Poistetaan vaakascroll tarve */
    }
    
    .tarvikkeet-table thead {
      display: table-header-group !important;
    }
    
    .tarvikkeet-table tbody {
      display: table-row-group !important;
    }
    
    .tarvikkeet-table tr {
      display: table-row !important;
    }
    
    .tarvikkeet-table thead th {
      position: static !important;
    }
    
    /* Piilota kaikki sarakkeet paitsi Nimi mobiilissa */
    .tarvikkeet-table th:not(.col-name),
    .tarvikkeet-table td:not(.col-name) {
      display: none !important;
    }
    
    /* Nimi-sarake vie koko leveyden mobiilissa */
    .tarvikkeet-table th.col-name,
    .tarvikkeet-table td.col-name {
      display: table-cell !important;
      width: 100% !important;
      white-space: normal !important; /* Sallitaan rivittyminen */
      word-break: break-word !important; /* Pitkät nimet ei riko */
    }
    
    /* Poistetaan vaakascroll tarve mobiilissa */
    .table-scroll {
      overflow-x: hidden !important;
    }

    /* B) "+ LISÄÄ" NAPPI: Pakota normaali flow ja 100% leveys */
    .btn-primary,
    button.btn-primary,
    .add-btn,
    button.add-btn,
    #toggleCatForm,
    #toggleTagForm {
      position: static !important;
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Section-head mobiilissa */
    .section-head {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      overflow: visible !important;
    }

    .section-tools {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 10px !important;
      width: 100% !important;
      flex-wrap: wrap;
      justify-content: flex-start;
      overflow: visible !important;
    }
    
    .section-tools * {
      min-width: 0 !important;
    }

    .section-tools .search-wrap {
      flex: 1 1 100% !important;
      min-width: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* "+ Lisää" -nappi omalle riville mobiilissa */
    .section-tools .btn-primary,
    .section-tools button.btn-primary,
    .section-tools #toggleCatForm,
    .section-tools #toggleTagForm {
      flex: 1 1 100% !important;
      width: 100% !important;
      position: static !important;
      right: auto !important;
      left: auto !important;
    }

    /* Card-grid mobiilissa */
    .card-grid {
      grid-template-columns: 1fr;
    }

    /* Wide-section mobiilissa */
    .wide-head {
      flex-direction: column;
      align-items: stretch;
    }

    .wide-tools {
      min-width: 0;
      justify-content: space-between;
    }

    .wide-tools .search-wrap {
      max-width: none;
    }
  }

  @media (max-width: 900px) {
    .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}