/* ===========================================================
   GLOBAL CUSTOM CSS
   =========================================================== */
  .with-bg {
  position: relative;
  min-height: 100%;
}
.with-bg::before {
  content: "";
  position: absolute;
  inset: 0;
    background: url('/images/Baggi-tekstilas-logolu.jpg') no-repeat center top;
    background-size: 400px auto;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.with-bg > * {
  position: relative;
  z-index: 1;
}

.q-page {
  margin-top: 0;
}

@media (max-width: 768px) {
  .with-bg::before {
    background-size: 260px auto;
  }
}

/* ===== ÜST BLOKLAR (SABİT) ===== */
.filter-sticky {
  position: sticky;
  top: 56px;       /* q-header yüksekliği */
  z-index: 300;
  background: #fff;
}

.filter-collapsible {
  background: #fff;
}

/* ===== TABLO SCROLL ===== */
.table-scroll {
  margin-top: 0;                     /* 🔹 Boşluğu kaldır */
 height: calc(100vh - 56px);        /* 🔹 Header yüksekliği kadar kısalt */
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}

.sticky-table .q-table__middle {
  overflow: visible !important;
  max-height: none !important;
}

.sticky-table .q-table__top {
  position: sticky;
  top: 0;
  z-index: 220;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.sticky-table thead th {
  position: sticky;
  top: 40px;
  z-index: 210;
  background: #fff;
}

/* 🔹 Toggle bar */
.sticky-bar {
  position: sticky;
  top: 0; /* tablo scroll başladığında en üstte kalsın */
  z-index: 230;
  background: #fff;
  padding: 4px 8px;
  border-bottom: 1px solid #ddd;
}

/* ===== KOLON DARALTMA + WRAP ===== */
.sticky-table thead th {
  resize: horizontal;
  overflow: auto;
  min-width: 80px;
  max-width: 400px;
}

.sticky-table td {
  min-width: 80px;
  max-width: 400px;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.2rem;
  padding: 4px 8px !important;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ===== GÖRSEL ===== */
.baggi-ppct {
  display: block;
  margin: 30px auto 0;
  max-width: 400px;
  opacity: 0.4;
}

.col-desc {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word;
  font-size: 0.75rem !important;
  line-height: 1.1rem;
  width: 220px !important;
  max-width: 220px !important;
  min-width: 180px !important;
}

/* ===== TABLO GÖRÜNÜM ===== */
.custom-table { font-size: 0.8rem; }
.custom-table th { background: #fff; font-weight: 800; color: #222; }
.custom-table td { font-weight: 600; color: #333; }

.custom-subtable { font-size: 0.72rem; background: #fafafa; }
.custom-subtable th { background: #f9f9f9; font-weight: 500; color: #555; }
.custom-subtable td { font-weight: 400; color: #666; }

/* dar sütunlar için */
.col-narrow {
  font-size: 0.72rem;
  padding: 2px 6px !important;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== GRUP SATIRI ===== */
.group-row {
  background: #f1f1f1 !important;
  font-weight: 700 !important;
  color: #222;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}

/* ===== BALANCE CARD ===== */
.balance-card {
  width: 100%;
  min-height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.q-table td[data-col="belge_no"],
.q-table td[data-col="Belge_No"],
.q-table td[data-col="BELGE_NO"] {
  color: var(--q-primary) !important;
  font-weight: 600 !important;
}

/* ===========================================================
   PERMISSIONS PAGE (FINAL)
   =========================================================== */

/* Toolbar */
.permissions-toolbar {
  position: sticky;
  top: 42px; /* q-header yüksekliği */
  z-index: 300;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

/* Table scroll alanı */
.permissions-table-scroll {
  height: calc(100vh - 112px); /* header (56) + toolbar (56) */
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}

/* Tablo gövdesi */
.permissions-table .q-table__middle {
  overflow: auto !important;
  max-height: none !important;
  padding-top: 0px; /* 🔑 Başlık yüksekliği kadar boşluk bırak */
}

/* Sticky başlıklar – toolbar’ın altında */
.permissions-table thead th {
  position: sticky;
  top:10px;   /* toolbar altında hizalanır */
  z-index: 210;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Hücreler */
.permissions-table td {
  min-width: 80px;
  max-width: 400px;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.2rem;
  padding: 4px 8px !important;
  font-weight: 600;
  font-size: 0.95rem;
  background: #fff;
}

/* İlk kolon (role) sabit */
.permissions-table .permissions-sticky-col {
  position: sticky;
  left: 0;
  z-index: 205;
  background: #fff;
  box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}

/* ===========================================================
   1️⃣ ROOT & GLOBAL RESET
   =========================================================== */
:root {
  --header-h: 0px;
  --filter-h: 72px;
  --save-h: 60px;
  --grid-header-h: 172px;
  --sub-header-h: 34px;
  --drawer-w: 240px;

  /* Grid kolon genişlikleri */
  --col-model: 90px;
  --col-renk: 80px;
  --col-ana: 100px;
  --col-alt: 100px;
  --col-aciklama: 140px;
  --col-adet: 70px;
  --col-fiyat: 70px;
  --col-pb: 70px;
  --col-tutar: 70px;
  --col-termin: 142px; /* 🔹 termin tarihi kolon genişliği */

  /* Beden blok ölçüleri */
  --grp-title-w: 90px;
  --grp-title-gap: 4px;
  --beden-w: 44px;
  --beden-h: 28px;
  --beden-count: 16;

  /* Tema renkleri */
  --baggi-gold: #c9a227;
  --baggi-gold-pale: #fff9e6;
  --baggi-gold-light: #fff7d2;
  --baggi-cream: #fffef9;
  --baggi-gray-border: #bbb;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #fff;
  color: #222;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
#q-app, .q-page-container { margin: 0; padding: 0; }
.q-layout__page { top: 0 !important; }
/* ===========================================================
   2️⃣ PAGE STRUCTURE & SCROLL
   =========================================================== */
.order-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overflow-x: visible;
  background: #fff;
  padding-top: 0 !important;
}
/* Quasar header offsetunu sadece order sayfasında sıfırla */
.q-page-container .order-page {
  margin-top: calc(-1 * var(--header-h) - 58px);
}

.body--drawer-left-open .q-page-container {
  margin-left: var(--drawer-w);
  width: calc(100% - var(--drawer-w));
}
.body--drawer-left-closed .q-page-container {
  margin-left: 0; width: 100%;
}

/* 🔸 Yatay scroll sadece grid alanında */
.order-scroll-x {
  flex: 1;
  overflow-x: auto;
  overflow-y: visible;
  background: #fff;
}
/* 🔸 Scrollbar stili */

.order-page::-webkit-scrollbar-thumb,
.order-scroll-x::-webkit-scrollbar {
  height: 8px; width: 8px;
}
.order-scroll-x::-webkit-scrollbar-thumb {
  background: #c0a75e;
  border-radius: 4px;
}
.order-scroll-x::-webkit-scrollbar-track {
  background: #f9f5e6;
}

/* ===========================================================
   3️⃣ STICKY STACK (HEADER + TOOLBARS)
   =========================================================== */
.q-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.sticky-stack {
  position: sticky;
  top: var(--header-h);
  margin-top: 0 !important;
  z-index: 950;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 🔹 Filtre bar */
.filter-bar {
  background: #fafafa;
  border-bottom: 1px solid #ddd;
  padding: 8px 12px;
  margin-top:0 !important;
}
.filter-bar .q-field__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
  font-size: 12px;
}
.filter-bar .q-field__control,
.filter-bar .q-field__native,
.filter-bar .q-field__marginal {
  min-height: 36px;
}
.filter-bar-desc {
  padding: 0 12px 6px;
  background: #fafafa;
  border-bottom: 1px solid #ddd;
}

/* 🔹 Save toolbar */
.save-toolbar {
  background: var(--baggi-gold-pale);
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 940;
}
.save-toolbar .label { font-weight: 700; color: #6a5314; }
.save-toolbar .value { font-weight: 700; color: #000; }
.save-toolbar .q-btn {
  font-weight: 600;
  border-radius: 6px;
  text-transform: none;
}
/* ===========================================================
   4️⃣ GRID HEADER (ANA BAŞLIK BLOKU)
   =========================================================== */
.order-grid-header {
  position: sticky;
  top: calc(var(--header-h) + var(--filter-h) + var(--save-h));
  z-index: 700;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns:
    var(--col-model)
    var(--col-renk)
    var(--col-ana)
    var(--col-alt)
    var(--col-aciklama)
    calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w)*var(--beden-count)))
    var(--col-adet)
    var(--col-fiyat)
    var(--col-pb)
    var(--col-tutar)
    var(--col-termin);
  background: var(--baggi-cream);
  border-bottom: 2px solid var(--baggi-gray-border);
  box-shadow: 0 2px 3px rgba(0,0,0,0.05);
}

/* Sabit kolonlar */
.order-grid-header .col-fixed {
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  background: var(--baggi-gold-light);
  border: 1px solid #aaa;
  font-weight: 700;
  font-size: 12.5px;
  height: var(--grid-header-h);
}

.order-grid-header .aciklama-col {
  background: #fff9c4;
  border-right: 2px solid #a6a6a6;
}
/* ===========================================================
   5️⃣ BEDEN BLOKLARI & SAĞ TOPLAM
   =========================================================== */
.order-grid-header .beden-block {
  display: flex;
  flex-direction: column;
  height: var(--grid-header-h);
  background: #fff;
  border: 1px solid #ccc;
}

.order-grid-header .grp-row {
  display: flex;
  align-items: center;
  height: var(--beden-h);
}

.order-grid-header .grp-title {
  width: var(--grp-title-w);
  text-align: right;
  font-weight: 700;
  font-size: 12px;
  padding-right: 4px;
}

.order-grid-header .grp-body {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--beden-w);
}
.order-grid-header .grp-cell.hdr {
  width: var(--beden-w);
  height: var(--beden-h);
  border: 1px solid #bbb;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-grid-header .total-row {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  background: #fff59d;
  grid-column: 7 / -1;
}
.order-grid-header .total-cell {
  width: var(--col-adet);
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  border-right: 1px solid #bbb;
  background: var(--baggi-gold-pale);
  font-weight: 700;
  font-size: 12px;
}
.order-grid-header .total-cell:last-child {
  width: var(--col-termin);
}
/* ===========================================================
   6️⃣ SUB-HEADER (ÜRÜN GRUBU BAR) — TAM HİZALANMIŞ
   =========================================================== */
   .order-sub-header {
  padding-right: 0 !important;   /* 🔹 Ekstra sağ boşluğu kaldır */
  margin-right: 0 !important;
}
.order-sub-header {
  position: sticky;
  top: calc(
    var(--header-h)
    + var(--filter-h)
    + var(--save-h)
    + var(--grid-header-h)
  );
  z-index: 650;

  /* 🔹 Header ile birebir grid düzeni */
  display: grid;
  grid-auto-flow: column;
  grid-template-columns:
    var(--col-model)
    var(--col-renk)
    var(--col-ana)
    var(--col-alt)
    var(--col-aciklama)
    calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w) * var(--beden-count)))
    var(--col-adet)
    var(--col-fiyat)
    var(--col-pb)
    var(--col-tutar)
    var(--col-termin);

  align-items: center;
  justify-items: stretch;
  height: var(--sub-header-h);
  min-height: var(--sub-header-h);

  /* 🔹 Görsel */
  background: linear-gradient(90deg, #fffbe9 0%, #fff4c4 50%, #fff1b0 100%);
  border-top: 1px solid #d6c06a;
  border-bottom: 1px solid #d6c06a;

  /* 🔹 Hatalı hizalamaları engelle */
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  padding-right: 0 !important;   /* ✅ sağ taşmayı önler */
}

/* 🔹 Genişlik eşitleme */
:root {
  --col-termin: 142px; /* ✅ q-input genişliğiyle birebir */
}

/* 🔹 Sub-header hover efekti */
.order-sub-header:hover {
  background: linear-gradient(90deg, #fff9cf 0%, #fff3b0 70%, #ffe88f 100%);
}


/* 🔹 Sol taraf (MODEL–AÇIKLAMA alanı) */
.order-sub-header .sub-left {
  grid-column: 1 / span 5;
  font-weight: 800;
  padding-left: 6px;
  color: #2b1f05;
  display: flex;
  align-items: center;
}

/* 🔹 Orta beden bloğu (header’la aynı yapı) */
.order-sub-header .sub-center {
  grid-column: 6 / 7;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--beden-w);
  justify-content: start;
  align-items: center;
  width: calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w) * var(--beden-count)));
  padding-left: var(--grp-title-w);
  margin-left: var(--grp-title-gap);
  height: 100%;
  box-sizing: border-box;
}

.order-sub-header .beden-cell {
  width: var(--beden-w);
  height: 100%;
  border: 1px solid #d8c16b;
  border-right: none;
  background: #fffdf3;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.order-sub-header .beden-cell:last-child {
  border-right: 1px solid #d8c16b;
}

/* 🔹 Sağ taraf (adet–fiyat–pb–tutar–termin toplamları) */
.order-sub-header .sub-right {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding-right: 0px;
  font-weight: 900;
  color: #3b2f09;
  line-height: 1.3;
  text-transform: uppercase;
  font-size: 13.5px;
  transform: translateX(-60px);
}

.order-sub-header:hover {
  background: linear-gradient(90deg,#fff9cf 0%,#fff3b0 70%,#ffe88f 100%);
}

:root {
  --sub-header-h: 60px;
}


/* Taşmayı engelle (ihtiyaten) */
.order-sub-header {
  overflow: hidden;
}

/* ===========================================================
   7️⃣ GRID BODY & SATIRLAR — TAM HİZALANMIŞ
   =========================================================== */
.order-grid-body {
  position: relative;
  background: #fff;
  margin-top: 0 !important;
   padding-top: var(--sub-header-h); 
  z-index: 100;
}
.order-scroll-y.compact-grid-header {
  --grid-header-h: var(--beden-h);
}
.order-scroll-y.compact-grid-header .order-grid-header .col-fixed {
  writing-mode: horizontal-tb;
  transform: none;
  height: var(--grid-header-h);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.order-scroll-y.compact-grid-header .order-grid-header .total-cell {
  writing-mode: horizontal-tb;
  transform: none;
  height: var(--grid-header-h);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.order-grid-header.compact {
  height: var(--beden-h);
}
.order-grid-header.compact .beden-block {
  height: var(--beden-h);
}
.order-grid-header.compact .col-fixed,
.order-grid-header.compact .total-cell {
  writing-mode: horizontal-tb;
  transform: none;
  height: var(--beden-h);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.order-grid-header.compact .total-cell {
  width: var(--col-adet);
}
.order-grid-header.compact .total-cell:nth-child(2) {
  width: var(--col-fiyat);
}
.order-grid-header.compact .total-cell:nth-child(3) {
  width: var(--col-pb);
}
.order-grid-header.compact .total-cell:nth-child(4) {
  width: var(--col-tutar);
}
.order-grid-header.compact .total-cell:nth-child(5) {
  width: var(--col-termin);
}
.order-grid-header.compact .grp-row {
  height: var(--beden-h);
}
.order-grid-header.compact .grp-row:not(:first-child) {
  display: none;
}
.order-grid-header.compact .grp-title {
  display: none;
}
.order-grid-header.compact .grp-row:first-child .grp-title {
  display: block;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  padding-right: 4px;
}
.order-grid-header.compact .grp-body {
  height: var(--beden-h);
  align-items: center;
}
.order-grid-header.compact .grp-cell.hdr {
  height: var(--beden-h);
  font-size: 10px;
}
.order-scroll-y.compact-grid-header .order-grid-header .grp-title {
  display: none;
}
.order-scroll-y.compact-grid-header .order-grid-header .grp-row {
  align-items: center;
  height: var(--beden-h);
}
.order-scroll-y.compact-grid-header .order-grid-header .grp-body {
  grid-template-rows: var(--beden-h);
  align-items: center;
}
.order-scroll-y.compact-grid-header .order-grid-header .grp-cell.hdr {
  height: var(--beden-h);
}
.order-scroll-y.compact-grid-header .order-grid-header .total-row {
  align-items: center;
}
.order-scroll-y.compact-grid-header .order-grid-body {
  padding-top: var(--sub-header-h);
}

.summary-row {
  display: grid;
  grid-template-columns:
    var(--col-model)
    var(--col-renk)
    var(--col-ana)
    var(--col-alt)
    var(--col-aciklama)
    calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w) * var(--beden-count)))
    var(--col-adet)
    var(--col-fiyat)
    var(--col-pb)
    var(--col-tutar)
    var(--col-termin);}

.summary-row:hover {
  background: #fffce0;
}
.summary-row.is-editing {
  background: #fff3cd;
  outline: 2px solid #caa83f;
}

.summary-row .cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--beden-h);
  padding: 4px 6px;
  font-size: 13px;
  color: #222;
  box-sizing: border-box;
}
.summary-row.row-closed {
  opacity: 0.55;
  background: #f5f5f5;
  pointer-events: none;
}
.summary-row.row-closed:hover {
  background: #f5f5f5 !important;
}

.summary-row:nth-child(odd) { background: #fffef9; }

/* 🔹 Beden blok hizalaması */
.summary-row .grp-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(calc(var(--grp-title-w) - var(--beden-w)));
}
.summary-row .grp-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--beden-w);
}
.summary-row .grp-row .cell.beden {
  width: var(--beden-w);
  height: var(--beden-h);
  border: 1px solid #ddd;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cell.beden.ghost {
  opacity: 0;
  pointer-events: none;
  border: 1px solid transparent !important;
}

/* 🔹 Sağ kolonlar */
.summary-row .cell.adet,
.summary-row .cell.fiyat,
.summary-row .cell.pb,
.summary-row .cell.tutar,
.summary-row .cell.termin {
  font-weight: 600;
  color: #000;
  border-left: none !important;
  height: 100%;
}

.summary-row .cell.tutar {
  text-align: right;
  justify-content: flex-end;
  padding-right: 8px;
  border-right: none !important;
}

.summary-row .cell.termin {
  background: #fffef9;
  justify-content: center;
  align-items: center;
  min-width: var(--col-termin);
}
.summary-row .cell.termin .q-input {
  width: 100%;
  max-width: 142px !important;
  box-sizing: border-box;
}
.summary-row .cell.termin input {
  text-align: center;
  font-size: 13px;
}

/* ===========================================================
   9️⃣ ORDER EDITOR (ALT FORM)
   =========================================================== */
.editor {
  position: relative;
  z-index: 50;
  background: #fffef9;
  border-top: 1px solid #ddd;
  margin-top: 24px;
  padding: 16px;
}
.editor::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(to right,#c9a227,#e5d28b,#fff7d2);
  margin-bottom: 12px;
  border-radius: 2px;
}
.editor .q-btn:hover { background: #d2b04d; }
.editor .q-input,
.editor .q-select { margin-bottom: 8px; font-size: 14px; }
.cell.termin .termin-label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: #222;
  background: #fffef9;
  border-left: 1px solid #ccc;
  box-sizing: border-box;
}

/* ===========================================================
   🔟 RESPONSIVE + MİNÖR DÜZEN
   =========================================================== */
@media (max-width: 1024px) {
  :root { --beden-w: 40px; --col-aciklama: 120px; }
  .order-grid-header .col-fixed { font-size: 11px; }
  .order-sub-header { font-size: 12.5px; }
}
@media (max-width: 768px) {
  :root {
    --beden-w: 36px;
    --col-model: 70px;
    --col-renk: 60px;
    --col-aciklama: 100px;
  }
  .order-page { font-size: 13px; }
  .order-grid-header .total-cell { font-size: 10.5px; }
}

.summary-row .cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 6px;
  height: auto;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
}

.summary-row .grp-area,
.summary-row .grp-row,
.summary-row .grp-row .cell.beden {
  align-items: center;
  height: 100%;
}
.summary-row .cell.aciklama {
  grid-column: 5 / 6 !important;                /* sadece 5. kolon */
  position: relative !important;
  width: calc(var(--col-aciklama) + 92px) !important;  /* 🔹 74px genişletme */
  margin-right: -92px !important;               /* 🔹 bedenle tam hizalanır */
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 36px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  border-right: 1px solid #ccc !important;
  z-index: 10 !important;
}
/* 🧩 Grid çizgi kontrastı güçlendirme */
.summary-row .cell,
.order-grid-header .col-fixed,
.summary-row .grp-row .cell.beden {
  border-color: #bbb !important; /* 🔹 daha belirgin çizgi */
}

.summary-row .cell:not(:last-child) {
  border-right: 1px solid #bdbdbd !important;
}
/* ===========================================================
   🧱 ALT GRID ÇİZGİLERİ – TÜM SATIRLAR İÇİN
   =========================================================== */
.summary-row {
  border-bottom: 1px solid #ccc; /* 🔹 satır alt çizgisi */
}

.summary-row:last-child {
  border-bottom: 2px solid #b7a33a; /* 🔹 son satırda Baggi gold tonu */
}

/* 🔹 Hücrelerin alt çizgisi (beden dahil) */
.summary-row .cell,
.summary-row .grp-row .cell.beden {
  border-bottom: 1px solid #ddd !important;
}

/* 🔹 Hover olduğunda grid çizgileri kaybolmasın */
.summary-row:hover .cell,
.summary-row:hover .grp-row .cell.beden {
  border-bottom: 1px solid #ccc !important;
}
.summary-row:hover {
  background: #fffce0;
}

.summary-row.is-editing {
  background: #fff3cd;
  outline: 2px solid #caa83f;
  z-index: 2;
}

.editor .q-btn:hover {
  background: #d2b04d;
  color: #fff;
}

/* 🔹 Hover olduğunda grid çizgileri kaybolmasın */
.summary-row:hover .cell,
.summary-row:hover .grp-row .cell.beden {
  border-bottom: 1px solid #ccc !important;
}

/* ===========================================================
   🎨 STOK RENKLERİ (LOW–MID–HIGH)
   =========================================================== */
.stok-red {
  color: #e53935; /* 🔴 Kırmızı */
  font-weight: 600;
}

.stok-yellow {
  color: #f9a825; /* 🟡 Sarı */
  font-weight: 600;
}

.stok-green {
  color: #43a047; /* 🟢 Yeşil */
  font-weight: 600;
}
.q-banner.rounded-borders {
  border-radius: 8px;
}
.order-gateway {
  background: linear-gradient(145deg, #fff 0%, #fafafa 100%);
  height: 100%;
}

.order-btn {
  font-size: 1.2rem;
  padding: 20px 40px;
  border-radius: 12px;
  min-width: 280px;
  transition: all 0.2s ease;
}
.order-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* ===========================================================
   🧭 DRAWER AÇIKKEN GRID HİZALAMA FIX
   =========================================================== */

/* Drawer açıkken içerik kaymaması */
.body--drawer-left-open .order-page {
  width: calc(100vw - var(--drawer-w)); /* viewport'tan drawer genişliği kadar düş */
  overflow-x: visible; /* dış overflow’u kes */
}

/* Scroll konteyner sadece grid içinde çalışsın */
.order-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  background: #fff;
  box-sizing: border-box;
}

/* Scrollbar ve sağ boşluğu dengeler */
.order-grid-header,
.order-sub-header,
.order-grid-body {
  min-width: fit-content;
  width: 100%;
  box-sizing: border-box;
}
/* ===========================================================
   🧱 DRAWER AÇIKKEN TAM HİZALAMA FIX (v2)
   =========================================================== */

/* Drawer açıkken tüm üst bloklar sağdan taşmasın */
.body--drawer-left-open .filter-bar,
.body--drawer-left-open .save-toolbar,
.body--drawer-left-open .order-grid-header,
.body--drawer-left-open .order-sub-header,
.body--drawer-left-open .order-grid-body {
  width: calc(100vw - var(--drawer-w)); /* drawer genişliği kadar daralt */
  margin-left: 0;
  margin-right: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Drawer kapalıyken tam genişlik */
.body--drawer-left-closed .filter-bar,
.body--drawer-left-closed .save-toolbar,
.body--drawer-left-closed .order-grid-header,
.body--drawer-left-closed .order-sub-header,
.body--drawer-left-closed .order-grid-body {
  width: 100vw;
}

/* Order grid sağ sınırı altın kenarlıkla bitir (optik kapanış) */
.order-grid-header,
.order-sub-header,
.order-grid-body {
  border-right: 2px solid var(--baggi-gold);
}
/* ===========================================================
   🎯 SAĞ ALT BOŞLUK FİNAL FIX
   =========================================================== */

/* Drawer açıkken tüm grid konteynerleri sağdan tam sıfırla */
.body--drawer-left-open .order-page,
.body--drawer-left-open .filter-bar,
.body--drawer-left-open .save-toolbar,
.body--drawer-left-open .order-grid-header,
.body--drawer-left-open .order-sub-header,
.body--drawer-left-open .order-grid-body {
  width: calc(100vw - var(--drawer-w) - 8px); /* 🔹 scrollbar toleransı */
  padding-right: 0 !important;
  margin-right: 0 !important;
  overflow-x: visible !important;
}

/* Son altın kenarlık hizasını koru */
.order-grid-body {
  border-right: 2px solid var(--baggi-gold);
}
/* ===========================================================
   🎯 GRID SAĞ HİZALAMA (FILTER + SAVE + HEADER)
   =========================================================== */

/* Ana scroll container referansı */
.order-scroll-x {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* hizalama sola */
  overflow-x: auto;
  overflow-y: visible;
  background: #fff;
}

/* Filter ve Save barlar grid genişliğini takip etsin */
.filter-bar,
.save-toolbar,
.order-grid-header,
.order-sub-header {
  width: fit-content;       /* içeriğe göre genişlik */
  min-width: 100%;          /* minimum ekran kadar */
  box-sizing: border-box;
}

/* Grid body’nin genişliği kadar sağ hizalama */
.order-grid-body {
  width: fit-content;
  box-sizing: border-box;
}
/* 🔒 Kapalı satır */
.summary-row.row-closed {
  background: #e6e6e6 !important;
  opacity: 0.65;
  pointer-events: none; /* tüm inputları disable eder */
}

/* Hover iptal */
.summary-row.row-closed:hover {
  background: #e6e6e6 !important;
}

/* Edit efekti de kapansın */
.summary-row.row-closed.is-editing {
  outline: none !important;
}

/* Sağ kenarda taşma veya padding olmasın */
.filter-bar,
.save-toolbar,
.order-grid-header,
.order-sub-header,
.order-grid-body {
  margin-right: 0 !important;
  padding-right: 0 !important;
  border-right: none !important; /* altın çizgi istemiyorsan kaldırılır */
}
.summary-row.row-error {
  background: rgba(193, 0, 21, 0.08);
}

.row-error-icon {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}


/* Drawer açık/kapalı fark etmeden */
.body--drawer-left-open .order-scroll-x,
.body--drawer-left-closed .order-scroll-x {
  width: 100%;
  overflow-x: auto;
}

/* ===============================
   ORDER LIST (ol-) — Sticky Stack
   =============================== */

:root {
  /* Quasar header yüksekliği */
  --ol-header-h: 56px;
  /* Filter bar yüksekliği (px) — inputlar tek satırsa 56 idealdir */
  --ol-filter-h: 96px;
}

/* q-page tek scroller: header altından başlar */
.ol-page {
  height: calc(100vh - var(--ol-header-h));
  overflow: auto;              /* 🔑 tek scroll container */
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* Filter bar: q-header’ın altında sticky */
.ol-filter-bar {
  position: sticky;
  top: 0;                      /* 🔑 .ol-page scroller’ında en üst */
  z-index: 600;
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 6px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  min-height: var(--ol-filter-h);
  display: flex;
  align-items: center;
}

/* QTable: sticky thead, zebra aktif ve çakışma yok */
.ol-table .q-table__middle {
  overflow: visible !important;   /* sticky thead için güvenli */
  max-height: none !important;
}

/* thead sabitleme: filter bar’ın ALTINA oturur */
.ol-table thead th {
  position: sticky;
  top: var(--ol-filter-h);        /* 🔑 filter yüksekliği kadar boşluk */
  z-index: 500;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  font-weight: 700;
}

/* Zebra */
.ol-table .q-table__body .q-tr:nth-child(odd) {
  background-color: #f7f7f7 !important;
}
.ol-table .q-table__body .q-tr:nth-child(even) {
  background-color: #ffffff !important;
}
.ol-table .q-table__body .q-tr:hover {
  background-color: #fff7d1 !important;
  transition: background-color .15s ease;
}

/* Hücreler */
.ol-table .q-td {
  font-size: .9rem;
  line-height: 1.3;
  padding: 6px 8px !important;
}

/* Güvenli z-index hiyerarşisi */
.q-header { z-index: 1000 !important; } /* header en üstte */
.q-drawer { z-index: 950 !important; }  /* drawer header’ın altında */

/* Mobile */
@media (max-width: 768px) {
  :root { --ol-filter-h: 64px; } /* input kırılıyorsa biraz artır */
  .ol-filter-bar { padding: 8px 12px; }
}
/* ===========================================================
   🟡 ORDERLIST ZEBRA FIX (v3)
   =========================================================== */

/* Her iki tr katmanını da hedefliyoruz (Quasar q-tr + native tr) */
.ol-table tbody tr:nth-child(odd),
.ol-table .q-table__body .q-tr:nth-child(odd) {
  background-color: #faf8ef !important; /* açık krem tonu */
}

.ol-table tbody tr:nth-child(even),
.ol-table .q-table__body .q-tr:nth-child(even) {
  background-color: #ffffff !important;
}

/* Hover tonu: hafif Baggi gold dokunuşu */
.ol-table tbody tr:hover,
.ol-table .q-table__body .q-tr:hover {
  background-color: #fff4cc !important;
  transition: background-color 0.2s ease;
}
/* =========================================================
   📌 OrderList — Toplam USD Banner
   ========================================================= */
.ol-qbanner {
  background: #f9fafb;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 12px;
}

.ol-qbanner-amount {
  color: #1976d2; /* Quasar primary */
  margin-left: 6px;
}
/* =========================================================
   📌 ORDER LIST (ol-) — MULTILINE COLUMN FIX
   ========================================================= */

/* Ortak çok satırlı davranış */
.ol-col-multiline {
  white-space: normal !important;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.25rem;
}

/* 🧾 Cari Adı — 2 SATIR */
.ol-col-cari {
  max-width: 200px;
  min-width: 150px;

  display: -webkit-box;        
  -webkit-box-orient: vertical;

  font-weight: 600;
  font-size: 0.88rem;
}

/* 📝 Açıklama — 5 SATIR */
.ol-col-desc {
  max-width: 220px;
  min-width: 160px;

  display: -webkit-box;
  -webkit-box-orient: vertical;

  font-size: 0.82rem;
  color: #444;
}

/* Hücre padding iyileştirme */
.ol-table .q-td.ol-col-cari,
.ol-table .q-td.ol-col-desc {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Header hizalama */
.ol-table th.ol-col-cari,
.ol-table th.ol-col-desc {
  white-space: nowrap;
}
/* =========================================================
   ORDER LIST — FILTER BAR FLEX FIX (FINAL)
   ========================================================= */

.ol-filter-bar {
  position: sticky;
  top: 0;
  z-index: 600;
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 10px 12px;
}

/* 🔑 TEK SATIR */
.ol-filter-row {
  display: flex;
  align-items: flex-end;   /* 🔑 tüm input & butonlar aynı çizgi */
  gap: 12px;
  flex-wrap: nowrap;       /* ❌ alt satıra düşme */
}

/* Inputlar */
.ol-filter-input {
  min-width: 180px;
  max-width: 260px;
}

/* Arama biraz geniş */
.ol-search {
  min-width: 280px;
}

/* Butonlar */
.ol-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

/* Toplam banner */
.ol-filter-total {
  margin-left: auto;       /* 🔑 sağa yasla */
  background: #f9fafb;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 12px;
  white-space: nowrap;
}

/* Mobile fallback */
@media (max-width: 1200px) {
  .ol-filter-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .ol-filter-total {
    width: 100%;
    justify-content: flex-end;
  }
}

.order-gateway {
  min-height: 100vh;
}

.draft-card {
  width: 320px;
  max-width: 90vw;
}
/* ===========================================================
   🕵️ ACTIVITY LOGS (act-) — GLOBAL
   =========================================================== */

/* Sayfa konteyneri */
.act-page {
  height: calc(100vh - 56px); /* q-header */
  overflow: auto;
  background: #fff;
}

/* Sticky filter bar */
.act-filter-bar {
  position: sticky;
  top: 0;
  z-index: 620;
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 6px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Filtre satırı */
.act-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Input genişlikleri */
.act-filter-input {
  min-width: 160px;
  max-width: 240px;
}

.act-filter-wide {
  min-width: 260px;
}

/* Aksiyon butonları */
.act-filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

/* Tablo */
.act-table {
  font-size: 0.85rem;
}

/* Sticky thead */
.act-table thead th {
  position: sticky;
  top: 56px; /* filter bar yüksekliği */
  z-index: 500;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  font-weight: 700;
}

/* Zebra */
.act-table tbody tr:nth-child(odd) {
  background: #faf8ef;
}
.act-table tbody tr:nth-child(even) {
  background: #fff;
}
.act-table tbody tr:hover {
  background: #fff4cc;
}

/* Hücreler */
.act-table .q-td {
  padding: 6px 8px !important;
  line-height: 1.25;
  font-weight: 600;
}

/* Başarılı / hatalı satır */
.act-row-success {
  background: rgba(67, 160, 71, 0.06);
}
.act-row-fail {
  background: rgba(211, 47, 47, 0.06);
}

/* Badge renkleri */
.act-badge-ok {
  background: #43a047;
}
.act-badge-fail {
  background: #e53935;
}

/* Dar kolon */
.act-col-narrow {
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Route kolonu */
.act-col-route {
  max-width: 260px;
  white-space: normal;
  word-break: break-word;
  font-size: 0.8rem;
}

/* IP / UA */
.act-col-meta {
  font-size: 0.75rem;
  color: #555;
}
/* ================================
   UserList — Piyasa Wrap (NO CUT)
   ================================ */

/* Hücre yukarıdan başlasın */
.ol-col-piyasa {
  vertical-align: top;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Chip konteyner */
.piyasa-wrap {
  display: flex;
  flex-wrap: wrap;            /* 🔑 alt satıra insin */
  align-content: flex-start;

  row-gap: 4px;
  column-gap: 6px;

  /* ❌ KESİNLİKLE YOK */
  max-height: none;
  overflow: visible;
}

/* Chip */
.piyasa-chip {
  flex: 0 0 calc(25% - 6px);  /* 🔑 satırda 4 adet */
  max-width: calc(25% - 6px);

  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-detail-page {
  background: #fafafa;
}
.image-preview {
  width: 100%;
  border-radius: 6px;
}

.image-thumb {
  width: 100%;
  border-radius: 4px;
}

.workorder-page {
  padding-bottom: 80px;
}
/* ===============================
   PERMISSIONS — BAGGI THEME
   =============================== */

.permissions-page {
    background: #fff;
    height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
}

/* Scroll alanı */
.permissions-table-scroll {
    flex: 1;
    overflow: auto;
    background: #fff;
}

/* Tablo */
.permissions-table {
    font-size: 0.85rem;
}

/* Sticky header */
.permissions-table thead th {
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--baggi-cream);
    font-weight: 800;
    color: #222;
    box-shadow: 0 2px 3px rgba(0,0,0,0.06);
}

/* Hücreler */
.permissions-table td {
    font-weight: 600;
    padding: 6px 8px !important;
    color: #333;
}

/* Zebra */
.permissions-table tbody tr:nth-child(odd) {
    background: #fffef7;
}
.permissions-table tbody tr:nth-child(even) {
    background: #ffffff;
}
.permissions-table tbody tr:hover {
    background: #fff4cc;
}

/* Sol kolon sabit */
.permissions-sticky-col {
    position: sticky;
    left: 0;
    z-index: 250;
    background: #fff;
    box-shadow: 2px 0 4px rgba(0,0,0,0.04);
    font-weight: 700;
}

/* Header checkbox */
.permissions-table .q-th .column {
    gap: 2px;
}

/* ===========================================================
   ORDER ENTRY POPUP EDITOR
   =========================================================== */
.order-editor-card {
  width: 98vw;
  max-width: 1900px;
}
.order-editor-card .editor {
  max-height: 76vh;
  overflow: auto;
}
.order-editor-dialog .q-dialog__inner--minimized {
  max-width: 98vw;
}
.order-editor-dialog .q-dialog__inner > div {
  width: 98vw;
  max-width: 1900px;
}