/* HIRECRM Full System Visual Audit Fixes
   Final UI-only layer after complete template/page inventory audit.
   Purpose:
   - harden every page family;
   - reduce old hero/debug/demo visual risk;
   - keep public and internal chrome separated;
   - stabilize mobile/tablet overflow;
   - unify final production SaaS feel.
*/

:root {
  --fsva-bg: #f8fafc;
  --fsva-surface: #ffffff;
  --fsva-soft: #fbfcfe;
  --fsva-border: #e7ecf3;
  --fsva-border-soft: #edf2f7;
  --fsva-text: #0f172a;
  --fsva-muted: #64748b;
  --fsva-accent: #2563eb;
  --fsva-radius: 12px;
  --fsva-shadow: 0 12px 32px rgba(15, 23, 42, .075);
}

/* Public/internal separation. */
[data-public-page] .app-shell,
[data-public-page] .topbar,
[data-public-page] .sidebar,
[data-public-page] .global-search,
[data-public-page] .command-palette,
[data-public-page] .global-ai-widget,
[data-public-page] .worker-ai-chat,
[data-public-page] .mobile-bottom-nav,
[data-public-page] .scroll-top-fab,
[data-public-page] [data-global-search],
[data-public-page] [data-command-palette],
[data-public-page] [data-global-ai-widget],
[data-public-page] [data-install-prompt],
[data-public-page] [data-pwa-install] {
  display: none !important;
}

/* Old debug/demo visual elements must never leak into production public UI. */
[data-public-page] [class*="debug"],
[data-public-page] [class*="demo"],
[data-public-page] [data-system-diagnostics],
[data-public-page] [data-demo-cta],
[data-public-page] .presentation-demo-ready-strip,
[data-public-page] .debug-toolbar,
[data-public-page] .dev-banner {
  display: none !important;
}

/* Every known page family shell: transparent page, white work blocks. */
.dashboard-page,
.ai-assistant-page,
.daily-reports-compact,
.calendar-page,
.task-list-enterprise-page,
.residence-page,
.factory-page,
.factories-page,
.user-create-page,
.users-page,
.workers-page,
.recruitment-page,
.finance-page,
.invoice-page,
.invoices-page,
.sales-page,
.payroll-page,
.attendance-page,
.campaign-page,
.delegation-page,
.engagement-page,
.transport-page,
.statistics-page,
.integrations-page,
.portal-content-page,
.workflow-center-page,
.worker-surveys-page,
.advances-page,
.operations-page {
  background: transparent !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

/* Known intro/hero/banner patterns: compact enterprise header. */
[class*="hero"],
[class*="banner"],
[class*="gradient"],
[class*="firstscreen"],
[class*="subsection"],
.surface-banner,
.detail-section__intro,
.operations-firstscreen-intro,
.operations-subsection-intro {
  box-shadow: none !important;
}

.page-shell [class*="hero"],
.enterprise-page [class*="hero"],
.workspace-shell [class*="hero"],
.page-shell [class*="banner"],
.enterprise-page [class*="banner"],
.workspace-shell [class*="banner"],
.page-shell [class*="gradient"],
.enterprise-page [class*="gradient"],
.workspace-shell [class*="gradient"],
.page-shell [class*="firstscreen"],
.enterprise-page [class*="firstscreen"],
.workspace-shell [class*="firstscreen"],
.page-shell [class*="subsection"],
.enterprise-page [class*="subsection"],
.workspace-shell [class*="subsection"],
.surface-banner,
.detail-section__intro {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}

/* Titles from every page family. */
.page-shell h1,
.enterprise-page h1,
.workspace-shell h1,
.page-intro__title,
.page-title,
[class*="hero"] h1,
[class*="banner"] h1,
[class*="firstscreen"] h1,
[class*="subsection"] h1,
[class$="__title"] {
  overflow: visible !important;
  line-height: 1.2 !important;
}

/* Avoid globally shrinking every __title too much inside cards: keep readable. */
.card [class$="__title"],
.panel-card [class$="__title"],
.section-card [class$="__title"],
.table-card [class$="__title"] {
  font-size: .9375rem !important;
  line-height: 1.25 !important;
}

/* Functional surfaces across modules. */
[class$="-card"],
[class*="__card"],
.panel,
.panel-card,
.section-card,
.content-card,
.table-card,
.registry-card,
.queue-card,
.detail-card,
.form-card,
.filter-panel,
.filter-card {
  box-shadow: none !important;
}

/* Only actual interactive cards get soft elevation. */
a[class$="-card"]:hover,
[class$="-card"][data-clickable]:hover,
.card[data-clickable]:hover,
.task-card:hover,
.kanban-card:hover {
  box-shadow: var(--fsva-shadow) !important;
  border-color: #bfdbfe !important;
}

/* Gray/muted surfaces should be controlled. */
.page-shell .surface-muted,
.enterprise-page .surface-muted,
.workspace-shell .surface-muted,
.page-shell .muted-surface,
.enterprise-page .muted-surface,
.workspace-shell .muted-surface,
.page-shell .soft-panel,
.enterprise-page .soft-panel,
.workspace-shell .soft-panel {
  background: var(--fsva-surface) !important;
  border: 1px solid var(--fsva-border) !important;
}

/* Tables and charts cannot break mobile width. */
.table-card,
.table-container,
.table-responsive,
.platform-table-wrapper,
.registry-table-wrapper,
.chart-card,
.chart-container,
.analytics-card,
.statistics-chart-canvas,
.owner-chart-shell {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Long labels/names in every module. */
td,
th,
[class*="__title"],
[class*="__name"],
[class*="__label"],
[class*="__value"],
.card-title,
.page-title,
.page-intro__title {
  overflow-wrap: anywhere;
}

/* Empty states: compact production state. */
.empty-state,
.empty-card,
.no-data,
[data-empty-state],
[class*="empty-state"] {
  min-height: 0 !important;
  max-height: 72px !important;
  padding: 10px 12px !important;
  background: var(--fsva-surface) !important;
  border: 1px dashed var(--fsva-border) !important;
  box-shadow: none !important;
}

/* Dropzones: useful but not massive. */
[class*="dropzone"],
.ai-documents-dropzone,
.document-dropzone {
  max-height: 140px !important;
  min-height: 88px !important;
}

/* Responsive hardening. */
@media (max-width: 1024px) {
  .page-container,
  [data-role-page-container="1"] {
    padding-inline: 12px !important;
  }

  .page-shell,
  .enterprise-page,
  .workspace-shell {
    gap: 10px !important;
  }

  .grid,
  [class*="-grid"] {
    min-width: 0 !important;
  }

  .grid > *,
  [class*="-grid"] > * {
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  .page-container,
  [data-role-page-container="1"] {
    padding-inline: 10px !important;
  }

  .page-shell h1,
  .enterprise-page h1,
  .workspace-shell h1,
  .page-intro__title,
  .page-title {
    font-size: 1.25rem !important;
  }

  .action-bar,
  .quick-actions,
  .toolbar,
  .section-tabs,
  .tab-list,
  .nav-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  .page-container,
  [data-role-page-container="1"] {
    padding-inline: 8px !important;
  }

  .modal,
  .dialog,
  .drawer {
    max-width: calc(100vw - 16px) !important;
  }

  .empty-state,
  .empty-card,
  .no-data,
  [data-empty-state] {
    max-height: 56px !important;
    padding: 8px !important;
  }
}

/* Keep protected chrome stable. */
.sidebar,
.sidebar *,
.topbar,
.topbar *,
.global-search,
.global-search *,
.global-ai-widget,
.global-ai-widget *,
.worker-ai-chat,
.worker-ai-chat *,
.mobile-bottom-nav,
.mobile-bottom-nav * {
  text-rendering: auto;
}