/* ══════════════════════════════════════════════════════════════
   PORTAL · ARAYÜZ DÜZELTMELERİ
   --------------------------------------------------------------
   index.html'deki ana stil bloğundan SONRA yüklenir ve yalnız
   gereken kuralları ezer. (24 Eylül 2026)

   1) Açılır pencere başlıkları: başlık solda, X sağda, üstte sabit
   2) Bildirim ve şimşek pencerelerinde sıkışan ikonlar
   3) Logo: tam daire (logo-daire.png)
   4) Üst menü: "Bir Çiçek Koleji Anaokulu Yönetim Sistemi" (Exo 2 Black)
   ══════════════════════════════════════════════════════════════ */

/* ── 1) Açılır pencere başlığı ─────────────────────────────── */
.modal > .modal-header,
.modal-box > .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;                         /* satır içi renkli zemin varsa o kalır */
  border-bottom: 1px solid var(--gray-100, #F1F2F7);
}
.modal > .modal-header {
  /* Kaydırılan kutunun dolgusu 40px: yapışkan başlık dolgu kenarına otursun */
  top: -40px;
  margin: -40px -40px 24px;
  padding: 18px 18px 16px 28px;
  border-radius: var(--radius-lg, 24px) var(--radius-lg, 24px) 0 0;
}
.modal-box > .modal-header {
  margin: 0;
  padding: 16px 16px 14px 22px;
  border-radius: 18px 18px 0 0;
}
.modal > .modal-header > h2,
.modal > .modal-header > h3,
.modal-box > .modal-header > h2,
.modal-box > .modal-header > h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.modal > .modal-header > .modal-header-row {
  flex: 1;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
}
.modal-header .modal-header-row h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

/* X düğmesi — tüm pencerelerde aynı */
.modal-header .close-btn,
.modal-header .btn-close {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, .06);
  color: var(--ink-soft, #4A5169);
  font: 400 24px/1 var(--font-body, system-ui, sans-serif);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.modal-header .close-btn:hover,
.modal-header .btn-close:hover {
  background: rgba(15, 23, 42, .12);
  color: var(--ink, #1F2544);
}
.modal-header .close-btn:focus-visible,
.modal-header .btn-close:focus-visible {
  outline: 3px solid var(--green-light, #C9D1F0);
  outline-offset: 2px;
}

.modal-footer { flex-wrap: wrap; }

@media (max-width: 768px) {
  .modal-overlay { padding: 12px; }
  .modal > .modal-header {
    top: -24px;
    margin: -24px -24px 18px;
    padding: 14px 12px 12px 20px;
  }
  .modal > .modal-header > h2,
  .modal > .modal-header > h3 { font-size: 16.5px; }
}

/* ── 2) Bildirim penceresi: ikon ve X sıkışmasın ───────────── */
#zekyVeliBildirimPopup .zvo-popup-ikon,
#zekyVeliBildirimPopup [data-kapat] {
  flex-shrink: 0;
}
#zekyVeliBildirimPopup [data-kapat] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #4C5D53;
}

/* Kodla açılan diğer pencereler (gözlem, izin, rapor, randevu, QR):
   yuvarlak kapat düğmeleri ve sabit boyutlu ikon kutuları uzun başlıkta sıkışmasın */
button[style*="border-radius:50%"],
button[style*="border-radius: 50%"],
div[style*="place-items:center"][style*="width:"],
div[style*="place-items: center"][style*="width:"] {
  flex-shrink: 0;
}

/* ── 3) Logo: tam daire ────────────────────────────────────── */
.modal-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-logo img,
.veli-sidebar-logo img {
  border-radius: 50%;
  object-fit: cover;
}
.veli-sidebar-logo img {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* ── 4) Üst menü ───────────────────────────────────────────── */
.dash-logo {
  gap: 12px;
  min-width: 0;
}
.dash-logo img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dash-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}
.dash-marka {
  font-family: "Exo 2", var(--font-display, sans-serif);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: .1px;
  color: var(--green-deep, #1F2544);
}
.dash-logo-text small#dashPanelEtiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: #E8F3EC;
  color: #2D5E3E;
  font: 600 12.5px/1.35 var(--font-body, system-ui, sans-serif);
  letter-spacing: 0;
  text-transform: none;
}
.dash-logo-text small#dashPanelEtiket::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4A7C59;
}
@media (max-width: 900px) {
  .dash-marka { font-size: 16px; }
  .dash-marka > span { display: block; }
}
/* Telefon: TEK satır — logo · başlık (2 satır) + rol etiketi · simge düğmeler.
   Yazı boyutu ekran genişliğiyle orantılı (clamp), hiçbir şey alta kaymaz. */
@media (max-width: 600px) {
  .dash-header { padding: 8px 0; }
  .dash-header-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
  }
  .dash-logo { display: flex; flex: 1 1 auto; min-width: 0; gap: 9px; }
  .dash-logo img { width: clamp(34px, 9.5vw, 42px); height: clamp(34px, 9.5vw, 42px); }
  .dash-logo-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .dash-marka { font-size: clamp(12px, 3.5vw, 16px); line-height: 1.12; letter-spacing: 0; }
  .dash-marka > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-logo-text small#dashPanelEtiket {
    font-size: clamp(10.5px, 2.9vw, 12px);
    padding: 1px 8px 1px 6px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dash-logo-text small#dashPanelEtiket::before { width: 5px; height: 5px; flex-shrink: 0; }
  .user-menu { flex: 0 0 auto; gap: 6px; }
  .user-menu .user-badge { padding: 3px; gap: 0; }
  /* ad ve rol yazısı gizli (rol zaten etikette); yalnız baş harf kalır */
  .user-menu .user-badge > :not(.user-avatar) { display: none !important; }
  .user-menu .user-avatar { width: 30px; height: 30px; }
  /* Fiş Ekle ve Çıkış: yalnız simge (yazı ekran okuyucuda kalır) */
  .user-menu > .btn-mini { font-size: 0; width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; line-height: 0; }
  .user-menu > .btn-mini svg { width: 18px; height: 18px; margin: 0; }
  .user-menu > .btn-logout {
    font-size: 0; width: 38px; height: 38px; padding: 0;
    display: inline-grid; place-items: center; border-radius: 10px; color: var(--gray-500, #64748B);
  }
  .user-menu > .btn-logout::before {
    content: "";
    width: 19px; height: 19px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@media (max-width: 380px) {
  .dash-header-inner { gap: 8px; padding: 0 10px; }
  .user-menu { gap: 4px; }
  .user-menu > .btn-mini, .user-menu > .btn-logout { width: 34px; height: 34px; }
}

/* ── 5) Özet sayfası karşılama satırı: sınıf etiketi adı sıkıştırmasın ── */
.cicek-app .ca-topbar { flex-wrap: wrap; gap: 10px 12px; }
.cicek-app .ca-topbar > .ca-row { flex: 1 1 auto; min-width: 0; }
.cicek-app .ca-topbar > .ca-row h2 { overflow-wrap: anywhere; }
.cicek-app .ca-topbar > .ca-pill { white-space: normal; line-height: 1.4; max-width: 100%; }

/* ── 6) Hızlı işlem etiketleri: "Galeri Y…" gibi kesilmesin, gerekirse iki satır ── */
.cicek-app .ca-qlabel {
  white-space: normal;
  text-overflow: clip;
  text-align: center;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: normal;
}


/* ── 7) Yönetim ekranları · mobil yatay taşma koruması ─────────────
   Amaç: sayfanın tamamı sağa-sola kaçmasın; yalnız gerçekten geniş veri
   bileşenleri (tablo/sekme şeridi vb.) kendi içinde yatay kayabilsin. */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  #dashboard,
  #dashboard.active,
  #dashboard .dash-header,
  #dashboard .dash-header-inner,
  #dashboard .dash-container,
  #dashboard .tab-panel,
  #dashboard .cicek-app {
    max-width: 100%;
    min-width: 0;
  }

  #dashboard {
    width: 100%;
    overflow-x: hidden;
  }

  #dashboard .dash-container {
    width: 100%;
  }

  #dashboard .tab-panel > * {
    max-width: 100%;
    min-width: 0;
  }

  #dashboard img,
  #dashboard video,
  #dashboard iframe,
  #dashboard canvas {
    max-width: 100%;
  }

  #dashboard input,
  #dashboard select,
  #dashboard textarea {
    max-width: 100%;
  }

  /* Geniş veri tabloları sayfayı değil, yalnız kendi alanını kaydırır. */
  #dashboard .tab-panel table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Öğrenci listesi üst araçları: masaüstü tek satırı mobilde taşmasın. */
  #tab-ogrenciler .toolbar-yeni .tb-satir-ust {
    width: 100%;
    align-items: stretch;
  }

  #tab-ogrenciler .toolbar-yeni .tb-arama {
    flex: 1 1 100%;
    min-width: 0;
  }

  #tab-ogrenciler .ogrenci-arac-grubu {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #tab-ogrenciler .ogrenci-arac-grubu > .donem-selector {
    flex: 1 1 220px;
    min-width: 0;
  }

  #tab-ogrenciler .ogrenci-arac-grubu > button {
    flex: 1 1 145px;
    min-width: 0;
    justify-content: center;
  }

  /* Dinamik yönetim modüllerindeki masaüstü 2+ sütunlar dar ekranda tek sütun. */
  #geriBildirimIcerik > div[style*="minmax(300px,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  #programBelgelemeIcerik [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── 8) Personel + veli ekranları · mobil yatay taşma koruması ───────── */
@media (max-width: 768px) {
  /* Personel rolleri yönetim kabuğunu kullanıyor: dış sayfa sabit, iç geniş alanlar lokal kayar. */
  body.rol-ogretmen #dashboard,
  body.rol-danisma #dashboard,
  body.rol-muhasebe #dashboard,
  body.rol-pdr #dashboard,
  body.rol-egitim_koordinator #dashboard,
  body.rol-mudur #dashboard {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.rol-ogretmen #dashboard .tab-panel,
  body.rol-danisma #dashboard .tab-panel,
  body.rol-muhasebe #dashboard .tab-panel,
  body.rol-pdr #dashboard .tab-panel,
  body.rol-egitim_koordinator #dashboard .tab-panel,
  body.rol-mudur #dashboard .tab-panel {
    min-width: 0;
    max-width: 100%;
  }

  /* Personel kart/listeleri dar telefonda minimum kolon yüzünden taşmasın. */
  #tab-personel .personel-liste {
    grid-template-columns: 1fr !important;
  }
  #tab-personel .personel-hero-metin {
    min-width: 0 !important;
  }
  #tab-personel .personel-durum-sekmeleri {
    flex-wrap: wrap;
    max-width: 100%;
  }

  /* Veli portalı kök kabuk: tüm sayfa yatayda sabit. */
  #veliPanel,
  #veliPanel.active,
  #veliPanel .veli-layout,
  #veliPanel .veli-main,
  #veliPanel .veli-tab-panel,
  #veliPanel .cicek-app,
  #veliPanel .ca-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #veliPanel {
    overflow-x: hidden;
  }

  #veliPanel .veli-main,
  #veliPanel .veli-tab-panel {
    overflow-x: hidden;
  }

  #veliPanel .veli-tab-panel > *,
  #veliPanel .veli-card,
  #veliPanel .ca-card,
  #veliPanel .dash-karti {
    max-width: 100%;
    min-width: 0;
  }

  #veliPanel img,
  #veliPanel video,
  #veliPanel iframe,
  #veliPanel canvas {
    max-width: 100%;
  }

  #veliPanel input,
  #veliPanel select,
  #veliPanel textarea,
  #veliPanel button {
    max-width: 100%;
  }

  /* Geniş tablolar veli sayfasını değil kendi alanını kaydırır. */
  #veliPanel .veli-tab-panel table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Eski sekmelerdeki geri çubuğu zil/başlıkla birlikte ekrana sığdır. */
  #veliPanel .zeky-geri-bar {
    min-width: 0;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  #veliPanel .zeky-geri-bar .zeky-geri-baslik {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #veliPanel .zeky-geri-bar button {
    flex-shrink: 0;
  }

  /* Veli Okul Hayatı tarih/hafta kontrolleri küçük ekranı genişletmesin. */
  #veliZamanAyEtiketi,
  #veliYemekHaftaEtiketi,
  #veliDevamsizlikAyEtiketi {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Mesajlaşma: liste/sohbet geçişi mobilde tek panel olarak kalsın. */
  #veliPanel .mesaj-konteyner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #veliPanel .mesaj-liste-panel,
  #veliPanel .mesaj-sohbet-panel {
    max-width: 100%;
    min-width: 0;
  }

  /* Rapor ve gelişim kartlarında minimum grid kolonları dar ekranı zorlamasın. */
  #veliPanel .rapor-disiplin-grid {
    grid-template-columns: 1fr !important;
  }
  #veliPanel .veli-card-grid-2,
  #veliPanel .veli-gelisim-radar-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9) Yüklenen veri genişliği belirlemesin ──────────────────────
   1fr'nin otomatik min-content alt sınırı boş kartta görünmez. Canlı
   veri gelince tüm sütunu büyütür; dış overflow:hidden bunu yalnızca
   keser. Sütunları ve iç flex/grid çocuklarını gerçekten küçült. */
.ozet-v2,
.ozet-v2 :is(.ozet-panel, .kpi-kart, .ozet-ikili-sol, .ozet-ikili-sag,
  .ozet-gunplan, .ozet-grafik-kol, .ozet-ogr-stat),
.cicek-app :is(.ca-page, .ca-stack, .ca-hero-row, .ca-dash, .ca-card,
  .ca-card-green, .ca-card-cocoa, .ca-card-lavender, .ca-grid-2,
  .ca-statpills, .ca-mini-grid, .ca-rings),
.cicek-app :is(.ca-row, .ca-sectionhead, .ca-topbar, .ca-hero-row, .ca-grid-2,
  .ca-statpills, .ca-mini-grid, .ca-rings, .ca-ring, .ca-msgitem) > * {
  min-width: 0;
  max-width: 100%;
}
.ozet-v2,
.cicek-app :is(.ca-card, .ca-card-green, .ca-card-cocoa, .ca-card-lavender) {
  overflow-wrap: anywhere;
}
.ozet-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ozet-orta-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.ozet-alt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ozet-ikili-alt, .ozet-donut-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ozet-hizli-islem { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cicek-app .ca-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cicek-app .ca-hero-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cicek-app :is(.ca-row, .ca-sectionhead, .ca-topbar) { overflow-wrap: anywhere; }
.cicek-app .ca-sectionhead { flex-wrap: wrap; gap: 8px 12px; }
.cicek-app .ca-avatar { flex-shrink: 0; }
.cicek-app .ca-statpills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cicek-app .ca-mini-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.cicek-app .ca-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cicek-app :is(.ca-statpill, .ca-ring, .ca-msgitem) { overflow-wrap: anywhere; }
.cicek-app .ca-search input { min-width: 0; width: 0; }
.ozet-panel-head, .portal-summary-heading { flex-wrap: wrap; gap: 8px 12px; }
.ozet-panel-head > div, .portal-summary-heading > div { min-width: 0; max-width: 100%; }
.ozet-panel-etiket { max-width: 100%; white-space: normal; }
.ozet-legend, .kpi-buyuk-row, .kpi-dark-alt { flex-wrap: wrap; }
.ozet-legend { gap: 8px 16px; }
.ozet-gunplan-satir { gap: 10px; align-items: flex-start; }
.ozet-gunplan-satir > :first-child, .ozet-yemek-satir > :last-child { min-width: 0; }
.ozet-gunplan-saat { flex-shrink: 0; }
.ozet-grafik { gap: clamp(4px, 1vw, 14px); }
.ozet-grafik-deger { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.ozet-hizli-btn { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ozet-dg-ad { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.ozet-dg-gun { flex-shrink: 0; }
.portal-pickup-body, [data-sabah-ogrenci] > div { overflow-wrap: anywhere; }
.portal-attendance-actions > button { max-width: 100%; white-space: normal; }

/* Legacy chat is used by all three role shells. Keep the send/attachment
   controls reachable when a recipient or message contains a long token. */
.mesaj-sohbet-giris textarea { min-width: 0; width: 0; }
.mesaj-sohbet-baslik, .mesaj-sohbet-ad, .mesaj-sohbet-alt,
.mesaj-balon, .mesaj-balon > * { min-width: 0; overflow-wrap: anywhere; }
.mesaj-sohbet-baslik > div { min-width: 0; }

@media (max-width: 1100px) {
  .ozet-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .ozet-orta-grid, .ozet-alt-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ozet-ikili-alt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .cicek-app .ca-hero-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .ozet-panel { padding: 16px; }
  .ozet-donut-legend { grid-template-columns: minmax(0, 1fr); }
  #aylikOzetAyEtiketi, #yemekHaftaEtiketi {
    min-width: 0 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 600px) {
  /* Actions get their own row instead of squeezing names or leaving the card.
     Applies to admin, reception, teacher and reparented detail-sheet cards. */
  .portal-pickup-row {
    display: grid !important;
    grid-template-columns: 28px 42px minmax(0, 1fr);
    align-items: start !important;
  }
  .portal-pickup-name { white-space: normal !important; overflow: visible !important; }
  .portal-pickup-actions {
    grid-column: 2 / -1;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
  .portal-pickup-actions > *,
  #okulZiliListe .portal-pickup-actions > button { max-width: 100%; white-space: normal !important; }
  .portal-attendance-actions > button { flex: 1 1 140px !important; min-width: 0 !important; }
}
@media (max-width: 560px) {
  .ozet-kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .cicek-app .ca-mini-grid, .cicek-app .ca-rings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  [data-sabah-ogrenci] { flex-wrap: wrap; }
  [data-sabah-ogrenci] > div:nth-child(2) { flex-basis: calc(100% - 40px) !important; }
  [data-sabah-ogrenci] > :last-child { margin-left: 40px; max-width: calc(100% - 40px); }
}

/* Legacy parent details/settings are outside the modern theme namespace. */
#veliPanel .veli-card { overflow-wrap: anywhere; }
#veliPanel .veli-card-grid-2 > * { min-width: 0; max-width: 100%; }

/* Plain legacy cards and injected fragments share the same shrink contract.
   Intentional nowrap tables and independently scrollable timelines retain it. */
#dashboard .tab-panel, #veliPanel .veli-tab-panel { overflow-wrap: anywhere; }
#dashboard .tab-panel :is([style*="display:grid"], [style*="display: grid"]) > *,
#veliPanel .veli-tab-panel :is([style*="display:grid"], [style*="display: grid"]) > *,
.rapor-metrik-grid > *, .rapor-grid-2 > *, .rapor-grid-3 > *,
.rapor-karti, .rapor-metrik, .portal-form-grid > * { min-width: 0; }
.rapor-karti, .rapor-metrik { overflow-wrap: anywhere; }
.rapor-metrik-row, .rapor-karti-header { flex-wrap: wrap; gap: 8px; }
.portal-form-grid :is(input,select,textarea) { min-width: 0; width: 100%; box-sizing: border-box; }
.portal-week-navigation { min-width: 0; max-width: 100%; }
.portal-week-navigation > span { min-width: 0; white-space: normal !important; text-align: center; }
.portal-week-navigation > button { flex-shrink: 0; }
.portal-week-days > button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .portal-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 420px) {
  .portal-profile-leave-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Body-level detail dialogs cannot inherit a page's wrapping contract. */
.po-cekmece, .dok-panel, .gn-pencere, .zrv-pencere, .zego-kart {
  min-width: 0;
  overflow-wrap: anywhere;
}
.zego-bas { min-width: 0; }
.zego-kapat { flex-shrink: 0; }