/* ============================================================================
   Camada responsiva dos seis paineis internos (Control, Finance, Atendimento,
   Marketing, RH e FLUXOSST+). Carregada DEPOIS do bundle do Tailwind, em
   templates/includes/_camada_responsiva.html.

   O Tailwind daqui e pre-compilado e as telas nao foram escritas pensando em
   janela estreita: a coluna de conteudo cedia a largura que o cabecalho e as
   tabelas pediam, e a pagina inteira ficava mais larga que a janela (1864 px
   numa janela de 1366 px, em 05/10/2026). Esta camada corrige isso por cima,
   sem reescrever tela por tela:

   1. a coluna de conteudo nunca empurra a pagina (min-width: 0);
   2. o cabecalho cede: os botoes de painel mostram so o icone em janela
      menor que 1536 px (o painel aberto mantem o nome) e rolam de lado se
      ainda assim faltar espaco;
   3. abaixo de 1024 px o menu lateral e uma gaveta (ja era, mas sem
      transicao e aparecia aberto ate o Alpine carregar);
   4. abaixo de 768 px: margens menores, grades fixas de 3+ colunas viram 2,
      linhas "titulo + botoes" quebram, campos nunca passam da largura e
      tabelas largas rolam de lado dentro da propria caixa (o script do
      include envolve as que nao tem caixa);
   5. `table.resp-cards` + `data-label` nos <td>: a tabela vira cartoes
      empilhados no celular (mesmo mecanismo do Portal do Cliente, PR #359).
   ============================================================================ */

/* 1. Coluna de conteudo ----------------------------------------------------- */
.flex.min-h-screen > .flex-1.flex-col { min-width: 0; }

/* 2. Cabecalho --------------------------------------------------------------- */
header.sticky.top-0 > div { min-width: 0; }
header.sticky.top-0 > div:first-child { flex: 1 1 auto; }
header.sticky.top-0 > div:last-child { flex: 0 0 auto; }
.alternador-painel { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.alternador-painel::-webkit-scrollbar { display: none; }
.alternador-painel > a, .alternador-painel > span { flex: 0 0 auto; }
@media (max-width: 1535px) {
    /* so o icone (font-size 0 some com o texto; o svg e em rem e fica), menos no painel aberto */
    .alternador-painel > a, .alternador-painel > span { font-size: 0; gap: 0; }
    .alternador-painel > [aria-current] { font-size: .875rem; gap: .375rem; }
}
@media (max-width: 1023px) {
    header.sticky.top-0, .plus-sidebar ~ div > header { padding-left: 1rem; padding-right: 1rem; }
    /* dropdowns do cabecalho nunca passam da janela */
    header .absolute.w-96, header .absolute.w-80, header .absolute.w-72, header .absolute.w-64 {
        max-width: calc(100vw - 1.5rem);
    }
}
@media (max-width: 1023px) {
    /* FLUXOSST+: o topo tem mais botoes; em tablet some o rotulo "Unidade" e a cor do painel */
    .plus-sidebar ~ div > header > div { gap: .5rem; }
    .plus-sidebar ~ div > header .rounded-xl.border > span:first-child { display: none; }
    .plus-sidebar ~ div > header [title="Cor do painel"] { display: none; }
}
@media (max-width: 639px) {
    header.sticky.top-0, .plus-sidebar ~ div > header { padding-left: .5rem; padding-right: .5rem; }
    header.sticky.top-0 > div, .plus-sidebar ~ div > header > div { gap: .25rem; }
    /* no celular o painel se troca pelo "Trocar Painel" do menu lateral */
    .alternador-painel { display: none; }
    /* botoes secundarios do topo (cor do painel, ocorrencia): ficam no menu */
    header [title="Cor do painel - muda só a faixa do topo"],
    header [title="Registrar Ocorrência"] { display: none; }
}

/* 3. Gaveta do menu lateral --------------------------------------------------- */
@media (max-width: 1023px) {
    aside.sidebar-shell, aside.plus-sidebar { transition: transform .2s ease; }
    /* antes do Alpine ligar nao ha classe nenhuma: comeca fechada, sem piscar */
    aside.sidebar-shell:not(.translate-x-0), aside.plus-sidebar:not(.translate-x-0) { transform: translateX(-100%); }
}

/* 4. Conteudo ----------------------------------------------------------------- */
@media (max-width: 1023px) {
    main#conteudo { padding: 1rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    main#conteudo .grid[class~="grid-cols-5"], main#conteudo .grid[class~="grid-cols-6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    main#conteudo .grid[class~="grid-cols-7"], main#conteudo .grid[class~="grid-cols-8"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    main#conteudo { padding: .75rem; }
    main#conteudo .grid[class~="grid-cols-3"]:not([class*="sm:grid-cols-"]),
    main#conteudo .grid[class~="grid-cols-4"]:not([class*="sm:grid-cols-"]),
    main#conteudo .grid[class~="grid-cols-5"]:not([class*="sm:grid-cols-"]),
    main#conteudo .grid[class~="grid-cols-6"]:not([class*="sm:grid-cols-"]),
    main#conteudo .grid[class~="grid-cols-7"]:not([class*="sm:grid-cols-"]),
    main#conteudo .grid[class~="grid-cols-8"]:not([class*="sm:grid-cols-"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    main#conteudo .flex.justify-between:not(.flex-nowrap) { flex-wrap: wrap; }
    main#conteudo .flex.items-center.gap-2:not(.flex-nowrap) { flex-wrap: wrap; }
    main#conteudo input:not([type="checkbox"]):not([type="radio"]),
    main#conteudo select, main#conteudo textarea { max-width: 100%; }
    main#conteudo .max-w-sm, main#conteudo .max-w-md, main#conteudo .max-w-xs { max-width: 100%; }
    main#conteudo .px-6 { padding-left: 1rem; padding-right: 1rem; }
    main#conteudo th.px-6, main#conteudo td.px-6 { padding-left: .75rem; padding-right: .75rem; }
    main#conteudo .p-6 { padding: 1rem; }
    main#conteudo .p-8 { padding: 1.25rem; }
    main#conteudo .text-3xl { font-size: 1.5rem; line-height: 2rem; }
    main#conteudo .overflow-x-auto { -webkit-overflow-scrolling: touch; }
    /* Agenda (FullCalendar): a barra de botoes quebra em linhas em vez de estourar */
    main#conteudo .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: .5rem; }
    main#conteudo .fc .fc-toolbar-chunk { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
    main#conteudo .fc .fc-toolbar-title { font-size: 1.1rem; }
}

/* 5. Tabela vira cartoes no celular ------------------------------------------- */
/* No desktop a tabela marcada tem largura minima: com a coluna de conteudo
   presa a janela, uma lista de 9 colunas esmagava o nome em 4 linhas numa tela
   de 1366 px. Com o minimo, quem rola e a tabela dentro da propria caixa. */
@media (min-width: 768px) {
    main#conteudo table.resp-cards { min-width: 70rem; }
    main#conteudo table.resp-cards th, main#conteudo table.resp-cards td { white-space: nowrap; }
}
@media (max-width: 767px) {
    table.resp-cards thead { display: none; }
    table.resp-cards, table.resp-cards tbody { display: block; width: 100%; }
    table.resp-cards tr {
        display: block; padding: .75rem 1rem; border: 1px solid #e5e7eb;
        border-radius: .9rem; margin: .625rem; background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    table.resp-cards td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; width: 100%; padding: .35rem 0 !important;
        text-align: right; border: none;
    }
    table.resp-cards td::before {
        content: attr(data-label); font-size: .7rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .03em; color: #9ca3af;
        text-align: left; flex: 0 0 auto;
    }
    table.resp-cards td.cel-nome { justify-content: flex-start; padding-bottom: .6rem !important; border-bottom: 1px solid #f3f4f6; margin-bottom: .35rem; }
    table.resp-cards td.cel-nome::before { display: none; }
    table.resp-cards td.cel-acoes { justify-content: flex-end; padding-top: .6rem !important; border-top: 1px solid #f3f4f6; margin-top: .35rem; }
    table.resp-cards td.cel-acoes::before { content: "Ações"; }
    table.resp-cards td.cel-oculta { display: none; }
    html[data-theme="dark"] table.resp-cards tr { background: var(--dk-surface, #1a2231); border-color: var(--dk-border, #2a3447); }
    html[data-theme="dark"] table.resp-cards td.cel-nome,
    html[data-theme="dark"] table.resp-cards td.cel-acoes { border-color: var(--dk-border, #2a3447); }
}