/* ============================================================
   Camada Responsiva — Sistema de Pautas SESI SC
   Carregada DEPOIS de structure.css e style.css.
   `!important` é usado apenas dentro de @media para neutralizar
   larguras fixas inline (~100 ocorrências) e da CSS antiga (~22).
   No desktop (largura > 1024px), este arquivo é INERTE.
   ============================================================ */

/* Sempre ativo: garante imagens e box-sizing.
   Excluí `#logo` da regra porque #login_content é absolute sem width definida —
   max-width:100% de 0 = 0, logo desaparece. Logo do login mantém tamanho natural. */
img:not(#logo) { max-width: 100%; height: auto; }

/* ---------- DEFENSIVO GLOBAL ( <= 1024px ) ----------
   Evita que QUALQUER elemento force scroll horizontal da página inteira.
   Previne o sintoma mais comum de "não encaixou no mobile". */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    /* Tudo respeita o box-sizing */
    *, *::before, *::after { box-sizing: border-box; }

    /* Media e embeds não estouram nunca */
    img, svg, video, iframe, embed, object {
        max-width: 100% !important;
        height: auto;
    }

    /* Quebra palavras / URLs muito longas */
    p, span, td, th, div, a, label, strong, em, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Código / pre não estouram */
    pre, code, kbd, samp {
        white-space: pre-wrap !important;
        word-wrap: break-word;
        max-width: 100%;
    }

    /* Containers comuns nunca passam da viewport */
    .recipt, .recipt-text, .recipt-top,
    .lista_itens, .recipt_sub,
    #content, #main, #header_info, .col_full,
    [class*="form_content"], [class*="modal"], [class*="dialog"] {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* iframes embedados (se houver) */
    iframe { width: 100% !important; }

    /* Forms inline com display flex/grid antigos não estouram */
    form { max-width: 100%; }
}

/* ---------- TABLET ( <= 1024px ) ---------- */
@media (max-width: 1024px) {
    #content { width: 100% !important; padding: 0 10px; }
    #menu { width: 180px !important; }
    #main { width: calc(100% - 200px) !important; }
}

/* ---------- TABELAS DE DADOS RESPONSIVAS ----------
   Ativado em QUALQUER dispositivo touch (independente de pixels)
   OU em telas ≤ 1280px. Cobre iPad Pro landscape (1366px se touch)
   e laptops de baixa resolução. */
@media (max-width: 1280px), (hover: none) and (pointer: coarse) {
    /* Tabelas marcadas pelo JS como .tabela-dados + outras conhecidas como fallback */
    table.tabela-dados,
    table.modA, table.modB, table.modC,
    table.tb_agenda,
    table.tb_avaliacao, table.tb_avaliacao_resumo,
    table.tabela_item_evento, table.rels,
    table.compacta, table.grande, table.itemAd,
    table.respondido2, table.respostas1,
    .lista_itens table:not(.tb_form):not(.tb_form_first) {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        width: 100% !important;
        max-width: 100%;
    }
    table.tabela-dados tr td, table.tabela-dados tr th {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: normal;
    }
    /* SVGs em dashboards não forçam largura mínima absurda */
    table.tabela-dados svg {
        max-width: 100% !important;
    }
    [id^="tabs-"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- MOBILE / TABLET PEQUENO ( <= 768px ) ---------- */
@media (max-width: 768px) {

    /* Container principal vira fluid */
    body { -webkit-text-size-adjust: 100%; }
    #content { width: 100% !important; margin: 0 !important; padding: 0 8px; }

    /* ---- Menu: Bootstrap 5 offcanvas (substituiu custom JS+CSS) ----
       Bootstrap controla position/transform/overlay/dismiss automaticamente
       via classes .offcanvas-lg .offcanvas-start no header.php. Aqui só
       customizamos width/padding (NÃO background — deixa structure.css/color.css
       decidir conforme o modo: verde pauta, azul eventos). */
    #menu.offcanvas-lg.show {
        width: 80% !important; max-width: 280px;
        padding: 60px 12px 20px !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
    }
    /* Esconde tooltip jQuery UI em mobile */
    .ui-tooltip { display: none !important; }
    /* Tocabilidade dos links do menu */
    #menu a, #menu .bt_padrao {
        -webkit-tap-highlight-color: rgba(10,87,83,0.3);
        -webkit-touch-callout: none;
        touch-action: manipulation;
        cursor: pointer;
        pointer-events: auto !important;
    }
    /* Quando Bootstrap exibe offcanvas, mostra os elementos antes ocultos pelo
       menu colapsado do desktop (.menu_esconder = logo + nome do usuário). */
    #menu.offcanvas-lg.show .menu_esconder {
        display: block !important;
    }

    /* (Botão hambúrguer movido pra fora deste @media — agora em
       @media (max-width: 991.98px) para casar com o ponto onde
       o Bootstrap offcanvas-lg ativa, evitando "limbo" entre 769-991px
       onde menu+hamburger ficavam ambos escondidos.) */

    /* Main ocupa toda a largura (não há mais float do menu) */
    #main {
        float: none !important;
        width: 100% !important;
        margin: 60px 0 0 0 !important;
        min-height: 60vh !important;
    }

    /* ---- Containers .recipt ---- */
    .recipt { width: 100% !important; margin-bottom: 8px; }
    .recipt-text { padding: 8px !important; }
    .recipt .recipt-top { height: auto !important; padding: 8px !important; }
    .recipt-bts { width: 100% !important; float: none !important; text-align: left !important; height: auto !important; margin: 8px 0 !important; }
    .recipt-bts .bt_link { float: none !important; display: inline-block; margin: 4px 8px 4px 0; }
    .recipt_sub { width: 100% !important; }

    /* ---- Tabelas de layout: empilhar células ---- */
    .tb_form { width: 100% !important; }
    .tb_form tr,
    .tb_form td {
        display: block !important;
        width: 100% !important;
        padding: 4px 0 !important;
        box-sizing: border-box;
    }
    .tb_form td:first-child {
        font-weight: 600;
        padding-top: 12px !important;
    }

    /* ---- Inputs / Selects / Textareas ---- */
    input[type=text], input[type=email], input[type=password],
    input[type=number], input[type=date], input[type=tel],
    input[type=search], input[type=url], input:not([type]),
    select, textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px;
        padding: 10px;
        font-size: 16px;  /* iOS não dá auto-zoom em >=16px */
        box-sizing: border-box;
    }
    textarea {
        height: auto !important;
        min-height: 120px;
    }

    /* Tom Select substitui o <input> real por um .ts-control (div) — a regra
       de input/select acima não bate nele, então o campo de busca herdava só
       a altura padrão da lib (~30-38px) e cada opção do dropdown ficava com
       ~25px, abaixo do mínimo de 44px usado no resto do formulário. */
    .ts-wrapper .ts-control {
        min-height: 44px !important;
        align-items: center;
        font-size: 16px;
        box-sizing: border-box;
    }
    .ts-dropdown .option,
    .ts-dropdown .create,
    .ts-dropdown .no-results {
        min-height: 44px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    /* ---- Botões / Links de ação ---- */
    button, input[type=submit], input[type=button],
    .bt_link, .bt_padrao, .buscar_rels {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 15px;
        box-sizing: border-box;
    }
    /* Restaura tamanho padrão dos botões internos de libs (Quill toolbar, Bootstrap
       close, Tom Select) que ficaram explodidos pela regra acima. */
    .ql-toolbar button,
    .btn-close,
    .ts-control button {
        min-height: 0 !important;
        padding: 3px 5px !important;
        font-size: inherit !important;
        width: auto !important;
        height: auto !important;
    }

    /* Submit buttons COM valor longo (ex.: lista de relatórios)
       não quebram por padrão. Força wrap + altura automática. */
    input[type=submit].buscar_rels,
    .buscar_rels {
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        height: auto !important;
        line-height: 1.3;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left;
        padding: 12px 14px !important;
        margin: 6px 0 !important;
        display: block;
    }
    /* Para o caso de o submit ser dentro de uma <form> sem outro container */
    form { width: 100%; max-width: 100%; }

    /* ---- Ícones de ação dentro das tabelas (ver, editar, excluir, etc.) ---- */
    /* O CSS original usa float:left, que cola os ícones uns nos outros no mobile.
       Reset para inline-flex com área de toque garantida. */
    .bt_link_icon,
    .item_icon,
    .item_icon_hidden {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 36px !important;
        min-height: 36px !important;
        margin: 2px 4px !important;
        padding: 6px !important;
        float: none !important;
        vertical-align: middle;
        border-radius: 4px;
        background-color: rgba(10,87,83,0.08);
    }
    .bt_link_icon:hover,
    .item_icon:hover {
        background-color: rgba(10,87,83,0.2);
    }
    .bt_link_icon div,
    .item_icon div {
        float: none !important;
    }

    /* Mais espaço para a célula de ações em todas as tabelas de dados */
    table.tabela-dados tr td:last-child,
    table.tabela-dados tr th:last-child {
        white-space: nowrap;
        min-width: 100px;
    }

    /* ---- Avisos / notificações no topo ---- */
    .bt_avisos {
        display: inline-block;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
    }

    /* ---- Botões "fechar/abrir" no recipt-top (X e setas) ---- */
    .recipt .recipt-top .close,
    .recipt .recipt-top .open,
    .recipt_sub .recipt-top .close,
    .recipt_sub .recipt-top .open {
        margin-right: 8px !important;
        margin-top: 4px !important;
        min-width: 36px;
        min-height: 36px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* ---- Botões de aba (tabs) com área tocável ---- */
    .ui-tabs .ui-tabs-nav li a,
    [id^="id_tabs"] {
        padding: 10px 14px !important;
        font-size: 14px;
        min-height: 44px;
    }

    /* ---- Feature CEV (D2) ---- */
    .data_cev_recipt { padding: 8px !important; }
    .data_cev_recipt .agenda-left,
    .data_cev_recipt .agenda-right {
        font-size: 28px !important;
        padding: 6px 10px !important;
        display: inline-block;
    }
    .data_cev_titulo {
        font-size: 16px !important;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .datas_tags .tag_data {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }
    .datas_tags .tag_data button {
        font-size: 18px !important;
        padding: 0 4px;
    }
    #cev_confirmar_datas {
        width: 100%;
        margin-top: 12px;
    }

    /* (Tabelas de dados já tratadas no breakpoint 1024px — válido para mobile também) */

    /* Dica visual: sombra na borda direita indicando que tem mais conteúdo para o lado */
    table.tabela-dados {
        background-image: linear-gradient(to right, transparent calc(100% - 12px), rgba(10,87,83,0.15) 100%);
        background-attachment: local;
        background-repeat: no-repeat;
    }

    /* ---- Tipografia ---- */
    body { font-size: 14px; }
    h4 { font-size: 18px !important; }
    label { font-size: 13px; display: block; margin-bottom: 4px; }

    /* ---- Diálogos / Modais ---- */
    .ui-dialog { width: 95% !important; max-width: 95% !important; left: 2.5% !important; }

    /* ---- Esconder elementos que só fazem sentido no desktop ---- */
    .menu_esconder img:first-child { width: 140px !important; height: auto !important; margin: 0 0 12px 0 !important; }

    /* Header info compacto */
    #header_info { padding: 0 !important; }
}

/* ---------- TABELAS DE DADOS viram CARDS em telas estreitas ( <= 600px ) ----------
   Cobre TODAS as tabelas de dados marcadas via JS com a classe .tabela-dados
   (modA, modB, modC, tb_agenda, tb_avaliacao, tabela_item_evento, rels). */
@media (max-width: 600px) {
    /* Reset da tabela: vira block, sem scroll horizontal */
    table.tabela-dados {
        display: block !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100%;
        background-image: none !important;
        border: none !important;
        border-collapse: separate !important;
    }
    /* Esconde a linha de header */
    table.tabela-dados > tbody > tr:first-child,
    table.tabela-dados > tr:first-child,
    table.tabela-dados thead,
    table.tabela-dados tr:first-child {
        display: none !important;
    }
    /* tbody como block */
    table.tabela-dados > tbody,
    table.tabela-dados tbody {
        display: block !important;
        width: 100%;
    }
    /* Cada linha vira um card — especificidade bulletproof (body+...) para vencer
       qualquer regra antiga como .modA tr (0,1,2) ou .modA tr td (0,1,3) */
    body table.tabela-dados tr {
        display: block !important;
        background: #fff !important;
        border: 1px solid #d0d0d0 !important;
        border-radius: 8px !important;
        margin: 12px 0 !important;
        padding: 8px 12px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    /* Cada célula vira uma linha do card — altura cresce com o conteúdo
       (body+... eleva especificidade para vencer .modA tr td) */
    body table.tabela-dados tr td {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        padding: 10px 0 12px 0 !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
        text-align: left !important;
        font-size: 14px !important;
        color: #333 !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    body table.tabela-dados tr td:last-child {
        border-bottom: none !important;
        min-width: 0 !important;
    }
    /* Label da coluna em cima do valor — TAMBÉM cresce se o texto for longo */
    body table.tabela-dados tr td::before {
        content: attr(data-label);
        display: block;
        position: static;
        width: 100%;
        max-width: 100%;
        font-weight: 600;
        color: #0A5753;
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.35 !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    /* Esconde ::before quando label vazio (coluna de ações) */
    table.tabela-dados tr td[data-label=""]::before,
    table.tabela-dados tr td:not([data-label])::before {
        content: '';
        display: none;
    }
    table.tabela-dados tr td[data-label=""] {
        text-align: center !important;
        padding: 12px 0 !important;
    }
    /* Esconde células vazias */
    table.tabela-dados tr td:empty {
        display: none !important;
    }
    /* Reset de zebra que confunde em card */
    table.tabela-dados tr:nth-child(even),
    table.tabela-dados tr:nth-child(odd),
    table.tabela-dados tr:hover {
        background-color: #fff !important;
    }
    /* Ícones de ação aparecem SEMPRE em mobile (não há hover touch) */
    table.tabela-dados tr td [class*="flaticon-"],
    table.tabela-dados tr td [class*="flaticon2-"],
    table.tabela-dados tr td [class*="flaticon3-"] {
        display: inline !important;
    }
    /* Reset de border-radius residual */
    table.tabela-dados tr th:first-child,
    table.tabela-dados tr th:last-child,
    table.tabela-dados tr:last-child td:first-child,
    table.tabela-dados tr:last-child td:last-child {
        border-radius: 0 !important;
    }
    /* Container externo */
    .recipt-text { padding: 4px !important; }
}

/* ---------- SMARTPHONE ESTREITO ( <= 480px ) ---------- */
@media (max-width: 480px) {

    body { font-size: 13px; }
    h4 { font-size: 16px !important; }

    #content { padding: 0 4px; }
    .recipt-text { padding: 6px !important; }

    /* Botões empilhados em vez de lado a lado */
    .recipt-bts .bt_link { display: block; margin: 4px 0; text-align: center; }

    /* Tags do flatpickr menores */
    .datas_tags .tag_data {
        font-size: 13px !important;
        padding: 4px 10px !important;
        margin: 2px;
    }

    /* Setas do carrossel maiores ainda */
    .data_cev_recipt .agenda-left,
    .data_cev_recipt .agenda-right {
        font-size: 32px !important;
        padding: 8px 14px !important;
    }
}

/* ---------- DESKTOP ( > 1024px ) ---------- */
/* Botão hambúrguer escondido por padrão */
/* Hambúrguer escondido por padrão em desktop ≥992px (onde menu vira sidebar normal).
   Aparece em <992px (mesmo breakpoint do Bootstrap .offcanvas-lg). */
.menu_hamburguer { display: none; }
@media (max-width: 991.98px) {
    .menu_hamburguer {
        display: block !important;
        position: fixed;
        top: 8px; left: 8px;
        z-index: 1002;
        width: 44px; height: 44px;
        font-size: 22px; line-height: 1;
        background: #0A5753; color: #fff;
        border: none; border-radius: 6px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }
}

/* FOUC fix de tabs movido para <style> inline no <head> via load_headers().
   Veja eventos_url_helper.php — aplicação imediata, sem aguardar CSS externo. */

/* =======================================================================
   Calendários responsivos no celular (<=768px)
   jQuery UI datepicker (input.dtPker) + Flatpickr (#cev_reserva / CEV).
   Centraliza na tela, aumenta os dias para toque e cria um scrim escuro
   (via box-shadow gigante) sem precisar de JS. Desktop fica inalterado.
   ======================================================================= */
@media (max-width: 768px) {

    /* ---------- jQuery UI Datepicker ---------- */
    .ui-datepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 92vw !important;
        max-width: 360px !important;
        margin: 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
        z-index: 100000 !important;
        font-size: 16px !important;
        box-shadow: 0 0 0 100vmax rgba(8, 28, 26, .55), 0 20px 50px rgba(0, 0, 0, .55) !important;
    }
    .ui-datepicker .ui-datepicker-header { padding: 10px 6px !important; border-radius: 12px !important; position: relative !important; }
    .ui-datepicker .ui-datepicker-title { font-size: 16px !important; line-height: 1.5 !important; }
    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year { font-size: 15px !important; padding: 5px !important; }
    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next { width: 40px !important; height: 40px !important; top: 6px !important; cursor: pointer; }
    .ui-datepicker .ui-datepicker-prev { left: 4px !important; }
    .ui-datepicker .ui-datepicker-next { right: 4px !important; }
    .ui-datepicker table { width: 100% !important; margin: 8px 0 0 !important; }
    .ui-datepicker th { padding: 8px 0 !important; font-size: 13px !important; }
    .ui-datepicker td { padding: 2px !important; }
    .ui-datepicker td a,
    .ui-datepicker td span {
        display: block !important;
        text-align: center !important;
        padding: 0 !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 16px !important;
        border-radius: 9px !important;
    }
    .ui-datepicker .ui-datepicker-buttonpane { padding-top: 10px !important; }
    .ui-datepicker .ui-datepicker-buttonpane button { padding: 9px 14px !important; font-size: 14px !important; }

    /* ---------- Flatpickr (CEV multidata) ---------- */
    .flatpickr-calendar.open {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 92vw !important;
        max-width: 360px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        z-index: 100000 !important;
        box-shadow: 0 0 0 100vmax rgba(8, 28, 26, .55), 0 20px 50px rgba(0, 0, 0, .55) !important;
    }
    .flatpickr-calendar.open:before,
    .flatpickr-calendar.open:after { display: none !important; } /* esconde a setinha do popup */
    .flatpickr-calendar .flatpickr-months { padding: 8px 0 !important; }
    .flatpickr-calendar .flatpickr-current-month,
    .flatpickr-calendar .flatpickr-monthDropdown-months { font-size: 16px !important; }
    .flatpickr-calendar .flatpickr-current-month input.cur-year { font-size: 16px !important; }
    .flatpickr-calendar .flatpickr-prev-month,
    .flatpickr-calendar .flatpickr-next-month { padding: 10px !important; }
    .flatpickr-calendar .flatpickr-prev-month svg,
    .flatpickr-calendar .flatpickr-next-month svg { width: 17px !important; height: 17px !important; }
    .flatpickr-calendar .flatpickr-weekday { font-size: 13px !important; }
    .flatpickr-calendar .flatpickr-days,
    .flatpickr-calendar .dayContainer {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .flatpickr-calendar .flatpickr-day {
        max-width: none !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 16px !important;
        border-radius: 9px !important;
    }
}