:root {
  --bg: #070B2A;
  --sf: #0D1133;
  --sf2: #111640;
  --sf3: #172050;
  --bd: rgba(255, 255, 255, .07);
  --bd2: rgba(255, 255, 255, .13);
  --tx: #E6E9F4;
  --tx2: #7A82AA;
  --tx3: #8890B5;
  --ac: #5C5FFF;
  --ac2: #8183FF;
  --acd: rgba(92, 95, 255, .15);
  --gr: #10C980;
  --grd: rgba(16, 201, 128, .13);
  --rd: #FF4C4C;
  --rdd: rgba(255, 76, 76, .13);
  --am: #F5A623;
  --amd: rgba(245, 166, 35, .13);
  --bl: #3B89FF;
  --bld: rgba(59, 137, 255, .13);
  --fn: 'Montserrat', sans-serif;
  --sw: 248px;
  --pu: #A855F7;
  --pud: rgba(168, 85, 247, .13);
}

[data-theme='light'] {
  --ph-bg: rgba(240, 242, 250, .95);
  --bg: #F0F2FA;
  --sf: #FFFFFF;
  --sf2: #F4F5FC;
  --sf3: #E8EAF4;
  --bd: rgba(0, 0, 0, .08);
  --bd2: rgba(0, 0, 0, .15);
  --tx: #1A1D2E;
  --tx2: #5A6080;
  --tx3: #6C7499;
  --ac: #070B2A;
  --ac2: #0D1640;
  --acd: rgba(7, 11, 42, .1);
  --grd: rgba(16, 201, 128, .1);
  --rdd: rgba(255, 76, 76, .1);
  --amd: rgba(245, 166, 35, .1);
  --bld: rgba(59, 137, 255, .1);
}

.vs-qty-inp::-webkit-inner-spin-button,
.vs-qty-inp::-webkit-outer-spin-button,
.pvs-qty-inp::-webkit-inner-spin-button,
.pvs-qty-inp::-webkit-outer-spin-button,
.cart-qty-inp::-webkit-inner-spin-button,
.cart-qty-inp::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.vs-qty-inp,
.pvs-qty-inp,
.cart-qty-inp {
  -moz-appearance: textfield;
  appearance: textfield
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--fn);
  font-size: 17.0px;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: var(--bd2);
  border-radius: 6px
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ac)
}

button {
  font-family: var(--fn);
  cursor: pointer
}

input,
select,
textarea {
  font-family: var(--fn)
}

/* AUTH */
.auth-wrap {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 60% 35%, rgba(92, 95, 255, .2) 0%, var(--bg) 62%)
}

.auth-box {
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: 22px;
  padding: 42px 38px;
  width: 100%;
  max-width: 425px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5)
}

.al {
  text-align: center;
  margin-bottom: 32px
}

.al-ic {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24.0px;
  margin: 0 auto 13px
}

.al h1 {
  font-size: 21.0px;
  font-weight: 900;
  letter-spacing: .4px
}

.al h1 em {
  color: var(--ac2);
  font-style: normal
}

.al p {
  font-size: 14.0px;
  font-weight: 600;
  color: var(--tx2);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 5px
}

.a-tabs {
  display: flex;
  background: var(--sf2);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
  gap: 3px
}

.a-tab {
  flex: 1;
  padding: 9px;
  border: none;
  background: transparent;
  color: var(--tx2);
  border-radius: 7px;
  font-size: 13.0px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s
}

.a-tab.on {
  background: var(--ac);
  color: #fff
}

.a-lbl {
  display: block;
  font-size: 13.0px;
  font-weight: 700;
  color: var(--tx2);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .07em
}

.a-inp {
  width: 100%;
  padding: 11px 14px;
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 10px;
  color: var(--tx);
  font-size: 16.5px;
  outline: none;
  transition: all .2s;
  margin-bottom: 12px
}

.a-inp:focus {
  border-color: var(--ac);
  background: var(--sf3)
}

.a-inp::placeholder {
  color: var(--tx3)
}

select.a-inp option {
  background: var(--sf2)
}

.a-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--ac), #7C7FFF);
  border: none;
  border-radius: 11px;
  color: #fff;
  font-size: 17.0px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 5px;
  transition: all .2s;
  letter-spacing: .04em
}

.a-btn:hover {
  opacity: .9
}

.a-err {
  font-size: 15.0px;
  color: var(--rd);
  text-align: center;
  margin-top: 8px;
  min-height: 18px
}

/* APP */
.app {
  display: none;
  height: 100vh;
  overflow: hidden
}

.app.on {
  display: flex
}

.main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden
}

.sb {
  width: var(--sw);
  min-width: var(--sw);
  background: var(--sf);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  transition: width .22s cubic-bezier(.4, 0, .2, 1), min-width .22s cubic-bezier(.4, 0, .2, 1);
  position: relative
}

.sb-logo {
  padding: 19px 15px 13px;
  border-bottom: 1px solid var(--bd)
}

.sb-logo-m {
  display: flex;
  align-items: center;
  gap: 10px
}

.sb-logo-i {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19.0px;
  flex-shrink: 0
}

.sb-logo-t {
  font-size: 15.0px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.35
}

.sb-logo-t span {
  display: block;
  font-size: 12.0px;
  font-weight: 400;
  color: var(--tx2);
  letter-spacing: .1em;
  text-transform: uppercase
}

.sb-user {
  padding: 9px 13px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  gap: 8px
}

.sb-av {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--acd);
  border: 1px solid var(--ac);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.0px;
  font-weight: 800;
  color: var(--ac2);
  flex-shrink: 0
}

.sb-ui {
  flex: 1;
  min-width: 0
}

.sb-un {
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sb-ur {
  font-size: 12.0px;
  color: var(--tx2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em
}

.sb-out {
  background: none;
  border: none;
  color: var(--tx3);
  font-size: 17.0px;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 5px;
  transition: all .15s
}

.sb-out:hover {
  color: var(--rd)
}

.mob-logout-btn { display: none }

.sb-mid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column
}

.sb-nav {
  padding: 7px 7px 0;
  display: flex;
  flex-direction: column;
  position: relative
}

.sb-sec {
  margin-bottom: 16px
}

.sb-lbl {
  font-size: 12.0px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tx3);
  padding: 0 8px;
  margin-bottom: 4px;
  display: block
}

.ni {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--tx2);
  font-weight: 500;
  font-size: 12.5px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease;
  margin-bottom: 2px;
  border: 1px solid transparent;
  user-select: none
}

.ni:hover {
  background: var(--sf2);
  color: var(--tx);
  border-color: var(--bd);
  transform: translateX(3px)
}

.ni.on {
  background: var(--acd);
  color: var(--ac2);
  border-color: rgba(92, 95, 255, .25);
  box-shadow: 0 2px 8px rgba(92, 95, 255, .12)
}

.ni .ic {
  font-size: 17.0px;
  width: 17px;
  text-align: center;
  flex-shrink: 0
}


/* PAGE */
.page {
  display: none
}

.page.on {
  display: block
}

.ph {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ph-bg, rgba(7, 11, 42, .95));
  border-bottom: 1px solid var(--bd);
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap
}

.pt {
  font-size: 18.0px;
  font-weight: 800;
  letter-spacing: -.3px
}

.ps {
  font-size: 14.0px;
  color: var(--tx2);
  margin-top: 1px
}

.pb {
  padding: 20px 24px
}

/* CARDS */
.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 15px;
  padding: 16px
}

.ct {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tx3);
  margin-bottom: 10px
}

.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.g4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px
}

.sep {
  height: 12px
}

/* STAT */
.stat {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 15px;
  padding: 15px 17px;
  position: relative;
  overflow: hidden
}

.stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px
}

.st-ac::before {
  background: linear-gradient(90deg, var(--ac), var(--ac2))
}

.st-gr::before {
  background: var(--gr)
}

.st-rd::before {
  background: var(--rd)
}

.st-am::before {
  background: var(--am)
}

.st-bl::before {
  background: var(--bl)
}

.st-pu::before {
  background: #A855F7
}

.st-l {
  font-size: 13.0px;
  font-weight: 700;
  color: var(--tx2);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  display: flex;
  align-items: center;
  gap: 4px
}

.st-v {
  font-size: 20.0px;
  font-weight: 800;
  letter-spacing: -.6px;
  position: relative
}

.st-s {
  font-size: 13.0px;
  color: var(--tx3);
  margin-top: 3px
}

.rv {
  display: inline
}

.hv .rv {
  visibility: hidden
}

.hv::after {
  content: '•••••';
  position: absolute;
  font-size: 18.0px;
  letter-spacing: 2px;
  left: 0;
  top: 2px
}

.eye {
  background: none;
  border: none;
  color: var(--tx3);
  font-size: 15.0px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 3px
}

/* BTNS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid var(--bd2);
  background: var(--sf2);
  color: var(--tx);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .17s;
  white-space: nowrap
}

.btn:hover {
  background: var(--sf3)
}

.btn-p {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac)
}

.btn-p:hover {
  background: #4A4DFF
}

.btn-g {
  background: var(--gr);
  color: #000;
  border-color: var(--gr)
}

.btn-g:hover {
  background: #0BA86A
}

.btn-r {
  background: var(--rdd);
  color: var(--rd);
  border-color: rgba(255, 76, 76, .28)
}

.btn-r:hover {
  background: rgba(255, 76, 76, .22)
}

.btn-am {
  background: var(--am);
  color: #000;
  border-color: var(--am)
}

.btn-am:hover {
  opacity: .85
}

.btn-pu {
  background: var(--bl);
  color: #fff;
  border-color: var(--bl)
}

.btn-pu:hover {
  opacity: .85
}

.btn-sm {
  padding: 6px 13px;
  font-size: 12.5px;
  border-radius: 7px
}

.btn-xs {
  padding: 3px 8px;
  font-size: 11.5px;
  border-radius: 6px
}

/* TABLE */
.tw {
  overflow-x: auto;
  border-radius: 13px;
  border: 1px solid var(--bd);
  -webkit-overflow-scrolling: touch
}


table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--sf)
}

thead tr {
  border-bottom: 1px solid var(--bd)
}

th {
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx3);
  text-align: left;
  white-space: nowrap
}

td {
  padding: 10px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--bd);
  vertical-align: middle
}

tr:last-child td {
  border-bottom: none
}

tbody tr:hover td {
  background: rgba(255, 255, 255, .02)
}

/* BADGES */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 700
}

.b-gr {
  background: var(--grd);
  color: var(--gr)
}

.b-rd {
  background: var(--rdd);
  color: var(--rd)
}

.b-am {
  background: var(--amd);
  color: var(--am)
}

.b-bl {
  background: var(--bld);
  color: var(--bl)
}

.b-ac {
  background: var(--acd);
  color: var(--ac2)
}

.b-pu {
  background: var(--pud);
  color: var(--pu)
}

.b-gy {
  background: rgba(120, 130, 170, .12);
  color: var(--tx2)
}

/* MODAL */
.ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

#mo-inv.on {
  z-index: 400
}

#mo-var-hist.on {
  z-index: 300
}

.ov.on {
  display: flex
}

.modal {
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: 19px;
  padding: 24px;
  width: 100%;
  max-width: 490px;
  max-height: 92vh;
  overflow-y: auto;
  animation: ma .2s ease
}

.mlg {
  max-width: 700px
}

#mo-kasa-det .modal {
  max-width: min(960px, 94vw);
  width: min(960px, 94vw);
  max-height: 90vh;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

#mo-kasa-det .mh {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--bd);
}

#mo-kasa-det .mf {
  padding: 14px 24px;
  border-top: 1px solid var(--bd);
}

@media (max-width: 700px) {
  #mo-kasa-det .modal {
    max-width: 100%;
    width: 100%;
    max-height: 95vh;
    border-radius: 14px 14px 0 0;
    align-self: flex-end;
  }
}

@keyframes ma {
  from {
    transform: translateY(14px);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes blWarn {
  0%   { opacity:0; transform:scale(.55) translateY(-30px); }
  65%  { transform:scale(1.04) translateY(4px); }
  80%  { transform:scale(.97) translateY(-2px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

@keyframes blIconPulse {
  0%,100% { transform:scale(1) rotate(-3deg); }
  40%      { transform:scale(1.22) rotate(3deg); }
  70%      { transform:scale(.92) rotate(-2deg); }
}

@keyframes blShimmer {
  0%   { background-position:200% center; }
  100% { background-position:-200% center; }
}

#mo-bl-confirm .bl-confirm-box {
  background: var(--sf);
  border: 2px solid var(--rd);
  border-radius: 20px;
  width: 95vw;
  max-width: 400px;
  overflow: hidden;
  animation: blWarn .4s cubic-bezier(.34,1.4,.64,1) both;
  box-shadow: 0 0 0 4px rgba(255,76,76,.18), 0 24px 60px rgba(0,0,0,.55)
}

#mo-bl-confirm .bl-head {
  background: linear-gradient(140deg,#8b0000 0%,#c0392b 55%,#8b0000 100%);
  background-size: 300% 100%;
  animation: blShimmer 3s linear infinite;
  padding: 26px 24px 20px;
  text-align: center;
  position: relative;
}

#mo-bl-confirm .bl-icon {
  font-size: 52px;
  display: block;
  animation: blIconPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255,76,76,.7);
}

#mo-bl-confirm .bl-title {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-top: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

#mo-bl-confirm .bl-stripe {
  height: 4px;
  background: repeating-linear-gradient(90deg,#FF4C4C 0,#FF4C4C 12px,#ff0000 12px,#ff0000 24px);
}

#mo-bl-confirm .bl-body {
  padding: 24px 24px 22px;
  text-align: center;
}

#mo-bl-confirm .bl-label {
  font-size: 12px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

#mo-bl-confirm .bl-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--rd);
  padding: 8px 14px;
  background: var(--rdd);
  border-radius: 10px;
  border: 1px solid rgba(255,76,76,.3);
  margin: 0 0 16px;
  word-break: break-word;
}

#mo-bl-confirm .bl-question {
  font-size: 13px;
  color: var(--tx2);
  margin-bottom: 22px;
  line-height: 1.5;
}

#mo-bl-confirm .bl-actions {
  display: flex;
  gap: 10px;
}

#mo-bl-confirm .bl-actions .btn {
  flex: 1;
  padding: 11px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
}

/* Soft (yellow) variant */
#mo-bl-confirm .bl-confirm-box.bl-soft {
  border-color: #f0a500;
  box-shadow: 0 0 0 4px rgba(240,165,0,.18), 0 24px 60px rgba(0,0,0,.55)
}

#mo-bl-confirm .bl-head-soft {
  background: linear-gradient(140deg,#7a5000 0%,#b87800 55%,#7a5000 100%);
  background-size: 300% 100%;
  animation: blShimmer 3s linear infinite;
}

@keyframes blWarnSoft {
  0%   { opacity:0; transform:scale(.55) translateY(-30px); }
  65%  { transform:scale(1.04) translateY(4px); }
  80%  { transform:scale(.97) translateY(-2px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

#mo-bl-confirm .bl-confirm-box.bl-soft {
  animation: blWarnSoft .4s cubic-bezier(.34,1.4,.64,1) both;
}

#mo-bl-confirm .bl-confirm-box.bl-soft .bl-name {
  color: #c07a00;
  background: rgba(240,165,0,.13);
  border-color: rgba(240,165,0,.35);
}

.mh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px
}

.mt {
  font-size: 19.0px;
  font-weight: 800;
  letter-spacing: -.3px
}

.mcl {
  background: none;
  border: none;
  color: var(--tx2);
  font-size: 17.0px;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 7px;
  transition: all .15s
}

.mcl:hover {
  color: var(--rd)
}

.mf {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bd)
}

.fg {
  margin-bottom: 12px
}

.fg label {
  display: block;
  font-size: 13.0px;
  font-weight: 700;
  color: var(--tx2);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .06em
}

.fg input,
.fg select,
.fg textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 9px;
  color: var(--tx);
  font-size: 13.0px;
  outline: none;
  transition: all .17s
}

.fg input:focus,
.fg select:focus {
  border-color: var(--ac);
  background: var(--sf3)
}

.fg input::placeholder,
.fg textarea::placeholder {
  color: var(--tx2);
  opacity: .55
}

#inv-new-type-nm::placeholder {
  color: var(--tx2);
  opacity: .6
}

.fg select option {
  background: var(--sf2)
}

.fg textarea {
  resize: vertical;
  min-height: 68px
}

.fr2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px
}

.fr3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px
}

.opt {
  font-size: 11.5px;
  color: var(--tx3);
  margin-left: 3px;
  background: var(--sf3);
  padding: 1px 4px;
  border-radius: 3px
}

/* SEARCH DROPDOWN */
.sdw {
  position: relative
}

.sdw input {
  width: 100%;
  padding: 9px 12px;
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 9px;
  color: var(--tx);
  font-size: 13.0px;
  outline: none;
  transition: all .17s
}

.sdw input:focus {
  border-color: var(--ac)
}

.sdrop {
  position: absolute;
  top: calc(100%+4px);
  left: 0;
  right: 0;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 11px;
  z-index: 50;
  max-height: 210px;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  display: none
}

.sdrop.on {
  display: block
}

.si {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 12.5px;
  border-bottom: 1px solid var(--bd);
  transition: all .15s
}

.si:last-child {
  border-bottom: none
}

.si:hover {
  background: var(--sf3)
}

.si small {
  color: var(--tx2);
  font-size: 13.0px;
  display: block;
  margin-top: 1px
}

/* TABS */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--sf2);
  border-radius: 11px;
  padding: 4px;
  margin-bottom: 16px
}

.tab {
  flex: 1;
  padding: 7px;
  border: none;
  background: transparent;
  color: var(--tx2);
  border-radius: 8px;
  font-size: 15.0px;
  font-weight: 600;
  cursor: pointer;
  transition: all .17s;
  text-align: center
}

.tab.on {
  background: var(--sf3);
  color: var(--tx)
}

/* EMPTY */
.empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--tx3)
}

.em-ic {
  font-size: 32.0px;
  margin-bottom: 9px
}

.em-tx {
  font-size: 12.5px
}

/* CART ITEM ROW (multi-variant) */
.cart-item-row {
  padding: 7px 10px;
  background: var(--sf3);
  border-radius: 8px;
  margin-bottom: 5px;
}
.cart-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cart-item-btm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* SALE ROW */
.sr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  background: var(--sf2);
  border-radius: 10px;
  border: 1px solid var(--bd);
  margin-bottom: 5px
}

.sr-ic {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--acd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.0px;
  flex-shrink: 0
}

.sr-m {
  flex: 1;
  min-width: 0
}

.sr-n {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sr-i {
  font-size: 13.0px;
  color: var(--tx2)
}

.qb {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--tx);
  font-size: 17.0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s
}

.qb:hover {
  background: var(--acd);
  border-color: var(--ac)
}

.sr-p {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gr);
  white-space: nowrap;
  min-width: 72px;
  text-align: right
}

/* PROFILE */
.phdr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--sf2);
  border-radius: 12px;
  border: 1px solid var(--bd);
  margin-bottom: 14px
}
.phdr-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%
}
.phdr-contacts {
  width: 100%;
  padding-top: 4px;
  border-top: 1px solid var(--bd);
}

.pav {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17.0px;
  font-weight: 800;
  flex-shrink: 0
}

.pi {
  flex: 1;
  min-width: 0
}

.pnm {
  font-size: 18.0px;
  font-weight: 800;
  margin-bottom: 2px
}

.pdt {
  font-size: 14.0px;
  color: var(--tx2)
}

.pbal-l {
  font-size: 12.0px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tx3);
  margin-bottom: 2px
}

.pbal-v {
  font-size: 19.0px;
  font-weight: 800;
  letter-spacing: -.4px
}

/* PRODUCT CARD */
.pc {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 13px;
  padding: 14px;
  transition: all .2s;
  cursor: pointer
}

.pc:hover {
  border-color: var(--ac);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3)
}

.pc-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18.0px;
  margin-bottom: 10px
}

.pc-nm {
  font-size: 13.0px;
  font-weight: 700;
  margin-bottom: 2px
}

.pc-cat {
  font-size: 13.5px;
  color: var(--tx2);
  margin-bottom: 8px
}

/* KASA CARD */
.kc {
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 13px;
  padding: 14px;
  transition: all .2s
}

.kc:hover {
  border-color: var(--bd2)
}

/* CAT ACCORDION */
.cgb {
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 13px;
  overflow: hidden;
  margin-bottom: 9px
}

.cgh {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  transition: all .15s
}

.cgh:hover {
  background: var(--sf3)
}

.cg-bd {
  padding: 0 14px 10px;
  display: none
}

.cg-bd.open {
  display: block
}

.cg-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--sf);
  border: 1px solid var(--bd);
  margin-bottom: 4px
}

/* EMP CARD */
.ec {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 15px;
  padding: 15px;
  transition: all .2s
}

/* REPORT KPI */
.rkpi {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 13px;
  padding: 14px 16px
}

.rkpi-l {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx3);
  margin-bottom: 4px
}

.rkpi-v {
  font-size: 18.0px;
  font-weight: 800;
  letter-spacing: -.5px
}

.rkpi-s {
  font-size: 13.0px;
  color: var(--tx2);
  margin-top: 2px
}

/* PROGRESS */
.prh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px
}

.prl {
  font-size: 15.0px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px
}

.prv {
  font-size: 15.0px;
  font-weight: 700
}

.prb {
  height: 5px;
  background: var(--sf3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 9px
}

.prf {
  height: 100%;
  border-radius: 3px;
  transition: width .5s ease
}

/* TOAST */
#toast {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transform: translateY(8px);
  transition: all .26s;
  pointer-events: none;
  max-width: 260px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4)
}

#toast.show {
  opacity: 1;
  transform: translateY(0)
}

#toast.ok {
  border-color: var(--gr);
  color: var(--gr)
}

#toast.err {
  border-color: var(--rd);
  color: var(--rd)
}

.hidden {
  display: none !important
}

.rep-qd-btn {
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--tx2);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--fn);
  transition: all .15s
}

.rep-qd-btn.on {
  background: var(--ac);
  color: #fff
}

.rep-qd-btn:hover:not(.on) {
  background: var(--sf3);
  color: var(--tx)
}


/* ── SIDEBAR COLLAPSED ── */
.sb.collapsed {
  width: 56px !important;
  min-width: 56px !important;
  overflow: visible
}

/* Tüm yazı ve etiketleri gizle */
.sb.collapsed .sb-logo-t,
.sb.collapsed .sb-lbl,
.sb.collapsed .sb-un,
.sb.collapsed .sb-ur,
.sb.collapsed .sb-ui,
.sb.collapsed #theme-lbl,
.sb.collapsed .sb-out,
.sb.collapsed .ni-txt,
.sb.collapsed [style*="padding:7px 7px"]>span:first-child {
  display: none !important
}

/* Nav item: sadece ikon ortada */
.sb.collapsed .ni {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
  border-radius: 0;
  width: 100%
}

.sb.collapsed .ni .ic {
  font-size: 18.0px;
  width: 56px;
  text-align: center;
  margin: 0
}

/* Logo: sadece resim ortada */
.sb.collapsed .sb-logo {
  padding: 12px 0;
  display: flex;
  justify-content: center
}

.sb.collapsed .sb-logo-m {
  justify-content: center
}

.sb.collapsed .sb-logo img {
  width: 34px;
  height: 34px;
  margin: 0
}

/* Kullanıcı alanı: sadece avatar */
.sb.collapsed .sb-user {
  justify-content: center;
  padding: 8px 0
}

.sb.collapsed .sb-av {
  flex-shrink: 0;
  margin: 0
}

/* Tema butonu: sadece ikon */
.sb.collapsed #theme-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  margin: 4px auto;
  display: flex !important
}

.sb.collapsed #theme-icon {
  display: inline !important;
  font-size: 16.0px
}

.sb.collapsed #theme-lbl {
  display: none !important
}

.sb.collapsed [style*="padding:7px 13px"] {
  justify-content: center !important;
  padding: 6px 0 !important
}

.sb.collapsed [style*="padding:7px 13px"] span:first-child {
  display: none !important
}

/* Yönetici bölümü */
.sb.collapsed [style*="padding:7px 7px 7px"] {
  padding: 4px 0
}

/* sb-sec padding sıfırla */
.sb.collapsed .sb-sec {
  margin-bottom: 4px
}



.sb-collapse-btn:hover {
  color: var(--tx);
  background: var(--sf2)
}

/* Tooltip: hover'da isim göster */
.sb.collapsed .ni {
  position: relative
}

.sb.collapsed .ni:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--sf3);
  color: var(--tx);
  border: 1px solid var(--bd2);
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 15.0px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.sb-collapse-btn {
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  font-size: 17.0px;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--tx3);
  padding: 2px;
  line-height: 1
}



.sb.collapsed #sb-toggle-btn {
  margin: 0 auto
}

.sb.collapsed [style*="justify-content:flex-end;padding:5px 10px"] {
  justify-content: center !important
}

/* ── SIDEBAR TOGGLE ── */
.sb-toggle-wrap {
  position: fixed;
  left: calc(var(--sw) - 18px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  transition: left .22s cubic-bezier(.4, 0, .2, 1);
}

#sb-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sf);
  border: 1.5px solid var(--bd2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tx2);
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
  padding: 0;
}

#sb-toggle-btn:hover {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac);
  box-shadow: 0 4px 16px rgba(92, 95, 255, .4);
}

#sb-toggle-btn svg {
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.sb.collapsed #sb-toggle-btn svg {
  transform: rotate(180deg);
}

.sb.collapsed .sb-toggle-wrap {
  left: calc(56px - 18px)
}

.sb.collapsed .ni:hover {
  transform: none
}

/* ── Light mod hover renkleri ── */
[data-theme='light'] .btn-p:hover {
  background: #0D1640 !important;
  border-color: #0D1640 !important
}

[data-theme='light'] .btn-p {
  background: var(--ac) !important;
  border-color: var(--ac) !important
}

[data-theme='light'] .ni:hover {
  background: rgba(7, 11, 42, .08) !important;
  color: var(--ac) !important;
  border-color: rgba(7, 11, 42, .15) !important
}

[data-theme='light'] .ni.on {
  background: rgba(7, 11, 42, .12) !important;
  color: var(--ac) !important;
  border-color: rgba(7, 11, 42, .25) !important;
  box-shadow: 0 2px 8px rgba(7, 11, 42, .12) !important
}

[data-theme='light'] .tab.on {
  background: var(--ac) !important;
  color: #fff !important;
  border-color: var(--ac) !important
}

[data-theme='light'] .tab:hover:not(.on) {
  background: rgba(7, 11, 42, .07) !important;
  color: var(--ac) !important
}

[data-theme='light'] .kc:hover {
  border-color: var(--ac) !important
}

[data-theme='light'] .pc:hover {
  border-color: var(--ac) !important
}

[data-theme='light'] .btn:hover {
  border-color: rgba(7, 11, 42, .3) !important;
  color: var(--ac) !important
}

[data-theme='light'] #sb-toggle-btn:hover {
  background: var(--ac) !important;
  border-color: var(--ac) !important
}

[data-theme='light'] .tr-hover:hover {
  background: rgba(7, 11, 42, .04) !important
}

[data-theme='light'] .si:hover {
  background: rgba(7, 11, 42, .06) !important
}

[data-theme='light'] a:hover,
[data-theme='light'] .eye:hover {
  color: var(--ac) !important
}

/* ── Typography: SemiBold küçük, Bold büyük ── */
/* Küçük yazılar (label, badge, alt başlık) → SemiBold (600) */
label,
.opt,
.sb-lbl,
.st-l,
.ct,
.ps,
.sr-i,
.sr-n,
.badge,
.pdt,
.pbal-l,
[style*="font-size:9"],
[style*="font-size:10"],
[style*="font-size:11"],
[style*="font-size:12"] {
  font-weight: 600 !important;
}

/* Büyük/önemli yazılar → Bold (700+) */
.pt,
.st-v,
.rv,
.pnm,
.pbal-v,
h1,
h2,
h3,
[style*="font-size:18"],
[style*="font-size:20"],
[style*="font-size:22"],
[style*="font-size:24"],
[style*="font-weight:800"],
[style*="font-weight:900"] {
  font-weight: 700 !important;
}

/* Buton yazıları SemiBold */
.btn,
.ni,
.tab {
  font-weight: 600 !important;
}

/* Aktif menü Bold */
.ni.on {
  font-weight: 700 !important;
}

.sl-qd-btn {
  padding: 5px 8px;
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 7px;
  color: var(--tx2);
  font-size: 14.5px;
  font-family: var(--fn);
  cursor: pointer;
  text-align: center;
  transition: background .12s, border-color .12s;
  font-weight: 600
}

.sl-qd-btn:hover {
  background: var(--acd);
  border-color: var(--ac);
  color: var(--ac2)
}

.sl-qd-btn.active {
  background: var(--acd);
  border-color: var(--ac);
  color: var(--ac2)
}

/* ── Logo filtreleri ── */
#sb-logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  transition: filter .3s;
}

[data-theme='light'] #sb-logo-img {
  filter: brightness(0);
}

#auth-logo-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  transition: filter .3s;
}

[data-theme='light'] #auth-logo-img {
  filter: brightness(0);
}

/* ── Logo yazı rengi ── */
.sb-logo-t {
  color: var(--tx);
  transition: color .3s;
}

[data-theme='light'] .sb-logo-t {
  color: #1A1D2E;
}

@keyframes invSaveIn {
  from {
    opacity: 0;
    transform: scale(.7)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes invCheckPop {
  from {
    opacity: 0;
    transform: scale(0) rotate(-20deg)
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0)
  }
}

#mo-pay .fg label {
  font-size: 13px
}

#mo-pay .fg input,
#mo-pay .fg select {
  font-size: 14px;
  padding: 9px 12px
}

#mo-pay .mt {
  font-size: 17px
}

/* Tutar+Para birimi tek kutu */
.mp-tutar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--sf2);
  border: 1.5px solid var(--bd2);
  border-radius: 10px
}
.mp-cur-sym {
  font-size: 20px;
  font-weight: 900;
  color: var(--tx3);
  flex-shrink: 0;
  line-height: 1
}
/* .fg width:100% global kuralını ezip flex layout'u kurtarıyoruz */
.mp-tutar-inner input,
.mp-tutar-inner select {
  width: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 2px !important;
  transition: none !important
}
.mp-tutar-inner input:focus,
.mp-tutar-inner select:focus {
  border: none !important;
  background: transparent !important
}
#mo-pay #pay-a {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: auto !important;
  font-size: 22px;
  font-weight: 900;
  color: var(--tx) !important;
  outline: none;
  font-variant-numeric: tabular-nums;
  font-family: var(--fn)
}
.mp-tutar-inner #pay-cur {
  flex: 0 0 auto !important;
  background: var(--sf3) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  font-weight: 800;
  color: var(--tx) !important;
  font-family: var(--fn);
  cursor: pointer
}

/* ── Profile modal responsive ── */
#mo-prof .modal {
  width: 95vw;
  max-width: 720px
}

/* Desktop two-column layout */
@media (min-width: 1024px) {
  #mo-prof .modal {
    width: 88vw;
    max-width: 1280px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px 24px
  }

  #mo-prof #prof-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column
  }

  .prof-layout {
    display: flex;
    gap: 18px;
    flex: 1;
    min-height: 0
  }

  .prof-left {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    padding-right: 2px
  }

  .prof-right {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-left: 1px solid var(--bd);
    padding-left: 18px
  }

  #mo-prof .mf {
    flex-shrink: 0;
    margin-top: 14px
  }
}

/* Mobile layout */
/* ── Prof filtre toggle butonu (desktop'ta gizli) ── */
.prof-filter-toggle {
  display: none
}

/* ── Prof filtre collapsible elemanlar (desktop'ta her zaman görünür) ── */
@media (min-width: 641px) {
  .prof-fc {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important
  }
}

@media (max-width: 640px) {
  /* Modal: daha fazla ekran kullan, safe-area koru */
  #mo-prof .modal {
    padding: 12px 14px 20px;
    border-radius: 14px;
    max-height: 95vh !important
  }

  #mo-prof .phdr {
    flex-wrap: wrap
  }

  #mo-prof .mf {
    flex-wrap: wrap;
    gap: 8px
  }

  #mo-prof .mf > div {
    flex-wrap: wrap;
    width: 100%
  }

  #mo-prof .mf .btn {
    flex: 1;
    justify-content: center;
    min-width: 120px
  }

  /* Filtreler toggle butonu */
  .prof-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    font-family: var(--fn);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tx2);
    cursor: pointer;
    transition: background .15s
  }

  .prof-filter-toggle:active { background: var(--sf3) }

  .prof-filter-toggle .pft-right {
    display: flex;
    align-items: center;
    gap: 6px
  }

  .pft-badge {
    display: none;
    background: var(--ac);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 800
  }

  .pft-arrow {
    font-size: 11px;
    color: var(--tx3);
    transition: transform .25s ease
  }

  /* Filtre collapsible elemanlar: mobilde varsayılan kapalı */
  .prof-fc {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    transition: max-height .32s ease, opacity .22s ease, margin-bottom .22s ease
  }

  /* Açık durumda */
  #prof-body.pf-open .prof-fc {
    max-height: 700px !important;
    overflow: visible !important;
    opacity: 1;
    pointer-events: auto !important
  }

  /* Açıkken cust-promise-card margin geri gelsin */
  #prof-body.pf-open .cust-promise-card {
    margin-bottom: 13px !important
  }

  /* Açıkken prof-chips-wrap margin geri gelsin */
  #prof-body.pf-open .prof-chips-wrap {
    margin-bottom: 13px !important
  }

  /* Ok dönüşü */
  #prof-body.pf-open .pft-arrow {
    transform: rotate(180deg)
  }

  /* Silme butonu: mobile footer düzenlemesi */
  .prof-del-row {
    margin-top: 6px;
    border-top: 1px solid var(--bd);
    padding-top: 8px
  }

  .prof-del-row .btn-r {
    width: 100%;
    justify-content: center;
    opacity: 0.72;
    font-size: 13px !important
  }
}

/* ── Variant Selection modal (#mo-vsel) responsive ── */
@media (min-width: 640px) {
  #mo-vsel .modal {
    width: 92vw;
    max-width: 620px
  }
}

@media (min-width: 1024px) {
  #mo-vsel .modal {
    max-width: 760px
  }
}

@media (max-width: 600px) {
  .vs-row {
    flex-wrap: wrap
  }
}

/* ── Variant Details modal (#mo-vdet) responsive ── */
@media (min-width: 768px) {
  #mo-vdet .modal {
    width: 92vw;
    max-width: 800px
  }
}

@media (min-width: 1024px) {
  #mo-vdet .modal {
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto
  }

  .vdet-vars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }
}

/* ── Employee Profile Modal (#mo-emp-prof) ── */
.emp-prof-modal {
  width: 95vw;
  max-width: 820px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.emp-prof-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden
}

.emp-prof-left {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.emp-prof-right {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

@media (min-width: 820px) {
  .emp-prof-modal {
    width: 88vw;
    max-width: 1100px;
    max-height: 90vh
  }

  .emp-prof-layout {
    flex-direction: row;
    gap: 18px
  }

  .emp-prof-left {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--bd);
    padding-right: 2px
  }

  .emp-prof-right {
    flex: 1;
    min-width: 0;
    padding-left: 18px
  }

  #mo-emp-prof .mf {
    flex-shrink: 0;
    margin-top: 14px
  }
}

@media (max-width: 640px) {
  #mo-emp-prof {
    align-items: flex-start;
    padding: 0
  }

  .emp-prof-modal {
    padding: 16px;
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
    max-width: 100vw;
    width: 100vw;
    border: none;
    margin: 0
  }

  #emp-prof-body {
    display: flex;
    flex-direction: column;
    overflow: hidden
  }
}

/* ── Employee Expense Modal (#mo-emp-exp) ── */
.emp-exp-modal {
  width: 95vw;
  max-width: 860px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.emp-exp-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden
}

.emp-exp-left {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.emp-exp-right {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

@media (min-width: 700px) {
  .emp-exp-layout {
    flex-direction: row;
    gap: 18px
  }

  .emp-exp-left {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid var(--bd);
    padding-right: 18px
  }

  .emp-exp-right {
    flex: 1;
    min-width: 0
  }
}

@media (max-width: 699px) {
  .emp-exp-modal {
    max-height: 95vh;
    padding: 14px;
    border-radius: 14px
  }

  .emp-exp-left {
    order: 2;
    border-top: 1px solid var(--bd);
    padding-top: 14px;
    margin-top: 6px
  }

  .emp-exp-right {
    order: 1
  }
}


/* ═══════════════════════════════════════════════════════
   GLOBAL RESPONSIVE — Layout, sidebar, grids, tables
   ═══════════════════════════════════════════════════════ */

/* ── ≤ 960px: auto-collapse sidebar to icon-only ── */
@media (max-width: 960px) {
  :root { --sw: 56px }

  .sb {
    width: 56px !important;
    min-width: 56px !important;
    overflow: visible !important
  }

  .sb .sb-logo-t,
  .sb .sb-lbl,
  .sb .sb-un,
  .sb .sb-ur,
  .sb .sb-ui,
  .sb #theme-lbl,
  .sb .sb-out,
  .sb .ni-txt,
  .sb [style*="padding:7px 7px"]>span:first-child {
    display: none !important
  }

  .sb .ni {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
    border-radius: 0;
    width: 100%
  }

  .sb .ni .ic {
    font-size: 18px;
    width: 56px;
    text-align: center;
    margin: 0
  }

  .sb .sb-logo {
    padding: 12px 0;
    display: flex;
    justify-content: center
  }

  .sb .sb-logo-m { justify-content: center }
  .sb .sb-logo img { width: 34px; height: 34px; margin: 0 }

  .sb .sb-user { justify-content: center; padding: 8px 0 }
  .sb .sb-av { flex-shrink: 0; margin: 0 }

  .sb .sb-toggle-wrap { left: calc(56px - 18px) }

  .sb #theme-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    margin: 4px auto;
    display: flex !important
  }

  .sb #theme-icon { display: inline !important; font-size: 16px }

  .sb [style*="padding:7px 13px"] {
    justify-content: center !important;
    padding: 6px 0 !important
  }

  .sb [style*="padding:7px 13px"] span:first-child { display: none !important }

  /* Tooltip on hover */
  .sb .ni { position: relative }

  .sb .ni:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 62px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--sf2);
    color: var(--tx);
    border: 1px solid var(--bd2);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0,0,0,.4)
  }
}

/* ── ≤ 768px: tighten padding, collapse grids ── */
@media (max-width: 768px) {
  .ph {
    padding: 10px 14px;
    gap: 6px
  }

  .pb { padding: 14px 14px }

  .pt { font-size: 15px }
  .ps { font-size: 12px }

  .g4 { grid-template-columns: repeat(2, 1fr) }
  .g3 { grid-template-columns: repeat(2, 1fr) }

  th { padding: 8px 9px; font-size: 11.5px }
  td { padding: 8px 9px; font-size: 12px }

  .btn { padding: 7px 11px; font-size: 12px }
  .btn-p { padding: 7px 13px }

  .card { padding: 13px }
  .stat { padding: 12px 13px }

  /* Stok Takibi — mobilde scroll yok, sütunlar sabit, birimler büyük */
  #stk-tw { overflow-x: hidden }
  #stk-tw table { min-width: 0; table-layout: auto; width: 100% }
  #stk-tw th:nth-child(2), #stk-tw td:nth-child(2),
  #stk-tw th:nth-child(3), #stk-tw td:nth-child(3) {
    text-align: right; padding-right: 10px; white-space: nowrap; width: 1%
  }
  #stk-tw tbody td { padding-top: 14px; padding-bottom: 14px }
  /* Ürün adı */
  #stk-tw tbody td:first-child div:first-child { font-size: 16px !important }
  /* Birim türü (Metre / Kg) */
  #stk-tw tbody td:first-child div:last-child { font-size: 13.5px !important }
  /* Stok & Rulo değerleri */
  #stk-tw tbody td:nth-child(2),
  #stk-tw tbody td:nth-child(3) { font-size: 24px !important }
  /* m / r birim etiketleri */
  #stk-tw tbody td span { font-size: 15px !important }
  /* Tablo başlıkları */
  #stk-tw thead th { font-size: 13px !important }
}

/* ── ≤ 560px: single-column grids, compact everything ── */
@media (max-width: 560px) {
  .ph { padding: 8px 10px }
  .pb { padding: 10px 10px }

  .pt { font-size: 14px }

  .g2 { grid-template-columns: 1fr }
  .g3 { grid-template-columns: 1fr }
  .g4 { grid-template-columns: repeat(2, 1fr) }

  th { padding: 7px 7px; font-size: 11px }
  td { padding: 7px 7px; font-size: 11.5px }

  .btn { padding: 6px 9px; font-size: 11.5px }

  .card { padding: 11px }
  .stat { padding: 10px 11px }

  /* Hide less critical table columns on very small screens */
  .hide-xs { display: none !important }
  .show-xs { display: inline !important }
}
.show-xs { display: none }

/* Radio kind group (Bakiye Düzeltmesi etc.) — responsive */
.fg .adj-kind-grp { display: flex; gap: 8px }
.fg .adj-kind-grp > label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 700;
}
.fg .adj-kind-grp > label > span {
  min-width: 0;
  flex: 1;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
}
.fg .adj-kind-grp > label > input[type="radio"] {
  width: auto;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
@media (max-width: 520px) {
  .fg .adj-kind-grp { flex-direction: column }
  .fg .adj-kind-grp > label { font-size: 13px; padding: 10px 12px }
}

/* ── BİLDİRİMLER SAYFASI ── */
.notif-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-left: 3px solid;
  border-radius: 10px;
  padding: 14px 16px;
  transition: opacity .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.15)
}
.notif-card.is-read { opacity: .55 }
.notif-card.lvl-1   { border-left-color: var(--rd) }
.notif-card.lvl-2   { border-left-color: var(--am) }
.notif-card.lvl-3   { border-left-color: var(--bl) }

.pill-btn {
  padding: 5px 14px;
  border: 1px solid var(--bd);
  border-radius: 20px;
  background: var(--sf2);
  color: var(--tx2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fn);
  transition: all .12s;
  display: inline-flex;
  align-items: center;
  gap: 6px
}
.pill-btn:hover        { border-color: var(--bd2); color: var(--tx) }
.pill-active-all       { background: var(--acd); border-color: var(--ac); color: var(--ac2) }
.pill-active-rd        { background: var(--rdd); border-color: var(--rd); color: var(--rd) }
.pill-active-am        { background: var(--amd); border-color: var(--am); color: var(--am) }
.pill-active-bl        { background: var(--bld); border-color: var(--bl); color: var(--bl) }

.pill-cnt {
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  border-radius: 10px;
  background: var(--bg2);
  font-size: 10px;
  font-weight: 800;
  padding: 0 4px
}

/* ═══════════════════════════════════════════════════════
   MOBİL LAYOUT — ≤ 640px — Telefon Görünümü
   ═══════════════════════════════════════════════════════ */

/* Masaüstünde mob-bar ve mob-home gizli */
.mob-bar    { display: none }
.sb-backdrop { display: none }
.mob-home   { display: none }
#dash-mob-footer { display: none }
.mob-filt-toggle-row { display: none }
.mob-filt-panel { display: block }

@media (max-width: 640px) {

  /* ── App: mobilde dikey sıralama ── */
  .app { flex-direction: column !important }

  /* ── Üst bar (flow içinde, fixed değil) ── */
  .mob-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 54px;
    background: var(--ph-bg, rgba(7,11,42,.97));
    border-bottom: 1px solid var(--bd);
    padding: 0 12px;
    z-index: 150;
    gap: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    position: relative;
  }

  .mob-bar-ham {
    width: 46px; height: 46px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px;
    background: linear-gradient(145deg, var(--sf2), var(--sf3));
    border: 1.5px solid var(--bd2);
    border-radius: 50%;
    cursor: pointer; flex-shrink: 0;
    font-family: var(--fn); color: var(--tx);
    transition: background .18s, transform .12s, box-shadow .18s, border-color .18s;
    box-shadow: 0 3px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
    position: relative; overflow: hidden;
  }
  .mob-bar-ham:active { transform: scale(.88); box-shadow: 0 1px 4px rgba(0,0,0,.3) }

  /* Hamburger çizgileri */
  .mob-ham-line {
    display: block; width: 18px; height: 2px;
    background: var(--tx); border-radius: 2px;
    transition: transform .22s, opacity .18s, width .22s;
    position: relative; z-index: 1;
  }
  /* Geri ok */
  .mob-back-arrow {
    display: none;
    font-size: 26px; font-weight: 300;
    color: var(--tx); line-height: 1;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Back modu: hamburger gizle, ok göster */
  .mob-bar-ham.is-back .mob-ham-line { opacity: 0 }
  .mob-bar-ham.is-back .mob-back-arrow { display: block }
  .mob-bar-ham.is-back {
    background: linear-gradient(145deg, var(--acd), var(--sf2));
    border-color: rgba(92,95,255,.35);
    box-shadow: 0 3px 10px rgba(92,95,255,.2);
  }

  /* Hamburger → X animasyonu (menü açıkken) */
  .mob-bar-ham.is-open .mob-ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg) }
  .mob-bar-ham.is-open .mob-ham-line:nth-child(2) { opacity: 0; width: 0 }
  .mob-bar-ham.is-open .mob-ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

  .mob-bar-logo {
    flex: 1;
    font-size: 13.5px; font-weight: 900;
    letter-spacing: .4px; text-align: center;
    color: var(--tx); line-height: 1.2;
  }
  .mob-bar-logo span {
    display: block; font-size: 9px; font-weight: 500;
    color: var(--tx3); text-transform: uppercase; letter-spacing: .14em;
  }

  .mob-bar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0 }

  .mob-bar-theme {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf2); border: 1px solid var(--bd2);
    border-radius: 10px; cursor: pointer; font-size: 16px;
    font-family: var(--fn); color: var(--tx2);
    transition: background .15s;
  }
  .mob-bar-theme:active { background: var(--sf3) }

  .mob-bar-av {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--ac), var(--ac2));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff;
    cursor: pointer; flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.15);
  }

  @keyframes mob-spin {
    from { transform: rotate(0deg) }
    to   { transform: rotate(360deg) }
  }
  .mob-bar-refresh {
    width: 36px; height: 36px;
    background: var(--sf2); border: 1.5px solid var(--bd2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 400; color: var(--tx2);
    cursor: pointer; flex-shrink: 0;
    font-family: inherit; line-height: 1;
    transition: background .15s;
  }
  .mob-bar-refresh:active { background: var(--sf3) }
  .mob-bar-refresh.spinning { animation: mob-spin .7s linear infinite }

  /* ── Backdrop ── */
  .sb-backdrop {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.65);
    z-index: 160;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .sb-backdrop.on {
    opacity: 1; pointer-events: auto;
  }

  /* ── Sidebar: tam overlay ── */
  .sb {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 275px !important; min-width: 275px !important;
    z-index: 170 !important;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    border-right: 1px solid var(--bd2) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.4) !important;
  }
  .sb.mob-open {
    transform: translateX(0) !important;
  }

  /* Overlay modda tüm etiketler görünür */
  .sb .sb-logo-t,
  .sb .sb-lbl,
  .sb .sb-un,
  .sb .sb-ur,
  .sb #theme-lbl,
  .sb .sb-out,
  .sb .ni-txt,
  .sb [style*="padding:7px 7px"]>span:first-child {
    display: block !important;
  }
  .sb .sb-ui { display: flex !important; flex-direction: column }
  .sb .sb-out { display: flex !important }

  .sb .ni {
    justify-content: flex-start !important;
    padding: 11px 10px !important;
    gap: 10px !important;
    border-radius: 8px !important;
    width: 100% !important;
  }
  .sb .ni .ic {
    font-size: 18px !important;
    width: 22px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .sb .ni-txt { display: inline !important; font-size: 13.5px !important }

  .sb .sb-logo {
    padding: 14px 15px 12px !important;
    justify-content: flex-start !important;
    display: flex !important;
  }
  .sb .sb-logo-m { justify-content: flex-start !important }
  .sb .sb-logo img { width: 38px !important; height: 38px !important; margin: 0 !important }
  .sb .sb-logo-t {
    display: flex !important; flex-direction: column !important; font-size: 13px !important;
  }
  .sb .sb-user { justify-content: flex-start !important; padding: 10px 13px !important }
  .sb .sb-av { flex-shrink: 0 !important; margin: 0 !important }
  .sb .sb-toggle-wrap { display: none !important }
  .sb #theme-btn {
    width: auto !important; height: auto !important;
    padding: 5px 13px !important;
    margin: 4px 0 !important; display: flex !important;
  }
  .sb #theme-icon { display: inline !important }
  .sb [style*="padding:7px 13px"] {
    justify-content: space-between !important;
    padding: 7px 13px !important;
  }
  .sb [style*="padding:7px 13px"] span:first-child { display: inline !important }
  /* Overlay modda tooltip gösterme */
  .sb .ni:hover::after { display: none !important }

  /* Overlay modda sb-mid scroll'u üst .sb'ye bırakır */
  .sb .sb-mid {
    flex: none !important;
    overflow-y: visible !important;
    min-height: 0 !important
  }

  /* Mobil çıkış butonu */
  .mob-logout-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 20px;
    border: 1px solid var(--rd);
    background: none;
    color: var(--rd);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--fn);
    flex-shrink: 0
  }
  .mob-logout-btn:active { background: rgba(255,76,76,.1) }

  /* ── Ana içerik: tam genişlik, üst bar artık flow'da ── */
  .main { padding-top: 0 !important; width: 100% !important; flex: 1 !important }

  /* Sayfa başlığı sticky konumu: scrollable .main içinde en üstte yapışır */
  .ph { top: 0 !important; padding-left: 14px !important; padding-right: 14px !important }

  /* ── Modaller: alt sayfa stili (bottom sheet) ── */
  .ov {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    border-radius: 22px 22px 0 0 !important;
    max-width: 100% !important; width: 100% !important;
    max-height: 90vh !important;
    animation: mob-slide-up .28s cubic-bezier(.4,0,.2,1) !important;
    padding: 0 16px 24px !important;
    border-left: none !important; border-right: none !important; border-bottom: none !important;
    border-top: 1px solid var(--bd2) !important;
  }
  .modal::before {
    content: '';
    display: block; width: 40px; height: 4px;
    background: var(--bd2); border-radius: 4px;
    margin: 14px auto 16px;
  }
  .mlg { max-width: 100% !important }
  .mh {
    position: sticky; top: 0;
    background: var(--sf); z-index: 5;
    padding: 6px 0 14px; margin: 0 0 14px;
    border-bottom: 1px solid var(--bd);
  }

  @keyframes mob-slide-up {
    from { transform: translateY(100%); opacity: .5 }
    to   { transform: translateY(0);    opacity: 1 }
  }

  /* ── Dashboard inline grid'leri override ── */
  #d-debts { grid-template-columns: repeat(2,1fr) !important }
  #d-ca-stats { grid-template-columns: 1fr !important }
  #d-admin-wrap div[style*="grid-template-columns:1.4fr 1fr"],
  #d-admin-wrap div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Alış sayfası: 2 kolon → tek kolon ── */
  #pg-purchases .pb > div[style*="grid-template-columns:3fr"],
  #pg-purchases .pb > div[style*="grid-template-columns: 3fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Satış / İade sayfası: 2 kolon → tek kolon ── */
  #pg-sales div[style*="grid-template-columns:3fr"],
  #pg-sales div[style*="grid-template-columns: 3fr"],
  #pg-sales-list .pb > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Sağ panel (özet/ödeme kartı) mobilde sticky olmasın */
  #pg-sales #sales-tab-content .card[style*="position:sticky"],
  #pg-sales #sales-tab-content .card[style*="position: sticky"],
  #pg-sales #iade-tab-content .card[style*="position:sticky"],
  #pg-sales #iade-tab-content .card[style*="position: sticky"] {
    position: static !important;
    margin-top: 0 !important;
  }

  /* ── Genel: tüm inline 2-col grid'leri tek kolona ── */
  .pb > div[style*="grid-template-columns:2fr"],
  .pb > div[style*="grid-template-columns: 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Chart yükseklik sınırı ── */
  canvas { max-height: 220px !important }

  /* ── Dokunmatik hedef: minimum 44px ── */
  .btn { min-height: 40px !important }
  .ni  { min-height: 44px }

  /* ── iOS zoom düzeltmesi (font-size < 16px → zoom) ── */
  input:not([type="radio"]):not([type="checkbox"]),
  select, textarea { font-size: 16px !important }

  /* ── Sayfa başlık alanı: buton grubu wrap ── */
  .ph > div:last-child { flex-wrap: wrap; gap: 5px !important }
  .pt { font-size: 15px !important }

  /* ── Stat kartları sıkıştır ── */
  .stat { padding: 10px 12px !important }

  /* ── Tablo sütun daraltma ── */
  th, td { font-size: 11px !important; padding: 7px 6px !important }

  /* ── Mobil filtre toggle ── */
  .mob-filt-toggle-row { display: flex; margin-bottom: 10px }
  .mob-filt-toggle-btn {
    width: 100%; padding: 9px 14px;
    background: var(--sf2); border: 1px solid var(--bd2); border-radius: 10px;
    color: var(--tx); font-size: 14px; font-family: var(--fn);
    cursor: pointer; text-align: left; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    transition: background .15s;
  }
  .mob-filt-toggle-btn:active { background: var(--sf3) }
  .mob-filt-panel { display: none }
  .mob-filt-panel.open { display: block }

  /* ── Az önemli sütunlar gizle ── */
  .hide-mob { display: none !important }
  /* hide-xs da mobilde gizle */
  .hide-xs { display: none !important }

  /* Tedarikçiler & Müşteriler tablosu — scroll yok */
  #pg-suppliers .tw,
  #pg-customers .tw {
    overflow-x: hidden;
  }
  #pg-suppliers table,
  #pg-customers table {
    min-width: 0 !important;
    table-layout: fixed;
    width: 100%;
  }
  #pg-suppliers td:first-child,
  #pg-customers td:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
    width: 60%;
  }
  #pg-suppliers td:last-child,
  #pg-customers td:last-child {
    width: 40%;
    text-align: right;
  }

  /* Tedarikçi listesi font büyütme */
  #pg-suppliers #sp-body td { font-size: 15px !important; padding: 12px 10px !important; }
  #pg-suppliers #sp-body td span { font-size: 15px !important; }
  #pg-suppliers thead th { font-size: 12px !important; padding: 10px !important; }

  /* ── Mobil Ana Ekran ── */
  .mob-home {
    display: block;
    padding: 16px 14px 24px;
  }

  /* Dashboard istatistikleri başlangıçta gizli, showMobDash() açar */
  #pg-dash > .pb { display: none }
  #pg-dash.mob-dash-open > .pb { display: block }
  #pg-dash.mob-dash-open .mob-home { display: none }

  /* ── Dash mobil: başlık satırını gizle, butonları alta sabitle ── */
  #dash-ph-title { display: none !important; }
  #dash-ph-btns-desk { display: none !important; }
  #pg-dash .ph {
    padding-top: 0 !important; padding-bottom: 0 !important;
    min-height: 0 !important; border-bottom: none !important;
  }
  /* Mobil footer — .ph dışında olduğu için position:fixed çalışır */
  #dash-mob-footer {
    display: flex !important; gap: 10px !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding: 10px 14px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    background: var(--bg) !important;
    border-top: 1.5px solid var(--bd2) !important;
    z-index: 150 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.3) !important;
  }
  #dash-mob-footer .btn { flex: 1 !important; justify-content: center !important; }
  .mob-home { padding-bottom: 80px !important; }

  .mob-home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }

  .mob-home-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 4px 10px;
    border-radius: 16px;
    transition: background .15s, transform .12s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-home-item:active {
    background: var(--sf2);
    transform: scale(.93);
  }

  .mob-home-ic {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--sf2), var(--sf3));
    border: 1.5px solid var(--bd2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
    transition: box-shadow .15s, transform .12s;
  }

  .mob-home-item:active .mob-home-ic {
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    transform: scale(.95);
  }

  .mob-home-item span {
    font-size: 11px;
    font-weight: 700;
    color: var(--tx2);
    text-align: center;
    letter-spacing: .02em;
    line-height: 1.25;
  }

  /* ── Sekmeler: 3 sütunlu grid ── */
  .tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }

  .tab {
    flex: unset !important;
    padding: 9px 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    min-height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-align: center !important;
  }

  .tab.on {
    background: var(--ac) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(92,95,255,.35) !important;
  }
}

/* ── Stok Sayfası: Masaüstü/Mobil görünüm ayrımı ── */
.stk-desk-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.stk-burger-wrap { display: none; }
@media (max-width: 640px) {
  .stk-desk-btns { display: none !important; }
  .stk-burger-wrap { display: block !important; }
  .stk-desk-tabs { display: none !important; }
  .stk-desk-stats { display: none !important; }
  .stk-col-desk { display: none !important; }
  .stk-metre-col { text-align: center !important; }
  .stk-rulo-col { text-align: right !important; }

  /* ── Stok Takibi mobil: boşlukları kaldır, fontları büyüt ── */
  #pg-stock .ph { gap: 6px; }
  #pg-stock #stk-q {
    min-width: 0 !important; max-width: none !important;
    flex: 1 1 0 !important; font-size: 16px !important;
    padding: 9px 12px !important; height: 40px !important;
  }
  #pg-stock #stk-depo-filter {
    min-width: 0 !important; flex: 1 1 0 !important;
    font-size: 15px !important; height: 40px !important; padding: 9px 10px !important;
  }
  /* Tablo min-width kısıtını kaldır — 3 sütun ekrana sığsın */
  #pg-stock table { min-width: 0 !important; }
  #pg-stock .tw { border-radius: 10px; }
  /* Ürün sütunu */
  #pg-stock #prod-list td:nth-child(1) { padding: 10px 8px !important; }
  #pg-stock #prod-list td:nth-child(1) div:first-child { font-size: 16px !important; }
  #pg-stock #prod-list td:nth-child(1) div:last-child { font-size: 14px !important; }
  /* Metre ve Rulo sütunları */
  #pg-stock #prod-list td:nth-child(4),
  #pg-stock #prod-list td:nth-child(5) {
    font-size: 22px !important; padding: 10px 10px !important;
  }
  #pg-stock #prod-list td:nth-child(4) span,
  #pg-stock #prod-list td:nth-child(5) span { font-size: 13px !important; }
  /* Thead */
  #pg-stock thead th { font-size: 13px !important; padding: 10px 8px !important; }
  /* Sayfa başlığı */
  #pg-stock .pt { font-size: 18px !important; }

  /* ── Hızlı Gider modal: daha uzun + kutular alt alta ── */
  #mo-qt .modal {
    max-height: 96vh !important;
    min-height: 60vh !important;
  }
  #mo-qt .fr3 {
    grid-template-columns: 1fr !important;
  }

  /* ── Müşteriler sayfası mobil ── */
  /* Header: butonlar wrap, Excel gizle */
  #pg-customers .ph > div:last-child { flex-wrap: wrap; gap: 5px !important; justify-content: flex-end; }
  #pg-customers .ph .btn:nth-child(2) { display: none !important; }
  /* Filtre satırı: alt alta */
  #pg-customers .pb > div:first-child {
    flex-direction: column !important; gap: 7px !important;
  }
  #pg-customers #c-q {
    max-width: none !important; min-width: 0 !important;
    width: 100% !important; font-size: 15px !important;
    padding: 9px 12px !important;
  }
  #pg-customers #c-sort,
  #pg-customers #c-branch-filter {
    width: 100% !important; font-size: 15px !important;
    padding: 9px 10px !important;
  }
  /* Tablo min-width kaldır */
  #pg-customers table { min-width: 0 !important; }
  /* Satır yüksekliği — kolay tıklanabilir */
  #pg-customers #c-body tr { min-height: 64px; }
  /* Müşteri adı sütunu */
  #pg-customers #c-body td:nth-child(1) { font-size: 17px !important; padding: 14px 10px !important; }
  #pg-customers #c-body td:nth-child(1) > div > div:first-child { width: 38px !important; height: 38px !important; border-radius: 10px !important; font-size: 17px !important; }
  #pg-customers #c-body td:nth-child(1) > div > div:last-child > div:first-child { font-size: 17px !important; font-weight: 700 !important; }
  /* Bakiye sütunu */
  #pg-customers #c-body td:nth-child(4) { font-size: 18px !important; font-weight: 800 !important; padding: 14px 10px !important; white-space: nowrap; }
  /* Göz ikonu sütunu */
  #pg-customers #c-body td:last-child { font-size: 26px !important; padding: 10px 8px !important; width: 44px !important; }
  #pg-customers thead th { font-size: 13px !important; padding: 10px 10px !important; }

}

/* ── Stok Burger Menu ── */
.stk-burger-btn {
  width: 42px; height: 42px;
  background: var(--sf2); border: 2px solid var(--bd);
  border-radius: 10px; cursor: pointer; color: var(--tx);
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s; flex-shrink: 0;
}
.stk-burger-btn:hover, .stk-burger-btn.open { background: var(--acd); border-color: var(--ac); color: var(--ac2); }
.stk-burger-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200;
  background: var(--sf); border: 1.5px solid var(--bd2); border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45); min-width: 280px; max-width: 340px;
  padding: 8px; display: none;
}
.stk-burger-panel.open { display: block; }
.stk-bm-section { border-radius: 10px; overflow: hidden; margin-bottom: 4px; }
.stk-bm-section:last-child { margin-bottom: 0; }
.stk-bm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; background: var(--sf2); cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--tx); user-select: none;
  transition: background .12s;
}
.stk-bm-head:hover { background: var(--sf3); }
.stk-bm-head .stk-bm-arrow { font-size: 11px; color: var(--tx3); transition: transform .2s; }
.stk-bm-head.open .stk-bm-arrow { transform: rotate(180deg); }
.stk-bm-body { display: none; background: var(--sf); padding: 8px; }
.stk-bm-body.open { display: block; }
.stk-bm-body .btn { width: 100%; margin-bottom: 5px; justify-content: center; }
.stk-bm-body .btn:last-child { margin-bottom: 0; }
.stk-bm-body .tabs { display: flex; flex-direction: column; gap: 4px; }
.stk-bm-body .tab { width: 100%; text-align: left; border-radius: 8px; }
.stk-burger-wrap { position: relative; }

/* Mobilde stok hareketleri detay paneli — sadece tıklanınca modal olarak görünür */
@media (max-width: 640px) {
  #stk-txn-split { grid-template-columns: 1fr !important; }
  #stk-txn-detail-pane { display: none !important; }
  .stk-txn-filters-wrap { display: none !important; flex-direction: column !important; gap: 6px !important; }
  .stk-txn-filters-wrap.open { display: flex !important; }
  .stk-txn-filter-mob-btn { display: inline-flex !important; }
}
@media (min-width: 641px) {
  .stk-txn-filter-mob-btn { display: none !important; }
}

/* ── Hizmet Sağlayıcı Profil Modal ── */
.hz-prof-modal {
  width: 95vw;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column
}

.hz-prof-body-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0
}

.hz-prof-layout {
  display: flex;
  gap: 18px;
  min-height: 0
}

.hz-prof-left {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding-right: 2px
}

.hz-prof-right {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--bd);
  padding-left: 18px
}

@media (max-width: 800px) {
  .hz-prof-layout {
    flex-direction: column
  }

  .hz-prof-left {
    width: 100%;
    overflow-y: visible
  }

  .hz-prof-right {
    border-left: none;
    border-top: 1px solid var(--bd);
    padding-left: 0;
    padding-top: 14px;
    overflow-y: visible
  }

  .hz-prof-modal {
    max-height: 95vh
  }

  .hz-prof-body-wrap {
    overflow-y: auto
  }
}

@media (max-width: 600px) {
  .hz-prof-modal {
    width: 100vw;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0
  }
}

/* ── Müşteri tablosu mobil ── */
@media (max-width: 640px) {
  /* Sabit genişlik tablosu */
  .cust-pc-tbl {
    table-layout: fixed !important;
    width: 100% !important
  }
  /* İsim kolonu: %58 */
  .col-cust-nm { width: 58% !important }
  /* Bakiye kolonu: %42 — her uzunluktaki değer sığar */
  .col-cust-bal { width: 42% !important }
  /* Gizli kolonlar: sıfır */
  .col-cust-ph,
  .col-cust-lt,
  .col-cust-ciro,
  .col-cust-ic { width: 0 !important }

  /*
   * KRİTİK: display:none hücreleri tablo yapısından çıkarır →
   * td:4 (bakiye) column slot 2'ye (genişlik 0) kayar.
   * Çözüm: hide-xs hücrelerini görünmez ama yapıda tut.
   */
  .cust-pc-tbl .hide-xs {
    display: table-cell !important;  /* yapıda kal, display:none'ı iptal et */
    visibility: hidden !important;   /* içeriği gizle */
    padding: 0 !important;
    overflow: hidden !important
  }

  /* İsim hücresi: taşmayı gizle */
  .cust-pc-tbl td:first-child { overflow: hidden !important }

  /* İsim metni: küçük font + ellipsis */
  .cust-pc-tbl td:first-child > div > div:last-child > div:first-child {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important
  }

  /* Bakiye başlık + hücresi */
  .cust-pc-tbl th:nth-child(4),
  .cust-pc-tbl td:nth-child(4) {
    text-align: right !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 0 6px 0 2px !important;
    overflow: hidden !important
  }
}
@media (min-width: 641px) {
  .cust-pc-tbl { table-layout: fixed; width: 100% }
  .col-cust-ph   { width: 160px }
  .col-cust-lt   { width: 130px }
  .col-cust-bal  { width: 180px }
  .col-cust-ciro { width: 170px }
  .col-cust-ic   { width: 50px }
  .cust-pc-tbl td:nth-child(3),
  .cust-pc-tbl td:nth-child(4),
  .cust-pc-tbl td:nth-child(5) { white-space: nowrap }
}

/* ════════════════════════════════════════════════════
   MOBİL MÜŞTERİ PROFİLİ — @media (max-width: 600px)
   Tüm telefonları kapsar (iPhone 15 Pro Max 430px vb.)
   Desktop (≥501px) görünümü hiç değişmez.
   ════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── #mo-prof Modal: tam ekran ───────────────────── */
  #mo-prof .modal.mlg {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative
  }

  #mo-prof .mh {
    flex-shrink: 0;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--bd);
    background: var(--sf);
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 8px
  }

  #mo-prof .mt {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px !important;
    font-weight: 800
  }

  /* Header ⋯ butonu (JS tarafından eklenir) */
  .mp-hdr-more {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--sf2);
    color: var(--tx2);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--fn);
    display: flex;
    align-items: center;
    justify-content: center
  }

  #mo-prof #prof-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 96px !important
  }

  /* .mf footer (export/del butonlar) mobilde gizle */
  #mo-prof .mf {
    display: none !important
  }

  /* ── prof-layout: tek sütun ──────────────────────── */
  #mo-prof .prof-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important
  }

  #mo-prof .prof-left,
  #mo-prof .prof-right {
    width: 100% !important;
    border-left: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important
  }

  /* ── Özet Kart ───────────────────────────────────── */
  .mp-summary-card {
    margin: 12px 12px 10px;
    padding: 16px 16px 14px;
    background: linear-gradient(135deg, var(--sf2) 0%, var(--sf) 100%);
    border: 1px solid var(--bd2);
    border-radius: 16px;
    position: relative;
    overflow: hidden
  }

  .mp-sum-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px
  }

  .mp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #fff
  }

  .mp-sum-info {
    flex: 1;
    min-width: 0
  }

  .mp-sum-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--tx);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px
  }

  .mp-sum-meta {
    font-size: 11.5px;
    color: var(--tx3);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .mp-bal-block {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(245, 166, 35, .08);
    border: 1px solid rgba(245, 166, 35, .25);
    margin-bottom: 10px
  }

  .mp-bal-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px
  }

  .mp-bal-amount {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums
  }

  .mp-bal-local {
    font-size: 11px;
    color: var(--tx3);
    font-weight: 600;
    margin-top: 4px
  }

  .mp-mini-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .mp-mini-stat {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--bd)
  }

  .mp-ms-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px
  }

  .mp-ms-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--tx);
    font-variant-numeric: tabular-nums
  }

  .mp-ms-sub {
    font-size: 10px;
    color: var(--tx3);
    font-weight: 600;
    margin-top: 2px
  }

  /* ── Filtre toggle butonu mobilde ────────────────── */
  #mo-prof .prof-filter-toggle {
    display: flex;
    width: calc(100% - 24px);
    margin: 0 12px 10px;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    border-radius: 12px !important;
    min-height: 44px;
    box-sizing: border-box
  }

  /* Filtre paneli (mp-filter-panel) */
  #mo-prof .mp-filter-panel {
    padding: 14px;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 12px;
    margin: 0 12px 12px
  }

  /* prof-fc açıkken display:block */
  #prof-body.pf-open .prof-fc {
    max-height: 800px !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-bottom: 0 !important
  }

  /* ── İşlem kart listesi (.prof-right mobil) ──────── */
  #mo-prof .prof-right {
    padding: 0 12px 12px !important
  }

  /* Admin mobile: kart HTML (.mp-tx-card) */
  .mp-tx-card {
    padding: 11px 13px;
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: 12px;
    margin-bottom: 8px;
    border-left-width: 3px;
    border-left-style: solid;
    position: relative
  }

  /* Sube mobile: tablo → kart dönüşümü */
  #mo-prof .prof-right .tw {
    overflow-x: visible !important;
    border: none !important;
    background: transparent !important
  }

  #mo-prof .prof-right table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    width: 100% !important
  }

  #mo-prof .prof-right thead { display: none !important }

  #mo-prof .prof-right tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "type  amt"
      "meta  amt"
      "note  note";
    gap: 4px 10px !important;
    padding: 11px 13px !important;
    background: var(--sf) !important;
    border: 1px solid var(--bd) !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important
  }

  #mo-prof .prof-right tbody tr:hover { background: var(--sf2) !important }

  #mo-prof .prof-right tbody td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.35 !important
  }

  #mo-prof .prof-right tbody td:nth-child(1) {
    grid-area: meta;
    order: 2;
    font-size: 11.5px !important;
    color: var(--tx3) !important;
    font-weight: 600
  }
  #mo-prof .prof-right tbody td:nth-child(2) {
    grid-area: type;
    order: 1
  }
  #mo-prof .prof-right tbody td:nth-child(2) .badge {
    font-size: 11px !important;
    padding: 3px 9px !important;
    border-radius: 7px !important
  }
  #mo-prof .prof-right tbody td:nth-child(3) {
    grid-area: amt;
    text-align: right !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    align-self: center;
    font-variant-numeric: tabular-nums
  }
  #mo-prof .prof-right tbody td:nth-child(4) { display: none !important }
  #mo-prof .prof-right tbody td:nth-child(5) {
    grid-area: note;
    font-size: 11.5px !important;
    color: var(--tx2) !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    padding-top: 4px !important;
    border-top: 1px dashed var(--bd) !important;
    margin-top: 2px
  }
  #mo-prof .prof-right tbody td:nth-child(5):empty { display: none !important }
  #mo-prof .prof-right tbody td:nth-child(6) { display: none !important }

  #mo-prof .prof-right tbody td:nth-child(3) div {
    font-size: 11.5px !important;
    margin-top: 2px;
    font-weight: 600 !important
  }

  /* "İşlem Geçmişi" başlığı */
  #mo-prof .prof-right .ct {
    font-size: 11.5px !important;
    margin-bottom: 8px !important;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--tx3) !important
  }

  /* ── Sticky CTA Bar ──────────────────────────────── */
  .mp-cta-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0%, var(--sf) 30%);
    display: flex;
    gap: 8px;
    z-index: 20;
    pointer-events: none
  }
  .mp-cta-bar > * { pointer-events: auto }

  .mp-cta-btn {
    flex: 1;
    padding: 13px 14px;
    border-radius: 12px;
    font-family: var(--fn);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    border: 1.5px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform .12s, box-shadow .12s
  }
  .mp-cta-btn:active { transform: scale(.97) }

  .mp-cta-tahsil {
    background: var(--grd);
    border-color: var(--gr);
    color: var(--gr)
  }
  .mp-cta-sale {
    flex: 1.3;
    background: var(--ac);
    border-color: var(--ac);
    color: #fff;
    box-shadow: 0 6px 18px rgba(92, 95, 255, .35)
  }
  .mp-cta-more {
    flex: 0 0 48px;
    padding: 13px 0;
    background: var(--sf2);
    border-color: var(--bd2);
    color: var(--tx2);
    font-size: 18px
  }

  /* ── Action Sheet (bottom sheet) ─────────────────── */
  .mp-sheet-ov {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease
  }
  .mp-sheet-ov.on {
    opacity: 1;
    pointer-events: auto
  }

  .mp-sheet {
    width: 100%;
    background: var(--sf);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .4);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2, .8, .25, 1);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }
  .mp-sheet-ov.on .mp-sheet { transform: translateY(0) }

  .mp-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: var(--bd2);
    margin: 6px auto 12px
  }

  .mp-sheet-head {
    padding: 0 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
  }
  .mp-sheet-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--tx);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
  .mp-sheet-sub {
    font-size: 11.5px;
    color: var(--tx3);
    font-weight: 600;
    margin-top: 1px
  }
  .mp-sheet-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sf2);
    border: 1px solid var(--bd);
    color: var(--tx2);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--fn)
  }
  .mp-sheet-items { padding: 4px 8px }

  .mp-sheet-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    background: transparent;
    border: none;
    color: var(--tx);
    font-family: var(--fn);
    font-size: 14.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    border-radius: 10px
  }
  .mp-sheet-item:active { background: var(--sf2) }
  .mp-sheet-item.danger { color: var(--rd) }

  .mp-sheet-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sf2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0
  }
  .mp-sheet-item.danger .mp-sheet-ic { background: var(--rdd) }

  .mp-sheet-item-body { flex: 1; min-width: 0 }
  .mp-sheet-item-label { font-size: 14.5px; line-height: 1.2 }
  .mp-sheet-item-sub {
    font-size: 11.5px;
    color: var(--tx3);
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
  .mp-sheet-item-arrow { color: var(--tx3); font-size: 16px }

  .mp-sheet-divider {
    height: 1px;
    background: var(--bd);
    margin: 6px 12px
  }

  /* ── "Daha fazla yükle" butonu ───────────────────── */
  .mp-load-more {
    width: 100%;
    padding: 11px;
    margin-top: 4px;
    background: transparent;
    border: 1.5px dashed var(--bd2);
    border-radius: 10px;
    color: var(--tx2);
    font-family: var(--fn);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer
  }

  /* ── Skeleton ─────────────────────────────────────── */
  .mp-skel {
    background: linear-gradient(90deg, var(--sf2) 0%, var(--sf3) 50%, var(--sf2) 100%);
    background-size: 200% 100%;
    animation: mp-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px
  }
  @keyframes mp-shimmer {
    0% { background-position: -200% 0 }
    100% { background-position: 200% 0 }
  }

  /* ── #mo-pay Tahsilat modalı: tam ekran + sticky save */
  #mo-pay .modal.mlg {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important
  }

  #mo-pay .mh {
    flex-shrink: 0;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--bd);
    background: var(--sf);
    display: flex;
    align-items: center;
    gap: 8px
  }

  /* ← Geri butonu */
  .mp-pay-back {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--sf2);
    color: var(--tx2);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--fn);
    display: flex;
    align-items: center;
    justify-content: center
  }

  #mo-pay .modal { overflow: hidden !important }

  /* Tek scrollable body — tüm form içeriği burada */
  #mo-pay .mp-pay-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 16px;
    box-sizing: border-box
  }

  #mo-pay .mf {
    flex-shrink: 0;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    background: var(--sf);
    border-top: 1px solid var(--bd);
    display: flex !important;
    gap: 8px;
    position: sticky;
    bottom: 0
  }
  #mo-pay .mf .btn { flex: 1; min-height: 46px; font-size: 14px; font-weight: 800 }
  #mo-pay .mf .btn.btn-g { flex: 1.6; box-shadow: 0 6px 18px rgba(16, 201, 128, .25) }

  /* Bakiye ribbon + Özet ribbon — mobilde göster */
  #pay-bal-ribbon,
  #pay-summary-ribbon { display: flex !important }

  /* Mobilde pay-inf gizle (ribbon üstlenir) */
  #mo-pay #pay-inf { display: none !important }

  /* Mobilde tutar kutusu büyük + mavi border */
  #mo-pay .mp-tutar-inner {
    padding: 12px 14px !important;
    border: 2px solid var(--ac) !important;
    border-radius: 14px !important;
    gap: 10px !important;
    align-items: center !important
  }
  #mo-pay .mp-tutar-inner:focus-within {
    border-color: var(--ac2) !important
  }
  #mo-pay .mp-cur-sym {
    font-size: 26px !important;
    flex-shrink: 0 !important
  }
  #mo-pay #pay-a {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: var(--tx) !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important
  }
  #mo-pay .mp-tutar-inner #pay-cur {
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    width: auto !important
  }

  /* Kasa + Tarih 2 kolon */
  .mp-pay-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }
  .mp-pay-row .fg label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tx3)
  }
  .mp-pay-row .fg input,
  .mp-pay-row .fg select {
    padding: 10px 10px !important;
    font-size: 13px !important
  }

  /* Grand-total ribbon */
  #mo-pay #pay-grand-total {
    border-radius: 12px !important;
    padding: 12px 14px !important
  }

  /* Save button: yeşil, geniş */
  #pay-save-btn {
    background: var(--gr) !important;
    border-color: var(--gr) !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 800 !important
  }

  /* Light tema overrides */
  [data-theme='light'] .mp-summary-card {
    background: linear-gradient(135deg, var(--sf) 0%, var(--sf2) 100%)
  }

  [data-theme='light'] .mp-mini-stat {
    background: rgba(0, 0, 0, .03)
  }

  [data-theme='light'] .mp-tx-card {
    background: var(--sf)
  }

  /* ══ Admin Masraflar Sayfası — Mobil Tasarım ══════════════════ */
  #pg-expenses .ph > div:last-child { display: none !important; }
  #pg-expenses .tabs { display: none !important; }
  #pg-expenses .pb { padding-bottom: 88px !important; }

  /* Aktif sekme adı başlıkta göster */
  #pg-expenses .pt::after {
    content: attr(data-tab);
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--tx3);
    letter-spacing: .03em;
    margin-top: 1px;
    text-transform: uppercase;
  }

  /* Alt sticky bar */
  #exp-mob-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0%, var(--sf) 30%);
    display: flex;
    gap: 8px;
    pointer-events: none;
  }
  #exp-mob-bar > * { pointer-events: auto; }

  .exp-mob-btn {
    flex: 1;
    padding: 13px 10px;
    border-radius: 12px;
    font-family: var(--fn);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    border: 1.5px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: transform .12s, box-shadow .12s;
  }
  .exp-mob-btn:active { transform: scale(.97); }

  .exp-mob-masraf {
    background: var(--ac);
    border-color: var(--ac);
    color: #fff;
    box-shadow: 0 6px 18px rgba(92, 95, 255, .35);
    flex: 1.4;
  }
  .exp-mob-bulk {
    background: var(--grd);
    border-color: var(--gr);
    color: var(--gr);
  }
  .exp-mob-more {
    flex: 0 0 50px;
    padding: 13px 0;
    background: var(--sf2);
    border-color: var(--bd2);
    color: var(--tx2);
    font-size: 20px;
    letter-spacing: 1px;
  }

  /* Tab sheet aktif item ✓ işareti */
  .exp-sheet-check { color: var(--gr); font-size: 16px; font-weight: 800; }
  .exp-sheet-item-active { background: rgba(92,95,255,.08) !important; }
  .exp-sheet-item-active .mp-sheet-item-label { color: var(--ac) !important; }

  /* Özet kartlar — mobil tek satır tam genişlik */
  #e-sum {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  #e-sum .stat {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
  }
  #e-sum .st-v { font-size: 14px !important; }
  #e-sum .st-l { font-size: 10px !important; }
  #e-sum .st-s { font-size: 10px !important; }
  #e-sum .rv   { font-size: 14px !important; }

  /* Filtre paneli — mobil orijinal gizle */
  #exp-orig-filters { display: none !important; }
  /* ktxnall orig bar JS tarafında gizleniyor (origBar.style.display='none') */

  /* Alış & Satış listesi mobil: tablo gizle, filtre panel */
  #pg-pur-list .tw { display: none; }
  #pg-pur-list #pl-filt-panel {
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    display: none;
    flex-direction: column;
    gap: 10px;
    animation: expFiltIn .18s ease;
  }
  #pg-pur-list #pl-filt-panel.open { display: flex; }
  #pg-pur-list #pl-filt-panel input,
  #pg-pur-list #pl-filt-panel select {
    width: 100%;
    padding: 10px 12px;
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: 9px;
    color: var(--tx);
    font-family: var(--fn);
    font-size: 14px;
    outline: none;
  }
  #pg-pur-list #pl-filt-panel > div { margin-bottom: 0 !important; }
  #pg-pur-list .mob-filt-toggle-row { display: block; }
  /* Özet kartlar yatay */
  #pl-sum {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    scrollbar-width: none !important;
  }
  #pl-sum::-webkit-scrollbar { display: none; }
  #pl-sum .stat {
    flex: 0 0 auto !important;
    min-width: 110px !important;
    padding: 9px 10px !important;
  }
  #pl-sum .st-v { font-size: 13px !important; }
  #pl-sum .st-l { font-size: 10px !important; }
  #pl-sum .st-s { font-size: 10px !important; }

  /* Satış listesi mobil filtre panel */
  #pg-sales-list #sl-filt-panel {
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    display: none;
    flex-direction: column;
    gap: 10px;
    animation: expFiltIn .18s ease;
  }
  #pg-sales-list #sl-filt-panel.open { display: flex; }
  #pg-sales-list #sl-filt-panel input,
  #pg-sales-list #sl-filt-panel select {
    width: 100%;
    padding: 10px 12px;
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: 9px;
    color: var(--tx);
    font-family: var(--fn);
    font-size: 14px;
    outline: none;
  }
  #pg-sales-list #sl-filt-panel > div { margin-bottom: 0 !important; }
  #pg-sales-list .mob-filt-toggle-row { display: block; }
  #pg-sales-list .tw { display: none; }

  /* Kasa İşlemleri özet kartları — mobil yatay */
  #ktxnall-sum {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  #ktxnall-sum .stat {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
  }
  #ktxnall-sum .st-v { font-size: 13px !important; }
  #ktxnall-sum .st-l { font-size: 10px !important; }
  #ktxnall-sum .st-s { font-size: 10px !important; }
  #ktxnall-sum .rv   { font-size: 13px !important; }

  #exp-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 13px;
    background: var(--sf2);
    border: 1.5px solid var(--bd2);
    border-radius: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    font-family: var(--fn);
    font-size: 13px;
    font-weight: 700;
    color: var(--tx2);
    width: 100%;
  }
  #exp-filter-toggle.active {
    border-color: var(--ac);
    color: var(--ac);
    background: rgba(92,95,255,.07);
  }
  #exp-filter-badge {
    background: var(--ac);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
  }

  #exp-filter-panel {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 12px;
    margin-bottom: 12px;
    animation: expFiltIn .18s ease;
  }
  #exp-filter-panel.open { display: flex; }
  @keyframes expFiltIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #exp-filter-panel input,
  #exp-filter-panel select {
    width: 100%;
    padding: 9px 11px;
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: 8px;
    color: var(--tx);
    font-size: 14px;
    font-family: var(--fn);
    outline: none;
  }
  #exp-filter-panel label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
    display: block;
  }
  #exp-filter-panel .ef-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #exp-filter-reset {
    padding: 9px;
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: 8px;
    color: var(--tx3);
    font-family: var(--fn);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    margin-top: 2px;
  }
}

/* Stok Takibi — panel yüksekliği */
#pg-stock.on { display: flex; flex-direction: column; height: 100vh; }
#pg-stock.on > .ph { flex-shrink: 0; }
#pg-stock.on > .pb { flex: 1; overflow: hidden; padding-bottom: 0; min-height: 0; }
#stk-list-panel { height: 100%; }

/* Stok Takibi — mobil layout düzeltmesi */
@media (max-width: 640px) {
  #pg-stock.on { height: auto !important; min-height: calc(100vh - 54px); overflow-y: auto; }
  #pg-stock.on > .pb { overflow: visible !important; padding-bottom: 80px !important; }
  #stk-list-panel { grid-template-columns: 1fr !important; height: auto !important; gap: 10px !important; }
}

/* Number input — spinner ok kaldır */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }