/* Alarm düzeni (assets/alarm.js): kırmızı = alarm, sarı = yaklaşıyor, gri = normal.
 * Renk TANIMLAMAZ: temadaki değişkenlerden türetir (--red, --amber, --panel, --line, --mut, --ink). Hiçbir işaret yalnız renkle anlatılmaz: metin + simge vardır.
 * Mantıksal özellikler (inline-start/end): sağdan sola dillerde (RTL) kenar çizgisi ve boşluklar kendiliğinden döner. 12 px altı yazı yok. */
:root {
  --alr-kirmizi: var(--red, #c00000);
  --alr-sari: var(--amber, #a86a00);
  --alr-kirmizi-yazi: color-mix(in srgb, var(--alr-kirmizi) 92%, #000);   /* AA: beyaz ve %10 tonlu zeminde 4,5:1 üzeri */
  --alr-sari-yazi: color-mix(in srgb, var(--alr-sari) 78%, #000);
}
/* ---- rozet ---- */
.alr-rz { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: var(--yz-xs, 12px); font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.alr-rz .alr-ik { flex: none; }
.alr-rz-kirmizi { color: var(--alr-kirmizi-yazi); background: color-mix(in srgb, var(--alr-kirmizi) 11%, var(--panel, #fff)); }
.alr-rz-sari { color: var(--alr-sari-yazi); background: color-mix(in srgb, var(--alr-sari) 14%, var(--panel, #fff)); }
.alr-rz-normal { color: var(--mut); font-weight: 400; padding-inline: 0; }

/* ---- satır / kart kenarı: kırmızı ve sarı çizgi (normal satır değişmez) ---- */
.alr-sat-kirmizi { --alr-cizgi: var(--alr-kirmizi); }
.alr-sat-sari { --alr-cizgi: var(--alr-sari); }
/* Satır başı renkli çizgi YOK (alarm; rozet ve hafif zemin rengiyle anlatılır). Eski ekran temalarındaki kırmızı/sarı satır çizgileri de kaldırıldı. */
tr.alr-sat-kirmizi > td { background-image: linear-gradient(color-mix(in srgb, var(--alr-kirmizi) 4%, transparent), color-mix(in srgb, var(--alr-kirmizi) 4%, transparent)); }

/* ---- Dikkat şeridi ---- */
.alr-serit { margin: 0 0 var(--b-4, 16px); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel, #fff); color: var(--ink); }
.alr-serit.alr-var { border-color: color-mix(in srgb, var(--alr-kirmizi) 45%, var(--line)); }
.alr-serit.alr-yakin { border-color: color-mix(in srgb, var(--alr-sari) 45%, var(--line)); }
.alr-serit.alr-bos { display: flex; align-items: center; gap: 6px; padding-block: 6px; border-style: dashed; color: var(--mut); font-size: var(--yz-sm, 13px); }
.alr-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.alr-bas { display: inline-flex; align-items: center; gap: 6px; font-size: var(--yz-md, 14px); }
.alr-var .alr-bas { color: var(--alr-kirmizi-yazi); } .alr-yakin .alr-bas { color: var(--alr-sari-yazi); }
.alr-cipler { display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.alr-cip { display: inline-flex; align-items: stretch; border-radius: 999px; border: 1px solid transparent; overflow: hidden; }
.alr-cip button { font: inherit; font-size: var(--yz-sm, 13px); font-weight: 600; background: transparent; border: 0; color: inherit; padding: 4px 10px; min-height: 32px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.alr-cip button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.alr-cip button:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.alr-cip .alr-cip-ac { padding-inline: 8px; border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.alr-cip .alr-cip-ac[aria-expanded="true"] svg { transform: rotate(180deg); }
.alr-cip-kirmizi { color: var(--alr-kirmizi-yazi); background: color-mix(in srgb, var(--alr-kirmizi) 11%, var(--panel, #fff)); border-color: color-mix(in srgb, var(--alr-kirmizi) 35%, var(--line)); }
.alr-cip-sari { color: var(--alr-sari-yazi); background: color-mix(in srgb, var(--alr-sari) 14%, var(--panel, #fff)); border-color: color-mix(in srgb, var(--alr-sari) 40%, var(--line)); }
.alr-cip b { font-variant-numeric: tabular-nums; font-size: var(--yz-md, 14px); }
.alr-panel { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.alr-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.alr-ul li { border-radius: var(--r-sm); }
.alr-oge { width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: start; background: transparent; border: 0; padding: 7px 10px; color: var(--ink); font: inherit; font-size: var(--yz-sm, 13px); cursor: pointer; border-radius: var(--r-sm); min-height: 40px; }
.alr-oge:hover { background: color-mix(in srgb, var(--navy) 6%, transparent); }
.alr-oge:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.alr-oge-m { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.alr-oge-m small { color: var(--mut); font-size: var(--yz-xs, 12px); }
.alr-oge-t { font-variant-numeric: tabular-nums; text-align: end; }
.alr-oge-t .ap-ikinci { display: block; font-size: var(--yz-xs, 12px); color: var(--mut); }
.alr-hepsi { margin: 6px 10px 2px; font-size: var(--yz-sm, 13px); }
@media (max-width: 600px) { .alr-serit { padding: 10px 12px; } .alr-oge-t { flex-basis: 100%; text-align: start; } }

/* ---- müşteri bazında geciken alacak (Tahsilat, Finans, müşteri kartı, Özet) ---- */
.alr-musteri { margin: 0 0 var(--b-4, 16px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel, #fff); padding: 10px 14px; }
.alr-musteri > h3 { margin: 0 0 6px; font-size: var(--yz-md, 14px); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alr-musteri > h3 small { font-weight: 400; color: var(--mut); font-size: var(--yz-xs, 12px); }
.alr-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; border-radius: var(--r-sm); font-size: var(--yz-sm, 13px); }
.alr-mrow + .alr-mrow { margin-top: 2px; }
.alr-mrow > b { flex: 1 1 140px; min-width: 0; }
.alr-mrow > .alr-mt { text-align: end; font-variant-numeric: tabular-nums; }
.alr-mrow .ap-ikinci { display: block; font-size: var(--yz-xs, 12px); color: var(--mut); }
.alr-mrow button.link { font-size: inherit; }
.alr-kart { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border: 1px solid color-mix(in srgb, var(--alr-kirmizi) 40%, var(--line)); border-radius: var(--r-md); padding: 10px 14px; background: color-mix(in srgb, var(--alr-kirmizi) 5%, var(--panel, #fff)); margin-block: 0 var(--b-3, 12px); }
.alr-kart b { color: var(--alr-kirmizi-yazi); font-variant-numeric: tabular-nums; }
.alr-kart .ap-ikinci { color: var(--mut); font-size: var(--yz-xs, 12px); }

/* ---- menü rozetleri: yalnız alarm sayıları kırmızı, bilgi sayıları nötr gri ---- */
#app :is(.side, .mbar, .nav-grp) .bdg { background: color-mix(in srgb, var(--mut) 20%, var(--panel, #fff)); color: var(--ink); }
#app :is(.side, .mbar, .nav-grp) .bdg.bdg-alarm { background: var(--alr-kirmizi); color: #fff; }

/* ---- Ayarlar: eşik bölümü ---- */
.alr-esik-satir { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; }
.alr-esik-ornek { color: var(--mut); font-size: var(--yz-xs, 12px); margin-block-start: 6px; }

.alr-yan { display: block; margin-block-start: 3px; }
.bg-l li.alr-sat, .alr-mrow.alr-sat { padding-inline-start: 10px; }
.alr-mrow .alr-alt { display: block; color: var(--mut); font-size: var(--yz-xs, 12px); font-weight: 400; }

/* ---- özet kutuları (KPI): değer 0 ise nötr; alarm > 0 ise kırmızı kenar + değer + rozet metni; yaklaşan > 0 ise sarı ---- */
.alr-kutu { position: relative; }
/* Tüm kutuların sol içinde küçük, yuvarlak uçlu çubuk (Acenta ilişkileri'ndeki gibi). Normalde sakin gri-mor; alarm kırmızı, uyarı sarı. */
:is(.stat, .f4-kpi, .e2-k, .r2-k, .alr-kutu) { position: relative; }
:is(.stat, .f4-kpi, .e2-k, .alr-kutu)::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: color-mix(in srgb, var(--navy) 35%, var(--line)); pointer-events: none; }
[dir="rtl"] :is(.stat, .f4-kpi, .e2-k, .alr-kutu)::before { border-radius: 3px 0 0 3px; }
:is(.alr-kutu-kirmizi, .is-kotu, .f4-kpi[data-t="kotu"], .e2-k.kritik)::before { background: var(--alr-kirmizi) !important; }
:is(.alr-kutu-sari, .is-uyari, .f4-kpi[data-t="uyari"])::before { background: var(--alr-sari) !important; }
.alr-kutu .alr-rz { margin-block-start: 4px; align-self: flex-start; width: fit-content; max-width: 100%; }
.alr-kutu.is-kotu b, .alr-kutu.is-kotu .f4-kpi-v, .alr-kutu.is-kotu .stat-v { color: var(--alr-kirmizi-yazi); }
.alr-kutu.is-uyari b, .alr-kutu.is-uyari .f4-kpi-v { color: var(--alr-sari-yazi); }

/* ---- Eski ekran temalarındaki satır başı kırmızı / sarı çizgiler kaldırıldı (seçili satır çizgisi .on kalır) ---- */
#app :is(tr.late, tr.soguk, tr.bekliyor, .sg-s-kritik, .sg-s-orta, .sg-s-hafif, .e2-sol) > :is(td, th) { box-shadow: none !important; }
#app :is(.gv-satir.late, .e2-kartli .e2-sol, tr.late:not(.on), tr.late.th-late) { box-shadow: none !important; }

/* ---- Alarmlar sayfası ---- */
.alr-sayfa .alr-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--mut); margin-block-end: 12px; }
.alr-sayfa .e2-k.on { box-shadow: inset 0 -3px 0 var(--navy); }

/* ---- Menü / sekme rozetleri: rakam kutunun tam ortasında (inline-block + satır yüksekliği yazı tipine göre kayıyordu) ---- */
.bdg { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 18px; min-width: 18px; padding: 0 6px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bdg[hidden] { display: none !important; }
.mbar .bdg, #app[data-dar="1"] .side .si .bdg { height: 16px; min-width: 16px; line-height: 1; }
#app[data-dar="1"] .side-cekmece .si .bdg { height: 18px; min-width: 18px; line-height: 1; }

/* ---- E-posta: sütunlar taşmaz, yazı sığar ---- */
.ep select, .ep input { max-width: 100%; box-sizing: border-box; text-overflow: ellipsis; }
.ep-m b, .ep-m span, .ep-m small, .ep-okuma, .ep-okuma h3, .ep-okuma h4 { overflow-wrap: anywhere; }
.ep-okuma { min-width: 0; }
.ep-okuma article, .ep-govde { max-width: 100%; min-width: 0; }
.ep-okuma iframe { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
@media (min-width: 901px) and (max-width: 1250px) { .ep { grid-template-columns: minmax(150px, 180px) minmax(220px, 280px) minmax(0, 1fr); } }
.ep-okuma .dt-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-okuma article small { display: block; overflow-wrap: anywhere; }
@media (max-width: 900px) { .ep > *, .wa > * { max-width: 100%; } .ep-okuma { padding-inline: 12px; } }

/* ===== E-posta (Outlook düzeni): .ox — araç çubuğu + klasör ağacı + ileti listesi + okuma bölmesi; telefonda tek sütun (liste → okuma) ===== */
.ox { grid-template-columns: minmax(170px, 210px) minmax(260px, 370px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "bar bar bar" "k l o"; }
.ox > .ox-bar { grid-area: bar; display: flex; align-items: center; gap: 6px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; border-inline-end: 0; border-bottom: 1px solid var(--line); background: var(--panel); }
.ox > .ox-k { grid-area: k; background: color-mix(in srgb, var(--mut) 6%, var(--panel)); }
.ox > .ox-l { grid-area: l; display: flex; flex-direction: column; overflow: hidden; }
.ox > .ox-o { grid-area: o; padding: 0; }
.ox-bar button { flex: none; }
.ox-bar button:disabled { opacity: .45; cursor: default; }
.ox-ay { flex: none; width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.ox-geri { display: none; }
.ox-hesap { padding: 10px; }
.ox-hesap select { width: 100%; }
.ox-kl { display: block; }
.ox-kb { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-inline-start: 3px solid transparent; font-size: 14px; }
.ox-kb.on { border-inline-start-color: var(--navy); color: var(--navy); font-weight: 600; background: color-mix(in srgb, var(--navy) 9%, var(--panel)); }
.ox-say { color: var(--mut); font-size: 12px; }
.ox-kb .bdg { font-size: 12px; line-height: 18px; }
.ox-alt { padding: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ox-hata { color: #C00000; }
.ox-ara { padding: 10px 10px 6px; flex: none; }
.ox-ara input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ox-suz { display: flex; align-items: center; gap: 6px; padding: 4px 10px 8px; flex: none; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.ox-hepsi { display: flex; align-items: center; justify-content: center; width: 28px; }
.ox-chip { padding: 3px 10px; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: inherit; cursor: pointer; }
.ox-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.ox-suz select { margin-inline-start: auto; font-size: 12px; padding: 3px 6px; max-width: 110px; }
.ox-not { flex: none; color: var(--mut); font-size: 12px; padding: 0 12px; }
.ox-not:not(:empty) { padding-block: 6px; border-bottom: 1px solid var(--line); }
.ox-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ox-liste:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.ox-m { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, var(--panel)); border-inline-start: 3px solid transparent; cursor: pointer; padding: 8px 10px 8px 4px; }
.ox-m:hover { background: color-mix(in srgb, var(--mut) 7%, var(--panel)); }
.ox-m.on { background: color-mix(in srgb, var(--navy) 11%, var(--panel)); }
.ox-m.sec { background: color-mix(in srgb, var(--navy) 6%, var(--panel)); }
.ox-m.yeni { border-inline-start-color: var(--navy); }
.ox-ch { display: flex; align-items: center; justify-content: center; height: 22px; cursor: pointer; }
.ox-mg { min-width: 0; }
.ox-s1, .ox-s2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ox-s1 b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; }
.ox-m.yeni .ox-s1 b, .ox-m.yeni .ox-konu { font-weight: 700; color: var(--navy); }
.ox-s1 time { flex: none; font-size: 12px; color: var(--mut); }
.ox-durum { flex: none; font-size: 12px; color: var(--mut); }
.ox-konu { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ox-ek-i { flex: none; color: var(--mut); display: inline-flex; }
.ox-yildiz { flex: none; background: none; border: 0; padding: 0 2px; font-size: 16px; line-height: 1; color: var(--mut); cursor: pointer; }
.ox-yildiz.on { color: var(--navy); }
.ox-s3 { font-size: 12px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-daha { margin: 10px; }
.ox-bosl, .ox-bosoku { padding: 16px; }
.ox-ob { padding: 14px 18px 24px; min-width: 0; }
.ox-bs { margin: 0 0 6px; font-size: 18px; overflow-wrap: anywhere; }
.ox-ms { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); max-width: 100%; min-width: 0; overflow: hidden; }
.ox-bas { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, var(--panel)); }
.ox-av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.ox-bk { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ox-adr, .ox-al, .ox-tar { color: var(--mut); font-size: 12px; }
.ox-tar { flex: none; text-align: end; max-width: 40%; overflow-wrap: anywhere; }
.ox-ms .ep-govde { padding: 4px 8px 8px; }
.ox-metin { white-space: pre-wrap; font: inherit; margin: 8px 4px; overflow-wrap: anywhere; }
.ox-ekler { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ox-ekler li { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; overflow-wrap: anywhere; }
.ox-klip { vertical-align: -2px; }
@media (min-width: 901px) and (max-width: 1250px) { .ox { grid-template-columns: minmax(150px, 180px) minmax(220px, 300px) minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ep.ox { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "bar" "k" "main"; height: calc(100vh - 130px); height: calc(100dvh - 130px); min-height: 420px; }
  .ox > .ox-k { grid-area: k; max-height: none; border-inline-end: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .ox > .ox-l, .ox > .ox-o { grid-area: main; max-height: none; border-inline-end: 0; border-bottom: 0; }
  .ox[data-g="liste"] > .ox-o, .ox[data-g="oku"] > .ox-k, .ox[data-g="oku"] > .ox-l { display: none; }
  .ox[data-g="oku"] .ox-geri { display: inline-flex; }
  .ox-kl { display: flex; overflow-x: auto; padding: 0 8px 8px; gap: 6px; }
  .ox-kb { width: auto; flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
  .ox-kb.on { border-color: var(--navy); }
  .ox-alt { flex-direction: row; flex-wrap: wrap; gap: 14px; padding: 0 12px 8px; }
  .ox-hesap { padding: 8px; }
  .ox-ob { padding: 12px; }
  .ox-bas { flex-wrap: wrap; }
  .ox-tar { max-width: none; text-align: start; flex-basis: 100%; }
}