/* Ibdaa Academy global mobile responsive layer */
html, body { max-width: 100%; overflow-x: hidden; }
.app-shell, .main-content, .view, .panel, .section-toolbar, .section-intro, .panel-heading { min-width: 0; }
img, svg, canvas, video { max-width: 100%; }
.table-wrap, .monthly-chart-scroll, .student-roadmap-kanban, .crm-kanban, .training-mobile-calendar { scrollbar-width: thin; }
.table-wrap, .monthly-chart-scroll, .student-roadmap-kanban, .crm-kanban { -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
.mobile-nav-backdrop { display: none; }

@media (max-width: 900px) {
  body { min-width: 0; }
  body.mobile-nav-open { overflow: hidden; touch-action: none; }
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    background: rgba(5,24,44,.48);
    backdrop-filter: blur(1px);
    cursor: default;
  }
  .mobile-nav-backdrop:not([hidden]) { display: block; }
  .sidebar {
    width: min(84vw, 310px);
    max-width: 310px;
    height: 100dvh;
    overflow: hidden;
    box-shadow: -18px 0 40px rgba(5, 24, 44, .22);
    z-index: 21;
  }
  #main-nav { min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
  .main-content { width: 100%; max-width: 100%; margin-right: 0; padding: 0 14px 32px; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 18;
    min-height: 66px;
    gap: 8px;
    padding: 7px 0;
    background: rgba(244,247,251,.96);
    backdrop-filter: blur(12px);
  }
  .topbar > div:not(.topbar-actions) { min-width: 0; }
  .topbar h1 { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; }
  .topbar .eyebrow { display: none; }
  .topbar-actions { min-width: 0; gap: 5px; }
  .topbar-actions .current-user, .topbar-actions .data-status { display: none !important; }
  #menu-toggle, #refresh-view, .notification-button { flex: 0 0 40px; width: 40px; height: 40px; }
  #logout-button { min-height: 40px; padding-inline: 10px; }

  .filter-bar {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    overflow: visible;
    gap: 9px;
  }
  .filter-bar label { min-width: 0; width: 100%; white-space: normal; }
  .filter-bar input, .filter-bar select, .filter-bar .excel-filter-select { width: 100%; min-width: 0; }
  #filter-person-wrap, #clear-filters { grid-column: 1 / -1; }

  .section-toolbar, .section-intro, .panel-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .section-toolbar > *, .section-intro > *, .panel-heading > * { max-width: 100%; }
  .section-intro > p { margin: 0; }
  .toolbar-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .toolbar-actions > *, .toolbar-actions input, .toolbar-actions select, .toolbar-actions .button { width: 100%; min-width: 0; }

  .form-grid, .form-grid.compact, .student-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form-actions { flex-wrap: wrap; }
  .form-actions .button { min-width: 130px; }

  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .chart-grid { grid-template-columns: 1fr !important; }
  .chart-panel, .chart-panel.wide { grid-column: auto !important; width: 100%; }
  .financial-grid, .financial-equation { grid-template-columns: 1fr; }

  .action-card-grid { grid-template-columns: 1fr; }
  .action-card { min-width: 0; }
  .action-buttons { width: 100%; }

  .data-table { width: max-content; min-width: 720px; }
  .table-wrap { width: 100%; max-width: calc(100vw - 28px); overflow-x: auto; }
  .table-wrap::after { content: "اسحب الجدول يمينًا ويسارًا لعرض باقي الأعمدة"; display: block; width: max-content; max-width: 100%; padding: 7px 2px 2px; color: var(--muted); font-size: 10px; }

  dialog, .v8-dialog, .student-dialog, .crm-dialog, .school-dialog, .todo-dialog, .session-attendance-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: auto;
    border-radius: 16px;
  }
  dialog > form, .v8-dialog form, .student-dialog-shell, .student-dialog > form { max-height: calc(100dvh - 16px); }

  .notification-panel { position: fixed !important; inset: 66px 10px auto 10px !important; width: auto !important; max-height: calc(100dvh - 78px); overflow: auto; }
  .excel-filter-menu { max-width: calc(100vw - 20px) !important; }

  .crm-kanban { grid-template-columns: repeat(6, minmax(250px, 82vw)); scroll-snap-type: x proximity; }
  .kanban-column { scroll-snap-align: start; }
  .student-roadmap-kanban { grid-template-columns: repeat(4, minmax(250px, 82vw)); scroll-snap-type: x proximity; }
  .roadmap-column { scroll-snap-align: start; }
}

@media (max-width: 640px) {
  body { font-size: 13px; }
  .main-content { padding: 0 9px 26px; }
  .sidebar { width: min(88vw, 300px); padding: 14px 12px; }
  .brand { padding-bottom: 14px; }
  .brand-logo-shell { width: 58px; height: 58px; flex-basis: 58px; }
  .brand-logo { width: 52px; height: 52px; }
  #main-nav { padding-top: 12px; }
  .nav-item, .nav-group-toggle { min-height: 46px; }

  .topbar { min-height: 62px; }
  .topbar h1 { max-width: 42vw; font-size: 17px; }
  #refresh-view { display: none; }
  #logout-button { font-size: 11px; padding-inline: 8px; }

  .panel { padding: 12px; border-radius: 12px; }
  .warning-banner { flex-direction: column; align-items: stretch; padding: 12px; }
  .warning-banner .button { width: 100%; margin: 0; }

  .filter-bar { grid-template-columns: 1fr; margin: 10px 0; padding: 9px; }
  #filter-person-wrap, #clear-filters { grid-column: auto; }
  .toolbar-actions { grid-template-columns: 1fr; }

  input, select, textarea, .button, .icon-button { min-height: 44px; }
  input, select, textarea { width: 100%; min-width: 0; font-size: 16px; }
  textarea { min-height: 88px; }
  .form-grid, .form-grid.compact, .student-form-grid, .sibling-add-form { grid-template-columns: 1fr !important; }
  .span-2, .sibling-add-form button { grid-column: auto !important; }
  .form-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .form-actions .button { width: 100%; }

  .kpi-grid, .mini-kpis, .ledger-summary, .provenance-grid, .crm-summary, .inventory-summary, .todo-summary, .training-summary, .training-detail-grid { grid-template-columns: 1fr !important; }
  .kpi-card { min-height: 96px; }
  .kpi-label { min-height: 0; }
  .kpi-value { font-size: 20px; }

  .panel-heading h2, .section-toolbar h2, .section-intro h2 { font-size: 17px; }
  .section-toolbar, .section-intro, .panel-heading { margin-bottom: 12px; }

  .action-card { padding: 15px; }
  .action-buttons, .student-io-actions { display: grid; grid-template-columns: 1fr; }
  .action-buttons .button, .file-button, .student-io-actions .button { width: 100%; justify-content: center; }
  .import-guide { flex-direction: column; align-items: flex-start; }

  .table-wrap { max-width: calc(100vw - 18px); }
  .data-table { min-width: 680px; font-size: 11px; }
  .data-table th, .data-table td { padding: 8px 7px; }
  #view-journal .data-table { min-width: 1120px; }
  #view-accounts .data-table { min-width: 900px; }
  .students-table { min-width: 1050px; }
  .attendance-table { min-width: 760px; }

  .student-type-picker { grid-template-columns: 1fr; gap: 10px; }
  .student-type-card { padding: 14px; grid-template-columns: 46px 1fr; column-gap: 11px; }
  .student-type-icon { width: 46px; height: 46px; border-radius: 12px; }
  .student-profile-tabs { overflow-x: auto; max-width: 100%; top: 62px; }
  .student-profile-tab { white-space: nowrap; flex: 0 0 auto; }
  .student-dialog-heading { align-items: flex-start; gap: 8px; }
  .student-dialog-heading-actions { width: 100%; display: flex; justify-content: flex-end; gap: 6px; }
  .roadmap-page-heading, .roadmap-ai-box { flex-direction: column; align-items: stretch; }

  .crm-filters, .school-filters, .student-filters, .advanced-student-filters, .inventory-filters, .todo-filters { grid-template-columns: 1fr !important; }
  .crm-kanban { grid-template-columns: repeat(6, minmax(245px, 88vw)); }
  .student-roadmap-kanban { grid-template-columns: repeat(4, minmax(245px, 88vw)); }

  .training-calendar-controls, .training-course-form-grid { grid-template-columns: 1fr !important; }
  .training-month-actions { grid-column: auto !important; display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
  .training-month-actions button:nth-child(2) { grid-column: 1 / -1; }
  .course-day-time-row { grid-template-columns: 1fr 1fr !important; }
  .course-day-time-row > strong { grid-column: 1 / -1; }

  .financial-header { padding: 15px; }
  .financial-grid, .financial-equation { padding: 10px; gap: 10px; }
  .financial-group header, .financial-row, .financial-total { gap: 8px; padding-inline: 11px; }
  .financial-row > span { gap: 6px; }

  .login-screen { padding: 12px; }
  .login-card { padding: 22px 16px; border-radius: 16px; }
  .login-logo { width: 88px; height: 88px; }
}

@media (max-width: 420px) {
  .topbar h1 { max-width: 36vw; font-size: 16px; }
  #logout-button { padding-inline: 6px; }
  .notification-panel { inset-inline: 6px !important; }
  .kpi-grid { grid-template-columns: 1fr !important; }
  .panel { padding: 10px; }
  .action-card { padding: 13px; }
  .student-dialog-shell, .student-dialog > form, .v8-dialog form { padding: 11px !important; }
  .student-dialog-heading { top: -11px !important; padding-top: 11px !important; }
  .siblings-section { margin-inline: -11px !important; padding-inline: 11px !important; }
  .crm-kanban, .student-roadmap-kanban { margin-inline: -2px; }
}

@media (pointer: coarse) {
  button, .button, .nav-item, .nav-group-toggle, input, select, textarea { touch-action: manipulation; }
  .button.compact { min-height: 40px; }
  .data-table button, .row-actions button, .table-actions button { min-height: 38px; }
}