/* ==========================================================================
   Glimana panel — mobil düzeltmeleri
   Dosya: resources/css/glimana-panel-mobile.css
   Yükleme: AppPanelProvider'daki mevcut glimana.css'ten SONRA (bkz. TALIMAT).
   Kapsam: yalnızca /app paneli. Masaüstü görünümü değiştirmez.
   ========================================================================== */

/* ---- 0. Ortak: seçim kutusu (masaüstünde de bozuk olan tekrar eden ok) ---- */
.rl-select,
select.rl-ctl,
select.rl-filter {
  background-color:var(--rl-surface, #fff);
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
  background-size:16px 16px !important;
  padding-right:34px !important;
  -webkit-appearance:none;
  appearance:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rl-ctl input[type="checkbox"],
.rl-toolbar input[type="checkbox"],
.rl-tbl input[type="checkbox"] {
  accent-color:var(--rl-ink, #111311);
  color:var(--rl-ink, #111311) !important;   /* forms eklentisi mavi (currentColor) basıyor */
  border-radius:4px;
}

/* ---- 1. Filament ızgarası: tamsayı columnSpan() mobilde taşma yaratıyor ----
   Widget'lar ve infolist/form alanları columnSpan(8), columnSpan(4) gibi
   tamsayı değer alınca Filament bunu 'default' kırılımına uyguluyor.
   Ekran 1 sütunken "span 8" örtük sütunlar açıyor, kartlar 300px'e sıkışıyor.
   Kalıcı çözüm PHP'de (TALIMAT madde 2). Bu blok güvenlik ağı. */
@media (max-width: 1023.98px) {
  .fi-wi > .fi-wi-widget { grid-column:1 / -1 !important; }
  .grid.grid-cols-\[--cols-default\]:not([class*="md:grid-cols"]):not([class*="sm:grid-cols"]) > .col-\[--col-span-default\] {
    grid-column:1 / -1 !important;
  }
  .rl-grid > [class*="rl-span-"] { grid-column:1 / -1 !important; }
}
/* Görev ve sayfa detayındaki kısa alanlar mobilde 2 sütun olsun (Tür/Durum,
   Kelime/İçerik skoru…) — tek sütun gereksiz uzun kaydırma yaratıyor. */
@media (min-width: 400px) and (max-width: 1023.98px) {
  .fi-in .grid.grid-cols-\[--cols-default\][style*="--cols-lg: repeat(3"],
  .fi-in .grid.grid-cols-\[--cols-default\][style*="--cols-lg: repeat(4"] {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .fi-in .grid.grid-cols-\[--cols-default\][style*="--cols-lg: repeat(3"] > .col-\[--col-span-default\][style*="span 1 /"],
  .fi-in .grid.grid-cols-\[--cols-default\][style*="--cols-lg: repeat(4"] > .col-\[--col-span-default\][style*="span 1 /"] {
    grid-column:auto !important;
  }
}

/* ---- 2. Kenar çubuğu açılış durumu ----
   Masaüstünde açık bırakılan menü localStorage'dan (isOpen) okunup telefonda
   her sayfa yüklemesinde içeriğin üstüne açılıyor. JS düzeltmesi TALIMAT
   madde 3'te; burada yalnızca açılış animasyonunun titremesi engellenir. */
@media (max-width: 1023.98px) {
  .fi-sidebar { max-width:min(300px, 86vw); }
}

/* ---- 3. Başlık alanı: sayfa başlığı + aksiyon butonları ---- */
@media (max-width: 639.98px) {
  .fi-header { gap:12px; }
  .fi-header-heading { font-size:28px !important; line-height:1.1 !important; }
  .fi-header .fi-ac { flex-wrap:wrap; gap:8px; }
  .fi-header .fi-ac .fi-btn { min-height:40px; }
}

/* ---- 4. Özel tablolar (.rl-tbl) ---- */
/* 4a. Tüm .rl-tbl'ler kendi kutusunda yatay kayabilsin (Bağlantılar'daki
       iki tabloda .rl-tw sarmalayıcısı yok, butonlar ekran dışında kalıyor). */
@media (max-width: 767.98px) {
  .rl-tw { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:-4px; padding-inline:4px; }
  .rl-tbl th { font-size:12px !important; white-space:nowrap; }
  .rl-tbl td { vertical-align:middle; }
  /* Boş durum satırı kırılsın, taşmasın */
  .rl-tbl td[colspan] { white-space:normal !important; min-width:0; }
  /* Tablo boşken (tek satır = boş durum mesajı) başlıkları gizle, mesaj ekrana sığsın */
  .rl-tbl:has(tbody > tr:only-child > td[colspan]) thead { display:none; }
  .rl-tbl:has(tbody > tr:only-child > td[colspan]) { width:100%; }
}

/* 4b. Bağlantılar sayfası: hesap ve mülk tabloları mobilde kart listesine döner.
       Blade'de her <td>'ye data-label eklenmeli (TALIMAT madde 4). */
@media (max-width: 767.98px) {
  .rl-tbl.rl-tbl-compact,
  .rl-tbl.rl-tbl-compact tbody,
  .rl-tbl.rl-tbl-compact tr,
  .rl-tbl.rl-tbl-compact td { display:block; width:100%; }
  .rl-tbl.rl-tbl-compact thead { display:none; }
  .rl-tbl.rl-tbl-compact tr {
    border:1px solid var(--rl-line, #e6e6e0);
    border-radius:14px;
    padding:12px 14px;
    margin-bottom:10px;
    background:var(--rl-surface, #fff);
  }
  .rl-tbl.rl-tbl-compact td {
    border:0 !important;
    padding:5px 0 !important;
    text-align:left !important;
    white-space:normal !important;
    word-break:break-word;
  }
  .rl-tbl.rl-tbl-compact td:empty { display:none; }
  .rl-tbl.rl-tbl-compact td[data-label]::before {
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    font:500 12px/1.3 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--rl-mute, #686c64);
  }
  .rl-tbl.rl-tbl-compact td .fi-btn,
  .rl-tbl.rl-tbl-compact td .rl-btn { margin:4px 8px 0 0; }
  .rl-tbl.rl-tbl-compact .rl-select { width:100% !important; min-width:0; font-size:15px; height:44px; }
  /* Kaydet butonu: tam genişlik mobilde doğru, masaüstünde değil */
}

/* ---- 5. Pano ---- */
@media (max-width: 639.98px) {
  .rl-score { grid-template-columns:96px minmax(0, 1fr) !important; gap:14px !important; }
  /* 08.10.2026: "SEO SCORE" 12 px + harf aralığıyla ~76 px — 96 px halkanın iç çapını (≈76) taşıyordu, metin çizginin üstüne biniyordu */
  .rl-score .rl-ring { width:100px; height:100px; }
  .rl-ring .c b { font-size:26px; }
  .rl-ring .c span { font-size:9px !important; letter-spacing:.05em; margin-top:2px; text-indent:.05em; }
  .rl-kpi-trio { grid-template-columns:minmax(0, 1fr) !important; }
  .rl-kpi { min-width:0; }
  .rl-kpi svg.spark { max-width:42%; height:auto; }
  .rl-bar { grid-template-columns:minmax(0, 1fr) 44% 36px !important; }
}

/* ---- 6. Anahtar kelimeler filtre çubuğu ---- */
@media (max-width: 767.98px) {
  .rl-chips { flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; flex-basis:100%; }
  .rl-chips::-webkit-scrollbar { display:none; }
  .rl-chips > * { flex:none; }
  .rl-toolbar { flex-wrap:wrap !important; gap:8px !important; }
  input.rl-ctl, .rl-toolbar input[type="search"], .rl-toolbar input[type="text"] { flex:1 1 100%; min-width:0; }
}
/* Filtre çubuğu: dört kontrol tek görünümde (her ekranda) */
.rl-toolbar .rl-ctl {
  box-sizing:border-box;
  height:40px;
  border:1px solid var(--rl-line, #e6e6e0) !important;
  border-radius:10px !important;
  background-color:var(--rl-surface, #fff);
  font-size:14px !important;
  color:var(--rl-ink, #111311);
}
.rl-toolbar label.rl-ctl {
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  padding:0 12px !important;
  white-space:nowrap;
  cursor:pointer;
}
.rl-toolbar label.rl-ctl input[type="number"] {
  width:6ch;
  height:28px;
  padding:0 6px !important;
  border:1px solid var(--rl-line, #e6e6e0) !important;
  border-radius:6px;
  background:transparent;
  font:inherit;
  text-align:right;
}
.rl-toolbar input.rl-ctl { padding:0 12px !important; }
.rl-toolbar .rl-ctl:focus-within, .rl-toolbar .rl-ctl:focus { outline:2px solid var(--rl-ink, #111311); outline-offset:1px; }

/* ---- 7. SEO haritası ---- */
@media (max-width: 767.98px) {
  .rl-treemap { overflow:hidden; }
  .rl-tm { font-size:12px; }
  .rl-card-h { flex-wrap:wrap; row-gap:8px; }
  .rl-chip { white-space:nowrap; }
}
/* Küçük hücrelerde metin gizlensin (her ekranda) */
.rl-tm.is-tiny > * { display:none; }

/* ---- 8. Hız sayfası ---- */
@media (max-width: 767.98px) {
  .rl-toolbar .hint { flex-basis:100%; }
  .fi-page .grid.flex-1.auto-cols-fr.gap-y-8 { row-gap:20px; }
}

/* ---- 9. Genel: dokunma hedefleri, küçük yazılar, uzun metin ---- */
.rl-url-list, .rl-url-list li { overflow-wrap:anywhere; }
@media (max-width: 767.98px) {
  .fi-ta-header-cell-label { font-size:12px !important; }
  .fi-ta-actions .fi-link, .fi-ta-actions .fi-icon-btn { min-height:36px; }
  .fi-pagination-records-per-page-select { min-height:40px; }
}