/* ============================================================================
   BASE FULLSCREEN - Modo Fullscreen Global
   Extraido de base.html em 08/02/2026
   Esconde menu, header, rodape. Mostra apenas conteudo principal.
   ============================================================================ */

      /* ═══════════════════════════════════════════════════════════════════════════════
         MODO FULLSCREEN GLOBAL - Esconde tudo (menu, header, rodapé)
         Mostra apenas o conteúdo principal em tela cheia
         ═══════════════════════════════════════════════════════════════════════════════ */

      /* Esconder TUDO: menu lateral, header, rodapé, breadcrumb */
      body.fullscreen-mode aside,
      body.fullscreen-mode header,
      body.fullscreen-mode footer,
      body.fullscreen-mode [role="contentinfo"],
      body.fullscreen-mode .footer,
      body.fullscreen-mode .rodape,
      body.fullscreen-mode .breadcrumb,
      body.fullscreen-mode nav:not(form nav),
      body.form-fullscreen-mode aside,
      body.form-fullscreen-mode header,
      body.form-fullscreen-mode footer,
      body.form-fullscreen-mode [role="contentinfo"],
      body.form-fullscreen-mode .footer,
      body.form-fullscreen-mode .rodape,
      body.form-fullscreen-mode .breadcrumb,
      body.form-fullscreen-mode nav:not(form nav) {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
          height: 0 !important;
          overflow: hidden !important;
      }

      /* Main ocupa 100% da tela */
      body.fullscreen-mode {
          overflow: auto !important;
      }

      body.fullscreen-mode main,
      body.fullscreen-mode #main-content {
          margin: 0 !important;
          padding: 0 !important;
          width: 100vw !important;
          min-height: 100vh !important;
          max-width: 100vw !important;
      }

      /* Containers ocupam toda a largura */
      body.fullscreen-mode .container,
      body.fullscreen-mode .container-fluid {
          max-width: 100% !important;
          padding: 1.5rem !important;
      }

      /* CSS específico para formulários em fullscreen */
      body.form-fullscreen-mode [x-data*="FormController"] {
          min-height: 100vh !important;
          display: flex !important;
          flex-direction: column !important;
      }

      body.form-fullscreen-mode form {
          flex: 1 !important;
          display: flex !important;
          flex-direction: column !important;
      }

      /* CSS específico para PDV em fullscreen (mantém compatibilidade) */
      body.pdv-fullscreen-mode {
          margin: 0;
          padding: 0;
          overflow: hidden;
      }

      body.pdv-fullscreen-mode main {
          height: 100vh;
          overflow-y: auto;
      }

      body.pdv-fullscreen-mode .bg-gradient-to-r {
          padding: 0.5rem 1rem;
      }

      /* Transições suaves */
      body.fullscreen-mode,
      body.fullscreen-mode * {
          transition: padding 0.3s ease, margin 0.3s ease;
      }

      /* Indicador visual de fullscreen ativo */
      body.fullscreen-mode::before {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--color-primary-600), var(--color-primary-600), var(--color-primary-600));
          background-size: 200% 100%;
          animation: shimmer 3s linear infinite;
          z-index: 9999;
          pointer-events: none;
      }

      @keyframes shimmer {
          0% { background-position: 200% 0; }
          100% { background-position: -200% 0; }
      }

      /* ═══════════════════════════════════════════════════════════════════════════════
         FIM DO MODO FULLSCREEN GLOBAL
         ═══════════════════════════════════════════════════════════════════════════════ */