/* =============================================
   MADDPANEL - PROFESYONEL MOBİL GELİŞTİRMELER
   Apple / Amazon standartları: touch targets, safe-area, full-screen modals
   ============================================= */

/* ============== BASE MOBIL - Tap/scroll iyileştirmeleri ============== */
@media (max-width: 1023px) {
  a, button {
    -webkit-tap-highlight-color: transparent;
  }

  .btn, .nav-link, .header__mobile-toggle, .user-menu__trigger {
    touch-action: manipulation;
  }
}

/* ============== TOUCH TARGETS (Apple HIG: min 44x44pt) ============== */
@media (max-width: 1023px) {
  .header__mobile-toggle {
    min-width: var(--space-11);
    min-height: var(--space-11);
    padding: var(--space-2);
  }

  .user-menu__trigger {
    min-height: var(--space-11);
    padding: var(--space-2) var(--space-3);
  }

  .user-menu__avatar {
    width: var(--space-9);
    height: var(--space-9);
  }

  .nav-link {
    min-height: var(--space-11);
    padding: var(--space-3) var(--space-4);
  }

  .nav-group__toggle {
    min-height: var(--space-11);
    padding: var(--space-3) var(--space-4);
  }

  .nav-sub-link {
    min-height: var(--space-11);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);
  }

  .header-notifications__trigger {
    min-width: var(--space-11);
    min-height: var(--space-11);
  }

  /* action-icon-btn: action-icon-buttons.css merkezi yönetir */

  .btn {
    min-height: var(--space-11);
    padding: var(--space-3) var(--space-4);
  }

  .btn--icon {
    min-width: var(--space-11);
    min-height: var(--space-11);
    padding: var(--space-2);
  }

  .select,
  .input,
  .textarea {
    min-height: var(--space-11);
    padding: var(--space-3) var(--space-4);
  }

  .module-tabs__item {
    min-height: var(--space-11);
    padding: var(--space-3) var(--space-4);
  }
}

/* ============== SAFE AREA (iPhone X+ notch, gesture bar) ============== */
@media (max-width: 1023px) {
  .header {
    padding-left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
  }

  .app__main {
    padding-left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  .sidebar--mobile {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  .user-menu__dropdown {
    right: env(safe-area-inset-right, 0px);
  }

  .toast-container {
    top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + var(--toast-strip-center));
    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
  }
}

/* ============== SIDEBAR DRAWER - Profesyonel overlay ============== */
@media (max-width: 1023px) {
  .sidebar--mobile {
    width: min(16rem, 85vw);
    max-width: 288px;
  }

  .nav-overlay {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Body scroll lock when sidebar open */
  body.sidebar-open {
    overflow: hidden;
  }
}

/* ============== MODAL - Apple tarzı full-screen mobil ============== */
@media (max-width: 639px) {
  .modal {
    align-items: flex-end;
  }

  .modal__content {
    width: 100%;
    height: 90vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    margin: 0;
  }

  .modal--open .modal__content {
    animation: modal-slide-up var(--duration-300) var(--ease-out) forwards;
  }

  @keyframes modal-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .modal__header {
    padding: var(--space-4);
    flex-shrink: 0;
  }

  .modal__body {
    padding: var(--space-4);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .modal__footer {
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .modal__footer .btn {
    flex: 1;
    min-width: 0;
  }
}

/* Tablet modals – token'lar viewport-relative olduğu için ek override gerekmez */

/* modal-dialog (Proje modalları) - Mobil full width, bottom sheet tarzı */
@media (max-width: 639px) {
  .modal-dialog {
    width: 100%;
    height: 90vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }

  .modal-overlay:not(.hidden) .modal-dialog {
    animation: modal-slide-up var(--duration-320) var(--ease-out) forwards;
  }

  .modal-overlay.modal--closing .modal-dialog {
    animation: modal-slide-down var(--duration-120) var(--ease-out) forwards;
  }

  @keyframes modal-slide-up {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes modal-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }
}

/* ============== USER MENU DROPDOWN - Mobil uyum ============== */
@media (max-width: 639px) {
  .user-menu__dropdown {
    position: fixed;
    top: calc(var(--header-height) + var(--space-3));
    left: var(--space-4);
    right: var(--space-4);
    min-width: auto;
    width: auto;
    max-width: 24rem;
    margin: 0 auto;
    transform: translateY(-8px);
  }

  .user-menu__dropdown--open {
    transform: translateY(0);
  }

  .user-menu__link {
    min-height: var(--space-11);
    padding: var(--space-3) var(--space-4);
  }
}

/* ============== BILDIRIM DROPDOWN - Mobil ============== */
@media (max-width: 639px) {
  .header-notifications__dropdown {
    position: fixed;
    top: calc(var(--header-height) + var(--space-3));
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
    max-width: none;
    max-height: 60vh;
  }
}

/* ============== TOOLBAR - Mobil: select dar, arama esnek ============== */
@media (max-width: 767px) {
  .toolbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
    overflow: visible;
    min-width: 0;
  }

  .toolbar__filter {
    flex: 0 0 auto;
  }

  .toolbar__select,
  .toolbar .select {
    width: 8rem;
    min-width: 8rem;
    max-width: 8rem;
  }

  /* Arama çubuğu esnek – kalan alanı doldurur */
  .toolbar__search,
  .toolbar__input,
  .toolbar .search-input-group.toolbar__input {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .toolbar__actions .btn,
  .toolbar__actions a.btn,
  .toolbar .btn,
  .toolbar .btn--icon,
  .toolbar a.btn {
    flex-shrink: 0;
  }
}

/* ============== BREADCRUMB - Mobil truncate ============== */
@media (max-width: 639px) {
  .flex.items-center.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .breadcrumb {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: var(--space-1);
    margin: 0;
  }

  .breadcrumb::-webkit-scrollbar {
    height: 4px;
  }
}

/* ============== YATAY SCROLLBAR GİZLE (sadece telefonlar - 639px ve altı) ============== */
/* Scrollbar gizleme sadece mobil yatay scroll kullanıldığında - laptop/tablet etkilenmez */
@media (max-width: 639px) {
  .data-table-container,
  .card.overflow-x-auto,
  .card:has(> table),
  .card:has(> div > table),
  .table-inventory-radius-wrap,
  .overflow-x-auto,
  .overflow-auto,
  .page-section:has(table),
  .page-section:has(> div > table),
  .bg-white.overflow-hidden:has(table),
  [data-history-fragment]:has(> table),
  #projectEquipmentSection,
  .equipment-container,
  [data-category-section]:has(.equipment-item-row),
  [data-category-section]:has(.category-item-row) {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .data-table-container::-webkit-scrollbar,
  .card.overflow-x-auto::-webkit-scrollbar,
  .card:has(> table)::-webkit-scrollbar,
  .card:has(> div > table)::-webkit-scrollbar,
  .table-inventory-radius-wrap::-webkit-scrollbar,
  .overflow-x-auto::-webkit-scrollbar,
  .overflow-auto::-webkit-scrollbar,
  .page-section:has(table)::-webkit-scrollbar,
  .page-section:has(> div > table)::-webkit-scrollbar,
  [data-history-fragment]::-webkit-scrollbar,
  #projectEquipmentSection::-webkit-scrollbar,
  .equipment-container::-webkit-scrollbar,
  [data-category-section]::-webkit-scrollbar {
    display: none;
  }
}

/* ============== TABLOLAR – Tüm modüller (ortak mobil kural) ============== */
/* Satır yüksekliği: tables.css – --table-row-height-mobile */
/* Kolon genişliği: en uzun içeriğe göre, yatay scroll */
/*
  Tablo referansı: .cursor/rules/table-classes.mdc

  Tip                 | Sınıf                    | Yer
  --------------------|--------------------------|----------------------------------
  Klasik tablo        | table--inventory-main    | equipTable, projectsTable, rentalsTable, documentsTable, companiesTable
  Geçmiş tablosu      | table--history           | Tüm geçmiş sayfaları
  Proje ekipman       | table--project-equipment | Proje/fatura/rental detay ekipman
*/

@media (max-width: 639px) {
  .data-table-container,
  .card.overflow-x-auto,
  .card:has(> table),
  .card:has(> div > table),
  .card:has(.equipment-item-row),
  .table-inventory-radius-wrap,
  .overflow-x-auto,
  .overflow-auto,
  .page-section:has(table),
  .page-section:has(> div > table),
  .page-section:has(.equipment-item-row),
  .bg-white.overflow-hidden:has(table),
  [data-history-fragment]:has(> table),
  #projectEquipmentSection,
  .equipment-container,
  [data-category-section]:has(.equipment-item-row),
  [data-category-section]:has(.category-item-row) {
    margin-left: calc(-1 * (var(--space-4) + env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * (var(--space-4) + env(safe-area-inset-right, 0px)));
    padding-left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: visible;
  }

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

  .equipment-item-row {
    white-space: nowrap;
  }

  /* Akordiyon başlığı – ok ikonu tek satırda sağda (envanter listesi gibi) */
  .equipment-accordion-header,
  .returned-equipment-accordion-header,
  .category-header-row {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .equipment-accordion-header .flex-shrink-0,
  .returned-equipment-accordion-header .flex-shrink-0,
  .category-header-row .category-arrow {
    flex-shrink: 0;
  }

  /* Kolon genişliği = o kolondaki en uzun metin. Yatay scroll ile tüm içerik erişilir. */
  .table--inventory,
  .table--history {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    overflow: visible;
  }

  .table--inventory-main,
  .table--project-equipment.table--inventory,
  #serialTable.inventory-detail-table,
  #operationsTable.table--inventory {
    table-layout: auto;
  }

  /* Col/colgroup ve td/th yüzde genişliklerini kaldır – kolonlar içeriğe göre boyutlansın */
  .table--inventory col,
  .table--history col {
    width: auto;
  }

  #equipTable th.inventory-col-equipment,
  #equipTable td.inventory-col-equipment,
  #equipTable th.inventory-col-actions,
  #equipTable td.inventory-col-actions,
  #externalTable th.inventory-col-equipment,
  #externalTable td.inventory-col-equipment {
    width: auto;
  }

  #techInvTable th,
  #techInvTable td,
  #techInvTable .tech-inventory-col--name,
  #techInvTable .tech-inventory-col--serial,
  #techInvTable .tech-inventory-col--status,
  #techInvTable .tech-inventory-col--date,
  #techInvTable .tech-inventory-col--actions {
    width: auto;
  }

  /* Ellipsis kaldır – içerik tam görünsün (inventory-detail-table dahil) */
  .table--inventory td,
  .table--inventory th,
  .table--history td,
  .table--history th {
    overflow: visible;
    text-overflow: clip;
  }

  /* Envanter akordiyon tabloları: overflow visible satır boyutunu ezebilir → sabit kalır */
  #equipTable.table--inventory-main td,
  #equipTable.table--inventory-main th,
  #externalTable.table--inventory-main td,
  #externalTable.table--inventory-main th {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .inventory-detail-table.table--inventory td:nth-child(1),
  .inventory-detail-table.table--inventory td:nth-child(2) {
    overflow: visible;
    min-width: max-content;
  }

  /* Teknik servis – envanter detay ile aynı: subtable kolonları tam görünsün */
  #techInvTable .tech-inventory-subtable td,
  #techInvTable .tech-inventory-col--name,
  #techInvTable .tech-inventory-col--serial,
  #techInvTable .tech-inventory-col--status,
  #techInvTable .tech-inventory-col--date,
  #techInvTable .tech-inventory-col--actions {
    overflow: visible;
    text-overflow: clip;
    min-width: max-content;
  }
  #techInvTable .tech-inventory-subtable {
    table-layout: auto;
  }

  .table td:has(.stock-code-cell),
  .equipment-item-row .stock-code-cell,
  .stock-code-cell {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
  }

  .serial-truncate,
  .serial-truncate a,
  .serial-truncate span {
    overflow: visible;
    text-overflow: clip;
  }

  .rental-equipment-name-col,
  .rental-equipment-serial-col,
  .incoming-equipment-group .equipment-accordion-content {
    overflow: visible;
    min-width: 0;
  }

  /* Belge/Rental equipment-item-row içindeki truncate kaldır */
  .equipment-item-row .truncate {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
  }

  /* Proje ekipman satırı – w-2/5, w-1/4 kaldır, kolonlar içeriğe göre, stok no taşmasın */
  .equipment-item-row .w-2\/5,
  .equipment-item-row .w-1\/4 {
    width: auto;
    min-width: max-content;
  }

  /* Rental div listeleri – kolonlar en uzun içeriğe göre (sabit 155px kaldır) */
  .rental-equipment-serial-col {
    width: auto;
    min-width: max-content;
  }

  /* Tablo aksiyon butonları: action-icon-buttons.css merkezi yönetir (flex-shrink dahil) */
}

/* Kompakt yatay padding – küçük ekran (spesifik selector ile cascade) */
@media (max-width: 480px) {
  .data-table-container .table--inventory th,
  .data-table-container .table--inventory td,
  .data-table-container .table--history th,
  .data-table-container .table--history td,
  .card .table--inventory th,
  .card .table--inventory td,
  .card .table--history th,
  .card .table--history td,
  .page-section .table--inventory th,
  .page-section .table--inventory td,
  .page-section .table--history th,
  .page-section .table--history td {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .data-table-container .equipment-item-row,
  .data-table-container .equipment-accordion-header,
  .data-table-container .returned-equipment-accordion-header,
  .card .equipment-item-row,
  .card .equipment-accordion-header,
  .card .returned-equipment-accordion-header {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

/* ============== PAGE HEADER - Mobil stack ============== */
@media (max-width: 639px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .page-header__actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .page-header__actions .btn {
    flex: 1;
    min-width: 120px;
  }
}

/* ============== FORM - Mobil full-width ============== */
@media (max-width: 639px) {
  .form-group__label {
    font-size: var(--font-size-sm);
  }

  .form__footer {
    flex-direction: column;
    gap: var(--space-2);
  }

  .form__footer .btn {
    width: 100%;
  }
}

/* ============== TOAST - Mobil bottom / full width ============== */
@media (max-width: 639px) {
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }

  .toast {
    width: 100%;
  }
}

/* ============== MODAL ACTIONS - Mobil ============== */
@media (max-width: 479px) {
  .modal-actions {
    flex-direction: column;
    width: 100%;
  }

  .modal-actions .btn {
    width: 100%;
    min-width: unset;
  }
}