/* Responsive rules extracted from App.css */
/* Load this file after App.css and before module CSS files if needed. */

@media (min-width: 768px) {
  .courses-grid-modern {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .t-grid,
  .e-grid,
  #pg-user-dashboard .stats-grid,
  .us-grid,
  .us-mini-grid,
  .up-details-grid,
  .base-modal-grid-2,
  .base-modal-grid-3,
  .ud-info-grid,
  #pg-reports .rp-compare-grid,
  #pg-reports .rp-summary-grid,
  #pg-reports .rp-user-grid,
  #pg-reports .rp-user-meta,
  #pg-settings .s-form-grid-2,
  #pg-settings .s-identity-inline,
  #pg-settings .s-media-grid,
  #pg-settings .s-smtp-grid,
  #pg-settings .s-transfer-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .base-modal-grid-auto {
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .et-head {
    align-items: center;
  }

  .r-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #pg-settings .s-identity-inline {
    align-items: stretch;
  }

  .courses-grid-modern[data-dynamic-cols],
  .ue-grid[data-dynamic-cols] {
    grid-template-columns: repeat(var(--dynamic-grid-cols, 2), minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .d-head,
  .base-page-head,
  .admin-banner-row,
  .d-license-info,
  .meta-row,
  .ud-summary {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .d-head,
  .base-page-head {
    padding: 1.75rem;
  }

  .admin-banner {
    padding: 1.75rem;
  }

  .admin-banner-actions,
  .t-head-actions,
  .base-page-actions {
    justify-content: flex-end;
  }

  .d-grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pg-player.player-wrapper {
    align-items: stretch;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    height: calc(100vh - 2.5rem);
    height: calc(100dvh - 2.5rem);
    min-height: calc(100vh - 2.5rem);
    min-height: calc(100dvh - 2.5rem);
    overflow: hidden;
  }

  #pg-player .playlist-sidebar {
    height: 100%;
    max-height: none;
    min-height: 0;
    order: 1;
    overflow: hidden;
    position: relative;
    top: 0;
  }

  #pg-player .video-stage {
    height: 100%;
    min-height: 0;
    order: 2;
  }
}

@media (min-width: 1280px) {
  .d-grid-cards,
  .t-grid,
  .e-grid,
  .us-grid,
  #pg-reports .rp-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .d-tables-grid,
  .ue-grid,
  .us-panels,
  .up-grid,
  #pg-reports .rp-grid,
  #pg-reports .rp-user-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pg-user-dashboard .stats-grid,
  .base-modal-grid-3,
  #pg-settings .s-form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .courses-grid-modern[data-dynamic-cols],
  .ue-grid[data-dynamic-cols] {
    grid-template-columns: repeat(var(--dynamic-grid-cols, 2), minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .app-update-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .upd-actions {
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }

  body.install-pro .wrap {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  body.install-pro .left {
    padding: 26px 24px;
  }

  body.install-pro .right {
    padding: 24px 22px;
  }
}

@media (max-width: 640px) {
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .video-stage,
  .playlist-sidebar {
    border-radius: 20px;
    padding: 0.85rem;
  }

  #pg-player .stage-footer {
    padding: 0.72rem;
  }

  .stage-controls {
    justify-content: flex-start;
  }

  #pg-player .stage-controls .base-badge {
    width: auto;
  }

  .stage-controls .base-badge {
    width: 100%;
  }

  .btn-next-lesson,
  .et-btn,
  .r-actions .base-button {
    width: 100%;
  }

  .r-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  #pg-player .stage-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #pg-player .stage-controls .base-badge {
    justify-content: center;
    width: 100%;
  }

  .course-card-modern .card-thumb {
    height: 180px;
  }

  .panel-delete-body {
    padding: 1.15rem 1rem 1rem;
  }

  .panel-delete-illustration {
    height: 84px;
    width: 84px;
  }

  .panel-delete-icon {
    height: 64px;
    width: 64px;
  }

  .panel-delete-actions {
    flex-direction: column-reverse;
    padding: 0.9rem 1rem 1rem;
  }

  .panel-delete-actions .base-button {
    width: 100%;
  }

  .app-update-banner {
    border-radius: 18px;
    padding: 0.85rem 0.8rem;
  }

  .upd-title {
    font-size: 16px;
  }

  .upd-desc {
    font-size: 13px;
  }

  .upd-actions {
    gap: 0.5rem;
  }

  .upd-actions .base-button {
    min-width: 0;
    width: 100%;
  }

  body.install-pro {
    padding: 14px;
  }

  body.install-pro .wrap {
    border-radius: 18px;
  }

  body.install-pro .g2 {
    gap: 0;
    grid-template-columns: 1fr;
  }

  body.install-pro .installed-only {
    border-radius: 18px;
    padding: 24px 18px;
  }
}

@media (min-width: 1200px) {
  #pg-player.player-wrapper {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    height: calc(100vh - 2.5rem);
    height: calc(100dvh - 2.5rem);
    min-height: calc(100vh - 2.5rem);
    min-height: calc(100dvh - 2.5rem);
  }

  #pg-player .playlist-sidebar {
    height: 100%;
    max-height: none;
    min-height: 0;
    order: 1;
    overflow: hidden;
    position: relative;
    top: 0;
  }

  #pg-player .video-stage {
    order: 2;
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 900px) {
  #pg-player .stage-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile Table Responsiveness */
@media (max-width: 1023px) {
  #pg-users .u-table-card,
  #pg-dashboard .d-panel,
  .ud-content {
    overflow-x: auto;
  }

  #pg-users .u-table-card > table,
  #pg-dashboard .d-panel > table,
  .ud-content .base-table-flush {
    min-width: 640px;
  }
}

@media (max-width: 767px) {
  #pg-users .u-table-card > table,
  #pg-dashboard .d-panel > table,
  .ud-content .base-table-flush {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 0;
    width: 100%;
  }

  #pg-users .u-table-card thead,
  #pg-dashboard .d-panel thead,
  .ud-content .base-table-flush thead {
    display: none;
  }

  #pg-users .u-table-card tbody,
  #pg-dashboard .d-panel tbody,
  .ud-content .base-table-flush tbody {
    display: block;
    width: 100%;
  }

  #pg-users .u-table-card tbody tr,
  #pg-dashboard .d-panel tbody tr,
  .ud-content .base-table-flush tbody tr {
    background: color-mix(in srgb, var(--surface-soft) 96%, #fff 4%);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: block;
    margin: 0 0 0.78rem;
    overflow: hidden;
  }

  #pg-users .u-table-card tbody tr:last-child,
  #pg-dashboard .d-panel tbody tr:last-child,
  .ud-content .base-table-flush tbody tr:last-child {
    margin-bottom: 0;
  }

  #pg-users .u-table-card tbody td,
  #pg-dashboard .d-panel tbody td,
  .ud-content .base-table-flush tbody td {
    align-items: flex-start;
    border: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.72rem 0.78rem;
    text-align: right;
    width: 100%;
    word-break: break-word;
  }

  #pg-users .u-table-card tbody td::before,
  #pg-dashboard .d-panel tbody td::before,
  .ud-content .base-table-flush tbody td::before {
    color: var(--text-muted);
    content: attr(data-label);
    flex: 0 0 42%;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
  }

  #pg-users .u-table-card tbody td:last-child,
  #pg-dashboard .d-panel tbody td:last-child,
  .ud-content .base-table-flush tbody td:last-child {
    border-bottom: 0;
  }

  #pg-users .u-table-card tbody td.base-empty-cell,
  #pg-dashboard .d-panel tbody td.base-empty-cell,
  #pg-dashboard .d-panel tbody td.base-empty-cell-padded,
  .ud-content .base-table-flush tbody td.base-empty-cell {
    display: block;
    text-align: center;
  }

  #pg-users .u-table-card tbody td.base-empty-cell::before,
  #pg-dashboard .d-panel tbody td.base-empty-cell::before,
  #pg-dashboard .d-panel tbody td.base-empty-cell-padded::before,
  .ud-content .base-table-flush tbody td.base-empty-cell::before {
    content: none;
  }

  #pg-users #userTable tbody td[data-label="Personel"],
  #pg-dashboard .d-panel tbody td[data-label="Kullanıcı"] {
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
  }

  #pg-users #userTable tbody td[data-label="Personel"]::before,
  #pg-dashboard .d-panel tbody td[data-label="Kullanıcı"]::before {
    flex: 0 0 auto;
    margin-bottom: 0.22rem;
  }

  #pg-users #userTable .u-actions,
  .ud-content .base-table-flush .ud-action-btn {
    margin-left: auto;
  }
}

/* Mobile Player Scroll */
@media (max-width: 1023px) {
  body.player-fullscreen-page {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.player-fullscreen-page .content.player-fullscreen-content {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.player-fullscreen-page #app {
    height: auto;
    min-height: calc(100dvh - 2.5rem);
    overflow: visible;
  }

  #pg-player.player-wrapper {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #pg-player .video-stage,
  #pg-player .playlist-sidebar {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #pg-player .video-stage {
    order: 1;
  }

  #pg-player .playlist-sidebar {
    order: 2;
  }

  #pg-player .lesson-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  #pg-player .video-container {
    margin-block: 0;
  }
}