/* ════════════════════════════════════════════════════════════════
   COMBAT PUPPETEER — Gourmet Noir Mobile Responsive Rules
   mobile.css — Tablet & Mobil Cihaz Entegrasyonu
════════════════════════════════════════════════════════════════ */

/* ── Tablet & Mobil Genel Kurallar (<= 768px) ──────────────── */
@media (max-width: 768px) {

  /* ── Temel Reset & Dokunmatik İyileştirmeleri ─────────────── */
  html, body, #root {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Mobil dokunma hedeflerini büyüt (Touch-friendly targets) */
  button, 
  .btn, 
  .cond-picker-btn, 
  .avatar-btn--choose, 
  .avatar-btn--remove,
  .cart-row__qty-btn,
  .duration-stepper__btn {
    min-height: 40px;
    touch-action: manipulation;
  }

  input, select, textarea {
    font-size: 16px !important; /* iOS Otomatik Zoom'u Engeller */
  }

  /* ── Root App Düzeni ───────────────────────────────────────── */
  .app-root {
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
  }

  /* Header Alanı */
  .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
  }

  .app-header__title {
    font-size: var(--fs-xl);
    justify-content: space-between;
    width: 100%;
  }

  .app-header__spacer {
    display: none;
  }

  /* Kontrol butonları satırı (Log, Dil Seçimi, Tur Göstergesi) */
  .app-header > :not(.app-header__title) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .lang-toggle {
    margin-left: 0;
  }

  /* Ana Grid Layout: Yan yana kolonları tek kolona düşür */
  .app-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .app-right-col {
    max-height: none; /* Dikey kısıtlamayı kaldır, sayfa akışına bırak */
  }

  .init-list {
    max-height: 60vh; /* Mobil cihazlarda inisiyatif listesi çok uzamasın */
  }

  /* ── Section Panel & Gridler ───────────────────────────────── */
  .section-panel__header {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .section-panel__actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* Kart gridlerini mobilde tek kolona düşür */
  .section-panel__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .section-panel__body {
    max-height: 480px;
  }

  /* ── Layout Primitives & Modal Shells ──────────────────────── */
  .overlay {
    padding: var(--sp-2);
    align-items: flex-end; /* Mobilde sheet/bottom-modal havası kat */
  }

  .modal-shell {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0 -var(--sp-2) -var(--sp-2) -var(--sp-2);
  }

  .modal-header {
    padding: var(--sp-3) var(--sp-4);
  }

  .modal-body {
    padding: var(--sp-3) var(--sp-4);
  }

  .modal-footer {
    padding: var(--sp-3) var(--sp-4);
    flex-direction: column-reverse; /* Ana butonu üste, iptali alta al */
    gap: var(--sp-2);
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* ── Formlar & Grid Dönüşümleri ────────────────────────────── */
  .custom-form__grid--monster,
  .custom-form__grid--player {
    grid-template-columns: 1fr 1fr; /* 4'lü/3'lü gridleri ikili yapıya çek */
    gap: var(--sp-2);
  }

  .custom-form__grid--monster > *:first-child,
  .custom-form__grid--player > *:first-child {
    grid-column: span 2; /* İsim alanını tam genişlik yap */
  }

  .init-modal__add-pc-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }

  .init-modal__add-pc-grid > *:first-child {
    grid-column: span 2;
  }

  .init-modal__row {
    flex-wrap: wrap;
    padding: 10px;
  }

  .init-modal__row-name {
    width: 100%;
    flex: none;
    margin-bottom: 2px;
  }

  /* ── Condition Picker Dropdown ─────────────────────────────── */
  .cond-picker-menu {
    position: fixed !important;
    left: 5% !important;
    right: 5% !important;
    top: auto !important;
    bottom: 20px !important;
    width: 90vw !important;
    max-height: 70vh;
    z-index: var(--z-modal);
  }

  .cond-picker-menu__grid {
    grid-template-columns: 1fr; /* Tek sütun listeleme */
    max-height: 240px;
  }

  /* ── Concentration Toast ────────────────────────────────────── */
  .conc-toast {
    left: 12px;
    right: 12px;
    transform: none;
    min-width: auto;
    max-width: none;
    top: 12px;
  }

  @keyframes conc-in {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── Full Card & Player Card İnce Ayarları ──────────────────── */
  .full-card__hp-controls {
    gap: 6px;
  }

  .full-card__dmg-btn,
  .full-card__heal-btn {
    width: 38px;
    height: 38px;
  }

  .full-card__amount-input {
    height: 38px;
    font-size: var(--fs-md);
  }

  /* ── Initiative Row ────────────────────────────────────────── */
  .init-row {
    gap: var(--sp-2);
  }

  .init-row__connector {
    width: 16px; /* Bağlantı çizgisini daralt */
  }

  /* Tie breaker ucunu mobilde hizala */
  .tie-breaker-spark {
    top: 36px;
  }
}

/* ── Küçük Mobil Cihazlar (<= 480px) ───────────────────────── */
@media (max-width: 480px) {

  .app-root {
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
  }

  .app-header__title {
    font-size: var(--fs-lg);
  }

  .app-round-pill {
    padding: 4px 10px;
    font-size: var(--fs-xs);
  }

  /* AOE Panel mobilde butonları dikey dizsin */
  .aoe-panel__modes {
    flex-direction: column;
  }

  .aoe-panel__action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .aoe-panel__apply-btn {
    width: 100%;
    min-height: 42px;
  }

  /* Kartlarda isimlerin sığması için font boyutlarını dengeliyoruz */
  .full-card__name, 
  .player-card__name, 
  .init-row__name {
    font-size: var(--fs-base);
  }

  /* Sepet Satırı */
  .cart-row {
    flex-wrap: wrap;
  }

  .cart-row__name {
    width: 100%;
    margin-bottom: 4px;
  }

  /* Log Paneli */
  .log-panel__header {
    padding: 12px 16px;
  }

  .log-panel__body {
    padding: 10px 16px;
  }

  .log-entry {
    padding: 8px;
    font-size: var(--fs-sm);
  }

  /* Switche dokunmayı kolaylaştır */
  .init-modal__toggle-bar {
    padding: 8px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION & COMPACT HEADER OVERRIDES
════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Alt Sekme Navigasyonu (Bottom Bar) ─────────────────── */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #16161c;
    border-top: 1px solid var(--clr-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: var(--z-modal);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
  }

  .mobile-nav-btn {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: var(--clr-text-muted);
    font-size: var(--fs-xs);
    font-family: var(--font-ui);
    font-weight: var(--fw-bold);
    transition: all var(--transition-fast);
  }

  .mobile-nav-btn__icon {
    font-size: 1.25rem;
  }

  .mobile-nav-btn--active {
    color: var(--clr-gold);
    background: rgba(201, 168, 76, 0.08);
    border-top: 2px solid var(--clr-gold);
  }

  /* Alt navigasyonun içeriği kapatmaması için app padding ayarı */
  .app-root {
    padding-bottom: 76px !important;
  }

  /* ── 2. Üst Üst Üste Yığılan Butonları Sıkıştırma (Header Actions) */
  .app-header {
    margin-bottom: var(--sp-3);
  }

  /* Ana üst buton alanını yatay compact satıra çevir */
  .app-header-actions {
    display: flex;
    gap: var(--sp-2);
    width: 100%;
    margin-top: var(--sp-2);
  }

  .app-header-actions .btn,
  .app-header-actions .app-log-btn {
    flex: 1;
    padding: 8px var(--sp-2);
    font-size: var(--fs-xs);
    white-space: nowrap;
    text-align: center;
    justify-content: center;
  }

  /* Düşman / Müttefik grup aksiyon butonlarını compact yap */
  .section-panel__actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
    margin-top: 6px;
  }

  .btn-group, .btn-aoe {
    padding: 6px 8px;
    font-size: var(--fs-xs);
    text-align: center;
  }

  /* ── 3. Sekme İçerik Kontrolü (Tab Visibility) ──────────────── */
  /* React tarafında aktif sekmeye göre gizleyip göstereceğimiz sınıflar */
  .mobile-tab-content {
    display: none;
  }

  .mobile-tab-content--active {
    display: block;
  }
}