/* ========== SALES LIST ========== */

.saleslist-page { display: flex; flex-direction: column; gap: 14px; height: 100%; }

/* TOOLBAR */
.sl-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
}
.sl-search-wrap {
  position: relative; flex: 1; min-width: 180px;
}
.sl-search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: #b0a08a; pointer-events: none;
}
.sl-search-input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  border: 1px solid #d6c8b4; border-radius: 8px;
  background: linear-gradient(180deg, #fdf9f3 0%, #f6efe3 100%);
  font-family: inherit; font-size: 13px; color: #20180c; box-sizing: border-box;
  outline: none;
}
.sl-search-input:focus { border-color: #c8943c; box-shadow: 0 0 0 2px rgba(200,148,60,.1); }
.sl-search-input::placeholder { color: #b0a08a; }

/* PILLS */
.sl-pills { display: flex; gap: 4px; flex-shrink: 0; }
.sl-pill {
  height: 32px; padding: 0 12px; border-radius: 20px;
  border: 1px solid #d6c8b4; background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 600; color: #7a6d58;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.sl-pill:hover { background: rgba(200,148,60,.08); border-color: #c8943c; }
.sl-pill.active { background: #c8943c; border-color: #c8943c; color: #fff; }

/* TABLE WRAP */
.sl-table-wrap { flex: 1; overflow-y: auto; border-radius: 10px; border: 1px solid #ddd0bb; }
.sl-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.sl-th {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, #f4ead8 0%, #ede0c8 100%);
  padding: 9px 12px; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #7a6d58;
  border-bottom: 1px solid #ddd0bb; white-space: nowrap;
}
.sl-th-num { text-align: right; }
.sl-th-center { text-align: center; }
.sl-th-sort { cursor: pointer; user-select: none; }
.sl-th-sort:hover { color: #c8943c; }
.sl-sort-ico { display: inline-block; width: 12px; opacity: .5; }
.sl-th-sort.asc  .sl-sort-ico::after { content: "↑"; opacity: 1; }
.sl-th-sort.desc .sl-sort-ico::after { content: "↓"; opacity: 1; }

.sl-tr { border-bottom: 1px solid #ede3d4; cursor: pointer; transition: background .1s; }
.sl-tr:last-child { border-bottom: none; }
.sl-tr:hover { background: rgba(200,148,60,.07); }
.sl-tr.kapali { opacity: .6; }

.sl-td { padding: 10px 12px; color: #20180c; vertical-align: middle; }
.sl-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.sl-td-center { text-align: center; }

.sl-td-tarih { font-size: 12px; color: #9e8e76; white-space: nowrap; }
.sl-td-musteri { font-weight: 700; }
.sl-td-urun { color: #4a3e2c; }
.sl-td-fiyat { font-weight: 600; }
.sl-td-odenen { color: #2d6e1a; font-weight: 600; }
.sl-td-kalan { color: #7a2413; font-weight: 700; }
.sl-td-kalan.zero { color: #9e8e76; font-weight: 400; }

.sl-badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.sl-badge.borclu { background: #fde8e0; color: #7a2413; }
.sl-badge.kapali { background: #d4e8c2; color: #2d6e1a; }

/* EMPTY / LOADING */
.sl-empty, .sl-loading {
  padding: 40px; text-align: center; font-size: 13px; color: #b0a08a;
}

/* ===== DRAWER ===== */
.sl-backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(20,12,4,.3);
}
.sl-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;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.sl-drawer.open { transform: translateX(0); }

.sl-drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid #e4d9c8; flex-shrink: 0;
}
.sl-drawer-urun {
  flex: 1; font-size: 14px; font-weight: 800; color: #20180c;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-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;
}
.sl-drawer-close:hover { background: rgba(0,0,0,.06); }

.sl-drawer-musteri {
  padding: 10px 18px; font-size: 12px; color: #7a6d58;
  border-bottom: 1px solid #e4d9c8; flex-shrink: 0;
  font-weight: 600;
}

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

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

.sl-drawer-form {
  padding: 14px 18px; border-top: 1px solid #e4d9c8;
  display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
}
.sl-form-field { display: flex; flex-direction: column; gap: 5px; }
.sl-form-field label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #7a6d58;
}
.sl-input {
  height: 40px; padding: 0 12px; border: 1px solid #d6c8b4; border-radius: 8px;
  background: linear-gradient(180deg, #fdf9f3 0%, #f6efe3 100%);
  font-family: inherit; font-size: 13px; color: #20180c; outline: none;
}
.sl-input:focus { border-color: #c8943c; }
.sl-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;
}
.sl-submit-btn:hover    { filter: brightness(1.03); }
.sl-submit-btn:disabled { opacity: .45; cursor: default; filter: none; }
.sl-kapali-note {
  text-align: center; font-size: 12px; color: #9e8e76; padding: 8px 0;
}

@media (max-width: 600px) {
  .sl-drawer { width: 100vw; }
  .sl-toolbar { flex-direction: column; align-items: stretch; }
  .sl-pills { flex-wrap: wrap; }
  .sl-th:nth-child(3), .sl-td:nth-child(3) { display: none; }
}

/* ===== KOYU TEMA ===== */
body.dark .sl-search-input {
  background: linear-gradient(180deg, #2a2218 0%, #221c14 100%);
  border-color: #3a3028;
  color: #e0d4c0;
}
body.dark .sl-search-input::placeholder { color: #5a4a38; }
body.dark .sl-search-input:focus { border-color: #c8943c; }
body.dark .sl-search-ico { color: #5a4a38; }
body.dark .sl-pill {
  border-color: #3a3028;
  color: #8a7a68;
}
body.dark .sl-pill:hover { background: rgba(200,148,60,0.12); border-color: #c8943c; }
body.dark .sl-table-wrap { border-color: #3a3028; }
body.dark .sl-th {
  background: linear-gradient(180deg, #2a2218 0%, #221c14 100%);
  color: #6a5a48;
  border-color: #3a3028;
}
body.dark .sl-th-sort:hover { color: #c8943c; }
body.dark .sl-tr { border-color: #3a3028; }
body.dark .sl-tr:hover { background: rgba(200,148,60,0.06); }
body.dark .sl-td { color: #c0b0a0; }
body.dark .sl-td-urun { color: #e0d4c0; }
body.dark .sl-td-musteri { color: #a09080; }
body.dark .sl-td-fiyat, body.dark .sl-td-odenen { color: #7ecf5a; }
body.dark .sl-td-kalan { color: #e8725a; }
body.dark .sl-td-kalan.zero { color: #6a5a48; }
body.dark .sl-badge {
  background: rgba(200,148,60,0.15);
  color: #c8943c;
}
body.dark .sl-badge.borclu { background: rgba(232,114,90,0.15); color: #e8725a; }
body.dark .sl-badge.kapali { background: rgba(255,255,255,0.06); color: #6a5a48; }
body.dark .sl-val-green { color: #7ecf5a; }
body.dark .sl-val-red { color: #e8725a; }
body.dark .sl-empty, body.dark .sl-loading { color: #6a5a48; }
body.dark .sl-drawer {
  background: linear-gradient(180deg, #252018 0%, #1e1810 100%);
  border-color: #3a3028;
}
body.dark .sl-drawer-head { border-color: #3a3028; }
body.dark .sl-drawer-musteri { color: #e0d4c0; }
body.dark .sl-drawer-close { color: #8a7a68; }
body.dark .sl-drawer-close:hover { background: rgba(255,255,255,0.06); }
body.dark .sl-ozet-row { border-color: #3a3028; }
body.dark .sl-ozet-label { color: #6a5a48; }
body.dark .sl-ozet-val { color: #e0d4c0; }
body.dark .sl-ozet-kalan-row .sl-ozet-val { color: #e8725a; }
body.dark .sl-drawer-urun { color: #e0d4c0; border-color: #3a3028; }
body.dark .sl-form-field label { color: #7a6a58; }
body.dark .sl-input {
  background: linear-gradient(180deg, #2a2218 0%, #221c14 100%);
  border-color: #3a3028;
  color: #e0d4c0;
}
body.dark .sl-submit-btn {
  background: linear-gradient(180deg, #2a4010 0%, #1e3008 100%);
  border-color: #4a8020;
  color: #a0d870;
}
body.dark .sl-gecmis-title { color: #e0d4c0; }
body.dark .sl-gecmis-item { border-color: #3a3028; }
body.dark .sl-gecmis-miktar { color: #7ecf5a; }
body.dark .sl-gecmis-tarih, body.dark .sl-gecmis-not { color: #6a5a48; }
body.dark .sl-gecmis-bugun-badge { background: rgba(200,148,60,0.15); color: #c8943c; }
body.dark .sl-kapali-note { color: #6a5a48; }
body.dark .sl-no-gecmis { color: #6a5a48; }
