/* azatech – SATIŞ EKRANLARI TASARIM KATMANI (6 Kasım)
 * Kapsam: Bugün, Özet, Potansiyel müşteriler, Teklifler, Teklif oluştur, Satışlar, Bina şeması, Fiyat listesi, Envanter, Daireler,
 *         Müşteriler/Fırsatlar, Takvim, Görevler. Bu ekranların <main> öğesi app.js'te data-satis alır; kurallar yalnız onun içinde geçerlidir,
 *         diğer ekranlar (muhasebe, harcama, belge çıktıları, teklif bağlantı sayfası) etkilenmez.
 * Renk TANIMLAMAZ: yalnız tema değişkenleri (--navy, --line, --panel, --ink, --mut, --red, --green, --amber). 9 tema ve RTL çalışır (mantıksal özellikler).
 * Ölçek: aralık 4·8·12·16·24 (--b-*), köşe 8 (denetim) / 12 (kutu), yazı 12·13·14·16·22 (--yz-*), denetim yüksekliği 36 px (dokunmada 40).
 * Bileşenler: sayfa başlığı · araç çubuğu (arama + süzgeç + eylem) · tablo · durum rozeti · boş durum · KPI şeridi · iki sütunlu kart ızgarası. */

#app main[data-satis] {
  --sd-h: 36px;                       /* denetim (girdi, düğme, süzgeç) yüksekliği */
  --sd-r: 8px;                        /* denetim köşesi */
  --sd-kutu: var(--r-lg, 12px);       /* kutu / tablo köşesi */
  --sd-zemin: color-mix(in srgb, var(--navy) 4%, var(--panel, #fff));    /* tablo başlığı, soluk yüzey */
  --sd-cizgi: color-mix(in srgb, var(--navy) 9%, var(--line));            /* satır ayracı */
  --sd-vurgu: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff));     /* seçili süzgeç, üzerine gelinen satır */
}

/* ================= SAYFA BAŞLIĞI (kabuktaki .pg-bas; yalnız bu ekranlarda) ================= */
#app:has(main[data-satis]) .pg-bas { padding-top: 20px; padding-bottom: 4px; gap: 12px 16px; }
#app:has(main[data-satis]) .pg-bas h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
#app:has(main[data-satis]) .pg-bas-et { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--mut); }
#app:has(main[data-satis]) .pg-yildiz { min-height: 32px; border-color: transparent; background: transparent; color: var(--mut); font-weight: 550; border-radius: var(--sd-r, 8px); }
#app:has(main[data-satis]) .pg-yildiz:hover { background: color-mix(in srgb, var(--navy) 6%, transparent); border-color: transparent; color: var(--ink); }
#app:has(main[data-satis]) .pg-yildiz.on { background: color-mix(in srgb, var(--amber, #a86a00) 10%, transparent); border-color: transparent; color: var(--amber, #8a5a00); }
@media (max-width: 760px) { #app:has(main[data-satis]) .pg-bas h1 { font-size: 22px; } }

/* sayfa içi başlık bandı (.page-head): özet cümlesi solda, tek ana eylem sağda */
#app main[data-satis] .page-head { min-height: 0; margin: 4px 0 var(--b-4, 16px); gap: var(--b-2, 8px) var(--b-4, 16px); align-items: center; }
#app main[data-satis] .page-head-m { flex: 1 1 320px; }
#app main[data-satis] .page-head-o { font-size: 14px; line-height: 1.45; color: var(--mut); white-space: normal; overflow: visible; text-overflow: clip; max-width: 68ch; }
#app main[data-satis] .page-head-a { gap: var(--b-2, 8px); }

/* ================= DENETİMLER: düğme, girdi, seçici (ortak ölçü) ================= */
#app main[data-satis] :is(.primary, .ghost, .link-d):not(.sy-dz *):not(.acts-menu *) { border-radius: var(--sd-r); }
#app main[data-satis] :is(.tk-bar, .list-bar, .page-head-a, .kutu-bas) :is(.primary, .ghost) { min-height: var(--sd-h); padding-block: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; }
#app main[data-satis] :is(.tk-bar, .list-bar) :is(.primary, .ghost).sm { padding-inline: 14px; }
#app main[data-satis] .ghost { background: var(--panel, #fff); border: 1px solid var(--line); color: var(--ink); }
#app main[data-satis] .ghost:hover { background: var(--sd-zemin); border-color: color-mix(in srgb, var(--navy) 30%, var(--line)); }
#app main[data-satis] .primary:hover:not(:disabled) { filter: brightness(1.12); }
#app main[data-satis] :is(input[type=search], input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], select, textarea):not(.grid *):not(.fl-ed *) {
  min-height: var(--sd-h); border: 1px solid var(--line); border-radius: var(--sd-r); background-color: var(--panel, #fff); padding-inline: 12px; font-size: 14px; color: var(--ink);
  transition: border-color var(--hrk, 150ms), box-shadow var(--hrk, 150ms);
}
#app main[data-satis] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):focus-visible { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
#app main[data-satis] input::placeholder { color: color-mix(in srgb, var(--mut) 80%, transparent); }
/* arama kutusu: sol içinde büyüteç (mantıksal: RTL'de sağa geçer) */
#app main[data-satis] input[type=search], #app main[data-satis] :is(#tq, #slq, #bvQ, #cq, #lQ, #invQ) {
  padding-inline-start: 36px; width: min(100%, 320px); flex: 0 1 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2367615B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px 50%; background-size: 16px;
}
[dir="rtl"] #app main[data-satis] :is(input[type=search], #tq, #slq, #bvQ, #cq, #lQ, #invQ) { background-position: calc(100% - 12px) 50%; padding-inline-start: 12px; padding-inline-end: 36px; }
#app main[data-satis] input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
#app main[data-satis] .chk { display: inline-flex; align-items: center; gap: 8px; min-height: var(--sd-h); padding-inline: 12px; border: 1px solid var(--line); border-radius: var(--sd-r); background: var(--panel, #fff); font-size: 13px; color: var(--ink); cursor: pointer; }
#app main[data-satis] .chk:hover { background: var(--sd-zemin); }
#app main[data-satis] .chk:has(input:checked) { border-color: color-mix(in srgb, var(--navy) 45%, var(--line)); background: var(--sd-vurgu); color: var(--navy); font-weight: 600; }
#app main[data-satis] .chk input { margin: 0; accent-color: var(--navy); }

/* ================= ARAÇ ÇUBUĞU: arama + süzgeç çipleri + eylemler ================= */
#app main[data-satis] .tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px) var(--b-3, 12px); margin: 0 0 var(--b-3, 12px); padding: 0; }
#app main[data-satis] :is(.inv-bar, .list-bar) { align-items: center; }
#app main[data-satis] :is(.inv-bar, .list-bar) input[type=search], #app main[data-satis] :is(#invQ, #lQ) { flex: 0 1 240px; width: min(100%, 240px); }   /* tam genişlik, yapışkan çubuklar: yerleşim eski kuralda kalır */
#app main[data-satis] :is(.tk-bar, .inv-bar, .list-bar) > .sp { flex: 1 1 0; }
#app main[data-satis] .tk-bar > :is(#bvYeni, #tvEkle, .xls) { order: 20; margin-inline-start: auto; }
#app main[data-satis] .tk-bar > :is(#bvH, .chk, #yetimTemizle, [id*=ilen]) { order: 10; }
#app main[data-satis] .tk-bar:has(> #bvYeni) > .chips { order: 30; flex: 1 1 100%; }   /* potansiyel müşteriler: 1. satır arama + eylemler, 2. satır süzgeçler */
#app main[data-satis] .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#app main[data-satis] .chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel, #fff); color: var(--ink); font-size: 13px; font-weight: 550; line-height: 1; transition: background var(--hrk, 150ms), border-color var(--hrk, 150ms);
}
#app main[data-satis] .chip:hover { background: var(--sd-zemin); border-color: color-mix(in srgb, var(--navy) 30%, var(--line)); }
#app main[data-satis] .chip.on { background: var(--sd-vurgu); border-color: color-mix(in srgb, var(--navy) 55%, var(--line)); box-shadow: none; color: var(--navy); font-weight: 650; }
#app main[data-satis] .chip b { margin: 0; min-width: 20px; padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 8%, transparent); color: var(--mut); font-size: 12px; font-weight: 650; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
#app main[data-satis] .chip.on b { background: var(--navy); color: #fff; }
#app main[data-satis] .chip.hot:not(.on) { border-color: color-mix(in srgb, var(--amber, #a86a00) 45%, var(--line)); }
#app main[data-satis] .chip.hot b { background: color-mix(in srgb, var(--amber, #a86a00) 14%, transparent); color: var(--amber, #8a5a00); }
#app main[data-satis] .chip.hot.on b { background: var(--navy); color: #fff; }
/* envanter durum çipleri: yalnız sayının rengi (zemin değişmez) */
#app main[data-satis] .chip.st-ok b { color: var(--green, #1a7f4b); } #app main[data-satis] .chip.st-opt b, #app main[data-satis] .chip.st-res b { color: var(--amber, #8a5a00); } #app main[data-satis] .chip.st-sold b { color: var(--red); }
#app main[data-satis] .chip.on[class*="st-"] b { color: #fff; }
#app main[data-satis] .tk-bar .help, #app main[data-satis] .lcount { font-size: 13px; color: var(--mut); }

/* ================= TABLO: tek görünüm (40-52 px satır, sabit başlık, hafif ayraç) ================= */
#app main[data-satis] .tbl-x { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--sd-kutu); box-shadow: var(--g-1); }
#app main[data-satis] :is(table.tk, table.ltab) thead th:first-child { border-start-start-radius: calc(var(--sd-kutu) - 1px); } #app main[data-satis] :is(table.tk, table.ltab) thead th:last-child { border-start-end-radius: calc(var(--sd-kutu) - 1px); }
#app main[data-satis] :is(table.tk, table.ltab) { font-size: 14px; }
#app main[data-satis] :is(table.tk, table.ltab) thead th {
  background: var(--sd-zemin); color: var(--mut); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 10px 12px; line-height: 1.3;
  border-top: 0; border-bottom: 1px solid var(--sd-cizgi); white-space: nowrap;
}
#app main[data-satis] :is(table.tk, table.ltab) thead th:hover { background: color-mix(in srgb, var(--navy) 7%, var(--panel, #fff)); }
#app main[data-satis] :is(table.tk, table.ltab) tbody td { padding: 12px; border-top: 0; border-bottom: 1px solid var(--sd-cizgi); vertical-align: middle; line-height: 1.4; background: transparent; }
#app main[data-satis] :is(table.tk, table.ltab) tbody tr:last-child td { border-bottom: 0; }
#app main[data-satis] :is(table.tk, table.ltab) tbody tr:hover td { background: var(--sd-vurgu); }
#app main[data-satis] :is(table.tk, table.ltab) td small, #app main[data-satis] :is(table.tk, table.ltab) .by { color: var(--mut); font-size: 12px; line-height: 1.35; }
#app main[data-satis] :is(table.tk, table.ltab) td.n, #app main[data-satis] :is(table.tk, table.ltab) th.n { text-align: end; font-variant-numeric: tabular-nums; }
#app main[data-satis] table.tk td .mono, #app main[data-satis] table.tk td.mono { font-size: 13px; font-weight: 600; letter-spacing: 0; }
#app main[data-satis] table.tk td.acts { padding-block: 8px; }
#app main[data-satis] table.tk td.acts .sm, #app main[data-satis] table.tk td.acts select { min-height: 32px; border-radius: var(--sd-r); }
#app main[data-satis] table.tk td.acts .primary.sm { padding-inline: 12px; }
#app main[data-satis] .tk tr.bekliyor td { background: color-mix(in srgb, var(--amber, #a86a00) 6%, var(--panel, #fff)); }
#app main[data-satis] .tk .crm { background: var(--sd-vurgu); color: var(--navy); border-radius: 4px; padding: 1px 5px; font-size: 11px; font-weight: 650; letter-spacing: .02em; }
#app main[data-satis] .tk .why { color: var(--amber, #8a5a00); }
/* eylem bağlantısı (Sil gibi): sade, tehlike rengi yalnız üzerine gelince tam */
#app main[data-satis] table.tk td.acts :is(a.danger-l, .danger-l, button.link) { text-decoration: none; font-size: 13px; font-weight: 550; padding: 4px 8px; border-radius: 6px; color: var(--mut); }
#app main[data-satis] table.tk td.acts :is(a.danger-l, .danger-l):hover { background: color-mix(in srgb, var(--red) 9%, transparent); color: var(--red); }
#app main[data-satis] table.tk td.acts a[href] { text-decoration: none; }
#app main[data-satis] table.tk td.acts a[style*="color"], #app main[data-satis] table.tk td.acts a.del { color: var(--mut); }
/* uzun metin hücreleri okunur genişlikte kalır; satır ikinci satıra yalnız gerektiğinde iner */
#app main[data-satis] table.tk td { max-width: 46ch; }
#app main[data-satis] table.tk td.acts, #app main[data-satis] table.tk td.n, #app main[data-satis] table.tk td.dst { max-width: none; }

/* dar ekranda (tablet) yoğunluk: yatay kayma çıkmadan sığsın; kayıyorsa sabit eylem sütunu arkasını kapatır */
@media (min-width: 761px) and (max-width: 1240px) {
  #app main[data-satis] :is(table.tk, table.ltab) { font-size: 13px; }
  #app main[data-satis] :is(table.tk, table.ltab) thead th { padding-inline: 8px; }
  #app main[data-satis] :is(table.tk, table.ltab) tbody td { padding-inline: 8px; }
}
#app main[data-satis] .tbl-x.kaydirilir > table :is(th, td):is(:first-child, :last-child):where(.acts, :first-child) { background-color: var(--panel, #fff); }
#app main[data-satis] .tbl-x.kaydirilir > table thead :is(th):is(:first-child, :last-child) { background-color: var(--sd-zemin); background-image: linear-gradient(var(--sd-zemin), var(--sd-zemin)); }
#app main[data-satis] .tbl-x.kaydirilir > table td.acts:last-child { box-shadow: -1px 0 0 var(--sd-cizgi); }

/* ================= DURUM ROZETİ (nokta + metin; renk anlamı: bekliyor=amber, tamam=yeşil, red/iptal=kırmızı) ================= */
#app main[data-satis] .ts, #app main[data-satis] .st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; background: color-mix(in srgb, var(--mut) 12%, transparent); color: var(--ink); white-space: nowrap; }
#app main[data-satis] .ts::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
#app main[data-satis] .ts-bekliyor { background: color-mix(in srgb, var(--amber, #a86a00) 13%, transparent); color: var(--amber, #8a5a00); }
#app main[data-satis] .ts-onaylandi { background: color-mix(in srgb, var(--green, #1a7f4b) 13%, transparent); color: var(--green, #17683e); }
#app main[data-satis] .ts-reddedildi, #app main[data-satis] .ts-iptal { background: color-mix(in srgb, var(--red) 11%, transparent); color: var(--red); }
#app main[data-satis] td.dur, #app main[data-satis] td.dst { white-space: nowrap; }

/* ================= BOŞ DURUM / YÜKLENİYOR ================= */
#app main[data-satis] td.none { text-align: center; padding: 40px 16px; color: var(--mut); font-size: 14px; background: transparent; }
#app main[data-satis] td.none::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 12px; background: color-mix(in srgb, var(--navy) 7%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2367615B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l8-4 8 4v10l-8 4-8-4z'/%3E%3Cpath d='M4 7l8 4 8-4M12 11v10'/%3E%3C/svg%3E") center / 20px no-repeat; }
#app main[data-satis] tr:hover td.none { background: transparent; }
#app main[data-satis] :is(.side-empty, .tv-bos) { display: grid; place-items: center; text-align: center; min-height: 160px; padding: 24px 16px; color: var(--mut); font-size: 14px; border: 1px dashed var(--line); border-radius: var(--sd-kutu); background: transparent; box-shadow: none; }

/* ================= KUTU / KART ızgarası ================= */
#app main[data-satis] :is(.box, .kutu, .dt-b) { border-radius: var(--sd-kutu); }
#app main[data-satis] .box { background: var(--panel, #fff); border: 1px solid var(--line); box-shadow: var(--g-1); padding: var(--b-4, 16px) 20px; margin: 0 0 var(--b-3, 12px); }
#app main[data-satis] :is(.box, .dt-b) h3 { margin: 0 0 var(--b-3, 12px); font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--ink); }
#app main[data-satis] :is(.box, .dt-b) h3 small { margin-inline-start: 8px; font-size: 12px; font-weight: 400; color: var(--mut); }
#app main[data-satis] :is(.box, .dt-b) p.help { margin: 0; font-size: 14px; color: var(--mut); max-width: 68ch; }
#app main[data-satis] .oz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--b-3, 12px); align-items: start; }
#app main[data-satis] .oz-grid > .box { margin: 0; }
#app main[data-satis] .kpis { margin-bottom: var(--b-3, 12px); }

/* ================= BUGÜN ================= */
#app main[data-v="bugun"] .kk-bas { padding: 14px 20px; border-radius: var(--sd-kutu); box-shadow: var(--g-1); margin-bottom: var(--b-3, 12px); }
#app main[data-v="bugun"] .kk-ad { font-size: 14px; color: var(--mut); }
#app main[data-v="bugun"] .kk-kpi .rp-cards { border-radius: var(--sd-kutu); margin-bottom: var(--b-3, 12px); }
#app main[data-v="bugun"] .kk-kpi .rp-card { padding: 14px 20px; }
#app main[data-v="bugun"] .dt-iki { gap: var(--b-3, 12px); margin: 0 0 var(--b-3, 12px); }
#app main[data-v="bugun"] .dt-b { margin: 0 0 var(--b-3, 12px); padding: 16px 20px; border: 1px solid var(--line); box-shadow: var(--g-1); }
#app main[data-v="bugun"] .dt-iki > .dt-b { margin: 0; }
#app main[data-v="bugun"] .dt-b h3 { padding-bottom: 0; border-bottom: 0; color: var(--ink); font-size: 16px; }
#app main[data-v="bugun"] .bg-karar { border-inline-start: 3px solid var(--navy); }
#app main[data-v="bugun"] .dt-b:has(> p.help:only-of-type) { padding-block: 14px 16px; }
#app main[data-v="bugun"] .dt-b > p.help:last-child { padding: 10px 12px; border-radius: var(--sd-r); background: var(--sd-zemin); }

/* ================= MÜŞTERİLER / GÖREVLER (CRM gövdesi) ================= */
#app main[data-satis] .crm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--navy) 6%, transparent); }
#app main[data-satis] .crm-seg button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--mut); font-size: 13px; font-weight: 600; }
#app main[data-satis] .crm-seg button.on { background: var(--panel, #fff); color: var(--navy); box-shadow: var(--g-1); }
#app main[data-satis] .crm-body { gap: var(--b-4, 16px); align-items: start; }
#app main[data-satis] .crm-side { border-radius: var(--sd-kutu); }

/* ================= TAKVİM ================= */
#app main[data-v="takvim"] .tk-bar { gap: var(--b-2, 8px); }
#app main[data-v="takvim"] .tv-ay { min-width: 140px; text-align: center; font-size: 16px; font-weight: 650; color: var(--ink); }
#app main[data-v="takvim"] #tvOnce, #app main[data-v="takvim"] #tvSonra { width: var(--sd-h); padding: 0; }
#app main[data-v="takvim"] .tv-grid > *, #app main[data-v="takvim"] .tv-cal :is(.tv-c, .tv-g) { border-radius: 10px; }

/* ================= FİYAT LİSTESİ / ENVANTER / BİNA ŞEMASI ================= */
#app main[data-v="fiyat"] .fl-ed.box { padding: 20px; }
#app main[data-v="fiyat"] .fl-ed h3 { font-size: 16px; }
#app main[data-v="fiyat"] .fl-ed .tbl-x { box-shadow: none; }
#app main[data-v="fiyat"] .fl-ed .btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px) var(--b-3, 12px); margin-top: var(--b-3, 12px); }
#app main[data-v="admin"] .inv-foot { color: var(--mut); font-size: 12px; }

/* ================= MOBİL (≤ 760 px): kart, tam genişlik, 40 px dokunma hedefi ================= */
@media (max-width: 760px) {
  #app main[data-satis] { --sd-h: 40px; }
  #app main[data-satis] :is(.tk-bar, .inv-bar, .list-bar) { gap: 8px; }
  #app main[data-satis] input[type=search], #app main[data-satis] :is(#tq, #slq, #bvQ, #cq, #lQ, #invQ) { flex: 1 1 100%; width: 100%; }
  #app main[data-satis] .tk-bar > :is(#bvYeni, #tvEkle) { order: -1; flex: 1 1 100%; margin: 0; }
  #app main[data-satis] .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -2px; padding: 2px; scrollbar-width: none; max-width: 100%; flex: 1 1 100%; }
  #app main[data-satis] .chip { flex: none; min-height: 36px; }
  #app main[data-satis] .page-head { flex-direction: column; align-items: stretch; }
  #app main[data-satis] .page-head-m { flex: 0 0 auto; } #app main[data-satis] .page-head-o { flex: 1 1 auto; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  #app main[data-satis] .page-head-a { margin: 0; width: 100%; }
  #app main[data-satis] .page-head-a > .primary { flex: 1 1 auto; }
  #app main[data-satis] .box, #app main[data-v="bugun"] .dt-b { padding: 14px 16px; }
  #app main[data-v="takvim"] .tv-ay { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { #app main[data-satis] * { transition: none !important; } }