/* ══════════════════════════════════════════════════════════════════════════════
   ITSM — Mobile & PWA Styles
   Aplicado apenas em telas ≤ 768px (telefones e tablets em portrait).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── Variáveis de espaçamento mobile ────────────────────────────────────────── */
:root {
    --mobile-nav-height: 56px;
    --bottom-bar-height: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);  /* iPhone X+ notch */
}

/* ─── PWA: tela cheia sem barra de endereço ─────────────────────────────────── */
@media (display-mode: standalone) {
    body {
        /* Espaço extra para a status bar no iOS */
        padding-top: env(safe-area-inset-top, 0px);
    }
    .navbar {
        padding-top: calc(.5rem + env(safe-area-inset-top, 0px));
    }
}

/* ─── Navbar mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .navbar {
        padding: .375rem .75rem;
    }
    .navbar-brand {
        font-size: 1.1rem;
    }
    /* Esconde busca global no mobile (usa a barra inferior) */
    .navbar .input-group {
        display: none !important;
    }
    /* Menu colapsado fica menor */
    .navbar-collapse .nav-link {
        padding: .5rem .75rem;
        font-size: .95rem;
    }
    .navbar-collapse .dropdown-menu {
        border: none;
        background: transparent;
        box-shadow: none;
        padding-left: 1rem;
    }
    .navbar-collapse .dropdown-item {
        padding: .5rem .5rem;
        font-size: .9rem;
    }
}

/* ─── Bottom Navigation Bar (mobile) ────────────────────────────────────────── */
.bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* Espaço para a barra inferior não cobrir conteúdo */
    main {
        padding-bottom: calc(var(--bottom-bar-height) + var(--safe-bottom) + 1rem) !important;
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        background: #fff;
        border-top: 1px solid #dee2e6;
        height: calc(var(--bottom-bar-height) + var(--safe-bottom));
        padding-bottom: var(--safe-bottom);
        justify-content: space-around;
        align-items: stretch;
    }

    [data-bs-theme="dark"] .bottom-nav {
        background: #161b22;
        border-top-color: #30363d;
    }

    .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-decoration: none;
        color: #6c757d;
        font-size: .65rem;
        padding: .5rem .25rem;
        gap: 3px;
        transition: color .15s;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav a i {
        font-size: 1.4rem;
        line-height: 1;
    }

    .bottom-nav a.active,
    .bottom-nav a:active {
        color: #0d6efd;
    }

    [data-bs-theme="dark"] .bottom-nav a {
        color: #8b949e;
    }

    [data-bs-theme="dark"] .bottom-nav a.active {
        color: #58a6ff;
    }

    .bottom-nav .badge-dot {
        position: absolute;
        top: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #dc3545;
        border: 2px solid #fff;
    }

    [data-bs-theme="dark"] .bottom-nav .badge-dot {
        border-color: #161b22;
    }
}

/* ─── Cards e tabelas mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .container {
        padding-left: .875rem;
        padding-right: .875rem;
    }

    /* Tabelas: scroll horizontal */
    .table-responsive-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards com touch feedback */
    .card.hover-shadow {
        transition: transform .1s, box-shadow .1s;
    }
    .card.hover-shadow:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
    }

    /* KPIs: 2 por linha no mobile */
    .kpi-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }

    /* Formulários: campos full-width */
    .form-control, .form-select {
        font-size: 16px !important; /* Previne zoom automático no iOS */
    }

    /* Botões de ação: touch-friendly */
    .btn {
        min-height: 44px;  /* Apple HIG: mínimo 44pt */
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .btn-sm {
        min-height: 36px;
    }

    /* Tabela de chamados: oculta colunas menos importantes */
    .tickets-table th:nth-child(4),  /* Técnico */
    .tickets-table td:nth-child(4),
    .tickets-table th:nth-child(8),  /* Aberto em */
    .tickets-table td:nth-child(8) {
        display: none;
    }
}

/* ─── Splash screen PWA ──────────────────────────────────────────────────────── */
@media (display-mode: standalone) {
    /* Remove sombra da navbar no PWA (já tem status bar) */
    .navbar { box-shadow: none !important; }
}

/* ─── Install prompt ─────────────────────────────────────────────────────────── */
#pwa-install-prompt {
    position: fixed;
    bottom: calc(var(--bottom-bar-height) + var(--safe-bottom) + 1rem);
    left: 1rem;
    right: 1rem;
    z-index: 2000;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    transform: translateY(120%);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

#pwa-install-prompt.show {
    transform: translateY(0);
}

@media (min-width: 769px) {
    #pwa-install-prompt {
        left: auto;
        right: 1.5rem;
        width: 360px;
        bottom: 1.5rem;
    }
}

/* ─── Ticket Details mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Botões de ação em coluna no mobile */
    .ticket-actions {
        flex-direction: column !important;
        width: 100%;
    }
    .ticket-actions .btn {
        width: 100%;
    }

    /* Sidebar vai abaixo do conteúdo */
    .ticket-sidebar {
        margin-top: 1rem;
    }
}

/* ─── Wizard mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Cards de departamento: 1 por linha */
    .dept-card { min-height: 80px !important; }

    /* Progresso do wizard: só mostra ícone, não texto */
    .wizard-step-label { display: none; }
}

/* ─── Scrollbar fina no mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 3px; height: 3px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }
}

/* ─── Acessibilidade: área de toque mínima ───────────────────────────────────── */
@media (max-width: 768px) {
    .list-group-item-action {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Checkbox e radio maiores no touch */
    .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }
}