/* V2 medium-screen and phone layouts. */

/* ── Medium screens ── */

@media (max-width: 1100px) {
  :root[data-ui="v2"] .app-bar {
    flex-direction: row;
  }

  :root[data-ui="v2"] .app-actions {
    width: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 960px) {
  :root[data-ui="v2"] .view[data-view="dashboard"].is-active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stats"
      "today"
      "subjects"
      "upcoming";
    grid-template-rows: auto;
  }

  :root[data-ui="v2"] .v2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-ui="v2"] .v2-stat:nth-child(3) {
    border-left: none;
  }

  :root[data-ui="v2"] .v2-stat:nth-child(n + 3) {
    border-top: 1px solid var(--card-border);
  }
}

/* ── Phones ── */

@media (max-width: 700px) {
  :root[data-ui="v2"] .app-bar {
    padding: 0 16px;
  }

  :root[data-ui="v2"] .brand-sub {
    display: none;
  }

  /* Header controls: 32px squares beside the 32px avatar. */
  :root[data-ui="v2"] .app-actions {
    gap: 6px;
  }

  /* Icon-only Share and Settings. */
  :root[data-ui="v2"] #export-open,
  :root[data-ui="v2"] #settings-open {
    width: 32px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  :root[data-ui="v2"] #export-open .button-icon,
  :root[data-ui="v2"] #settings-open .button-icon {
    font-size: 15px;
  }

  :root[data-ui="v2"] .main {
    padding: 20px 16px 64px;
  }

  :root[data-ui="v2"] .page-header {
    flex-direction: row;
    align-items: center;
  }

  :root[data-ui="v2"] .page-title {
    font-size: 22px;
  }

  :root[data-ui="v2"] .topbar-meta {
    display: none;
  }

  :root[data-ui="v2"] .v2-stat {
    padding: 14px 16px;
  }

  :root[data-ui="v2"] .v2-stat-value {
    font-size: 24px;
  }

  :root[data-ui="v2"] .v2-stat--text .v2-stat-value {
    font-size: 15px;
    line-height: 30px;
  }

  :root[data-ui="v2"] .timetable-dashboard-list {
    grid-template-columns: repeat(var(--today-lesson-columns, 1), minmax(150px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }

  :root[data-ui="v2"] .v2-subject-row {
    grid-template-columns: 36px minmax(0, 1fr) auto 40px;
    gap: 12px;
    padding: 12px 14px;
  }

  :root[data-ui="v2"] .v2-subject-progress,
  :root[data-ui="v2"] .v2-subject-chevron {
    display: none;
  }

  :root[data-ui="v2"] .subjects-toolbar #subjects-order-open {
    width: 30px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  :root[data-ui="v2"] .subjects-toolbar #subjects-order-open .button-icon {
    font-size: 15px;
  }

  /* Popups: tighter padding everywhere (the header and footer follow --modal-padding). */
  :root[data-ui="v2"] .modal-panel {
    --modal-padding: 16px;
    --panel-padding: 14px;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  /* Every popup except the small dialogs becomes a full-screen sheet. */
  :root[data-ui="v2"] .modal-panel:not(.modal-panel--small) {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  :root[data-ui="v2"] .modal-panel:not(.modal-panel--small) > .modal-header {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }

  :root[data-ui="v2"] .modal-header {
    padding: 14px var(--modal-padding) 12px;
  }

  :root[data-ui="v2"] .modal-header .section-title {
    font-size: 17px;
  }

  :root[data-ui="v2"] .modal-meta {
    font-size: 13px;
  }

  :root[data-ui="v2"] .modal-body {
    margin-top: 16px;
  }

  /* Footer: buttons share the row; a message gets its own line above them. */
  :root[data-ui="v2"] .modal-body > .form-actions {
    padding-top: 12px;
  }

  :root[data-ui="v2"] .modal-body > .form-actions > :is(.primary-button, .ghost-button) {
    flex: 1 1 0;
    min-width: 0;
  }

  :root[data-ui="v2"] .modal-body > .form-actions > .form-message:not(:empty) {
    flex-basis: 100%;
    margin-right: 0;
  }

  :root[data-ui="v2"] .modal-chart {
    height: 200px;
    padding: 8px;
  }

  :root[data-ui="v2"] .history-item {
    flex-wrap: wrap;
  }

  :root[data-ui="v2"] .history-right {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    text-align: left;
  }

  :root[data-ui="v2"] .what-if-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) var(--control-height);
  }

  :root[data-ui="v2"] .what-if-row .what-if-name {
    grid-column: 1 / -1;
  }

  :root[data-ui="v2"] .what-if-hint {
    display: none;
  }

  :root[data-ui="v2"] #edit-subject-modal .subject-color-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  :root[data-ui="v2"] .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-ui="v2"] .export-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  :root[data-ui="v2"] .modal-body .upcoming-item {
    flex-wrap: wrap;
  }

  /* Menus inside a sheet stay on screen. */
  :root[data-ui="v2"] .more-menu-list {
    min-width: min(240px, calc(100vw - 32px));
  }
}

/* ── Small phones: text-only tabs so the four core tabs fit without scrolling. ── */

@media (max-width: 480px) {
  :root[data-ui="v2"] .app-nav {
    margin: 0 -8px;
  }

  :root[data-ui="v2"] .nav-item {
    --nav-pad: 8px;
    gap: 0;
  }

  :root[data-ui="v2"] .nav-item .button-icon {
    display: none;
  }
}