/* =====================================================================
 * Admin mobile/tablet-friendly — regras pras telas admin.
 * Aplica APENAS em telas menores que desktop (até 1199px).
 * Desktop (>= 1200px) fica inalterado com a tabela tradicional.
 * ===================================================================== */

@media (max-width: 1199px) {

    /* ===== Container geral ===== */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .content-wrapper, .content, .main-content {
        max-width: 100vw;
        overflow-x: hidden;
    }
    .content { padding: 0.5rem !important; }
    .content-header { padding: 0.75rem 0.5rem !important; }
    .content-header h1 { font-size: 1.25rem; }

    /* ===== Cards e boxes AdminLTE ===== */
    .card { border-radius: 0.25rem; margin-bottom: 0.5rem; }
    .card-body { padding: 0.75rem; }
    .card-header { padding: 0.5rem 0.75rem; }
    .card-header .card-title { font-size: 0.95rem; }
    .info-box, .small-box { margin-bottom: 0.5rem; }
    .info-box .info-box-text { font-size: 0.75rem; }
    .info-box .info-box-number { font-size: 1.1rem; }

    /* ===== Forms ===== */
    .form-group { margin-bottom: 0.75rem; }
    .form-group label { font-size: 0.85rem; margin-bottom: 0.25rem; }
    .form-control { font-size: 16px; }
    /* Colunas md/lg/xl viram 1 coluna no mobile/tablet... */
    .row > [class*="col-md-"]:not(.col-mobile-keep),
    .row > [class*="col-lg-"]:not(.col-mobile-keep),
    .row > [class*="col-xl-"]:not(.col-mobile-keep) {
        max-width: 100%;
        flex: 0 0 100%;
    }
    /* ...mas se o elemento ALSO tem col-6 (ex: <div class="col-lg-3 col-6">),
       mantém 50% pra ficar 2 por linha. !important pra ganhar especificidade. */
    .row > .col-6,
    .row > [class*="col-"].col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* =================================================================
       CARDS empilhados estilo perfil — só no mobile/tablet.
       Layout vertical de cada linha:
         ┌──────────────────────────────────────┐
         │ Nome                  [editar][−][×] │ ← título + ações
         │ [CA]                                 │ ← avatar circular
         │ Perfil:    [Administrador]           │
         │ Status:    [Online]                  │
         │ Instância: [Suporte]                 │
         │                       Conversas: 5/5 │
         └──────────────────────────────────────┘
       Usa atributos data-role + data-label nos <td>.
       data-role="title"    → nome no topo
       data-role="actions"  → botões no canto superior direito
       data-role="avatar"   → círculo cinza com iniciais
       data-role="info"     → linha "label: valor" (usa data-label="Perfil")
       data-role="footer"   → infos no rodapé direito (ex: contadores)
       ================================================================= */
    .table-as-cards-mobile {
        display: block;
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;
    }
    .table-as-cards-mobile thead { display: none; }
    .table-as-cards-mobile tbody { display: block; }
    /* Layout do card: usa flexbox column. Cada td é um bloco empilhado.
       A primeira linha é especial: contém o título e as ações lado a lado. */
    .table-as-cards-mobile tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: center;
        gap: 0.4rem 0.6rem;
        background: #fff;
        border-radius: 0.6rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        padding: 0.85rem 0.95rem;
        margin: 0.5rem 0;
        position: relative;
    }
    .table-as-cards-mobile tbody tr.text-muted { opacity: 0.85; }

    /* Padrão: tds escondidos no mobile */
    .table-as-cards-mobile tbody td {
        display: none;
        border: 0 !important;
        padding: 0 !important;
        font-size: 0.85rem;
        min-width: 0;
    }

    /* TÍTULO: ocupa a primeira linha à esquerda */
    .table-as-cards-mobile tbody td[data-role="title"] {
        display: block;
        order: 1;
        flex: 1 1 60%;
        font-weight: 600;
        font-size: 1.05rem;
        color: #222;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* AÇÕES: canto superior direito (mesma linha do título) */
    .table-as-cards-mobile tbody td[data-role="actions"] {
        display: flex;
        order: 2;
        gap: 4px;
        margin-left: auto;
        flex-shrink: 0;
        align-self: flex-start;
    }
    .table-as-cards-mobile tbody td[data-role="actions"] .btn {
        padding: 5px 10px;
        font-size: 0.85rem;
        line-height: 1;
    }
    .table-as-cards-mobile tbody td[data-role="actions"] form { display: inline-block; }

    /* AVATAR: bolinha 42px à esquerda do título (mesma linha 1 do card).
       O td é apenas um wrapper; se tiver um filho .contato-avatar
       ou .avatar interno, eles dão o estilo da bolinha. Senão (caso
       string com iniciais direto), o próprio td vira a bolinha. */
    .table-as-cards-mobile tbody td[data-role="avatar"] {
        display: flex;
        order: 0;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.85rem;
        margin-right: 0.5rem;
    }
    /* Caso o td não tenha filho .contato-avatar/.avatar/img,
       ele mesmo vira a bolinha cinza (ex: Users com iniciais). */
    .table-as-cards-mobile tbody td[data-role="avatar"]:not(:has(.contato-avatar)):not(:has(.avatar)):not(:has(img)) {
        border-radius: 50%;
        background: #e9ecef;
        color: #555;
        overflow: hidden;
    }
    /* Caso o td contenha .contato-avatar (Contatos) ou .avatar (futuro):
       força o filho a ocupar 42x42 */
    .table-as-cards-mobile tbody td[data-role="avatar"] > .contato-avatar,
    .table-as-cards-mobile tbody td[data-role="avatar"] > .avatar {
        width: 42px !important;
        height: 42px !important;
        font-size: 0.85rem !important;
    }
    .table-as-cards-mobile tbody td[data-role="avatar"] > .contato-avatar img,
    .table-as-cards-mobile tbody td[data-role="avatar"] > .avatar img,
    .table-as-cards-mobile tbody td[data-role="avatar"] > img {
        width: 42px !important;
        height: 42px !important;
        object-fit: cover;
        border-radius: 50%;
    }
    /* Forçar quebra de linha após o avatar pra os infos virem na linha de baixo */
    .table-as-cards-mobile tbody td[data-role="avatar"]::after {
        content: "";
        flex-basis: 100%;
    }

    /* INFO: cada um vira uma linha "Label: valor" empilhada */
    .table-as-cards-mobile tbody td[data-role="info"] {
        display: flex;
        order: 4;
        flex: 0 0 100%;
        align-items: center;
        gap: 0.4rem;
        color: #333;
        font-size: 0.85rem;
        line-height: 1.4;
        padding: 0.15rem 0 !important;
    }
    .table-as-cards-mobile tbody td[data-role="info"]::before {
        content: attr(data-label) ":";
        color: #777;
        font-size: 0.8rem;
        font-weight: 400;
        flex-shrink: 0;
        min-width: 100px;
    }
    /* Badges dentro de info ficam mais visíveis */
    .table-as-cards-mobile tbody td[data-role="info"] .badge {
        font-size: 0.78rem;
        padding: 0.25rem 0.55rem;
        font-weight: 500;
        white-space: normal;
    }

    /* FOOTER: rodapé alinhado à direita */
    .table-as-cards-mobile tbody td[data-role="footer"] {
        display: flex;
        order: 5;
        flex: 0 0 100%;
        justify-content: flex-end;
        align-items: center;
        gap: 0.4rem;
        color: #555;
        font-size: 0.82rem;
        margin-top: 0.3rem;
        padding-top: 0.4rem !important;
        border-top: 1px solid #f0f0f0;
    }
    .table-as-cards-mobile tbody td[data-role="footer"]::before {
        content: attr(data-label) ":";
        color: #777;
    }

    /* ===== Tabelas SEM .table-as-cards-mobile: scroll horizontal natural ===== */
    .table-responsive {
        border: 0;
        -webkit-overflow-scrolling: touch;
    }
    table.table:not(.table-as-cards-mobile) {
        font-size: 0.85rem;
    }
    table.table:not(.table-as-cards-mobile) th,
    table.table:not(.table-as-cards-mobile) td {
        padding: 0.4rem 0.5rem;
        vertical-align: middle;
    }

    /* ===== Histórico de Conversas — sidebar lateral ocupa tela toda ===== */
    .conversa-sidebar {
        width: 100% !important;
        right: -100% !important;
    }
    .conversa-sidebar.open { right: 0 !important; }

    /* ===== Supervisão "Conversas em Tempo Real" — grid 2x compacto =====
       Cada card vira mini-card mostrando só nome + empresa + atendente.
       Sem preview de mensagens (o body fica oculto). */
    .conversas-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .conversas-grid .conversa-card {
        width: 100% !important;
        min-width: 0;
        border-radius: 8px;
    }
    .conversas-grid .conversa-card .conversa-card-header {
        padding: 8px 10px;
        gap: 6px;
        background: #075e54;
        flex-wrap: wrap;
    }
    .conversas-grid .conversa-card .conversa-card-header .avatar {
        width: 34px;
        height: 34px;
        font-size: .75rem;
        flex-shrink: 0;
    }
    .conversas-grid .conversa-card .conversa-card-header .info {
        min-width: 0;
        flex: 1 1 calc(100% - 44px);
    }
    .conversas-grid .conversa-card .conversa-card-header .info .nome {
        font-size: .78rem;
        line-height: 1.2;
        flex-wrap: wrap;
    }
    .conversas-grid .conversa-card .conversa-card-header .info .nome .tempo {
        font-size: .65rem;
        padding: 1px 5px;
    }
    .conversas-grid .conversa-card .conversa-card-header .info .empresa-cddsk {
        font-size: .65rem !important;
        padding: 1px 5px !important;
        margin-top: 2px !important;
    }
    .conversas-grid .conversa-card .conversa-card-header .info .numero {
        font-size: .65rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .conversas-grid .conversa-card .conversa-card-header .info .numero .badge-instancia {
        font-size: .6rem;
    }
    /* Esconde o body de preview de mensagens — fica clean em mobile.
       Pra ver, atendente toca no card e abre detalhes. */
    .conversas-grid .conversa-card .conversa-card-body {
        display: none !important;
    }
    .conversas-grid .conversa-card .conversa-card-footer {
        padding: 6px 8px;
        gap: 4px;
    }
    .conversas-grid .conversa-card .conversa-card-footer .atendente-nome {
        font-size: .7rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .conversas-grid .conversa-card .conversa-card-footer .btn-acao,
    .conversas-grid .conversa-card .conversa-card-footer .acoes .btn {
        padding: 2px 6px !important;
        font-size: .65rem !important;
    }

    /* ===== Consulta de Atividades — grids inline com 2 colunas viram 1 ===== */
    .atividades-grid-charts,
    .atividades-grid-clientes {
        grid-template-columns: 1fr !important;
    }
    /* Tabela de clientes em atividades: esconde colunas Empresa e Ultimo
       no mobile, deixando só Cliente + Chamados + Ação visíveis. */
    .clientes-table-wrap { overflow-x: hidden !important; }
    .clientes-atividades-table .col-empresa,
    .clientes-atividades-table .col-ultimo,
    .clientes-atividades-table thead th:nth-child(2),
    .clientes-atividades-table thead th:nth-child(4) {
        display: none !important;
    }
    .clientes-atividades-table .col-cliente { width: auto; }
    .clientes-atividades-table .col-chamados { width: 60px; }
    .clientes-atividades-table .col-acao { width: 40px; }

    /* Modal de Conversa (atividades): tela cheia com header fixo no topo */
    #modalConversa .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100vh;
        height: 100dvh;
    }
    #modalConversa .modal-content {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
    }
    #modalConversa .modal-header {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    #modalConversa .modal-header .close {
        font-size: 1.8rem;
        padding: 0 8px;
        line-height: 1;
        opacity: 1;
        text-shadow: none;
    }
    #modalConversa .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        padding: 0 !important;
        display: flex;
    }
    #modalConversa .modal-chat-messages {
        height: auto !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* ===== Fila de Espera — ajustar fila-item em mobile ===== */
    .fila-item {
        flex-wrap: wrap;
        gap: 10px !important;
        padding: 12px !important;
        position: relative;
    }
    .fila-item .checkbox-col { order: 1; }
    .fila-item .avatar { order: 2; width: 38px !important; height: 38px !important; font-size: 0.85rem !important; }
    .fila-item .info { order: 3; flex: 1 1 auto; min-width: 0; }
    .fila-item .info .nome { font-size: 0.9rem !important; line-height: 1.2; }
    .fila-item .info .nome .badge-instancia { font-size: 0.65rem !important; padding: 1px 6px !important; }
    .fila-item .info .numero { font-size: 0.72rem !important; }
    .fila-item .info .preview { font-size: 0.78rem !important; }
    .fila-item .info .preview span { max-width: 200px !important; }
    .fila-item .tempo { order: 4; flex-basis: 100%; text-align: left !important; padding-top: 4px; border-top: 1px solid #f0f0f0; margin-top: 4px; }
    .fila-item .tempo .tempo-fila { justify-content: flex-start !important; font-size: 0.78rem !important; }
    .fila-item .acoes { order: 5; flex-shrink: 0; margin-left: auto; }
    .fila-item .acoes .btn-pegar { padding: 6px 14px !important; font-size: 0.85rem !important; }

    /* ===== Tabelas customizadas .atd-table =====
       Histórico: vira LISTA compacta (linha fina, 1 por conversa).
       Supervisão (.atd-table dentro de cards): também lista. */
    .atd-table { display: block; width: 100%; }
    .atd-table thead { display: none; }
    .atd-table tbody, .atd-table tr { display: block; }
    .atd-table tbody tr {
        background: #fff;
        border: 0;
        border-bottom: 1px solid #ececec;
        margin: 0;
        padding: 0.6rem 0.75rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.5rem;
    }
    .atd-table tbody tr:active { background: #f8f9fa; }
    .atd-table tbody td {
        display: inline-block;
        border: 0 !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
        color: #6b6b6b;
        line-height: 1.3;
    }
    .atd-table tbody td.atd-name {
        flex: 1 1 100%;
        font-weight: 600;
        font-size: 0.92rem !important;
        color: #222;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Badges em info ficam discretos */
    .atd-table tbody td .badge { font-size: 0.7rem !important; padding: 0.15rem 0.4rem !important; }

    /* ===== Modais Bootstrap ocupam viewport ===== */
    .modal-dialog:not(.modal-sm) {
        max-width: 100%;
        margin: 0;
        min-height: 100vh;
    }
    .modal-dialog.modal-sm { max-width: 92vw; margin: 1rem auto; }
    .modal-content { border-radius: 0; min-height: 100vh; border: 0; }
    .modal-dialog.modal-sm .modal-content { min-height: auto; border-radius: 0.3rem; }
    .modal-header { padding: 0.75rem; }
    .modal-header .modal-title { font-size: 1rem; }
    .modal-body { padding: 0.75rem; max-height: none; }
    .modal-footer { padding: 0.5rem; gap: 0.25rem; flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 0 auto; min-width: 100px; }

    /* ===== Abas (Bootstrap .nav-tabs e custom .sup-tabs-nav) com scroll horizontal ===== */
    .nav-tabs, .sup-tabs-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar, .sup-tabs-nav::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item, .sup-tabs-nav .tab-btn { flex-shrink: 0; }
    .nav-tabs .nav-link, .sup-tabs-nav .tab-btn { font-size: 0.8rem !important; padding: 0.4rem 0.7rem !important; white-space: nowrap !important; }

    /* ===== Botões e barras ===== */
    .btn { font-size: 0.85rem; padding: 0.35rem 0.6rem; }
    .btn-sm { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
    .btn-group { flex-wrap: wrap; }
    .card-tools, .card-header .card-tools { flex-wrap: wrap; gap: 0.25rem; }

    /* ===== Filtros acima da tabela ===== */
    .filtros-bar, .filters-bar, .toolbar-filtros {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    .filtros-bar input,
    .filtros-bar select,
    .filtros-bar .form-control {
        min-width: 0 !important;
        width: 100%;
    }

    /* ===== SweetAlert e tooltips ===== */
    .swal2-popup { padding: 1rem !important; max-width: 92vw !important; }
    .swal2-title { font-size: 1.1rem !important; }
    .tooltip-inner { max-width: 90vw; }

    /* ===== Select2 ===== */
    .select2-container .select2-selection--single,
    .select2-container .select2-selection--multiple { min-height: 38px; }
    .select2-dropdown { max-width: 92vw; }

    /* ===== Login/auth ===== */
    .login-box, .register-box {
        margin: 1rem auto;
        width: 92vw;
        max-width: 360px;
    }

    /* ===== Sidebar AdminLTE: toque maior ===== */
    .main-sidebar .nav-item .nav-link { padding: 0.6rem 1rem; }

    /* ===== Helpers ===== */
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

/* Helpers fora do @media: */
.show-mobile { display: none; }

/* Desktop (>= 1200px): td avatar não existe na tabela tradicional
   (foi adicionado só pra montar o card mobile com o círculo das iniciais).
   data-role="footer" continua visível porque é uma coluna real. */
@media (min-width: 1200px) {
    .table-as-cards-mobile tbody td[data-role="avatar"] {
        display: none !important;
    }
}