/* ====================================================
   ÖDEME AL SAYFASI
   Tüm gizleme/açma: JS tarafından style.display ile
   CSS sınıf toggle'ı YOK — sade, tahmin edilebilir.
   ==================================================== */

.payment-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- ARAMA ALANI ---------- */
.pay-search-block { max-width: 480px; }

.pay-autocomplete-wrap { position: relative; }

.pay-input {
  width: 100%;
  height: 44px;
  border: 1px solid #d6c8b4;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdf9f3 0%, #f6efe3 100%);
  color: #20180c;
  font-family: inherit;
  font-size: 14px;
  padding: 0 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.pay-input:focus {
  border-color: #c8943c;
  box-shadow: 0 0 0 2px rgba(200,148,60,.1);
}
.pay-input::placeholder { color: #b0a08a; font-size: 13px; }

/* ---------- AUTOCOMPLETE ---------- */
/* Başlangıç: display:none inline olarak HTML'de,
   JS renderAC() içinde style.display="block" ile açılır */
.pay-autocomplete-list {
  position: fixed;
  z-index: 9999;
  border: 1px solid #d8ccba;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #fdf8f0 0%, #f4ecdf 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.pay-autocomplete-item {
  padding: 11px 13px;
  border-bottom: 1px solid #ede3d4;
  cursor: pointer;
  transition: background .1s;
}
.pay-autocomplete-item:last-child { border-bottom: none; }
.pay-autocomplete-item:hover { background: rgba(255,255,255,.55); }

.pay-ac-name { font-size: 13px; font-weight: 700; color: #20180c; }
.pay-ac-sub  { font-size: 11px; color: #9e8e76; margin-top: 2px; }

/* ---------- MÜŞTERİ PANELİ ---------- */
.pay-customer-panel { display: flex; flex-direction: column; gap: 14px; }

.pay-customer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.4);
}

.pay-customer-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(180deg, #e8dcc8 0%, #d8c8b0 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #6e5530;
  flex-shrink: 0;
}

.pay-customer-info { flex: 1; min-width: 0; }
.pay-customer-name { font-size: 15px; font-weight: 800; color: #20180c; }
.pay-customer-meta { font-size: 11px; color: #9e8e76; margin-top: 2px; }

.pay-profile-btn, .pay-change-btn {
  height: 34px; padding: 0 12px;
  border-radius: 8px; border: 1px solid #d6c8b6;
  background: linear-gradient(180deg, #f7f1e7 0%, #eee5d6 100%);
  color: #4c3d2b; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.pay-profile-btn:hover, .pay-change-btn:hover { filter: brightness(1.03); }

/* ---------- SATIŞ KARTLARI ---------- */
.pay-sales-list { display: flex; flex-direction: column; gap: 8px; }

.pay-loading, .pay-no-sales {
  padding: 30px 0; text-align: center;
  font-size: 13px; color: #9e8e76;
}

.pay-sale-card {
  border-radius: 12px;
  background: rgba(255,255,255,.4);
  padding: 13px 16px;
  cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: background .12s;
}
.pay-sale-card:hover { background: rgba(255,255,255,.65); }
.pay-sale-card.paid  { opacity: .55; cursor: default; }

.pay-sale-main  { flex: 1; min-width: 0; }
.pay-sale-urun  {
  font-size: 14px; font-weight: 700; color: #20180c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pay-sale-tarih { font-size: 11px; color: #9e8e76; margin-top: 2px; }

.pay-sale-nums  { display: flex; gap: 18px; flex-shrink: 0; }
.pay-sale-num   { text-align: right; }
.pay-sale-num-label {
  font-size: 10px; color: #9e8e76;
  text-transform: uppercase; letter-spacing: .04em;
}
.pay-sale-num-val { font-size: 13px; font-weight: 700; color: #20180c; }
.pay-sale-num-val.red   { color: #7a2413; }
.pay-sale-num-val.green { color: #2d6e1a; }

.pay-sale-arrow { font-size: 18px; color: #c0ad94; flex-shrink: 0; }
.pay-sale-card.paid .pay-sale-arrow { display: none; }

/* ---------- BACKDROP'LAR ---------- */
/* Her ikisi de HTML'de style="display:none" ile başlar */
.pay-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,12,4,.3);
}
.cust-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,12,4,.3);
}

/* ---------- ÖDEME DRAWER ---------- */
/* HTML'de style="display:none" ile başlar, JS display:flex yapar */
.pay-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 100vw;
  z-index: 201;
  background: linear-gradient(180deg, #faf5ed 0%, #f2e9da 100%);
  border-left: 1px solid #ddd0bb;
  box-shadow: -12px 0 40px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.pay-drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid #e4d9c8;
  flex-shrink: 0;
}
.pay-drawer-urun {
  flex: 1; font-size: 14px; font-weight: 800; color: #20180c;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pay-drawer-close {
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: transparent; color: #8e7a60; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
}
.pay-drawer-close:hover { background: rgba(0,0,0,.06); }

.pay-drawer-ozet {
  padding: 12px 18px; border-bottom: 1px solid #e4d9c8;
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.pay-drawer-ozet-row {
  display: flex; justify-content: space-between; align-items: center;
}
.pay-ozet-label { font-size: 12px; color: #9e8e76; }
.pay-ozet-val   { font-size: 13px; font-weight: 700; color: #20180c; }
.pay-val-green  { color: #2d6e1a; }
.pay-val-red    { color: #7a2413; }
.pay-ozet-kalan-row {
  margin-top: 4px; padding-top: 8px; border-top: 1px solid #e4d9c8;
}
.pay-ozet-kalan-row .pay-ozet-label { font-weight: 700; color: #20180c; font-size: 13px; }
.pay-ozet-kalan-row .pay-ozet-val   { font-size: 16px; }

.pay-drawer-gecmis {
  flex: 1; overflow-y: auto;
  padding: 10px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.pay-gecmis-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: #9e8e76; margin-bottom: 4px;
}
.pay-gecmis-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.4);
}
.pay-gecmis-tarih  { font-size: 11px; color: #9e8e76; }
.pay-gecmis-miktar { font-size: 13px; font-weight: 700; color: #2d6e1a; }
.pay-gecmis-not    { font-size: 11px; color: #8e7a60; font-style: italic; margin-top: 1px; }
.pay-no-gecmis     { font-size: 12px; color: #b0a08a; padding: 8px 0; }

.pay-drawer-form {
  padding: 14px 18px; border-top: 1px solid #e4d9c8;
  display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
}
.pay-form-field { display: flex; flex-direction: column; gap: 5px; }
.pay-form-field label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #7a6d58;
}

.pay-submit-btn {
  height: 42px; border-radius: 10px;
  border: 1px solid #8fb35a;
  background: linear-gradient(180deg, #d5e9ae 0%, #bdd885 100%);
  color: #25420a; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.pay-submit-btn:hover    { filter: brightness(1.03); }
.pay-submit-btn:disabled { opacity: .45; cursor: default; filter: none; }

/* ---------- PROFİL DRAWER ---------- */
/* customers.css'e bağımlı değil — tamamen bağımsız stiller */
.cust-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,12,4,.3);
}
.pay-cust-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 100vw;
  z-index: 201;
  background: linear-gradient(180deg, #faf5ed 0%, #f2e9da 100%);
  border-left: 1px solid #ddd0bb;
  box-shadow: -12px 0 40px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.pay-cust-drawer.open {
  transform: translateX(0);
}
.cust-drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid #e4d9c8;
  flex-shrink: 0;
}
.cust-drawer-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #c8943c, #e0b96a);
  color: #fff; font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cust-drawer-info { flex: 1; min-width: 0; }
.cust-drawer-name { font-size: 15px; font-weight: 800; color: #20180c; }
.cust-drawer-meta { font-size: 11px; color: #9e8e76; margin-top: 2px; }
.cust-drawer-close {
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: transparent; color: #8e7a60; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cust-drawer-close:hover { background: rgba(0,0,0,.06); }
.cust-ozet-row {
  display: flex; gap: 0; border-bottom: 1px solid #e4d9c8;
  flex-shrink: 0;
}
.cust-ozet-item {
  flex: 1; padding: 12px 14px; text-align: center;
  border-right: 1px solid #e4d9c8;
}
.cust-ozet-item:last-child { border-right: none; }
.cust-ozet-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9e8e76; }
.cust-ozet-val   { font-size: 14px; font-weight: 800; color: #20180c; margin-top: 3px; }
.cust-val-green  { color: #2d6e1a; }
.cust-val-red    { color: #7a2413; }
.cust-satis-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.cust-satis-card {
  background: rgba(255,255,255,.5); border: 1px solid #e0d4bf;
  border-radius: 10px; padding: 12px 14px;
}
.cust-satis-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cust-satis-urun { font-size: 13px; font-weight: 800; color: #20180c; flex: 1; }
.cust-satis-tarih { font-size: 11px; color: #9e8e76; }
.cust-satis-nums { display: flex; gap: 12px; }
.cust-satis-num { flex: 1; }
.cust-satis-num-label { font-size: 10px; color: #9e8e76; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cust-satis-num-val { font-size: 13px; font-weight: 700; color: #20180c; margin-top: 1px; }
.cust-satis-num-val.red { color: #7a2413; }
.cust-satis-not { font-size: 11px; color: #8e7a60; font-style: italic; margin-top: 6px; }
.cust-no-satis  { font-size: 13px; color: #b0a08a; text-align: center; padding: 20px 0; }
.cust-loading   { font-size: 13px; color: #b0a08a; text-align: center; padding: 20px 0; }
.cust-satis-kaynak {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .04em;
}
.cust-satis-kaynak.gecmis { background: #e8dcc8; color: #7a6340; }
.cust-satis-kaynak.normal { background: #d4e8c2; color: #2d6e1a; }

@media (max-width: 600px) {
  .pay-sale-nums { gap: 10px; }
  .pay-drawer    { width: 100vw; }
}

/* ===== KOYU TEMA ===== */
body.dark .pay-input {
  background: linear-gradient(180deg, #2a2218 0%, #221c14 100%);
  border-color: #3a3028;
  color: #e0d4c0;
}
body.dark .pay-input::placeholder { color: #5a4a38; }
body.dark .pay-input:focus { border-color: #c8943c; }
body.dark .pay-autocomplete-list {
  background: linear-gradient(180deg, #2a2218 0%, #221c14 100%);
  border-color: #3a3028;
}
body.dark .pay-autocomplete-item { border-color: #3a3028; }
body.dark .pay-autocomplete-item:hover { background: rgba(255,255,255,0.05); }
body.dark .pay-ac-name { color: #e0d4c0; }
body.dark .pay-ac-sub { color: #6a5a48; }
body.dark .pay-customer-head { background: rgba(255,255,255,0.04); }
body.dark .pay-customer-avatar { background: linear-gradient(180deg, #3a3020 0%, #2e2618 100%); color: #c8943c; }
body.dark .pay-customer-name { color: #e0d4c0; }
body.dark .pay-customer-meta { color: #6a5a48; }
body.dark .pay-val-green { color: #7ecf5a; }
body.dark .pay-val-red { color: #e8725a; }
body.dark .pay-sale-card {
  background: rgba(255,255,255,0.04);
  border-color: #3a3028;
}
body.dark .pay-sale-urun { color: #e0d4c0; }
body.dark .pay-sale-tarih { color: #6a5a48; }
body.dark .pay-sale-num-label { color: #6a5a48; }
body.dark .pay-sale-num-val { color: #e0d4c0; }
body.dark .pay-sale-num-val.green { color: #7ecf5a; }
body.dark .pay-sale-num-val.red { color: #e8725a; }
body.dark .pay-sale-arrow { color: #5a4a38; }
body.dark .pay-profile-btn, body.dark .pay-change-btn {
  background: linear-gradient(180deg, #2a2218 0%, #221c14 100%);
  border-color: #3a3028;
  color: #c0b0a0;
}
body.dark .pay-drawer {
  background: linear-gradient(180deg, #252018 0%, #1e1810 100%);
  border-color: #3a3028;
}
body.dark .pay-drawer-head { border-color: #3a3028; }
body.dark .pay-drawer-close { color: #8a7a68; }
body.dark .pay-drawer-close:hover { background: rgba(255,255,255,0.06); }
body.dark .pay-drawer-ozet-row { border-color: #3a3028; }
body.dark .pay-ozet-label { color: #6a5a48; }
body.dark .pay-ozet-val { color: #e0d4c0; }
body.dark .pay-ozet-kalan-row .pay-ozet-val { color: #e8725a; }
body.dark .pay-drawer-urun { color: #e0d4c0; border-color: #3a3028; }
body.dark .pay-form-field label { color: #7a6a58; }
body.dark .pay-submit-btn {
  background: linear-gradient(180deg, #2a4010 0%, #1e3008 100%);
  border-color: #4a8020;
  color: #a0d870;
}
body.dark .pay-gecmis-title { color: #e0d4c0; }
body.dark .pay-gecmis-item { border-color: #3a3028; }
body.dark .pay-gecmis-miktar { color: #7ecf5a; }
body.dark .pay-gecmis-tarih, body.dark .pay-gecmis-not { color: #6a5a48; }
body.dark .pay-loading, body.dark .pay-no-sales, body.dark .pay-no-gecmis { color: #6a5a48; }
body.dark .cust-backdrop { background: rgba(0,0,0,0.5); }
