/* Telefon / tablet / dokunmatik düzen. Masaüstü görünümü styles.css + planner.css'tedir. */

/* ---------- her boyut ---------- */
body { height: 100vh; height: 100dvh; }
.mobile-only { display: none !important; }
.sheet-backdrop { display: none; }
.hint-touch { display: none; }

/* Çizelgede yatay kaydırırken saat sütunu sabit kalsın */
.g-times { position: sticky; left: 0; z-index: 12; background: var(--panel); border-right: 1px solid var(--line); }
.g-head > div:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); }

/* ---------- dokunmatik ekranlar ---------- */
@media (hover: none) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
  .grid { -webkit-touch-callout: none; }
  /* üzerine gelme yok: sil düğmesi ve tutamaçlar seçili blokta görünür */
  .g-block .b-del { display: none; }
  .g-block.sel .b-del { display: flex; width: 26px; height: 26px; }
  .g-block.sel .rh { height: 16px; touch-action: none; }
  .g-block.sel .rh::after {
    content: ''; position: absolute; left: 50%; width: 30px; height: 4px; margin-left: -15px; border-radius: 2px;
    background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
  }
  .g-block.sel .rh-top::after { top: 3px; }
  .g-block.sel .rh-bot::after { bottom: 3px; }
  .g-col { cursor: default; }
  .it-del { opacity: .55; }
  .pc-open { opacity: 1; }
}

/* ---------- orta genişlik: sekmelerden yalnızca etkin olanın adı yazılır (diğerleri simge + ipucu) ---------- */
@media (min-width: 901px) and (max-width: 1560px) {
  .modes button:not(.active) .lbl { display: none; }
  .modes button:not(.active) { padding: 0 9px; }
}

/* ---------- küçük dizüstü / yatay tablet ---------- */
@media (min-width: 901px) and (max-width: 1200px) {
  .sidebar { width: 360px; }
  .pl-side { width: 320px; }
  .modes button { padding: 0 9px; }
}

/* ---------- telefon / dikey tablet ---------- */
@media (max-width: 900px) {
  :root { --nav-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: calc(var(--nav-h) + var(--safe-b)); }
  /* iOS odaklanınca sayfayı yakınlaştırmasın */
  input, select, textarea { font-size: 16px !important; }

  /* üst çubuk */
  .topbar { height: auto; min-height: 52px; padding: env(safe-area-inset-top, 0px) 8px 0; gap: 6px; }
  .brand { display: none; }
  body.mode-planner .brand { display: block; font-size: 21px; margin-right: 0; }
  .topbar .lbl { display: none; }
  #btnNewWeek, #btnExport { width: 36px; padding: 0; justify-content: center; }
  .plan-picker { flex: 1; min-width: 0; }
  .plan-picker select { min-width: 0; flex: 1; width: 100%; font-size: 14px !important; }
  body.mode-week .topbar .spacer { display: none; }

  /* alt sekme çubuğu */
  .modes {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; margin: 0; border-radius: 0; gap: 4px;
    height: calc(var(--nav-h) + var(--safe-b)); padding: 4px 8px calc(4px + var(--safe-b));
    background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0, 0, 0, .05);
  }
  .modes button { flex: 1; flex-direction: column; justify-content: center; gap: 3px; height: 52px; padding: 0 4px; font-size: 11px; border-radius: 10px; }
  .modes button .lbl { display: block; white-space: nowrap; }
  /* alt çubukta kısa adlar */
  .modes button .lbl[data-short] { font-size: 0; }
  .modes button .lbl[data-short]::after { content: attr(data-short); font-size: 11px; }
  .modes button.active { background: var(--accent-soft); color: var(--accent-2); box-shadow: none; }

  /* haftalık görünüm */
  .layout { flex-direction: column; }
  .board { padding: 8px 8px 6px; gap: 6px; position: relative; min-height: 0; }
  .week-context { gap: 6px; }
  .wc-label { display: none; }
  .wc-theme { flex-basis: 100%; min-width: 0; }
  .board-bar { min-width: 0; }
  .palette { flex-wrap: nowrap; overflow-x: auto; width: 100%; min-width: 0; padding-bottom: 2px; scrollbar-width: none; }
  .palette::-webkit-scrollbar { display: none; }
  .palette .chip { flex: none; height: 30px; }
  .g-head, .g-body { grid-template-columns: 44px repeat(7, minmax(84px, 1fr)); }
  .g-times span { right: 5px; font-size: 10px; }
  .board-hint { font-size: 10.5px; padding-right: 150px; text-align: left; }

  .panel-fab {
    display: inline-flex !important; position: absolute; right: 14px; bottom: 30px; z-index: 30;
    height: 46px; border-radius: 23px; padding: 0 16px; gap: 7px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  }
  .panel-fab small { font-weight: 500; opacity: .85; }

  /* planlama paneli: alttan açılan sayfa */
  .sidebar {
    position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 65; width: auto;
    height: min(80dvh, 720px); border-left: none; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
    transform: translateY(110%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  }
  body.sheet-open .sidebar { transform: none; visibility: visible; transition: transform .22s ease; }
  .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 64; background: var(--backdrop);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
  .sheet-head.mobile-only { display: flex !important; align-items: center; gap: 8px; padding: 12px 10px 4px 16px; position: relative; flex: none; }
  .sheet-head .grip { position: absolute; top: 5px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line-2); }
  .sheet-head b { flex: 1; font-size: 15px; }
  .summary { padding: 4px 12px 8px; }
  .stat { padding: 6px 8px; }
  .stat .v { font-size: 23px; }
  .tabs { padding: 0 4px; }
  .tabs button { font-size: 12.5px; gap: 4px; }
  .panel { padding: 10px 12px 20px; }

  /* blok düzenleyici: ekranın altında ayrı sayfa (app.js telefonda body'ye taşır) */
  body > .editor.open {
    position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 66;
    max-height: 62dvh; overflow-y: auto; background: var(--panel); border-radius: 16px 16px 0 0; border-top: none;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); padding: 12px 14px 14px;
  }
  .editor .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editor .field { height: 38px; }

  /* bildirim ve pencereler */
  .toast { bottom: calc(var(--nav-h) + var(--safe-b) + 14px); max-width: calc(100vw - 24px); flex-wrap: wrap; }
  .modal-bg { align-items: flex-end; }
  .modal { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; max-height: 90dvh; overflow-y: auto; padding-bottom: var(--safe-b); }
  .modal .mf .btn { flex: 1 1 auto; justify-content: center; height: 42px; }
  .popover button { padding: 11px 12px; }

  /* planlayıcı: tek sütun, tamamı birlikte kayar. Sıra: gezinme → dönemin kendisi → alt dönem kartları */
  .planner { display: flex; flex-direction: column; overflow-y: auto; }
  .planner > *, .pl-main > * { flex: none; }
  .pl-main { display: contents; }
  .pl-top { order: 1; padding: 10px 10px 8px; }
  .pl-side { order: 2; width: auto; border-right: none; border-bottom: 1px solid var(--line); overflow: visible; }
  .pl-childtitle { order: 3; padding: 14px 12px 8px; margin: 0; }
  .pl-grid { order: 4; padding: 0 10px 20px; }
  .ps { padding: 12px 14px 16px; min-height: 0; }
  .ps-title { font-size: 36px; }
  .ps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-top { gap: 6px; }
  .crumb { padding: 0 8px; font-size: 13px; }
  .crumb .ct { max-width: 110px; }
  .pl-nav { width: 100%; }
  .pl-nav .btn { flex: 1; justify-content: center; height: 34px; }
  .pl-grid.lvl-life, .pl-grid.lvl-year, .pl-grid.lvl-month { grid-template-columns: minmax(0, 1fr); }
  .pcard, .lvl-month .pcard { min-height: 0; }
  .it { min-height: 34px; }
  .pc-open { height: 32px; }
}

@media (max-width: 420px) {
  .g-head, .g-body { grid-template-columns: 40px repeat(7, minmax(78px, 1fr)); }
  .stat label { font-size: 9.5px; }
  .modes button { font-size: 10.5px; padding: 0 2px; }
  .modes button .lbl[data-short]::after { font-size: 10.5px; }
}