/* School Master — Final mobile dashboard navigation redesign
   Mobile only. Desktop/tablet layout above 1040px remains unchanged. */

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

  /* Mobile uses the full viewport. The existing Blazor boolean is intentionally
     interpreted in reverse here so the current initial `sidebar-open` state means
     "drawer hidden" on small screens; tapping the menu changes it to
     `sidebar-collapsed`, which reveals the slide-out drawer. */
  .sm-main-area,
  .sidebar-open .sm-main-area,
  .sidebar-collapsed .sm-main-area {
    margin-left: 0 !important;
    width: 100%;
    min-width: 0;
  }

  .sm-sidebar,
  .sidebar-open .sm-sidebar {
    width: min(86vw, 360px) !important;
    max-width: 360px;
    transform: translateX(-104%) !important;
    transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease !important;
    box-shadow: none;
    z-index: 1060;
    border-right: 1px solid rgba(255,255,255,.1);
  }

  .sidebar-collapsed .sm-sidebar {
    transform: translateX(0) !important;
    box-shadow: 18px 0 52px rgba(7, 4, 25, .52) !important;
  }

  .sm-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(4, 7, 20, .64);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
  }

  .sm-mobile-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Compact premium mobile header */
  .sm-topbar {
    min-height: 64px !important;
    height: 64px;
    padding: 0 12px !important;
    gap: 8px;
    background: color-mix(in srgb, var(--sm-surface) 96%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: visible;
  }

  .sm-topbar::before {
    content: "";
    order: 2;
    display: block;
    width: 138px;
    height: 50px;
    flex: 0 1 138px;
    background: url('/assets/schoolmaster-logo.png') center/contain no-repeat;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
    pointer-events: none;
  }

  .sm-topbar-left {
    order: 1;
    flex: 0 0 auto !important;
    min-width: 42px !important;
  }

  .sm-topbar-right {
    order: 3;
    flex: 1 1 auto !important;
    justify-content: flex-end;
    gap: 6px !important;
  }

  .sm-global-search,
  .sm-user-chip,
  .sm-sync-chip,
  .sm-year-btn,
  .sm-edition-badge {
    display: none !important;
  }

  .sm-menu-btn {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 12px !important;
    border-color: color-mix(in srgb, #7b35e8 46%, var(--sm-border)) !important;
    background: linear-gradient(145deg,
      color-mix(in srgb, #6d31d8 12%, var(--sm-surface)),
      var(--sm-surface)) !important;
  }

  .sidebar-collapsed .sm-menu-btn {
    box-shadow: 0 0 0 3px rgba(122,53,232,.12), 0 7px 18px rgba(72,32,156,.16);
  }

  .sm-topbar-right .sm-icon-btn {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 11px !important;
  }

  /* Drawer proportions match approved mobile concept. */
  .sm-brand-wrap {
    min-height: 126px !important;
    padding: 10px 12px 6px !important;
  }

  .sm-brand-logo {
    width: 185px !important;
    height: 112px !important;
  }

  .sm-menu-label {
    padding: 13px 18px 7px !important;
    font-size: 10px !important;
    letter-spacing: .14em;
  }

  .sm-nav {
    padding-inline: 12px !important;
    gap: 5px !important;
  }

  .sm-nav-item {
    min-height: 46px !important;
    padding: 8px 11px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  .sm-nav-icon {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    border-radius: 9px !important;
  }

  .sm-sidebar-bottom {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .sm-edition-card {
    margin: 10px 14px 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  /* Full-width dashboard/content area */
  .sm-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    padding: 14px !important;
  }

  .sm-page-head {
    gap: 10px !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap;
  }

  .sm-page-head > div:first-child,
  .sm-panel,
  .sm-panel-head > div,
  .sm-work-grid > *,
  .sm-dashboard-grid > * {
    min-width: 0;
  }

  .sm-page-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .sm-page-actions .btn {
    width: 100%;
    min-width: 0;
  }

  /* Two-up mobile summary cards, matching the approved mockup. */
  .sm-kpi-grid,
  .sm-kpi-grid-4 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 9px !important;
  }

  .sm-kpi-card {
    min-height: 112px !important;
    padding: 13px 9px 10px !important;
    border-radius: 14px !important;
  }

  .sm-kpi-icon {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    font-size: 19px !important;
  }

  .sm-kpi-info {
    padding-left: 7px !important;
    min-width: 0;
  }

  .sm-kpi-label {
    font-size: 9px !important;
    min-height: 20px !important;
  }

  .sm-kpi-info strong,
  .sm-kpi-money .sm-kpi-info strong {
    font-size: clamp(18px, 5.2vw, 23px) !important;
    overflow-wrap: anywhere;
  }

  .sm-dashboard-grid,
  .sm-work-grid,
  .sm-foundation-grid {
    grid-template-columns: 1fr !important;
  }

  .sm-panel {
    border-radius: 15px !important;
    max-width: 100%;
  }

  /* Generic ERP forms and toolbars: no clipped controls on phones/tablets. */
  .sm-form-grid,
  .sm-form-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sm-form-grid > *,
  .sm-form-grid-4 > *,
  .sm-toolbar > *,
  .sm-toolbar-wrap > * {
    min-width: 0;
  }

  .sm-toolbar,
  .sm-toolbar-wrap,
  .sm-action-row {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .sm-toolbar label,
  .sm-toolbar-wrap label {
    flex: 1 1 190px;
    min-width: min(190px, 100%);
  }

  .sm-toolbar .form-control,
  .sm-toolbar .form-select,
  .sm-toolbar-wrap .form-control,
  .sm-toolbar-wrap .form-select,
  .sm-form-grid .form-control,
  .sm-form-grid .form-select,
  .sm-form-grid textarea,
  .sm-form-grid-4 .form-control,
  .sm-form-grid-4 .form-select,
  .sm-form-grid-4 textarea {
    width: 100%;
    max-width: 100%;
  }

  /* Wide ERP tables scroll inside their own panel instead of widening the page. */
  .sm-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
  }

  .sm-table-wrap > .sm-table {
    min-width: 680px;
  }

  .sm-table-wrap > .sm-permission-table,
  .sm-table-wrap > .sm-plan-table,
  .sm-table-wrap > .sm-marks-table {
    min-width: 980px;
  }

  .sm-table th,
  .sm-table td {
    white-space: nowrap;
  }

  .sm-table td input,
  .sm-table td select {
    min-width: 92px;
  }

  .sm-import-summary,
  .sm-import-summary-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
  }

  .sm-current-plan {
    max-width: 100%;
  }

  .sm-upload-box,
  .sm-upload-box input[type="file"] {
    max-width: 100%;
    min-width: 0;
  }

  .sm-upload-box input[type="file"] {
    width: 100%;
  }

  .sm-selected-student,
  .sm-selected-box,
  .sm-rule-list > div,
  .sm-summary-line {
    min-width: 0;
  }

  .sm-footer {
    padding: 10px 14px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 720px) {
  .sm-form-grid,
  .sm-form-grid-4 {
    grid-template-columns: 1fr !important;
  }

  .sm-form-grid .sm-span-2,
  .sm-form-grid .sm-span-4,
  .sm-form-grid-4 .sm-span-2,
  .sm-form-grid-4 .sm-span-4 {
    grid-column: 1 !important;
  }

  .sm-panel-head {
    align-items: stretch !important;
    flex-direction: column;
    gap: 10px !important;
  }

  .sm-panel-head > .btn,
  .sm-panel-head > .form-control,
  .sm-panel-head > .form-select,
  .sm-panel-head > .sm-action-row,
  .sm-panel-head > .sm-page-actions {
    width: 100%;
    max-width: 100%;
  }

  .sm-toolbar,
  .sm-toolbar-wrap {
    align-items: stretch !important;
    flex-direction: column;
  }

  .sm-toolbar label,
  .sm-toolbar-wrap label,
  .sm-toolbar .btn,
  .sm-toolbar-wrap .btn,
  .sm-action-row .btn {
    width: 100% !important;
    flex: 0 0 auto;
  }

  .sm-action-row {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .sm-current-plan {
    width: 100%;
  }

  .sm-table-wrap {
    margin-inline: 0;
  }

  .sm-form-grid input,
  .sm-form-grid select,
  .sm-form-grid textarea,
  .sm-form-grid-4 input,
  .sm-form-grid-4 select,
  .sm-form-grid-4 textarea,
  .sm-toolbar input,
  .sm-toolbar select,
  .sm-toolbar textarea,
  .sm-toolbar-wrap input,
  .sm-toolbar-wrap select,
  .sm-toolbar-wrap textarea {
    min-height: 44px;
    font-size: 16px !important;
  }
}

@media (max-width: 560px) {
  .sm-topbar { padding-inline: 9px !important; }
  .sm-topbar::before {
    width: 112px;
    flex-basis: 112px;
    height: 44px;
  }
  .sm-topbar-right { gap: 4px !important; }
  .sm-topbar-right .sm-icon-btn:nth-of-type(2) { display: none !important; }
  .sm-content { padding: 11px !important; }
  .sm-page-head h1 { font-size: 24px !important; }
  .sm-page-actions { grid-template-columns: 1fr; }
  .sm-kpi-grid,
  .sm-kpi-grid-4 {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .sm-kpi-card { min-height: 106px !important; }

  .sm-table-wrap > .sm-table { min-width: 620px; }
  .sm-table-wrap > .sm-permission-table,
  .sm-table-wrap > .sm-plan-table,
  .sm-table-wrap > .sm-marks-table { min-width: 920px; }

  .sm-import-summary,
  .sm-import-summary-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  .sm-topbar::before { width: 94px; flex-basis: 94px; }
  .sm-topbar-right .sm-icon-btn { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
  .sm-kpi-grid,
  .sm-kpi-grid-4,
  .sm-import-summary,
  .sm-import-summary-5 { grid-template-columns: 1fr !important; }
}