/* Fortnox Admin — shared mobile + PWA styles (2026-05-25) */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --touch-min: 44px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Standalone PWA — respect notch / home indicator */
@media (display-mode: standalone) {
    body {
        padding-top: var(--safe-top);
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .topbar,
    .portal-topbar {
        padding-top: calc(8px + var(--safe-top));
        min-height: calc(52px + var(--safe-top));
    }

    .sidebar {
        top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }

    .content,
    .portal-content {
        padding-bottom: calc(28px + var(--safe-bottom));
    }
}

/* PWA install banner (Android / Chrome) */
.pwa-install-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: rgba(79, 142, 247, 0.12);
    border-bottom: 1px solid rgba(79, 142, 247, 0.35);
    font-size: 13px;
    color: var(--text, #e8eaf0);
}

.pwa-install-text {
    flex: 1;
    min-width: 160px;
}

.pwa-install-btn {
    background: var(--accent, #4f8ef7);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: var(--touch-min);
}

.pwa-install-close {
    background: transparent;
    border: none;
    color: var(--text-secondary, #8b90a8);
    font-size: 16px;
    cursor: pointer;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

/* Horizontal scroll wrapper — use class="table-scroll" around tables */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 12px;
}

.table-scroll > table {
    min-width: 520px;
}

@media (max-width: 768px) {
    .overview-table,
    .users-table,
    .logs-table,
    .tx-table,
    .file-table,
    .raw-files-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input,
    select,
    textarea,
    .field-input,
    .form-input,
    .time-input,
    .filter-bar input,
    .filter-bar select {
        font-size: 16px !important;
    }

    button,
    .btn,
    .btn-sm,
    .btn-filter,
    .btn-sync,
    .btn-edit,
    .page-btn,
    .sub-tab,
    .mobile-menu-btn {
        min-height: var(--touch-min);
    }

    .sub-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .sub-tabs::-webkit-scrollbar {
        display: none;
    }

    .sub-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .month-nav,
    .filter-bar,
    .sync-actions,
    .toolbar,
    .stats-row,
    .status-grid {
        gap: 8px;
    }

    .stat-card,
    .status-card {
        min-width: calc(50% - 8px);
        flex: 1 1 calc(50% - 8px);
    }

    .settings-grid,
    .company-grid {
        grid-template-columns: 1fr !important;
    }

    .inv-grid4 {
        grid-template-columns: 1fr 1fr !important;
    }

    .inv-grid2,
    .inv-private-grid {
        grid-template-columns: 1fr !important;
    }

    .manual-page {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .manual-left,
    .manual-right {
        width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
    }

    .manual-left {
        max-height: 45vh;
    }

    .detail-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }

    .week-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .week-row .day-label {
        grid-column: 1 / -1;
        font-weight: 600;
        color: var(--text, #e8eaf0);
    }

    .topbar-title {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .auth-warn-bar {
        top: calc(52px + var(--safe-top));
        font-size: 12px;
        padding: 8px 12px;
    }

    .modal-box {
        width: 100% !important;
        max-height: min(92vh, 720px);
        overflow-y: auto;
    }

    .portal-topbar {
        padding: 0 12px;
        gap: 8px;
    }

    .portal-user {
        display: none;
    }

    .portal-content {
        padding: 16px 12px;
        padding-bottom: calc(16px + var(--safe-bottom));
    }

    .portal-logout {
        min-height: var(--touch-min);
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .inv-grid4 {
        grid-template-columns: 1fr !important;
    }

    .stat-card,
    .status-card {
        min-width: 100%;
        flex: 1 1 100%;
    }

    .week-row {
        grid-template-columns: 1fr !important;
    }

    .login-card,
    .auth-card {
        padding: 24px 20px !important;
        margin: 12px;
        border-radius: 10px;
    }

    body.auth-page {
        padding: max(12px, var(--safe-top)) max(12px, var(--safe-right))
            max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
    }
}