/**
 * Admin Panel - Responsive (Mobile First, Modern Dark)
 * 1200px, 992px, 768px, 576px, 380px kırılımlar + safe-area
 */

/* 992px altı - Sidebar collapse, grid düşer */
@media (max-width: 992px) {
  html {
    overflow-x: hidden;
    max-width: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .header {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: var(--space-sm);
    column-gap: var(--space-sm);
    row-gap: var(--space-sm);
    padding: max(var(--space-sm), var(--safe-area-top)) var(--space-md) max(var(--space-sm), var(--safe-area-bottom));
    padding-left: max(var(--space-md), var(--safe-area-left));
    padding-right: max(var(--space-md), var(--safe-area-right));
    flex-wrap: nowrap;
    align-items: center;
  }

  .footer {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    transform: translateX(-100%);
    transition: transform var(--transition);
    z-index: 300;
    padding-left: max(0px, var(--safe-area-left));
    padding-right: max(0px, var(--safe-area-right));
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
  }

  .sidebar--open {
    transform: translateX(0);
  }

  .sidebar--collapsed {
    transform: translateX(-100%);
  }

  .layout--sidebar-collapsed .sidebar {
    width: 100%;
    max-width: 100%;
  }

  .sidebar__close {
    display: inline-flex;
  }

  .main {
    padding: var(--space-md);
    padding-left: max(var(--space-md), var(--safe-area-left));
    padding-right: max(var(--space-md), var(--safe-area-right));
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    scrollbar-gutter: auto;
  }

  /* Offcanvas (drawer): mobilde tam ekran genişlik + yükseklik */
  .offcanvas {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
  }

  .offcanvas--right {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
  }

  .offcanvas--left {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
  }

  .offcanvas__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .offcanvas__header {
    flex-shrink: 0;
  }

  .grid {
    min-width: 0;
    max-width: 100%;
  }

  .container {
    max-width: 100%;
    min-width: 0;
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .header__left {
    gap: var(--space-sm);
    min-width: 0;
  }

  .header__right {
    gap: var(--space-xs);
    flex-shrink: 0;
  }

  .header__breadcrumb {
    font-size: 0.8125rem;
    min-width: 0;
    flex: 1;
  }

  .header__breadcrumb ul {
    min-width: 0;
  }

  .header__breadcrumb a {
    padding: var(--space-xs) var(--space-sm);
  }

  .header__breadcrumb .header__breadcrumb--active {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(11rem, 42vw);
  }

  .header__search {
    width: 160px;
    min-width: 0;
  }

  .header__balance {
    padding: var(--space-xs) var(--space-sm);
    gap: var(--space-xs);
  }

  .header__balance-icon {
    width: 18px;
    height: 18px;
  }

  .header__balance-value {
    font-size: 0.8125rem;
  }

  .header__icon-btn .header__icon-btn-svg {
    width: 21px;
    height: 21px;
  }

  .theme-toggle {
    padding: 2px;
  }

  .theme-toggle__btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 0.9375rem;
  }

  .header__profile-info {
    display: none;
  }

  .header__profile-chevron {
    display: none;
  }

  .header__profile {
    padding: var(--space-xs);
    gap: 0;
  }

  .header__profile-avatar {
    width: 36px;
    height: 36px;
  }

  /* Üst çubuk işlemleri → Kullanıcı İşlemleri canvas’ında */
  .header__theme-toggle,
  .header__balance,
  .header__rank,
  .header__icon-btn--notifications,
  .header__profile--header {
    display: none !important;
  }
}

/* 768px altı */
@media (max-width: 768px) {
  .header {
    padding-left: max(var(--space-md), var(--safe-area-left));
    padding-right: max(var(--space-md), var(--safe-area-right));
  }

  .header__breadcrumb .header__breadcrumb--active {
    max-width: min(10rem, 48vw);
  }

  .header__search-wrap,
  .header__search {
    display: none;
  }

  .header__breadcrumb ul li:first-child {
    display: none;
  }

  .header__balance {
    padding: var(--space-xs) var(--space-sm);
  }

  .header__balance-value {
    font-size: 0.75rem;
  }

  .header__rank {
    display: none;
  }

  .grid--4,
  .grid--3,
  .grid--2 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .stat-card {
    padding: var(--space-md);
  }

  .stat-card__value {
    font-size: 1.25rem;
  }

  .stat-card__icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .card__header,
  .card__body,
  .card__footer {
    padding: var(--space-md);
  }

  .table th,
  .table td {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
  }

  /* Tablo yatay kaydırma (responsive sınıfı olmayan tablolar) */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Responsive table - kart görünümü */
  .table-wrap--responsive {
    border: none;
    overflow: visible;
  }

  .table--responsive,
  .table--responsive thead,
  .table--responsive tbody,
  .table--responsive th,
  .table--responsive td,
  .table--responsive tr {
    display: block;
  }

  .table--responsive thead {
    display: none;
  }

  .table--responsive tbody tr {
    margin-bottom: var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-md);
    background: var(--bg-card);
  }

  .table--responsive td {
    border: none;
    padding: var(--space-xs) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
  }

  .table--responsive td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  /* Filtre çubuğu: mobilde collapse (toggle ile açılır) */
  .filter-bar--collapsible .filter-bar__fields {
    display: none;
  }
  .filter-bar--collapsible.filter-bar--open .filter-bar__fields {
    display: flex;
  }
  .filter-bar__toggle {
    display: inline-flex;
  }
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar .form-input--search {
    max-width: none;
  }
  .content-header--with-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .main__title {
    font-size: 1.25rem;
  }

  .modal__header,
  .modal__body,
  .modal__footer {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* 576px altı */
@media (max-width: 576px) {
  .main {
    padding: var(--space-sm);
    padding-left: max(var(--space-sm), var(--safe-area-left));
    padding-right: max(var(--space-sm), var(--safe-area-right));
  }

  .btn--lg {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
  }

  .modal {
    margin: 0;
    max-width: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .modal-overlay {
    padding: 0;
  }

  .toast-container {
    left: max(var(--space-sm), var(--safe-area-left));
    right: max(var(--space-sm), var(--safe-area-right));
    top: max(var(--space-sm), var(--safe-area-top));
  }

  .pagination {
    gap: var(--space-xs);
  }

  .pagination__btn {
    min-width: 36px;
    min-height: var(--touch-min);
    height: 36px;
    font-size: 0.8125rem;
  }
}

/* 380px altı - çok küçük ekranlar */
@media (max-width: 380px) {
  .main__title {
    font-size: 1.125rem;
  }

  .card__header,
  .card__body,
  .card__footer {
    padding: var(--space-sm);
  }

  .stat-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* Sidebar overlay (mobil) – tema uyumlu */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: var(--sidebar-overlay-bg);
  z-index: 250;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay--visible {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 993px) {
  .sidebar-overlay {
    display: none;
  }
}

/* Offcanvas: mobil uyumluluk (safe-area, dokunmatik) */
.offcanvas-overlay {
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
  -webkit-tap-highlight-color: transparent;
}
 

.offcanvas__header {
  padding-left: max(var(--space-md), var(--safe-area-left));
}

.offcanvas__body {
  padding-left: max(var(--space-lg), var(--safe-area-left));
  padding-right: max(var(--space-lg), var(--safe-area-right));
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  max-width: 100%;
}