/* ============================================================
   PALET-SATIS — UTILITY KATMANI
   Atomik sınıflar. Tümü tokens.css değişkenlerini kullanır.
   Bu dosyada hardcode değer YOKTUR.

   Responsive önekler: .md:*  (≥768px)   .lg:*  (≥1100px)
   ============================================================ */

/* ---------- DISPLAY ---------- */
.hidden{ display:none !important }
.block{ display:block }
.inline-block{ display:inline-block }
.flex{ display:flex }
.inline-flex{ display:inline-flex }
.grid{ display:grid }

/* ---------- FLEX ---------- */
.flex-row{ flex-direction:row }
.flex-col{ flex-direction:column }
.flex-wrap{ flex-wrap:wrap }
.flex-nowrap{ flex-wrap:nowrap }
.flex-1{ flex:1 1 0% }
.flex-auto{ flex:1 1 auto }
.flex-none{ flex:none }

.items-start{ align-items:flex-start }
.items-center{ align-items:center }
.items-end{ align-items:flex-end }
.items-baseline{ align-items:baseline }
.items-stretch{ align-items:stretch }

.justify-start{ justify-content:flex-start }
.justify-center{ justify-content:center }
.justify-end{ justify-content:flex-end }
.justify-between{ justify-content:space-between }
.justify-around{ justify-content:space-around }

.self-start{ align-self:flex-start }
.self-center{ align-self:center }
.self-end{ align-self:flex-end }

/* ---------- GRID ---------- */
.grid-1{ grid-template-columns:repeat(1,minmax(0,1fr)) }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)) }
.grid-6{ grid-template-columns:repeat(6,minmax(0,1fr)) }
.col-span-2{ grid-column:span 2 / span 2 }
.col-span-3{ grid-column:span 3 / span 3 }
.col-span-full{ grid-column:1 / -1 }

/* ---------- GAP ---------- */
.gap-0{ gap:var(--sp-0) }
.gap-1{ gap:var(--sp-1) }
.gap-2{ gap:var(--sp-2) }
.gap-3{ gap:var(--sp-3) }
.gap-4{ gap:var(--sp-4) }
.gap-5{ gap:var(--sp-5) }
.gap-6{ gap:var(--sp-6) }
.gap-8{ gap:var(--sp-8) }

/* ---------- MARGIN ---------- */
.m-0{ margin:var(--sp-0) }
.mt-1{ margin-top:var(--sp-1) }  .mt-2{ margin-top:var(--sp-2) }
.mt-3{ margin-top:var(--sp-3) }  .mt-4{ margin-top:var(--sp-4) }
.mt-6{ margin-top:var(--sp-6) }  .mt-8{ margin-top:var(--sp-8) }
.mt-12{ margin-top:var(--sp-12) }
.mb-0{ margin-bottom:var(--sp-0) }
.mb-1{ margin-bottom:var(--sp-1) } .mb-2{ margin-bottom:var(--sp-2) }
.mb-3{ margin-bottom:var(--sp-3) } .mb-4{ margin-bottom:var(--sp-4) }
.mb-6{ margin-bottom:var(--sp-6) } .mb-8{ margin-bottom:var(--sp-8) }
.mb-12{ margin-bottom:var(--sp-12) }
.ml-auto{ margin-left:auto }
.mr-auto{ margin-right:auto }
.mx-auto{ margin-left:auto; margin-right:auto }

/* ---------- PADDING ---------- */
.p-0{ padding:var(--sp-0) }
.p-2{ padding:var(--sp-2) }  .p-3{ padding:var(--sp-3) }
.p-4{ padding:var(--sp-4) }  .p-5{ padding:var(--sp-5) }
.p-6{ padding:var(--sp-6) }  .p-8{ padding:var(--sp-8) }
.px-2{ padding-left:var(--sp-2); padding-right:var(--sp-2) }
.px-3{ padding-left:var(--sp-3); padding-right:var(--sp-3) }
.px-4{ padding-left:var(--sp-4); padding-right:var(--sp-4) }
.px-6{ padding-left:var(--sp-6); padding-right:var(--sp-6) }
.py-2{ padding-top:var(--sp-2); padding-bottom:var(--sp-2) }
.py-3{ padding-top:var(--sp-3); padding-bottom:var(--sp-3) }
.py-4{ padding-top:var(--sp-4); padding-bottom:var(--sp-4) }
.py-6{ padding-top:var(--sp-6); padding-bottom:var(--sp-6) }
.py-8{ padding-top:var(--sp-8); padding-bottom:var(--sp-8) }

/* ---------- TİPOGRAFİ ---------- */
.text-xs{ font-size:var(--fs-xs) }
.text-sm{ font-size:var(--fs-sm) }
.text-base{ font-size:var(--fs-md) }
.text-md{ font-size:var(--fs-md) }
.text-lg{ font-size:var(--fs-lg) }
.text-xl{ font-size:var(--fs-xl) }
.text-2xl{ font-size:var(--fs-2xl) }
.text-3xl{ font-size:var(--fs-3xl) }
.text-4xl{ font-size:var(--fs-4xl) }

.font-normal{ font-weight:var(--fw-regular) }
.font-medium{ font-weight:var(--fw-medium) }
.font-semi{ font-weight:var(--fw-semibold) }
.font-bold{ font-weight:var(--fw-bold) }
.font-black{ font-weight:var(--fw-extrabold) }

.leading-tight{ line-height:var(--lh-tight) }
.leading-snug{ line-height:var(--lh-snug) }
.leading-normal{ line-height:var(--lh-normal) }

.tracking-tight{ letter-spacing:var(--ls-tight) }
.tracking-snug{ letter-spacing:var(--ls-normal) }
.tracking-wide{ letter-spacing:var(--ls-wide) }

.text-left{ text-align:left }
.text-center{ text-align:center }
.text-right{ text-align:right }
.uppercase{ text-transform:uppercase }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.nowrap{ white-space:nowrap }
.mono{ font-family:var(--font-mono) }

/* ---------- METİN RENGİ ---------- */
.text-strong{ color:var(--color-text) }
.text-body{ color:var(--color-text-soft) }
.text-muted{ color:var(--color-muted) }
.text-info{ color:var(--color-info-text) }
.text-primary{ color:var(--color-primary-dark) }
.text-success{ color:var(--color-success-text) }
.text-danger{ color:var(--color-danger-text) }
.text-warning{ color:var(--color-warning-text) }
.text-inverse{ color:var(--color-inverse) }

/* Alan anlamları — ekranlarda BUNLARI tercih et */
.text-money-in{ color:var(--color-money-in) }
.text-money-out{ color:var(--color-money-out) }
.text-profit{ color:var(--color-profit) }
.text-loss{ color:var(--color-loss) }
.text-receivable{ color:var(--color-receivable) }
.text-payable{ color:var(--color-payable) }
.text-free-issue{ color:var(--color-free-issue) }
.text-disposal{ color:var(--color-disposal) }

/* ---------- ZEMİN ---------- */
.bg-page{ background:var(--color-bg) }
.bg-surface{ background:var(--color-surface) }
.bg-surface-2{ background:var(--color-surface-2) }
.bg-surface-3{ background:var(--color-surface-3) }
.bg-dark{ background:var(--color-text); color:var(--color-inverse) }
.bg-primary-light{ background:var(--color-primary-light) }
.bg-success-light{ background:var(--color-success-light) }
.bg-danger-light{ background:var(--color-danger-light) }
.bg-warning-light{ background:var(--color-warning-light) }
.bg-neutral-light{ background:var(--color-neutral-light) }

/* ---------- KENARLIK ---------- */
.border{ border:1px solid var(--color-border) }
.border-soft{ border:1px solid var(--color-border-soft) }
.border-dashed{ border:1px dashed var(--color-border) }
.border-t{ border-top:1px solid var(--color-border) }
.border-b{ border-bottom:1px solid var(--color-border) }
.border-l-primary{ border-left:3px solid var(--color-primary) }
.border-l-success{ border-left:3px solid var(--color-success) }
.border-l-danger{ border-left:3px solid var(--color-danger) }
.border-l-warning{ border-left:3px solid var(--color-warning) }
.border-none{ border:0 }

/* ---------- KÖŞE ---------- */
.rounded-sm{ border-radius:var(--r-sm) }
.rounded-md{ border-radius:var(--r-md) }
.rounded-lg{ border-radius:var(--r-lg) }
.rounded-xl{ border-radius:var(--r-xl) }
.rounded-2xl{ border-radius:var(--r-2xl) }
.rounded-full{ border-radius:var(--r-full) }

/* ---------- GÖLGE ---------- */
.shadow-none{ box-shadow:none }
.shadow-xs{ box-shadow:var(--shadow-xs) }
.shadow-sm{ box-shadow:var(--shadow-sm) }
.shadow-md{ box-shadow:var(--shadow-md) }
.shadow-lg{ box-shadow:var(--shadow-lg) }

/* ---------- ÖLÇÜ ---------- */
.w-full{ width:100% }
.w-auto{ width:auto }
.max-w-full{ max-width:100% }
.h-full{ height:100% }
.min-w-0{ min-width:0 }
.shell{ max-width:var(--container-max); margin-left:auto; margin-right:auto }

/* ---------- KONUM ---------- */
.relative{ position:relative }
.absolute{ position:absolute }
.sticky{ position:sticky }
.top-0{ top:0 }
.z-sticky{ z-index:var(--z-sticky) }
.z-modal{ z-index:var(--z-modal) }

/* ---------- TAŞMA ---------- */
.overflow-hidden{ overflow:hidden }
.overflow-x-auto{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.overflow-y-auto{ overflow-y:auto }

/* ---------- ETKİLEŞİM ---------- */
.cursor-pointer{ cursor:pointer }
.cursor-not-allowed{ cursor:not-allowed }
.select-none{ user-select:none }
.pointer-events-none{ pointer-events:none }
.transition{ transition:all var(--tr-normal) }

/* ---------- ERİŞİLEBİLİRLİK ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width:768px){
  .md\:hidden{ display:none }
  .md\:block{ display:block }
  .md\:flex{ display:flex }
  .md\:grid{ display:grid }
  .md\:flex-row{ flex-direction:row }
  .md\:flex-col{ flex-direction:column }
  .md\:grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .md\:grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .md\:grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .md\:text-left{ text-align:left }
  .md\:text-right{ text-align:right }
  .md\:w-auto{ width:auto }
}

@media (min-width:1100px){
  .lg\:hidden{ display:none }
  .lg\:block{ display:block }
  .lg\:flex{ display:flex }
  .lg\:grid{ display:grid }
  .lg\:grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lg\:grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .lg\:grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .lg\:grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)) }
  .lg\:col-span-2{ grid-column:span 2 / span 2 }
}

/* ---------- KÜÇÜK EKRAN VARSAYILANI ----------
   Grid'ler mobilde tek sütuna düşer. Aksini istiyorsan .md:grid-* ekle. */
@media (max-width:767px){
  .grid-2,.grid-3,.grid-4,.grid-5,.grid-6{ grid-template-columns:1fr }
  .col-span-2,.col-span-3{ grid-column:auto }
}

/* ---------- YAZDIRMA ---------- */
@media print{
  .no-print{ display:none !important }
  .shadow-1,.shadow-2,.shadow-3{ box-shadow:none }
  .overflow-x-auto{ overflow:visible }
}