/*
 * responsive.css — Camada de responsividade transversal.
 *
 * Carregado por ULTIMO em app.php (painel), store.php (loja) e admin.php (admin).
 * Escopos isolados: .app-shell (painel), .fit-store (loja), .adm (admin master).
 * Objetivo: adicionar navegacao/ajustes mobile SEM alterar o desktop nem tocar
 * em submits, IDs ou fluxos existentes. A interacao (drawer/accordion) vem de
 * responsive-nav.js (script externo self-origin, compativel com a CSP estrita).
 *
 * Breakpoints padrao: 1024 (painel), 980 (loja/admin), 900, 768, 600, 480.
 */

/* Impede reescala automatica de fonte em landscape (iOS/Android) */
html { -webkit-text-size-adjust: 100%; }

/* Elementos so-mobile ficam ocultos por padrao (desktop intacto). */
.nav-burger,
.nav-backdrop,
.fit-burger,
.fit-mobile-nav,
.fit-mobile-backdrop,
.adm-mobile-bar,
.adm-nav-backdrop { display: none; }

/* =========================================================
   1) PAINEL DO LOJISTA (.app-shell) — hamburguer + drawer
   O menu superior usava mega-menus so-hover, inacessiveis no toque.
   Em <=1024px a barra esquerda vira um drawer lateral com accordions.
   ========================================================= */
@media (max-width: 1024px) {
  .app-shell .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    margin-right: 6px;
    border: 1px solid var(--erp-border, #dce4ef);
    border-radius: 10px;
    background: #fff;
    color: #12233f;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .app-shell .nav-burger:active { background: #eef4ff; }
  .app-shell .nav-burger svg { display: block; width: 22px; height: 22px; }

  /* backdrop-filter cria bloco de contencao p/ position:fixed — precisa sair
     no modo drawer, senao o menu fixo fica preso na altura do header.
     z-index alto garante que o subtree do top-nav (drawer + backdrop, que
     vivem no seu contexto de empilhamento sticky) flutue acima do conteudo. */
  .app-shell .top-nav {
    gap: 8px;
    z-index: 1050;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* .top-nav-left assume o papel de drawer lateral */
  .app-shell .top-nav-left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: min(322px, 87vw);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: 0 26px 64px rgba(9, 30, 66, .3);
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-shell.nav-open .top-nav-left { transform: translateX(0); }

  .app-shell .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(9, 30, 66, .48);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .app-shell.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

  .app-shell .top-nav-left .brand-top {
    margin: 2px 0 10px;
    padding: 4px 8px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--erp-border, #e5e7eb);
  }

  /* Links diretos (ex.: Configuracoes) */
  .app-shell .top-nav-left > .top-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    line-height: 1.2;
    border-radius: 10px;
    font-size: 14px;
  }
  .app-shell .top-nav-left > .top-link:active { background: #eef4ff; }

  /* Clusters como accordion */
  .app-shell .top-nav-left .menu-cluster { width: 100%; }
  .app-shell .menu-cluster > .top-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    line-height: 1.2;
    border-radius: 10px;
    font-size: 14px;
    text-align: left;
  }
  .app-shell .menu-cluster > .top-link:active { background: #eef4ff; }
  .app-shell .menu-cluster > .top-link::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-right: 2px solid #8592ab;
    border-bottom: 2px solid #8592ab;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .app-shell .menu-cluster.is-expanded > .top-link { color: var(--erp-primary, #2563eb); }
  .app-shell .menu-cluster.is-expanded > .top-link::after { transform: rotate(-135deg); }

  /* Mega-menu vira sublista estatica; hover/focus neutralizados no toque */
  .app-shell .menu-cluster > .mega-menu,
  .app-shell .menu-cluster > .mega-submenu {
    position: static;
    min-width: 0;
    max-height: none;
    margin: 0 0 4px;
    padding: 0 0 4px 8px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .app-shell .menu-cluster:hover > .mega-menu,
  .app-shell .menu-cluster:focus-within > .mega-menu,
  .app-shell .menu-cluster > .mega-menu { display: none; }
  .app-shell .menu-cluster.is-expanded > .mega-menu { display: block; }

  .app-shell .menu-cluster > .mega-menu a,
  .app-shell .menu-cluster > .mega-submenu a {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 8px;
    white-space: normal;
  }

  .app-shell .top-nav-right { gap: 8px; }
}

/* Grids do painel que estouravam entre 576 e 1024px */
@media (max-width: 1024px) {
  .app-shell .module-board.compact {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}
@media (max-width: 900px) {
  .app-shell .commercial-grid,
  .app-shell .report-layout,
  .app-shell .payment-erp-grid,
  .app-shell .erp-product-row,
  .app-shell .purchase-item-row {
    grid-template-columns: 1fr !important;
  }
  /* Grade de impostos em lote: 3 col fixas de 230px estouram (~690px). */
  .app-shell .bulk-tax-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}
@media (max-width: 768px) {
  /* Matriz de grade sem wrapper: rola horizontalmente em vez de estourar */
  .app-shell .grade-matrix {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 600px) {
  .app-shell .store-config-btn,
  .app-shell .top-nav-right .icon-btn { display: none; }
  .app-shell .store-preview-btn { font-size: 11px; }
}
@media (max-width: 480px) {
  .app-shell .module-board.compact { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   2) LOJA / VITRINE (.fit-store) — hamburguer + drawer
   .fit-menu ja some em 980px; aqui damos um substituto acessivel.
   ========================================================= */
@media (max-width: 980px) {
  .fit-store .fit-header {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .fit-store .fit-burger {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #111;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fit-store .fit-burger svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }
  .fit-store .fit-logo { justify-self: center; }
  .fit-store .fit-icons { justify-self: end; }

  .fit-store .fit-mobile-nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: min(320px, 86vw);
    flex-direction: column;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: 0 26px 64px rgba(0, 0, 0, .3);
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .fit-store .fit-mobile-nav.is-open { transform: translateX(0); }

  .fit-store .fit-mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
  }
  .fit-store .fit-mobile-nav-head strong {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .fit-store .fit-mobile-nav-head button {
    border: 0;
    background: transparent;
    color: #333;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
  }
  .fit-store .fit-mobile-nav a {
    display: block;
    padding: 14px 8px;
    border-bottom: 1px solid #f2f2f2;
    color: #111;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .fit-store .fit-mobile-nav a:active { color: var(--brand, #000); }

  .fit-store .fit-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .fit-store .fit-mobile-backdrop.is-open { opacity: 1; visibility: visible; }
}

/* =========================================================
   3) ADMIN MASTER (.adm) — barra mobile + sidebar drawer
   Substitui a barra horizontal apertada por um drawer proprio.
   ========================================================= */
@media (max-width: 980px) {
  .adm .adm-mobile-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 10px 14px;
    background: #12233f;
    color: #fff;
  }
  .adm .adm-mobile-bar button[data-adm-nav-toggle] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
  }
  .adm .adm-mobile-bar button svg { width: 20px; height: 20px; }
  .adm .adm-mobile-bar strong { font-size: 14px; font-weight: 700; }

  /* Sidebar como drawer (sobrepoe a barra horizontal do admin.css) */
  .adm .adm-shell { display: block; }
  .adm .adm-side {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: min(300px, 84vw) !important;
    height: 100% !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
  }
  .adm.adm-nav-open .adm-side { transform: translateX(0); }
  .adm .adm-nav { flex-direction: column !important; align-items: stretch !important; }
  .adm .adm-nav-label { display: block !important; }
  .adm .adm-side-foot { display: block !important; margin-top: auto; }

  .adm .adm-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(9, 30, 66, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .adm.adm-nav-open .adm-nav-backdrop { opacity: 1; visibility: visible; }
}

/* =========================================================
   4) BOTOES CLAROS NO MOBILE/TABLET (painel do lojista)
   Mesmo modelo da emissao fiscal: fundo branco, texto roxo
   padrao (--primary #4F46E5). Vale <=1020px, onde o drawer da
   sidebar esta ativo. Botoes de perigo/sucesso nao entram.
   ========================================================= */
@media (max-width: 1020px) {
  body.app-shell :is(
    .btn-primary, .t-btn-new, .t-btn-back, .btn-save, .btn-brand,
    .nfe-btn.blue, .ft-btn.green, .cx-btn.primary, .cx-btn.blue,
    .sd-btn, .exp-btn.primary, .dfe-btn.primary, .issuer-btn.blue
  ) {
    background: #fff !important;
    border: 1px solid #C7D2FE !important;
    color: #4F46E5 !important;
    box-shadow: none !important;
  }
  body.app-shell :is(
    .btn-primary, .t-btn-new, .t-btn-back, .btn-save, .btn-brand,
    .nfe-btn.blue, .ft-btn.green, .cx-btn.primary, .cx-btn.blue,
    .sd-btn, .exp-btn.primary, .dfe-btn.primary, .issuer-btn.blue
  ):hover {
    background: rgba(79, 70, 229, .08) !important;
    border-color: #A5B4FC !important;
    color: #4338CA !important;
  }
}

/* =========================================================
   5) TABELAS VIRAM CARDS NO MOBILE (painel do lojista)
   O JS em app.php marca data-label em cada celula a partir do
   cabecalho; aqui fica so o visual (<=768px). O cabecalho some
   e cada linha vira um cartao de 2 colunas, como na emissao
   fiscal. Celulas com colspan (aviso vazio) ocupam a linha toda.
   ========================================================= */
@media (max-width: 768px) {
  .t-cards-ready {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
  }
  .t-cards-ready thead { display: none !important; }
  .t-cards-ready tbody { display: block !important; }
  .t-cards-ready tbody > tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin: 0 0 10px;
    padding: 12px !important;
    border: 1px solid #E3E6EC !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
  }
  .t-cards-ready tbody > tr > td {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    vertical-align: top;
  }
  .t-cards-ready tbody > tr > td::before {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6B7280;
    margin-bottom: 2px;
  }
  .t-cards-ready td[colspan] { grid-column: 1 / -1; }
  .t-cards-ready tbody > tr > td form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .t-cards-ready input,
  .t-cards-ready select {
    min-width: 0 !important;
    max-width: 100%;
    width: auto;
  }
}