/* ============================================================
   RESPONSIVE — IDEIAData
   Mobile-first breakpoints:
     0–767px    → Mobile
     768–1023px → Tablet
     1024px+    → Desktop
============================================================ */

/* ══════════════════════════════════════════════════════════════
   1. DASHBOARD — Drawer Sidebar (mobile)
   Overrides the 960px rule in style.css that collapses the
   sidebar into a horizontal strip — replaces with off-canvas drawer.
══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* App canvas: never offset for sidebar */
  .dashboard-body .dashboard-app {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Header: full width on mobile (sidebar is off-canvas) */
  .dashboard-body .dashboard-header {
    left: 0 !important;
  }

  /* Sidebar becomes a fixed off-canvas drawer */
  .dashboard-body .dashboard-sidebar {
    position: fixed !important;
    top: var(--dash-header-h) !important;
    left: -280px !important;
    height: calc(100vh - var(--dash-header-h)) !important;
    height: calc(100dvh - var(--dash-header-h)) !important;
    width: 280px !important;
    border-right: 1px solid var(--dash-border) !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    z-index: 300 !important;
    transition: left 0.25s ease;
    overflow-y: auto;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
  }

  /* Mobile sidebar: logo area not needed (starts below header) */
  .dashboard-body .dashboard-sidebar .nf-sidebar-logo-area {
    display: none !important;
  }

  /* Open state */
  .dashboard-body.sidebar-mobile-open .dashboard-sidebar {
    left: 0 !important;
  }

  /* Hide desktop collapse toggle on mobile */
  .dashboard-body .nf-desktop-toggle {
    display: none !important;
  }

  /* ── Undo sidebar-collapsed label hiding on mobile ─────────────
     localStorage may persist collapsed=true from desktop session.
     On mobile the drawer always shows full content.
  ── */
  .sidebar-collapsed.dashboard-body .dashboard-sidebar-new span:not(.material-symbols-outlined),
  .sidebar-collapsed.dashboard-body .dashboard-sidebar-section-head span:first-child,
  .sidebar-collapsed.dashboard-body .dashboard-sidebar-empty,
  .sidebar-collapsed.dashboard-body .dashboard-nav-label {
    display: revert !important;
  }

  .sidebar-collapsed.dashboard-body .dashboard-nav-link {
    grid-template-columns: 24px 1fr !important;
    justify-items: start !important;
    padding: 0.55rem 0.6rem !important;
  }

  .sidebar-collapsed.dashboard-body .dashboard-sidebar {
    width: 280px !important;
    padding: 0 !important;
  }

  .sidebar-collapsed.dashboard-body .dashboard-back-link,
  .sidebar-collapsed.dashboard-body .dashboard-sidebar-logout {
    justify-content: flex-start !important;
    padding: 0.55rem 0.6rem !important;
  }

  /* ── Dashboard header: strip to hamburger + logo + avatar only ── */
  .dashboard-body .dashboard-workspace-switch {
    display: none !important;
  }

  .dashboard-body .dashboard-header-icon[aria-label="Ajuda"],
  .dashboard-body .dashboard-header-icon[aria-label="Notificações"] {
    display: none !important;
  }

  .dashboard-body .dashboard-header-divider {
    display: none !important;
  }

  .dashboard-body .dashboard-header-user-info {
    display: none !important;
  }

  /* Avatar stays but header-user loses padding bulk */
  .dashboard-body .dashboard-header-user {
    padding: 0.2rem !important;
  }

  /* NIPFlow topbar: hide search and sync on small screens */
  .dashboard-body .nf-topbar-search {
    display: none !important;
  }

  .dashboard-body .nf-sync-status {
    display: none !important;
  }
}

/* Desktop: collapse toggle visible, hamburger hidden */
@media (min-width: 961px) {
  .dashboard-header-hamburger {
    display: none !important;
  }

  .sidebar-mobile-backdrop {
    display: none !important;
  }
}

/* ── Backdrop ────────────────────────────────────────────────── */

.sidebar-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 299;
  cursor: pointer;
}

.dashboard-body.sidebar-mobile-open .sidebar-mobile-backdrop {
  display: block;
}

/* ── Hamburger button (injected into .dashboard-header-left) ── */

.dashboard-body .dashboard-header-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--dash-muted, #667085);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.dashboard-body .dashboard-header-hamburger:hover {
  background: #f2f4f7;
  color: var(--dash-ink, #101828);
}

.dashboard-body .dashboard-header-hamburger .material-symbols-outlined {
  font-size: 1.4rem;
}

/* ══════════════════════════════════════════════════════════════
   2. DASHBOARD — Stats overview grid
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .dashboard-body .dashboard-overview {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   3. DASHBOARD — Tables: horizontal scroll on mobile
   Note: .dashboard-body .dashboard-table-wrap has overflow:hidden
   in style.css — must override explicitly.
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .dashboard-body .dashboard-table-wrap,
  .dashboard-body .table-wrapper,
  .dashboard-body [class*="-table-wrap"],
  .dashboard-body [class*="-table-wrapper"] {
    overflow: auto !important;      /* overflow-x:auto + overflow-y:auto (spec: visible→auto when sibling is not visible) */
    -webkit-overflow-scrolling: touch;
    border-radius: 4px !important;
    max-width: 100% !important;
  }

  .dashboard-body .dashboard-table,
  .dashboard-body table {
    min-width: 560px;
    width: max-content;             /* garante que a tabela não colapse em colunas estreitas */
  }
}

/* ══════════════════════════════════════════════════════════════
   3b. DASHBOARD — Panel: redução de padding e contenção
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Reduz padding do panel para dar mais espaço à tabela */
  .dashboard-body .dashboard-panel,
  .dashboard-body .dashboard-panel-main {
    padding: 0.85rem !important;
    min-width: 0 !important;        /* evita blowout em flex/grid */
    max-width: 100% !important;
  }

  /* Stat card: padding proporcional e wrap de texto */
  .dashboard-body .dashboard-stat-card {
    padding: 1rem !important;
    min-width: 0 !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Stat value texto longo (ex: "Pipeline e follow-up") */
  .dashboard-body .dashboard-stat-value,
  .dashboard-body .dashboard-stat-text,
  .dashboard-body .dashboard-stat-date {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   3c. DASHBOARD — Content layout: topbar, panel-header, form-grid
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Topbar: title + action button stack vertically */
  .dashboard-body .dashboard-topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .dashboard-body .dashboard-topbar-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .dashboard-body .dashboard-topbar-actions .btn {
    flex: 1 1 auto;
    min-width: 120px;
    justify-content: center;
    text-align: center;
  }

  /* Panel header: title + search/actions stack vertically */
  .dashboard-body .dashboard-panel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  /* Search bar full-width on mobile */
  .dashboard-body .dashboard-search,
  .dashboard-body .dashboard-search-inline {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Search input full-width */
  .dashboard-body .dashboard-search input,
  .dashboard-body .dashboard-search-inline input {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Form grid: single column */
  .dashboard-body .dashboard-form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Upload panel: single column, imagem mantém proporção */
  .dashboard-body .dashboard-upload-panel {
    grid-template-columns: 1fr !important;
    padding: 0.85rem !important;
  }

  .dashboard-body .dashboard-upload-preview img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Editor textarea cabe na tela */
  .dashboard-body .dashboard-editor-textarea {
    min-height: 200px !important;
  }

  /* Form actions: buttons wrap */
  .dashboard-body .dashboard-form-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .dashboard-body .dashboard-form-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   4. DASHBOARD — Kanban: single column on mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .dashboard-body .kanban-board {
    flex-direction: column !important;
    gap: 1rem;
    overflow-x: visible !important;
  }

  .dashboard-body .kanban-column {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   5. DASHBOARD — Modals: full-screen sheet on mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .dashboard-body .dashboard-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .dashboard-body .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 4px 4px 0 0 !important;
    overflow-y: auto;
    animation: mobileSheetSlide 0.25s ease !important;
  }
}

@keyframes mobileSheetSlide {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   6. DASHBOARD — Main & section padding
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Impede overflow horizontal global — só no body, não no main (evita assimetria visual) */
  body.dashboard-body {
    overflow-x: hidden !important;
  }

  /* Gutters laterais via margin para que children em width:100% não consumam o espaço */
  .dashboard-body .dashboard-main {
    padding-top: 1.25rem !important;
    padding-bottom: 2rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    overflow-x: visible !important;
    box-sizing: border-box !important;
    width: auto !important;
  }

  /* Contém largura de todos filhos diretos do main */
  .dashboard-body .dashboard-overview,
  .dashboard-body .dashboard-tabs,
  .dashboard-body .dashboard-tab-container,
  .dashboard-body .dashboard-tab-content,
  .dashboard-body .dashboard-topbar {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Kanban header: empilha em coluna no mobile */
  .dashboard-body .kanban-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .dashboard-body .kanban-header > div {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .dashboard-body .kanban-selector {
    width: 100% !important;
  }

  .dashboard-body .kanban-selector select {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .dashboard-body .dashboard-section,
  .dashboard-body .glass-panel {
    padding: 1rem !important;
  }

  .dashboard-body .dashboard-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .dashboard-body .dashboard-tabs::-webkit-scrollbar {
    display: none;
  }

  .dashboard-body .dashboard-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* section 7 merged into section 1 (960px block) */

/* ══════════════════════════════════════════════════════════════
   8. DASHBOARD — Touch targets (minimum 44px, scoped)
══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .dashboard-body .dashboard-nav-link,
  .dashboard-body .dashboard-back-link,
  .dashboard-body .dashboard-sidebar-logout,
  .dashboard-body .dashboard-header-hamburger,
  .dashboard-body .dashboard-header-icon {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════
   9. PUBLIC SITE — Navigation & hamburger fix
══════════════════════════════════════════════════════════════ */

/* Spans white in style.css — force dark always since menu bg is now white */
.header .mobile-menu-btn span {
  background: #313841 !important;
}

@media (max-width: 900px) {
  /* Nav links: dark text on white overlay */
  .nav .nav-link {
    color: var(--text-primary, #313841) !important;
  }

  .nav .nav-link:hover,
  .nav .nav-link.active {
    color: var(--primary) !important;
  }
}

@media (max-width: 767px) {
  .header .container {
    padding: 0 1rem;
  }

  .nav-link {
    padding: 0.75rem 0 !important;
    font-size: 1.25rem !important;
  }

  /* Reduz gap para caber 7 links sem overflow */
  .nav-list {
    gap: 1.5rem !important;
  }

  /* Garante que o menu mobile fique acima do fixed-bg */
  .nav {
    z-index: 200 !important;
  }

  /* Hamburger visível acima do nav */
  .mobile-menu-btn {
    z-index: 201 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   10. PUBLIC SITE — Sections: remove 100vh on mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Sections não-hero: altura automática no mobile */
  body:not(.dashboard-body) .section {
    min-height: auto !important;
    padding: 3rem 0 !important;
  }

  /* Hero mantém altura de tela, usa svh quando suportado */
  body:not(.dashboard-body) .hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding-top: 72px !important;
    padding-bottom: 2rem !important;
  }

  /* Reduz padding interno dos containers */
  body:not(.dashboard-body) .hero .container,
  body:not(.dashboard-body) .section .container {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Seção de hero: reduz seção-gap */
  :root {
    --section-gap: 3rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   10b. PUBLIC SITE — Hero section content
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .hero-container {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 2rem;
  }

  .hero-title {
    font-size: clamp(1.85rem, 8vw, 2.5rem) !important;
    margin-bottom: 1rem !important;
  }

  .hero-content {
    max-width: 100% !important;
  }

  .hero-description {
    font-size: 1rem !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .hero-buttons .btn {
    justify-content: center !important;
    width: 100% !important;
  }

  /* Hero stats: grid de 3 colunas, sem dividers */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    margin-top: 1.75rem !important;
    padding-top: 1.5rem !important;
  }

  .hero-stat-divider {
    display: none !important;
  }

  .hero-stat-item {
    text-align: center;
  }

  .hero-stat-number {
    font-size: 1.4rem !important;
  }

  .hero-stat-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.5px !important;
  }

  .hero-image,
  .hero-visual {
    display: none;
  }

  .eyebrow {
    font-size: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   11. PUBLIC SITE — Services grid
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   12. PUBLIC SITE — About section
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .about-content {
    flex-direction: column !important;
    gap: 2rem;
  }

  .about-text,
  .about-image {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .about-content {
    gap: 2rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   13. PUBLIC SITE — Contact form
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .contact-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .contact-form,
  .glass-panel.contact-form {
    padding: 1.5rem 1rem !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 1rem;
  }

  .contact-item {
    font-size: 1rem !important;
  }

  /* Section headers: menos margem inferior */
  .section-header {
    margin-bottom: 2rem !important;
  }

  .section-subtitle {
    font-size: 0.95rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   13b. PUBLIC SITE — Touch targets
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .btn,
  .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   14. PUBLIC SITE — Blog grid
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .blog-grid,
  .posts-grid,
  .blog-posts-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .blog-grid,
  .posts-grid,
  .blog-posts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   15. PUBLIC SITE — General section spacing
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   16. LOGIN page
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .auth-shell {
    padding: 1rem !important;
  }

  .auth-stage {
    flex-direction: column !important;
    gap: 1.5rem;
    padding: 2rem 0 !important;
  }

  .auth-copy {
    text-align: center;
  }

  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1rem !important;
  }

  .auth-title {
    font-size: clamp(1.6rem, 6vw, 2rem) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   17. Tablet (768–1023px) — Dashboard sidebar stays visible
══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 960px) {
  /* Keep sidebar as drawer on tablet too (under 960px threshold) */
}
/* ══════════════════════════════════════════════════════════════
   18. DASHBOARD — Mobile Module Restriction
   Hide all modules except "Gestão de projetos" on mobile devices.
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .dashboard-nav-link:not([data-page-link="projects"]) {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   19. PUBLIC SITE — IDSaúde page mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Hero IDSaúde: coluna única */
  .ids-hero-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .ids-hero-title {
    font-size: clamp(1.85rem, 8vw, 2.25rem) !important;
  }

  /* KPI row: 3 colunas apertadas — reduz padding */
  .ids-kpi {
    padding: 0.65rem 0.5rem !important;
  }

  .ids-kpi-value {
    font-size: 1.1rem !important;
  }

  .ids-kpi-label {
    font-size: 0.6rem !important;
  }

  /* Features: 1 coluna */
  .ids-features-grid {
    grid-template-columns: 1fr !important;
  }

  /* Steps: 2 colunas no mobile, 1 em telas muito pequenas */
  .ids-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ids-steps::before {
    display: none !important;
  }

  /* CTA actions: coluna */
  .ids-cta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ids-cta-actions .btn {
    justify-content: center !important;
    text-align: center !important;
  }

  .ids-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .ids-hero-actions .btn {
    justify-content: center !important;
  }
}

@media (max-width: 400px) {
  .ids-steps {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   20. PUBLIC SITE — About: segments badges
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .segments-grid {
    justify-content: center !important;
  }

  .segment-badge {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.75rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   21. Cookie banner mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .cookie-banner {
    padding: 1.25rem 0 !important;
  }

  .cookie-buttons {
    gap: 0.5rem !important;
  }

  .btn-outline-cookie {
    padding: 0.6rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   22. PUBLIC SITE — Footer mobile: versão simplificada
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Oculta grid completo (brand desc, nav colunas) */
  .site-footer:not(.dashboard-body .site-footer) .sf-grid {
    display: none !important;
  }

  .site-footer:not(.dashboard-body .site-footer) {
    padding: 1.5rem 0 !important;
    margin-top: 2rem !important;
  }

  /* Barra inferior: coluna centralizada */
  .site-footer:not(.dashboard-body .site-footer) .sf-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
    padding: 0 !important;
    border-top: none !important;
  }

  .sf-legal {
    gap: 1rem !important;
  }

  .sf-legal a,
  .sf-copy {
    font-size: 0.78rem !important;
  }
}