/* Shared mobile readiness layer for ERP module pages. */

@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 0;
  }

  #app,
  main,
  .dashboard-content,
  .command-center,
  .page,
  .app-grid,
  .main-content,
  .content,
  .workspace,
  .admin-shell,
  .module-shell,
  .report-shell,
  .fees-shell,
  .cw-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .layout,
  .app-shell,
  .portal-shell,
  .student-shell,
  .parent-shell,
  .login-shell,
  .admin-layout,
  .content-layout,
  .page-layout,
  .split-layout,
  .main-grid,
  .dashboard-grid {
    max-width: 100%;
    min-width: 0;
  }

  .sidebar,
  .side-nav,
  .left-rail,
  .navigation-rail,
  .menu-panel {
    max-width: 100%;
  }

  .dashboard-content,
  .main-content,
  .content,
  .page {
    padding: 1rem;
  }

  .glass-panel,
  .panel,
  .card,
  .data-card,
  .chart-card,
  .insight-card,
  .form-card,
  .report-card,
  .summary-card,
  .metric-card,
  .kpi-card,
  .fin-card,
  .admin-card,
  .faculty-card {
    max-width: 100%;
    min-width: 0;
    border-radius: 14px;
  }

  .hero,
  .hero-section,
  .hero-content,
  .login-card,
  .auth-card,
  .modal,
  .modal-card,
  .dialog,
  .dialog-card {
    max-width: 100%;
    min-width: 0;
  }

  .grid,
  .form-grid,
  .filter-grid,
  .summary-grid,
  .stats-grid,
  .metric-grid,
  .kpi-grid,
  .cards-grid,
  .charts-grid,
  .report-grid,
  .finance-cards,
  .grid-2-col,
  .grid-3-col,
  .two-column-layout,
  .three-column-layout,
  .admin-grid,
  .faculty-grid,
  .classwise-layout,
  .payment-layout,
  .fee-layout,
  .intelligence-grid,
  .insight-grid,
  .hero-panel {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns"],
  [style*="display: grid"] {
    max-width: 100%;
  }

  .toolbar,
  .actions,
  .action-row,
  .action-buttons,
  .filter-actions,
  .export-actions,
  .erp-export-actions,
  .button-row,
  .btn-row,
  .topbar,
  .page-actions,
  .header-actions,
  .r-actions,
  .marks-actions {
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
  }

  .toolbar > *,
  .actions > *,
  .action-buttons > *,
  .filter-actions > *,
  .export-actions > *,
  .erp-export-actions > *,
  .page-actions > *,
  .header-actions > * {
    min-width: 0;
  }

  button,
  .btn,
  .btn-primary,
  .btn-outline,
  .export-btn,
  .erp-export-btn,
  .action-btn,
  .nav-link,
  .erp-nav-chip {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
  }

  input,
  select,
  textarea,
  .input-element,
  .form-control,
  .field-control {
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    box-sizing: border-box;
  }

  img,
  video,
  svg,
  iframe {
    max-width: 100%;
  }

  .table-responsive,
  .table-wrap,
  .grid-wrap,
  .ag-grid-wrap,
  .report-table-wrap,
  .marks-table-wrap,
  .history-grid-wrap,
  .fee-grid-wrap,
  .payment-grid-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .neo-table,
  .data-table,
  .report-table,
  .marks-table,
  .fee-table,
  .ledger-table {
    min-width: 680px;
  }

  .ag-theme-alpine,
  .ag-theme-alpine-dark,
  .ag-theme-quartz,
  [class*="ag-theme"] {
    width: 100%;
    min-height: 460px;
    overflow: auto;
  }

  .ag-root-wrapper {
    min-width: 780px;
  }

  canvas {
    max-width: 100%;
  }

  .chart-card canvas,
  .chart-wrap,
  .chart-container,
  .graph-container {
    max-height: 280px;
  }

  .modal,
  .dialog,
  .drawer,
  .offcanvas {
    max-height: calc(100dvh - 1rem);
    overflow: auto;
  }

  .tabs-header,
  .tabs,
  .tab-bar,
  .neo-tabs,
  .sub-tabs,
  .nav-tabs,
  .segment-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .tab-link,
  .tab-item,
  .sub-tab-link,
  .nav-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .dashboard-content,
  .main-content,
  .content,
  .page {
    padding: 0.75rem;
  }

  body {
    font-size: 0.95rem;
  }

  .erp-page-purpose,
  .cw-school-strip,
  .erp-page-topbar {
    width: min(100% - 20px, 1600px);
  }

  .erp-page-purpose h1,
  .page-title,
  .hero-title,
  h1 {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .section-title,
  h2,
  h3 {
    line-height: 1.25;
  }

  .glass-panel,
  .panel,
  .card,
  .data-card,
  .chart-card,
  .insight-card,
  .form-card,
  .report-card {
    padding: 1rem;
  }

  .login-shell,
  .auth-shell,
  .portal-shell,
  .split-layout,
  .dashboard-grid,
  .main-grid,
  .content-layout,
  .page-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .sidebar,
  .side-nav,
  .left-rail,
  .navigation-rail {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  .toolbar > button,
  .toolbar > .btn,
  .actions > button,
  .actions > .btn,
  .action-buttons > button,
  .action-buttons > .btn,
  .filter-actions > button,
  .filter-actions > .btn,
  .export-actions > button,
  .export-actions > .btn,
  .erp-export-actions > button,
  .erp-export-actions > .btn,
  .page-actions > button,
  .page-actions > .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .filter-row,
  .control-row,
  .search-row,
  .date-row,
  .inline-field-pair {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  .stat-banner,
  .kpi-grid,
  .summary-grid,
  .metric-grid {
    grid-template-columns: 1fr !important;
  }

  table,
  .neo-table,
  .data-table,
  .report-table,
  .marks-table,
  .fee-table,
  .ledger-table {
    min-width: 620px;
    font-size: 0.84rem;
  }

  th,
  td {
    white-space: nowrap;
  }

  .ag-root-wrapper {
    min-width: 720px;
  }

  .chart-card,
  .data-card {
    min-height: 0;
  }

  .chart-card canvas {
    height: 240px !important;
  }
}