@font-face {
  font-family: "Quickly";
  src: url("/fonts/Quickly.ttf") format("truetype");
}
@font-face {
  font-family: "Quickly-Bold";
  src: url("/fonts/Quickly-Bold.ttf") format("truetype");
}

*,
*::after,
*::before {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: default;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  touch-action: manipulation;
  font-family: Quickly, "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background-color: var(--q-oil);
  color: var(--q-light-gray);
}

#appHolder {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==================== NAVBAR (AUTHENTIC QUICKLY THEME STYLING) ==================== */
#navBar {
  background-color: transparent;
}

nav.navbar,
#navBar nav {
  height: 56px !important;
  background-color: transparent !important;
  flex-shrink: 0;
  -webkit-app-region: drag;
  padding: 0.5rem 1rem;
}

nav.navbar.quickly-color,
.quickly-color {
  background-color: transparent !important;
}

nav a,
nav form,
nav button,
nav :after,
nav :before {
  -webkit-app-region: no-drag;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
}

.navbar-brand {
  display: inline-block;
  min-height: auto;
  padding: 0;
  margin-right: 1.5rem;
}

.navbar-brand img {
  height: 42px;
  margin-top: 15px;
}

/* ==================== GLOBAL FLOATING TOAST NOTIFICATION ==================== */
#messageBanner {
  position: fixed !important;
  top: calc(16px + var(--q-safe-top)) !important;
  left: 50% !important;
  transform: translate3d(-50%, -160%, 0) !important;
  width: calc(100% - 32px) !important;
  max-width: 520px !important;
  z-index: 99999 !important;
  box-shadow: 0 10px 30px var(--q-black-a55), 0 2px 8px var(--q-black-a30) !important;
  border-radius: 8px !important;
  border: 1px solid var(--q-white-a25) !important;
  font-size: 0.95rem !important;
  padding: 12px 20px !important;
  letter-spacing: 0.3px;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.42s !important;
}



#messageBanner.show-toast {
  transform: translate3d(-50%, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 575px) {
  nav.navbar,
  #navBar nav {
    min-height: 56px !important;
    height: auto !important;
    padding: 12px 14px 9px 14px !important;
  }
  .navbar-brand {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding-top: 2px !important;
  }
  .navbar-brand img {
    height: 37px !important;
    width: auto !important;
    margin-top: 0 !important;
  }
  /* `.form-inline` BS5'te kaldırıldı; yerine utility üçlüsü
     (`d-flex align-items-center flex-wrap`) geldi. Bu kurallar artık
     `navbar-toolbar` kancasını hedefler — utility seçicisi yazmak
     (`d-flex.align-items-center`) herhangi bir satırı eşleştirebilirdi. */
  .navbar-toolbar {
    font-size: 12px;
    white-space: nowrap;
  }
  .navbar-toolbar span {
    margin-right: 0.25rem !important;
  }
  .navbar-toolbar .fa {
    margin-right: 0.25rem !important;
  }
}

#mainHolder {
  flex: 1;
  position: relative;
  /* içerik vh tabanlı yüksekliklerle alçak ekranda (≈720px) taşar; hidden olunca erişilemezdi → dikeyde kaydır */
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 15px 0 15px;
}

#routerHolder {
  height: calc(100vh - 70px);
}

.view-section {
  display: none;
  height: 100%;
}
.view-section.active {
  display: block;
}

/* Common Heights */
.full-height {
  height: 88.4vh;
}
.inside-height {
  height: 79vh;
}
.tab-height {
  height: 61vh;
}
.tab-inside-height {
  height: 62vh;
}

.dark-bg {
  background-color: var(--q-bg-dark) !important;
}

.text-quickly {
  color: var(--q-text-quickly) !important;
}

.animated {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

.input-group > .input-group-text:first-child {
  width: 150px;
  font-weight: bolder;
}
/* BS5 geçişi (F1): `.input-group-prepend/append` KALDIRILDI. Sınıfın verdiği
 * `display:flex; align-items:center` yerel `.ig-flex` ile karşılandı; yalnız
 * JS'in düğme enjekte ettiği kaplar kullanıyor. */
.ig-flex {
  display: flex;
  align-items: center;
}
.input-group > .input-group-text:last-child {
  min-width: 50px;
}
.normal {
  width: auto !important;
}

.list-group-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-weight: bolder;
  cursor: pointer;
}

.navbar-dark .navbar-nav .nav-link {
  font-weight: bolder;
  font-size: 1.15rem;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
}

/* H6 — MASAÜSTÜ NAVBAR: ikon üstte, etiket altta satır kırılması.
 *
 * ÖLÇÜLEN (Playwright, 1280x900, `navigateTo('selling')`, 6 bağlantı):
 *   BS4  .nav-link 43.61px  ·  tek satır  ·  ul 715.14px
 *   BS5  .nav-link 71.22px  ·  İKİ satır  ·  ul 703.36px
 * 71.22 = 2 x 27.6 (line-height) + 16 (padding) → ikon ve etiket ayrı
 * satıra düşüyor. `nav.navbar` 56px'e SABİTLENDİĞİ için bağlantı
 * navbar'ın dışına taşıyor.
 *
 * KÖK NEDEN (ölçümle bulundu, tahminle değil): `.nav-link` bir blok;
 * `li` üzerinde nowrap flex satırının flex öğesi, yani genişliği
 * max-content'ten geliyor. Hesaplanan hesaplanan değer ile içeriğin
 * gerçek satır genişliği arasında ~1.8px'luk bir AÇIK kalıyor ve
 * bağlantı bu eşiğin tam üstüne oturuyor:
 *   ikon 17.09 + `me-1` 4 + boşluk 5.1 + "Menü" 51.28 = 77.47px
 *   kutu iç genişliği 75.67px  →  1.80px EKSİK → satır kırılıyor
 * Aynı hesaplanmış stiller (font-size 18.4px, line-height 27.6px,
 * padding 8px 16px, ikon 17.09px) BS4'te birebir aynı; yalnız kutu
 * 1.8px daha geniş (109.47px) ve bu yüzden sığıyor.
 *
 * DÜZELTME: sarmayı tamamen kapatmak. `nowrap` zorlanınca ölçülen
 * yükseklik 43.61px = BS4 ile birebir. Kural YALNIZ masaüstü için:
 * mobilde `.navbar-collapse` dikey yığındır ve etiketlerin kayması
 * davranışı korunmalı (görev: "Mobilde hiçbir şey değişmemeli"). */
@media (min-width: 992px) {
  #navBar .navbar-nav .nav-link {
    white-space: nowrap;
  }
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--q-primary) !important;
}

/* BOOTSTRAP 4 → 5 KAYBI: `label` alt boşluğu.
 * ÖLÇÜM (Playwright, CDP `CSS.getMatchedStylesForNode`, discountModal,
 * 1280x900) — etiketli `margin-bottom` veren kural:
 *   BS4  `label { margin-bottom: 0.5rem }`  → hesaplanan 8px
 *   BS5  HİÇBİR KURAL EŞLEŞMİYOR            → hesaplanan 0px
 * Sonuç: `discountModal` gövdesi BS4 264px / BS5 250px (−14px), masaüstü
 * dialog 406 / 392. Mobilde `.modal-body label { margin-bottom: 4px
 * !important }` zaten vardı (BS4'te de aynı dosyada) — o yüzden mobil
 * fark yoktu, masaüstü vardı.
 * Kural üst düzeyde: `style.css` tema katmanından SONRA yüklendiği için
 * tema içindeki bağlama özgü `margin-bottom:0` kurallarını da ezer; bu
 * yüzden etiketlerin BS4 ile aynı boşluğa oturduğu sweep ile doğrulandı
 * (9 ekran + 36 modal, `label-margin-sweep` ölçümü). */
label {
  margin-bottom: 0.5rem;
}

.form-control {
  background-color: var(--q-input-fill);
  color: var(--q-oil);
  font-weight: bold;
}
.form-control:focus {
  background-color: var(--q-white);
  color: var(--q-bg-dark);
}

input[readonly] {
  color: white !important;
  background-color: var(--q-dark-gray) !important;
}

.input-group {
  box-shadow: 1px 1px 4px var(--q-shadow-ink);
}
.btn {
  box-shadow: 1px 1px 4px var(--q-scrim-glass);
  font-weight: bolder;
  cursor: pointer;
}
.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Card Styles */
.tableCard {
  box-shadow: 1px 1px 4px var(--q-oil);
  height: 13.5vh;
  cursor: pointer;
  transition: transform 0.15s ease-in-out;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.tableCard:hover {
  transform: scale(1.02);
}
.tableCard h1 {
  font-weight: 600;
  font-size: 2.2vw;
  margin-bottom: 0.25rem;
}
.tableCard h4 {
  font-weight: 600;
}
.tableCard p {
  margin: 0;
}
.tableCard .long-name {
  font-size: 1.6vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.tableCard .tableInfo {
  position: absolute;
  bottom: 5px;
  width: 85%;
  font-weight: bold;
}
.tableCard .card-text {
  bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Table Card & Relative Table Colors - Exactly matching quickly-desktop legacy project */
.tableCard.bg-warning,
.relativeTable.bg-warning {
  background-color: var(--q-warning) !important;
  color: var(--q-oil) !important;
  border-color: #eea236 !important;
}
.tableCard.bg-warning *,
.relativeTable.bg-warning * {
  color: var(--q-oil) !important;
}

.tableCard.bg-success,
.relativeTable.bg-success {
  background-color: var(--q-success) !important;
  color: var(--q-white) !important;
  border-color: var(--q-success-hover-strong) !important;
}
.tableCard.bg-success *,
.relativeTable.bg-success * {
  color: var(--q-white) !important;
}

.tableCard.bg-danger,
.relativeTable.bg-danger {
  background-color: var(--q-danger) !important;
  color: var(--q-white) !important;
  border-color: #d43f3a !important;
}
.tableCard.bg-danger *,
.relativeTable.bg-danger * {
  color: var(--q-white) !important;
}

.tableCard.bg-indigo,
.relativeTable.bg-indigo {
  background-color: var(--q-indigo) !important;
  color: var(--q-white) !important;
  border-color: #560bd0 !important;
}
.tableCard.bg-indigo *,
.relativeTable.bg-indigo * {
  color: var(--q-white) !important;
}

.tableCard.bg-info,
.relativeTable.bg-info {
  background-color: var(--q-info) !important;
  color: var(--q-white) !important;
  border-color: var(--q-info-hover-strong) !important;
}
.tableCard.bg-info *,
.relativeTable.bg-info * {
  color: var(--q-white) !important;
}

.catCard {
  background-color: var(--q-oil);
  color: #1dda46;
  height: 7.5vw;
  min-height: 80px;
  box-shadow: 1px 1px 4px var(--q-scrim-glass);
  cursor: pointer;
  transition: background-color 0.15s;
}
.catCard .card-body {
  padding: 0.5rem;
  display: flex;
  align-items: center;
}
.catCard h2 {
  font-size: 1.7vw;
  font-weight: 900;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  margin-bottom: 0;
  width: 100%;
}
.catCard:hover {
  background-color: var(--q-black);
  box-shadow: none;
}

.proCard {
  background-color: var(--q-oil);
  color: var(--q-warning);
  height: 7.5vw;
  min-height: 80px;
  box-shadow: 1px 1px 4px var(--q-scrim-glass);
  cursor: pointer;
  transition: background-color 0.15s;
  position: relative;
}
.proCard .card-body {
  padding: 0.5rem;
}
.proCard h2 {
  font-size: 1.4vw;
  font-weight: 900;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  margin-bottom: 0;
}
.proCard .long-name {
  font-size: 1.15vw;
}
.proCard p.card-text {
  position: absolute;
  bottom: 4px;
  width: 90%;
  font-size: 1.1vw;
  font-weight: bolder;
  margin: 0;
}
.proCard p.card-text .price {
  float: left;
  color: var(--q-danger);
}
.proCard p.card-text .category {
  float: right;
  font-size: 9px;
  color: var(--q-white);
}
.proCard:hover {
  background-color: var(--q-black);
  box-shadow: none;
}

/* Home Main Cards */
.mainCard {
  min-height: 40vh;
  padding: 2vh;
  overflow: hidden;
  box-shadow: 1px 1px 3px var(--q-scrim-glass-60);
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
  border-radius: 6px;
}
.mainCard:hover {
  transform: scale(1.02);
}
.mainCard p {
  position: relative;
  left: -5px;
  top: -5px;
  font-size: 3.5vw;
  font-weight: bold;
  margin: 0;
  z-index: 2;
}
.mainCard:before {
  position: absolute;
  font-family: "FontAwesome";
  font-size: 280px !important;
  bottom: -60px;
  right: -75px;
  opacity: 0.35;
  transform: rotate(-45deg);
  z-index: 1;
}
.mainCard.store:before {
  content: "\f000";
}
.mainCard.cashbox:before {
  content: "\f0d6";
}
.mainCard.endoftheday:before {
  font-size: 300px !important;
  content: "\f017";
}
.mainCard.reports:before {
  content: "\f200";
}
.mainCard.settings:before {
  content: "\f085";
}
.mainCard.exit:before {
  content: "\f08b";
}

/* ==================== GLOBAL & SUB-CATEGORY NAV TABS STYLING ==================== */
.nav-tabs {
  border-bottom: 1px solid var(--q-surface-alt);
}
.nav-tabs .nav-item {
  margin-bottom: -1px;
}
.nav-tabs .nav-link {
  color: var(--q-light-gray);
  cursor: pointer;
  border-radius: 2px 2px 0 0;
  border: 1px solid transparent;
  transition: all 0.15s ease-in-out;
}
.nav-tabs .nav-link:hover {
  border-color: var(--q-surface-alt) var(--q-surface-alt) transparent;
  color: var(--q-white);
  background-color: var(--q-white-a3);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs.nav-justified .nav-link.active,
.nav-tabs.nav-justified .nav-item.show .nav-link {
  background-color: var(--q-dark-gray) !important;
  border-color: var(--q-surface-alt) var(--q-surface-alt) var(--q-dark-gray) !important;
  border-bottom-color: var(--q-dark-gray) !important;
  color: var(--q-white) !important;
  font-weight: bold !important;
}
.nav-tabs .nav-link.disabled,
.nav-tabs.nav-justified .nav-link.disabled {
  color: var(--q-white-a35) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-bottom: 1px solid var(--q-surface-alt) !important;
  cursor: not-allowed !important;
  opacity: 0.5;
}

/* Store View Tabs (Masalar / Hesaplar) */
#view-store .nav-tabs .nav-link {
  font-size: 1.4vw;
  font-weight: bolder;
  padding: 0.5rem 1.25rem;
}
#view-store .nav-tabs .badge {
  font-size: 12px;
  border-radius: 2px;
  padding: 3px 6px;
  vertical-align: middle;
}

/* Settings and Reports Sub-Category Tabs */
#view-settings .nav-tabs,
#view-reports .nav-tabs,
.nav-tabs.nav-justified {
  background-color: var(--q-white-a75);
  border-bottom: 1px solid var(--q-surface-alt) !important;
  border-radius: 2px 2px 0 0;
}
#view-settings .nav-tabs .nav-link,
#view-reports .nav-tabs .nav-link,
.nav-tabs.nav-justified .nav-link {
  font-size: 1.05rem;
  font-weight: bold;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 2px 2px 0 0;
}
#view-settings .nav-tabs .nav-link:hover,
#view-reports .nav-tabs .nav-link:hover,
.nav-tabs.nav-justified .nav-link:hover {
  border-color: var(--q-surface-alt) var(--q-surface-alt) transparent;
  color: var(--q-white);
  background-color: var(--q-white-a5);
}
#view-settings .nav-tabs .nav-link i,
#view-reports .nav-tabs .nav-link i,
.nav-tabs.nav-justified .nav-link i {
  margin-right: 8px;
}

/* Seamless connection between active tab and the card below */
.card.ntb {
  border-top: 0 !important;
}
.card.ntb > .card-header,
#view-settings .card.ntb > .card-header,
#view-reports .card.ntb > .card-header {
  background-color: var(--q-dark-gray) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--q-surface-alt) !important;
}

/* Scrollbars & Flow */
.flow {
  overflow-y: scroll;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--q-gray);
}
::-webkit-scrollbar-thumb {
  background: var(--q-scrollbar);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--q-scrollbar-hover);
}

.col-card {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

.table-name {
  font-weight: bolder;
  font-size: 1.8rem;
  span {
    vertical-align: middle;
    font-size: 1.1rem;
  }
}

/* Check flow & products */
.check-flow {
  overflow-y: scroll;
  overflow-x: hidden;
}
.check-product {
  font-weight: bolder;
  border-bottom: 0.5px dashed var(--q-rule);
  margin-bottom: 0.1rem;
  font-size: 14px;
  cursor: pointer;
}
.check-product::after {
  content: "";
  display: table;
  clear: both;
}
.check-product .product-name {
  display: inline-block;
  width: 68% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.check-product .product-price {
  float: right;
  text-align: right;
  width: 30% !important;
}

.check-card {
  height: 288px;
  margin-bottom: 5px;
}
.check-card .card-header span.float-start {
  width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.check-card .card-body {
  height: 200px;
  overflow: hidden;
}
/* Sığmayan kalemler (js/views/store.js fitCheckCards); mobilde .check-product display:flex !important olduğundan !important şart */
.check-flow .check-product.check-hidden {
  display: none !important;
}
.check-more {
  padding: 4px 0;
  font-size: 13px;
  font-weight: bolder;
  color: var(--q-gray-muted);
  text-align: center;
}

/* Kroki Map */
#plan {
  position: relative;
  width: 100%;
  height: 75vh;
  overflow: auto;
}
.relativeTable {
  position: absolute !important;
  box-shadow: 1px 1px 4px var(--q-oil);
  overflow: hidden;
  cursor: pointer;
  border-radius: 0 !important;
  transition: transform 0.1s;
}
.relativeTable:hover {
  transform: scale(1.04);
}
/* Ölçeklenmiş (küçülmüş) kroki masası: iç boşluk azaltılır ki ad + kişi sayısı sığsın */
#plan.kroki-olcekli .relativeTable {
  padding: 4px !important;
}
#plan.kroki-olcekli .relativeTable h6 {
  font-size: 13px;
  line-height: 1.1;
}
#plan.kroki-olcekli .absTableInfo {
  margin-top: 2px;
  bottom: 0;
  font-size: 11px;
  line-height: 1.1;
}
.absTableInfo {
  margin-top: 10px;
  bottom: 4px;
  width: 100%;
  font-size: 13px;
  font-weight: bold;
}

#floorHolder .card {
  height: 68px;
  cursor: pointer;
}
#floorHolder .card-body {
  padding: 0.75rem;
}
#floorHolder h2 {
  font-size: 1.5vw;
  font-weight: bolder;
  text-transform: capitalize;
}

/* Selling Screen Action Buttons */
.sellButton,
.sendButton {
  font-family: Quickly, sans-serif;
  margin-bottom: 3.8px;
  margin-top: 0px;
  padding: 10px 0;
  color: var(--q-black);
  text-decoration: wavy;
  cursor: pointer;
}
.sendButton i {
  font-size: 5vh;
}
.sendButton p {
  font-size: 13px;
  margin: 0px !important;
  font-weight: bold;
}
.btn-action-send,
.btn-action-send *,
.btn-action-cancel,
.btn-action-cancel * {
  color: var(--q-white) !important;
}
.sendButton[disabled],
.sellButton[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.catButton {
  padding-top: 3px !important;
  font-weight: bold;
  white-space: pre-line;
  font-size: 1.2vw;
  height: 48px;
  text-align: start;
}
.humanIcon {
  font-size: 17px !important;
}

/* Variant / Specifies Modal Styles */
.btn-specs {
  padding: 22px 15px;
  font-weight: bolder;
  font-size: 26px;
  text-transform: capitalize;
  border-radius: 6px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-specs:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--q-black-a40);
}
.btn-specs .spec-price {
  font-size: 20px;
  color: #8a5f25;
  margin-left: 5px;
}

/* Payment Screen */
.cashButton {
  height: 100px;
  margin-bottom: 6px;
  font-size: 3.5vh;
  font-weight: bold;
  cursor: pointer;
}

.will-pay {
  font-size: 1.6vw;
}

.numpad {
  font-weight: 900;
  font-size: 26px;
  padding: 6px;
  cursor: pointer;
}

/* Banknotes Colors */
.ikiyuzTL {
  background-color: #d65f84 !important;
  color: #162c5b !important;
  -webkit-text-stroke: var(--q-light-gray) 1px;
}
.yuzTL {
  background-color: #83a8d4 !important;
  color: #163d82 !important;
  -webkit-text-stroke: var(--q-light-gray) 1px;
}
.elliTL {
  background-color: #f7d0a7 !important;
  color: #e04e3c !important;
  -webkit-text-stroke: var(--q-light-gray) 1px;
}
.yirmiTL {
  background-color: #bfcbab !important;
  color: #3c5c1d !important;
  -webkit-text-stroke: var(--q-light-gray) 1px;
}
.onTL {
  background-color: #efa2b6 !important;
  color: #d84861 !important;
  -webkit-text-stroke: var(--q-light-gray) 1px;
}
.besTL {
  background-color: #eed9c1 !important;
  color: #85453b !important;
  -webkit-text-stroke: var(--q-light-gray) 1px;
}

.btn-discount {
  padding: 15px;
  font-size: 3.5vh !important;
  font-weight: bold;
}

/* Color Utilities */
.bg-orange { background-color: var(--q-primary) !important; }
.bg-indigo { background-color: var(--q-indigo) !important; }
.bg-purple { background-color: var(--q-purple) !important; }
.bg-pink   { background-color: var(--q-pink) !important; }
.bg-red    { background-color: var(--q-danger) !important; }
.bg-yellow { background-color: var(--q-warning) !important; }
.bg-green  { background-color: var(--q-success) !important; }
.bg-teal   { background-color: var(--q-teal) !important; }
.bg-cyan   { background-color: var(--q-info) !important; }
.bg-dark   { background-color: var(--q-bg-dark) !important; }
.bg-oil    { background-color: var(--q-oil) !important; }
.bg-dark-gray { background-color: var(--q-dark-gray) !important; }
.bg-gray   { background-color: var(--q-gray) !important; }
.bg-white  { background-color: var(--q-white) !important; }

.color-white { color: var(--q-white) !important; }
.color-yellow { color: var(--q-warning) !important; }

/* Virtual Touch Keyboard */
.on-keyboard {
  position: fixed;
  width: 100vw;
  bottom: 0px;
  left: 0;
  padding: 15px calc(15px + var(--q-safe-right)) calc(15px + var(--q-safe-bottom)) calc(15px + var(--q-safe-left));
  z-index: 9999999;
  background-color: var(--q-oil);
  animation-duration: 0.3s;
  box-shadow: 0px -2px 10px 0px var(--q-black-a40);
}
.key {
  height: 8vh;
  margin: 0.4vh;
  width: 8vh;
  font-size: 1.8rem;
  font-weight: bold;
}
.space {
  height: 8vh;
  margin: 0.4vh;
  width: 80vh;
  font-size: 1.8rem;
}
.inputKey {
  height: 8vh;
  margin-bottom: 0.5vh;
  margin-left: auto;
  margin-right: auto;
  width: 80vh;
  font-size: 2rem;
}
.numb {
  width: 25vh !important;
}

/* Login Screen (Centered without Navbar) */
body.view-is-login #navBar {
  display: none !important;
}

body.view-is-login,
body.view-is-login #appHolder,
body.view-is-login #mainHolder,
body.view-is-login #routerHolder {
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.view-is-login #mainHolder > .row {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body.view-is-login #routerHolder {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* .active şart: setup de view-is-login taşır; aksi halde gizli #view-login !important ile görünür kalıp setup'ı ezer */
body.view-is-login #view-login.active {
  min-height: 100vh !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: calc(20px + var(--q-safe-top)) calc(16px + var(--q-safe-right)) calc(20px + var(--q-safe-bottom)) calc(16px + var(--q-safe-left)) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Kurulum sihirbazı: giriş ekranının sabit 100vh/overflow:hidden kilidi yerine belge kayar
   (adım içeriği küçük ekranda 100vh'den uzun). */
body.view-is-login.view-is-setup,
body.view-is-login.view-is-setup #appHolder,
body.view-is-login.view-is-setup #mainHolder,
body.view-is-login.view-is-setup #routerHolder {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* Kurulum: view-is-login #appHolder/#mainHolder padding'i sıfırlar; güvenli alan burada. */
body.view-is-login.view-is-setup #view-setup {
  padding: var(--q-safe-top) var(--q-safe-right) 0 var(--q-safe-left);
}

#app-logo {
  height: 350px;
}
#login-holder {
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  /* Kap, çocukların vh tabanlı genişliklerinden dar olamaz.
     Tuş takımı 50vh, PIN kutusu 39vh — bu değerler ekran YÜKSEKLİĞİYLE
     sınırsız büyürken 520px'lık sabit kap ~1040px yükseklikte aşılıyor.
     Aşılınca flex sütununda `margin-left/right: auto` boş alan bulamadığı
     için 0'a düşüyor, `align-items: center` de devre dışı kalıyor ve tuş
     takımı sola dayanıp SAĞA TAŞIYOR (ölçüm: 2560x1440'da +79px).
     Legacy'de bu kap yoktu: `#login-holder` sadece `margin-top: 17vh` idi,
     yani blok içinde auto margin'ler her zaman çalışıyordu.
     24px, tuşların 5px'lik kenar boşluğu ve satır aralığı için pay. */
  max-width: max(520px, 50vh + 24px);
  padding: 0 !important;
}
.login-buttons-holder {
  width: 50vh;
  margin-left: auto;
  margin-right: auto;

  /* Rakam kaybı düzeltmesi — cihazda ölçüldü (2026-09-30).
   *
   * `html, body` üzerinde `touch-action: manipulation` var; hesaplanan
   * değer `pan-x pan-y`. Bu yüzden Chrome, basış sırasında parmak ~10px
   * oynarsa dokunuşu KAYDIRMA hareketi sanıyor ve SENTETİK TIKLAMA
   * ÜRETMİYOR — `inputPin` hiç çağrılmıyor, rakam kayboluyor.
   *
   * Ölçüm (aynı test, gerçek cihaz): 0/4/8 px kaydırmada tıklama VAR,
   * 12/20/30 px'te YOK. Kullanıcının kaybettiği dokunuş: 12 px.
   * Tüklayan dokunuşlarda medyan hareket 1 px, en fazla 7 px.
   *
   * `touch-action: none` → bu kapta kaydırma başlatılamaz, dolayısıyla
   * her dokunuş dokunuş sayılır ve tıklama her zaman üretilir.
   * Kayıp riski yok: login ekranında zaten `body { overflow-y: hidden }`,
   * yani bu kapta kaydırılacak bir içerik bulunmuyor. */
  touch-action: none;
}
.login-button {
  height: 12vh;
  width: 12vh;
  margin: 5px;
  font-size: 30px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Kapsayıcıda da var; `touch-action` miras kalmıyor, tarayıcı
   * hit-test edilen öğeden yukarı doğru hesapladığı için ikisi de
   * birlikte gerekiyor. */
  touch-action: none;
}
.clear-button {
  height: 12vh;
  width: 12vh;
  margin: 5px;
  border: none;
}
#pincodeHolder {
  margin-left: auto;
  margin-right: auto;
  width: 39vh;
  background: transparent;
}
#pincodeHolder input {
  font-size: 5rem;
  height: 64px !important;
  letter-spacing: 0.5rem;
}
#pincodeHolder .input-group .btn {
  height: 64px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
}

/* Modals */
.modal-content {
  background-color: var(--q-oil);
  color: var(--q-light-gray);
  border-radius: 0;
  border: 1px solid var(--q-dark-gray);
}
.modal-header {
  border-bottom: 1px solid var(--q-dark-gray);
}
.modal-footer {
  border-top: 1px solid var(--q-dark-gray);
}
.modal-big {
  max-width: 1200px;
}

/* Animations & Utilities */
@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70%, 100% { transform: scale(1); }
}
.heartBeat {
  animation-name: heartBeat;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.slow {
  animation-duration: 2s !important;
}

.bg-indigo {
  background-color: var(--q-indigo) !important;
  color: var(--q-white) !important;
}

/* Kuver & Occupation */
.kuver-btn {
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
}
.kuver-btn.active {
  background-color: #28a745 !important;
  color: var(--q-white) !important;
}


/* Kasa alt butonları — masaüstü yükseklik tutarlılığı.
 * Üçüncü buton (`Çekmece Aç`) `fa-3x` ikonu taşıyor, diğer ikisi `fa-2x`;
 * ölçümde 128 / 128 / 148px çıkıyordu. `min-height` küçültmez, bu yüzden
 * ikonun kendisi eşitleniyor: masaüstü buton yazı boyutu 20px, `fa-2x` = 2em
 * = 40px = 2,5rem. `line-height: 1` ile kutu yüksekliği de sabitlenir. */
@media (min-width: 992px) {
  #view-cashbox .col-lg-2 .btn i {
    font-size: 2.5rem !important;
    line-height: 1 !important;
  }
}

/* Bootswatch 5.3.8 sarıyı BUTON değişkenlerinde LİTERAL yazıyor:
 * `.btn-warning { --bs-btn-bg:#ffc107; ... }` — `var(--bs-warning)`
 * KULLANMIYOR. Bu yüzden `tokens.css`'teki `:root` eşlemesi tek
 * başına yetmiyordu (ölçüm: Çekmece Aç butonu rgb(255,193,7) çıkıyordu,
 * BS4'te rgb(240,173,78)). Buton değişkenlerini de marka token'ına
 * bağlıyoruz; hover/active tonları Bootswatch'ın kendi koyu tonları
 * olarak kalıyor (tema ritmi korunur). */
/* Değişken boru hattı ÖLÇÜMDE yetmedi: `--bs-btn-bg` hesaplanmış
 * değer #f0ad4e idi ama `background-color` yine rgb(255,193,7)
 * çıkıyordu. Bu yüzden rengi doğrudan dayatıyoruz — style.css zaten
 * bu paketin override katmanı (bkz. AGENTS.md mimari). */
.btn-warning {
  --bs-btn-bg: var(--q-warning);
  --bs-btn-border-color: var(--q-warning);
  --bs-btn-disabled-bg: var(--q-warning);
  --bs-btn-disabled-border-color: var(--q-warning);
  background-color: var(--q-warning) !important;
  border-color: var(--q-warning) !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):active {
  background-color: var(--q-warning-hover, #ec971f) !important;
}
.btn-outline-warning {
  --bs-btn-color: var(--q-warning);
  --bs-btn-border-color: var(--q-warning);
}

/* BS5 tablo bağlam sınıfları KENDİ rengini dayatıyor.
 * ÖLÇÜM: `table-success text-dark` satırında yazı rengi
 * rgb(78,93,108) → rgb(255,255,255) oldu; yeşil (#5cb85c) üstünde
 * beyaz metin kontrastı ~1.9 — okunmuyor. BS4'te `text-dark`
 * kazanıyordu, BS5'te `.table-success` kazanıyor.
 * `text-dark` kullanılan satırlarda rengi geri getiriyoruz; kendi
 * CSS kuralımızla beyaz yazı seçen satırlar bundan ETKİLENMEZ
 * (`!important` kazanır). */
/* Değişken HÜCREde okunuyor: `.table > :not(caption) > * > *` kuralı
 * `color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)))`
 * uygular. `--bs-table-color` BS5'te `#fff` — yani rengin KAYNAĞI
 * `<tr>` üzerindeki `.table-success`. `<tr>`'yi hedeflemek yetmedi
 * (ilk deneme ölçüldü, işe yaramadı); değişkeni `<tr>`'de sıfırlamak
 * yeterli — hücre onu miras alır. */
#view-cashbox .table-success.text-dark {
  --bs-table-color: var(--q-dark-gray);
  color: var(--q-dark-gray) !important;
}

/* Kasa gider satırı — kırmızı zemin üzerinde beyaz yazı.
 * Tema `.table-danger` arka planını `#d9534f` yapıyor; `text-dark` kaldırıldı.
 * Ok ikonu da beyaz — `.text-danger` kırmızı zeminde görünmez oluyordu.
 * Kapsam: yalnızca bu tablonun gider satırları (`.cashbox-expense-row`). */
#view-cashbox .cashbox-expense-row,
#view-cashbox .cashbox-expense-row > td,
#view-cashbox .cashbox-expense-row > td strong,
#view-cashbox .cashbox-expense-row > td small,
#view-cashbox .cashbox-expense-row > td i,
#view-cashbox .cashbox-expense-row > td .text-danger,
#view-cashbox .cashbox-expense-row > td .text-dark {
  color: var(--q-white) !important;
}

/* Kasa gelir satırı ok ikonu — `.text-success` yeşil zemin üzerinde
 * tamamen görünmez oluyordu (ölçülen kontrast 1.00, ikon = ikon rengi).
 * `text-success` kaldırıldı; ikon artık satırın kendi yazı rengini
 * (`text-dark` #4e5d6c) miras alıyor. Ölçüm: 1.00 -> 2.73. Beyaz denendi,
 * yeşil zeminde 2.48 verdiği için (gider satırının aksine) seçilmedi —
 * ok, bulunduğu satırın yazı rengiyle aynı. */
#view-cashbox .table-success > td > i,
#view-cashbox .table-success > td > i.text-success {
  color: inherit;
}

/* Açık zeminli yüzeylerde `text-muted` geçersiz.
 * Tema `.text-muted` = `rgba(255,255,255,.4)` (koyu yüzey için), beyaz
 * kartın üstünde beyaz üstüne beyaz oluyor — Store/Hesaplar kartının
 * not satırı ölçülen kontrast 1.00. Arka plan korunur, yalnızca yazı
 * rengi açık zeminin karşılığına (`--q-gray-muted`, beyaz üstünde 4.6)
 * alınır. Koyu yüzeylerde `.text-muted` aynen çalışmaya devam eder. */
.bg-white .text-muted {
  color: var(--q-gray-muted) !important;
}

/* Day Detail Drilldown */
.day-detail-sidebar .list-group-item {
  background-color: var(--q-bg-dark);
  color: var(--q-light-gray);
  border-color: var(--q-dark-gray);
}
.day-detail-sidebar .list-group-item.active,
.day-detail-sidebar .list-group-item:hover {
  background-color: var(--q-primary) !important;
  color: var(--q-white) !important;
}
.day-detail-content {
  background-color: var(--q-bg-dark);
  border: 1px solid var(--q-dark-gray);
  padding: 1.5rem;
  min-height: 550px;
}

/* ==================== SETTINGS SCREEN (EXACT STYLING) ==================== */
#settings-holder .card,
#reports-holder .card,
.settings-sidebar .card,
#view-reports .col-lg-2 > .card,
#view-settings .col-lg-2 > .card {
  height: 68px;
  margin-bottom: 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#settings-holder .card:hover,
#reports-holder .card:hover,
.settings-sidebar .card:hover,
#view-reports .col-lg-2 > .card:hover,
#view-settings .col-lg-2 > .card:hover {
  filter: brightness(1.15);
}
#settings-holder .card.active,
#reports-holder .card.active,
#settings-holder .card.active .card-body,
#reports-holder .card.active .card-body,
.settings-sidebar .card.active,
.settings-sidebar .card.active .card-body {
  background-color: var(--q-danger) !important;
  color: var(--q-white) !important;
  border-color: var(--q-danger) !important;
}
#settings-holder .card-body,
#reports-holder .card-body,
.settings-sidebar .card-body,
#view-reports .col-lg-2 > .card > .card-body,
#view-settings .col-lg-2 > .card > .card-body {
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 100%;
}
#settings-holder h2,
#reports-holder h2,
.settings-sidebar h2,
#view-reports .col-lg-2 > .card h2,
#view-settings .col-lg-2 > .card h2 {
  font-size: 19px;
  margin: 0;
  font-weight: bold;
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 1;
}
#settings-holder h2 i,
#reports-holder h2 i,
.settings-sidebar h2 i,
#view-reports .col-lg-2 > .card h2 i,
#view-settings .col-lg-2 > .card h2 i {
  width: 28px;
  text-align: center;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
#settings-holder h2 span,
#reports-holder h2 span,
.settings-sidebar h2 span,
#view-reports .col-lg-2 > .card h2 span,
#view-settings .col-lg-2 > .card h2 span {
  display: inline-block;
  line-height: 1.2;
}
.ntb {
  border-top: 0px !important;
}
.tab-height {
  height: 62vh;
}
.tab-inside-height {
  height: 63vh;
}
.flow {
  overflow-y: auto;
  overflow-x: hidden;
}
.subCatInput {
  text-align: left;
  min-height: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.subCat {
  padding: 0.6em 1em;
  margin-right: 6px;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  font-size: 0.95rem;
  border-radius: 4px;
  transition: transform 0.1s;
}
.subCat:hover {
  transform: scale(1.05);
}
.bodyquote {
  padding: 12px;
  background-color: var(--q-oil);
  box-shadow: 1px 1px 4px var(--q-shadow-ink);
  border-left: 5px solid var(--q-primary);
  border-radius: 4px;
}
.list-group-item-warning {
  background-color: var(--q-warning) !important;
  color: var(--q-bg-dark) !important;
  font-weight: bold;
}
#view-settings .card-header h5 {
  font-weight: bold;
  margin-bottom: 0;
}

/* ==================== COMPREHENSIVE RESPONSIVE DESIGN SYSTEM ==================== */

@media (min-width: 992px) {
  #sellingMobileTabs,
  #bottomSheetPeekBar,
  #sellingBottomSheetBackdrop {
    display: none !important;
  }
  .d-none-mobile {
    display: block !important;
  }
  #sellingBottomSheet {
    position: static !important;
    transform: none !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  #bottomSheetScrollBody {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
  }
  .selling-actions-holder {
    display: block !important;
  }
  .btn-action-send,
  .btn-action-note,
  .btn-action-undo,
  .btn-action-cancel,
  .btn-action-move,
  .btn-action-print {
    order: initial !important;
    grid-column: initial !important;
    height: auto !important;
    min-height: unset !important;
  }
  .btn-action-send > div,
  .btn-action-cancel > div {
    display: block !important;
  }

  /* Payment Bottom Sheet Desktop Reset */
  #paymentBottomSheetPeekBar,
  #paymentBottomSheetBackdrop,
  .pay-btn-close {
    display: none !important;
  }
  #paymentBottomSheet {
    position: static !important;
    transform: none !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  #paymentBottomSheetScrollBody {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
  }
  .payment-methods-holder {
    display: block !important;
  }
  .pay-btn-nakit,
  .pay-btn-kart,
  .pay-btn-kupon,
  .pay-btn-ikram {
    order: initial !important;
    grid-column: initial !important;
  }
}

/* Universal Search Inputs (Desktop & Mobile) */
.store-search-group,
.selling-search-group {
  background-color: var(--q-white) !important;
  border-radius: 20px !important;
  border: 1px solid var(--q-gray-400) !important;
  overflow: hidden !important;
}

.store-search-group .input-group-text,
.selling-search-group .input-group-text {
  background-color: var(--q-white) !important;
  color: var(--q-gray-muted) !important;
  border: none !important;
}

#tableSearchInput,
#productSearchInput {
  background-color: var(--q-white) !important;
  color: var(--q-gray-900) !important;
  font-weight: 500 !important;
  border: none !important;
}

#tableSearchInput::placeholder,
#productSearchInput::placeholder {
  color: var(--q-gray-muted) !important;
  opacity: 1 !important;
}

#tableSearchInput:focus,
#productSearchInput:focus {
  background-color: var(--q-white) !important;
  color: var(--q-ink) !important;
  box-shadow: none !important;
}

/* Check Options Modal Universal */
#checkOptionsModal .btn {
  white-space: normal !important;
  word-break: normal !important;
}

#checkOptionsModal #btnResetTableState {
  white-space: normal !important;
  line-height: 1.35 !important;
  font-size: 14px !important;
}

/* H1 — YETKİ / İZİN CHECKBOX'LARI (groupModal, areaModal, ayar tablosu)
 * Kural media query DIŞINDA: BS4'te 24px her iki viewport'ta da geçerliydi
 * (satır içi `style="height:24px"`), mobil özel kural değildi. Ölçülen
 * düzeltme öncesi/sonrası (groupModal, Playwright):
 *   BS4        128 x 24 (masaüstü) · 98.8 x 38 (mobil)
 *   BS5 önce   14 x 14  (masaüstü) · 16 x 16 (mobil)   ← kayboluyordu
 *   BS5 sonra  24 x 24  (masaüstü) · 24 x 24 (mobil)
 * Köşe yuvarlatma temadan gelir (`--q-radius: 0`) — dokunulmadı. */
.modal .form-check-input,
#view-settings .form-check-input {
  width: 24px !important;
  height: 24px !important;
}

/* Tablet & Mobile Breakpoint (<=991.98px) */
@media (max-width: 991.98px) {
  /* ==================== 1. GLOBAL MOBILE ERGONOMICS & NATURAL VIEWPORT SCROLL ==================== */
  *,
  *::before,
  *::after {
    -webkit-tap-highlight-color: transparent !important;
  }

  html {
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;
  }

  body {
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;
    padding-bottom: max(16px, var(--q-safe-bottom)) !important;
  }

  #appHolder {
    display: block !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    padding: var(--q-safe-top) var(--q-safe-right) 0 var(--q-safe-left);
    touch-action: pan-x pan-y !important;
  }

  #mainHolder {
    display: block !important;
    flex: none !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    padding: 8px 14px max(16px, var(--q-safe-bottom)) 14px !important;
    touch-action: pan-x pan-y !important;
  }

  #routerHolder {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    touch-action: pan-x pan-y !important;
  }

  .view-section {
    display: none;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    touch-action: pan-x pan-y !important;
  }

  .view-section.active {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Flexible Viewport Heights - Remove kiosk fixed viewport locks */
  .full-height {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .inside-height {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .tab-height,
  .tab-inside-height {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Universal Touch Target Minimum (44px) */
  .btn,
  .nav-link,
  .form-check-label,
  button,
  a {
    min-height: 44px;
    touch-action: manipulation;
  }

  .tableCard,
  .catCard,
  .proCard {
    touch-action: manipulation;
  }

  /* iOS Auto-Zoom Prevention: All text inputs must be at least 16px */
  input,
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  /* ==================== 2. NAVBAR (BOOTSWATCH SUPERHERO STANDARD) ==================== */
  nav.navbar,
  #navBar nav {
    height: auto !important;
    min-height: 56px !important;
    background-color: var(--q-dark-gray) !important;
    flex-wrap: wrap !important;
    padding: 12px 14px 9px 14px !important;
    box-shadow: 0 2px 8px var(--q-black-a35) !important;
  }

  .navbar-brand {
    margin-right: 8px !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding-top: 2px !important;
  }

  .navbar-brand img {
    height: 37px !important;
    width: auto !important;
    margin-top: 0 !important;
  }

  .navbar-collapse {
    background-color: var(--q-dark-gray);
    padding: 8px 16px;
    border-radius: 6px;
    margin-top: 8px;
    box-shadow: 0 4px 16px var(--q-black-a40);
  }

  .navbar-nav {
    flex-direction: column !important;
  }

  .navbar-nav .nav-link {
    font-size: 1rem !important;
    padding: 10px 4px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--q-white-a8);
  }

  .navbar-collapse .navbar-toolbar {
    padding-top: 8px;
  }

  /* Mobile Message / Notification Banner: Smooth slide-down & slide-up animation */
  #messageBanner {
    position: fixed !important;
    top: calc(10px + var(--q-safe-top)) !important;
    left: calc(14px + var(--q-safe-left)) !important;
    right: calc(14px + var(--q-safe-right)) !important;
    width: auto !important;
    max-width: none !important;
    transform: translate3d(0, -160%, 0) !important;
    margin: 0 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    box-shadow: 0 8px 24px var(--q-black-a50) !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.42s !important;
  }

  #messageBanner.show-toast {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Virtual Touch Keyboard - Strictly disabled on mobile/tablet */
  #onKeyboard,
  .on-keyboard {
    display: none !important;
  }

  /* ==================== 3. STORE VIEW (MASALAR / FLOORS) ==================== */
  #view-store > .row {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Floor Selector: Horizontal Swipeable Pill Chips */
  #floorHolder,
  #floorsButtonsContainer {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    touch-action: pan-x pan-y !important;
  }

  #floorHolder::-webkit-scrollbar,
  #floorsButtonsContainer::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #floorHolder {
    order: -1 !important;
    padding: 4px 10px 10px 10px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    gap: 8px;
  }

  #floorHolder .card,
  #floorsButtonsContainer .card {
    flex: 0 0 auto !important;
    height: var(--q-touch-min) !important;
    min-height: var(--q-touch-min) !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    border-radius: 21px !important;
    padding: 0 4px !important;
    box-shadow: 0 2px 6px var(--q-black-a25) !important;
    border: 1px solid var(--q-white-a10) !important;
    background: #37475a !important;
    color: var(--q-white) !important;
    transition: transform 0.12s ease !important;
  }

  #floorHolder .card:active,
  #floorsButtonsContainer .card:active {
    transform: scale(0.95) !important;
  }

  /* Hızlı Hesap Button Distinct Highlight */
  #floorHolder .card.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
    box-shadow: 0 2px 8px var(--q-info-a40) !important;
  }

  /* Active Floor Indicator */
  #floorHolder .card.bg-danger,
  #floorHolder .card.active-floor {
    background: linear-gradient(135deg, var(--q-primary) 0%, #bf500d 100%) !important;
    box-shadow: 0 3px 10px var(--q-primary-a45) !important;
    border-color: var(--q-white-a25) !important;
  }

  #floorHolder .card-body,
  #floorsButtonsContainer .card-body {
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }

  #floorHolder h2,
  #floorsButtonsContainer h2 {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #view-store .col-lg-10 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Store Header & Modern Segmented Control */
  .store-view-header {
    background: transparent !important;
    border: none !important;
    padding: 4px 14px 5px 14px !important;
  }

  .store-view-header .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .store-tabs-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 2px !important;
  }

  .store-search-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 3px !important;
  }

  /* Sub-sections lateral alignment & natural flow expansion */
  #store-sec-masalar,
  #store-sec-hesaplar,
  #store-sec-siparisler,
  #store-sec-odemeler,
  #reportsMainHolder,
  #settingsMainHolder {
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  #store-sec-masalar #tablesGridContainer,
  #store-sec-hesaplar #checksListContainer {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }

  #tablesGridContainer > .col-card,
  #store-sec-masalar #tablesGridContainer > .col-card {
    margin-bottom: 12px !important;
  }

  .store-segmented-tabs {
    background: var(--q-bg-dark-75) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    border: 1px solid var(--q-white-a8) !important;
    display: flex !important;
    width: 100% !important;
  }

  .store-segmented-tabs .nav-item {
    flex: 1 1 50% !important;
  }

  .store-segmented-tabs .nav-link {
    border-radius: 8px !important;
    border: none !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    color: #aab8c2 !important;
    padding: 8px 12px !important;
    min-height: 40px !important;
    transition: all 0.2s ease !important;
    text-align: center;
  }

  .store-segmented-tabs .nav-link.active {
    background-color: var(--q-dark-gray) !important;
    color: var(--q-white) !important;
    box-shadow: 0 2px 8px var(--q-black-a35) !important;
  }

  /* Store Search Capsule */
  .store-search-group {
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid var(--q-gray-400) !important;
    background-color: var(--q-white) !important;
    box-shadow: 0 2px 6px var(--q-black-a12) !important;
  }

  .store-search-group .input-group-text {
    background: var(--q-white) !important;
    border: none !important;
    color: var(--q-gray-muted) !important;
    padding-left: 14px !important;
  }

  .store-search-group #tableSearchInput {
    background: var(--q-white) !important;
    border: none !important;
    color: var(--q-gray-900) !important;
    font-weight: 500 !important;
    height: 42px !important;
    font-size: 15px !important;
    padding-left: 6px !important;
  }

  .store-search-group #tableSearchInput::placeholder {
    color: var(--q-gray-muted) !important;
    opacity: 1 !important;
  }

  .store-search-group #tableSearchInput:focus {
    background: var(--q-white) !important;
    color: var(--q-ink) !important;
    box-shadow: none !important;
  }

  /* Universal Nav Tabs: Touch-Friendly Horizontal Swipe */
  .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid var(--q-surface-alt) !important;
    touch-action: pan-x pan-y !important;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none !important;
  }

  /* Kaydırılabilir sekme şeridinde sağ kenarda "devamı var" soluklaşması.
   * Kaydırma çubuğu gizli olduğu için taşma, ilk bakışta metnin
   * kesilmesi gibi görünüyordu (ölçüm: 491px içerik / 362px alan).
   *
   * Neden `mask-image` değil: Chromium'da kaydırmalı kapta maske İÇERİKLE
   * BİRLİKTE kayıyor (ölçüldü: baş konumda sağ kenar %11.5 -> %3.6 açık
   * piksel, son konumda %3.9 -> %3.3, yani kaydırınca kayboluyor).
   * `position: sticky` sözde eleman ise görünür alanın sağ kenarına
   * sabitleniyor (ölçüldü: üç konumda da sağ kenar açık piksel
   * %11.5->%1.0, %4.0->%1.2, %3.9->%0.9; sol kenar %10.6->%10.6 dokunulmadı).
   *
   * Sınıfı `app.js` yönetir (`has-overflow-right`): yalnızca gerçekten
   * taşma varken açılır ve sona kaydırılınca kapanır — aksi hâlde son
   * sekme de soluk görünür, yani yine "kesik" izlenimi verirdi. */
  .nav-tabs.has-overflow-right::after {
    content: "";
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    align-self: stretch;
    width: 40px;
    margin-right: -1px;
    background: linear-gradient(
      to left,
      var(--q-oil) 20%,
      rgba(43, 62, 80, 0)
    );
    pointer-events: none;
  }

  .nav-tabs .nav-item {
    flex: 0 0 auto !important;
  }

  .nav-tabs .nav-link {
    font-size: 0.95rem !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  /* ==================== 4. ADİSYON / SELLING VIEW ==================== */
  #multipliersCol {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Multipliers bar: Horizontal Row */
  #multipliersContainer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    margin-bottom: 8px !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }

  #multipliersContainer::-webkit-scrollbar {
    display: none !important;
  }

  #multipliersContainer button,
  #multipliersContainer .w-100,
  #multipliersContainer .w-100 + .w-100 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    font-size: 1rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 6px !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
  }

  /* ==================== 4. ADİSYON / SELLING BOTTOM SHEET ARCHITECTURE ==================== */
  #sellingMobileTabs {
    display: none !important;
  }

  #sellMenuCol {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-bottom: calc(84px + var(--q-safe-bottom)) !important;
  }

  /* Bottom Sheet Backdrop */
  #sellingBottomSheetBackdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--q-peek-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1045;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #sellingBottomSheetBackdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Bottom Sheet Container */
  #sellingBottomSheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    background-color: var(--q-oil) !important;
    border-top: 2px solid var(--q-dark-gray) !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    box-shadow: 0 -8px 30px var(--q-black-a55) !important;
    transition: height 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
    overflow: hidden !important;
    will-change: height;
    padding: 0 var(--q-safe-right) max(6px, var(--q-safe-bottom)) var(--q-safe-left) !important;
    height: calc(var(--q-sheet-peek-h) + var(--q-safe-bottom)); /* Default collapsed */
  }

  /* Ana ekran göstergesi bandı: overflow:hidden padding kutusunda kırpar; kapalı
     panelde iç gövde bu banda taşar. Düz zeminle örter (güvenli alan 0 ise yükseklik 0). */
  #sellingBottomSheet::after,
  #paymentBottomSheet::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--q-safe-bottom);
    background: var(--q-oil);
    z-index: 1;
  }

  /* 3 Kademeli Durumlar */
  #sellingBottomSheet.bs-collapsed:not(.sheet-peek-hint) {
    height: calc(var(--q-sheet-peek-h) + var(--q-safe-bottom)) !important;
  }

  #sellingBottomSheet.bs-mid {
    height: 44vh !important;
  }

  /* 10 / 8 (80vh) Kaplama Kuralı */
  #sellingBottomSheet.bs-expanded {
    height: 80vh !important;
  }

  /* Drawer Discovery Hint (Slow, smooth single peek up to 44vh) */
  @keyframes sheetPeekHint {
    0% {
      height: calc(var(--q-sheet-peek-h) + var(--q-safe-bottom));
    }
    40% {
      height: 44vh;
    }
    58% {
      height: 44vh;
    }
    100% {
      height: calc(var(--q-sheet-peek-h) + var(--q-safe-bottom));
    }
  }

  #sellingBottomSheet.sheet-peek-hint {
    animation: sheetPeekHint 1.9s cubic-bezier(0.25, 1, 0.4, 1) !important;
  }

  /* Peek Bar (Mini Görünen Çubuk) */
  #bottomSheetPeekBar {
    display: block !important;
    height: 68px !important;
    background: linear-gradient(180deg, #374b5e 0%, var(--q-oil) 100%) !important;
    cursor: pointer;
    user-select: none;
    touch-action: none !important;
    border-bottom: 1px solid var(--q-white-a8);
  }

  .bottom-sheet-drag-handle {
    width: 48px;
    height: 5px;
    background: var(--q-white-a45);
    border-radius: 3px;
    margin: 6px auto 8px auto;
    touch-action: none !important;
  }

  #sellingBottomSheet.bs-mid #peekChevron,
  #sellingBottomSheet.bs-expanded #peekChevron {
    transform: rotate(180deg);
  }

  /* Oval Superhero Cart Badge */
  #peekCartBadge {
    border-radius: 50rem !important;
    background-color: var(--q-primary) !important; /* Bootswatch Superhero signature orange/amber */
    color: var(--q-white) !important;
    padding: 6px 14px !important;
    box-shadow: 0 2px 6px var(--q-black-a35) !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Kaydırılabilir İç Gövde */
  #bottomSheetScrollBody {
    height: calc(100% - 68px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px max(70px, calc(var(--q-safe-bottom) + 50px)) 12px !important;
  }

  #sellingBottomSheet #sellCartCol {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  #sellingBottomSheet #sellActionsCol {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin-top: 10px !important;
  }

  #sellingBottomSheet .card.inside-height {
    min-height: unset !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  #sellingBottomSheet #sellCartCol .card.inside-height > .card-header {
    background: transparent !important;
    border: none !important;
    padding: 0 0 8px 0 !important;
  }

  #sellingBottomSheet #sellCartCol .card.inside-height > .card-header > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #sellingBottomSheet #sellCartCol .card.inside-height > .card-header > .row > div:first-child {
    padding-left: 0 !important;
    padding-right: 3px !important;
  }

  #sellingBottomSheet #sellCartCol .card.inside-height > .card-header > .row > div:nth-child(2) {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  #sellingBottomSheet #sellCartCol .card.inside-height > .card-header > .row > div:last-child {
    padding-left: 3px !important;
    padding-right: 0 !important;
  }

  #sellingBottomSheet #check-products {
    min-height: 175px !important;
    max-height: 32vh !important;
    overflow-y: auto !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
  }

  .empty-check-placeholder {
    min-height: 175px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--q-white-a40) !important;
    padding: 20px 10px !important;
    user-select: none !important;
  }

  .empty-check-placeholder i {
    opacity: 0.35 !important;
    font-size: 2rem !important;
    margin-bottom: 10px !important;
  }

  .empty-check-placeholder span {
    font-size: 14px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    letter-spacing: 0.2px !important;
    color: var(--q-white-a42) !important;
  }

  /* Action buttons on selling screen: 4 araç tek satırda, İptal ve Gönder altta 50/50 yan yana */
  .selling-actions-holder {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }

  .selling-actions-holder .btn,
  .selling-actions-holder .sendButton {
    margin: 0 !important;
  }

  /* 1. ÜST ARAÇLAR: Not Ekle, Geri Al, Ürün Taşı, Yazdır (4 sütun yan yana tek satır) */
  .btn-action-note {
    order: 1 !important;
    grid-column: span 1 !important;
  }

  .btn-action-undo {
    order: 2 !important;
    grid-column: span 1 !important;
  }

  .btn-action-move {
    order: 3 !important;
    grid-column: span 1 !important;
  }

  .btn-action-print {
    order: 4 !important;
    grid-column: span 1 !important;
  }

  /* 2. ALT SATIR: İptal Et (Solda %50) */
  .btn-action-cancel {
    grid-column: span 2 !important;
    order: 5 !important;
    height: 48px !important;
    min-height: 48px !important;
    background-color: var(--q-danger) !important;
    border-color: #d43f3a !important;
    color: var(--q-white) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px var(--q-danger-a25) !important;
  }

  .btn-action-cancel > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: var(--q-white) !important;
  }

  .btn-action-cancel i {
    font-size: 1.15rem !important;
    margin-bottom: 0 !important;
    color: var(--q-white) !important;
  }

  .btn-action-cancel p {
    font-size: 0.95rem !important;
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--q-white) !important;
  }

  /* 3. ALT SATIR: Gönder Butonu (İptal Butonunun Sağında %50) */
  .btn-action-send {
    grid-column: span 2 !important;
    order: 6 !important;
    height: 48px !important;
    min-height: 48px !important;
    background-color: var(--q-success) !important;
    border-color: var(--q-success-hover-strong) !important;
    color: var(--q-white) !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 8px var(--q-success-a35) !important;
  }

  .btn-action-send > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: var(--q-white) !important;
  }

  .btn-action-send i {
    font-size: 1.15rem !important;
    margin-bottom: 0 !important;
    color: var(--q-white) !important;
  }

  .btn-action-send p {
    font-size: 0.95rem !important;
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--q-white) !important;
  }

  .sendButton {
    height: 52px !important;
    min-height: 48px !important;
    padding: 6px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    border-radius: 6px !important;
  }

  .sendButton i {
    font-size: 1.25rem !important;
    margin-bottom: 2px !important;
  }

  .sendButton p {
    font-size: clamp(10px, 2.7vw, 12px) !important;
    margin: 0 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* Tablolar: ≤5 sütun kap genişliğine sığar (sabit min-width son sütunu — örn. Tutar —
     kaydırma alanına itiyordu); 6+ sütun sığmaz, yatay kayar. */
  .table {
    min-width: 0;
  }
  .table:has(thead th:nth-child(6)) {
    min-width: 720px;
  }
  .table > :not(caption) > * > * {
    padding: 0.5rem 0.4rem;
  }

  /* Tablo doğrudan çocuksa kap kaydırılabilir olmalı (aksi halde sayfa taşar) */
  div:has(> .table) {
    overflow-x: auto;
  }

  /* Taşan kenarda solma: sınıfları app.js `syncAllTableScrollHints` yönetir */
  .tscroll-host.has-scroll-left,
  .tscroll-host.has-scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tfl, 0px), #000 calc(100% - var(--tfr, 0px)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--tfl, 0px), #000 calc(100% - var(--tfr, 0px)), transparent 100%);
  }
  .tscroll-host.has-scroll-left {
    --tfl: var(--q-scroll-fade);
  }
  .tscroll-host.has-scroll-right {
    --tfr: var(--q-scroll-fade);
  }

  .flow {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  /* Drilldown detail in Gün Sonu */
  #dayDetailContent {
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* ==================== 5. SETTINGS & REPORTS SIDEBAR ==================== */
  .settings-sidebar {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    touch-action: pan-x pan-y !important;
    gap: 8px;
  }

  .settings-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .settings-sidebar .card {
    flex: 0 0 auto !important;
    height: var(--q-touch-min) !important;
    min-height: var(--q-touch-min) !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    border-radius: 21px !important;
    min-width: unset !important;
    padding: 0 4px !important;
    border: 1px solid var(--q-white-a10) !important;
    box-shadow: 0 2px 6px var(--q-black-a25) !important;
    /* Seçili kart kırmızıya dönerken gövde (`.card-body`, yarıçap 0px)
     * kartın 21px'lik hap şeklini aşıyor, köşeler kare görünüyordu.
     * Kırmızı artık kartın kendisine uygulanıyor (`.active`), bu kesme de
     * gövdenin taşabildiği her köşeyi kartın yuvarlaklığına hapseder. */
    overflow: hidden !important;
  }

  .settings-sidebar .card-body {
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }

  .settings-sidebar h2 {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .settings-sidebar h2 i {
    font-size: 13.5px !important;
    margin-right: 6px !important;
    width: auto !important;
  }

  #view-reports .col-lg-10,
  #view-settings .col-lg-10 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ==================== 6. CASHBOX VIEW MOBILE ==================== */
  #view-cashbox .col-lg-10 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-right: 0 !important;
  }

  #view-cashbox .col-lg-2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-top: 12px !important;
  }

  #view-cashbox .col-lg-2 .btn {
    padding: 12px 8px !important;
    margin-bottom: 0 !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
  }

  /* BS4'te `btn-block + btn-block` yığın boşluğu verdiği için burada
   * `margin-top:0` ile iptal ediliyordu (ölçüm: Gelir top=570 /
   * Gider top=578). BS5'te `.btn-block` kaldırıldığı için YANLIŞ kural da
   * kalktı; karşılığı olan iptal de ölü CSS olduğu için silindi. */

  /* Kasa 'Çekmece Aç' butonunun 2 sütuna tam yayılması */
  #view-cashbox .col-lg-2 .btn:last-child {
    grid-column: span 2 !important;
  }

  /* Kasa alt toplam paneli mobilde taşma yapmayacak */
  #view-cashbox .card-footer .row {
    font-size: 1rem !important;
  }

  /* Raporlar pasta grafik alanı mobilde tam oranlı dairesel tutulur */
  #salesPieCanvas {
    max-height: 280px !important;
  }
  #view-reports [style*="height: 420px"] {
    height: 280px !important;
  }

  #view-cashbox .col-lg-2 .btn i {
    /* HTML ikonu `fa-2x d-block mb-2` ile getiriyor. Mobil kural zaten
       `margin-right: 6px` ile ikonu metinle AYNI satıra koymayı amaçlıyor.
       `.fa-2x` kendi `line-height`'ını getirdiği için ikonun flex strut'unu
       şişiriyor; `line-height: 1` kutu yüksekliğini font boyutuna sabitler.
       Not: `display` burada değiştirilmez — flex öğeleri zaten blockify
       olur, `inline-block` etkisizdir. */
    line-height: 1 !important;
    font-size: 1.3rem !important;
    margin-bottom: 0 !important;
    margin-right: 6px !important;
  }

  /* Izgara satırları eşitlenir: butonlar kendi içerik yüksekliğine göre
     değil, satır yüksekliğine göre büyüsün. */
  #view-cashbox .col-lg-2 {
    align-items: stretch !important;
  }

  /* ==================== 7. PAYMENT VIEW ADAPTATION (BOTTOM SHEET ARCHITECTURE) ==================== */  #view-payment .card-body > .row {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: calc(84px + var(--q-safe-bottom)) !important; /* Space for peek bar */
  }

  /* Payment View Header */
  .pay-view-header {
    background: var(--q-surface-deep) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    border: 1px solid var(--q-white-a8) !important;
  }

  .pay-view-header #payTableName {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: var(--q-white) !important;
  }

  .pay-back-btn {
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    transition: transform 0.12s ease !important;
  }

  .pay-back-btn:active {
    transform: scale(0.96) !important;
  }

  /* Main Screen: Adisyon (Kalan) üstte, Ödenecek Ürünler hemen altında */
  #payCheckItemsCol,
  #paySelectedItemsCol {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
  }

  #payCheckItemsCol .card,
  #paySelectedItemsCol .card {
    border-radius: 12px !important;
    border: 1px solid var(--q-white-a10) !important;
    background-color: var(--q-oil) !important;
    box-shadow: 0 4px 12px var(--q-black-a25) !important;
  }

  #payCheckItemsCol .card-header,
  #paySelectedItemsCol .card-header {
    background-color: var(--q-ink-80) !important;
    border-bottom: 1px solid var(--q-white-a8) !important;
    font-size: 0.95rem !important;
    padding: 10px 14px !important;
  }

  #payCheckItemsCol .check-flow,
  #paySelectedItemsCol .check-flow {
    max-height: 25vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px !important;
  }

  /* Product Transfer Rows in Split Bill */
  .pay-product-row {
    border-bottom: 1px solid var(--q-white-a8) !important;
    border-radius: 6px !important;
    padding: 10px 8px !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
  }

  .pay-product-row:active {
    transform: scale(0.98) !important;
  }

  .pay-product-row.remaining-row {
    color: #e2e8f0 !important;
  }

  .pay-product-row.remaining-row:active {
    background-color: var(--q-success-a18) !important;
  }

  .pay-product-row.selected-row {
    background-color: var(--q-success-a8) !important;
    border-left: 3px solid var(--q-success) !important;
  }

  .pay-product-row.selected-row:active {
    background-color: var(--q-danger-a18) !important;
  }

  /* Primary Action: Hepsini Öde (Bulk Pay) */
  .pay-btn-all {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--q-primary) 0%, #c55711 100%) !important;
    border: none !important;
    box-shadow: 0 3px 8px var(--q-primary-a35) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    transition: transform 0.12s ease !important;
  }

  .pay-btn-all:active {
    transform: scale(0.97) !important;
  }

  /* Secondary Action: Seçimi Geri Al */
  .pay-btn-return {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    transition: transform 0.12s ease !important;
  }

  .pay-btn-return:active {
    transform: scale(0.97) !important;
  }

  #view-payment .card.inside-height {
    min-height: unset !important;
    height: auto !important;
    margin-bottom: 8px !important;
  }

  /* Quick Cash Chips Row (Mobile) */
  .quick-cash-chips-row {
    background-color: var(--q-bg-dark-60) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
  }

  .quick-cash-chips-row .btn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 19px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px var(--q-black-a25) !important;
    transition: transform 0.12s ease !important;
  }

  .quick-cash-chips-row .btn:active {
    transform: scale(0.95) !important;
  }

  /* Payment Bottom Sheet Backdrop */
  #paymentBottomSheetBackdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--q-peek-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1045;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #paymentBottomSheetBackdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Payment Bottom Sheet Container */
  #paymentBottomSheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    background-color: var(--q-oil) !important;
    border-top: 2px solid var(--q-dark-gray) !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    box-shadow: 0 -8px 30px var(--q-black-a55) !important;
    transition: height 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
    overflow: hidden !important;
    will-change: height;
    padding: 0 var(--q-safe-right) max(6px, var(--q-safe-bottom)) var(--q-safe-left) !important;
    height: calc(var(--q-sheet-peek-h) + var(--q-safe-bottom)) !important; /* Default collapsed */
  }

  /* 3 Kademeli Durumlar */
  #paymentBottomSheet.bs-collapsed {
    height: calc(var(--q-sheet-peek-h) + var(--q-safe-bottom)) !important;
  }

  #paymentBottomSheet.bs-mid {
    height: 44vh !important;
  }

  /* 10 / 8 (80vh) Kaplama Kuralı */
  #paymentBottomSheet.bs-expanded {
    height: 80vh !important;
  }

  /* Peek Bar (Mini Görünen Çubuk) */
  #paymentBottomSheetPeekBar {
    display: block !important;
    height: 68px !important;
    background: linear-gradient(180deg, #374b5e 0%, var(--q-oil) 100%) !important;
    cursor: pointer;
    user-select: none;
    touch-action: none !important;
    border-bottom: 1px solid var(--q-white-a8);
  }

  #paymentBottomSheet.bs-mid #payPeekChevron,
  #paymentBottomSheet.bs-expanded #payPeekChevron {
    transform: rotate(180deg);
  }

  /* Tutar her zaman görünür: etiket kısalır (text-truncate), <400px'te düşer;
     <360px'te buton ikonu da gizlenir. */
  #paymentBottomSheetPeekBar .payPeekLabel {
    min-width: 0;
  }
  @media (max-width: 399.98px) {
    #paymentBottomSheetPeekBar .payPeekLabel {
      display: none;
    }
  }
  @media (max-width: 359.98px) {
    #paymentBottomSheetPeekBar .payPeekBtnIcon {
      display: none;
    }
    #payPeekCartBadge {
      padding: 6px 8px !important;
    }
  }

  /* Oval Superhero Cart Badge for Payment */
  #payPeekCartBadge {
    border-radius: 50rem !important;
    background-color: var(--q-primary) !important; /* Bootswatch Superhero signature amber/orange */
    color: var(--q-white) !important;
    padding: 6px 14px !important;
    box-shadow: 0 2px 6px var(--q-black-a35) !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Kaydırılabilir İç Gövde */
  #paymentBottomSheetScrollBody {
    height: calc(100% - 68px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px max(70px, calc(var(--q-safe-bottom) + 50px)) 12px !important;
  }

  #payNumpadCol {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  #payMethodsCol {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 4px !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    order: -1 !important;
  }

  /* Payment Methods Grid inside Bottom Sheet */
  .payment-methods-holder {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .pay-btn-nakit {
    order: 1 !important;
    grid-column: span 1 !important;
  }

  .pay-btn-kart {
    order: 2 !important;
    grid-column: span 1 !important;
  }

  .pay-btn-kupon {
    order: 3 !important;
    grid-column: span 1 !important;
  }

  .pay-btn-ikram {
    order: 4 !important;
    grid-column: span 1 !important;
  }

  .payment-methods-holder .sellButton {
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px var(--q-black-a25) !important;
    transition: transform 0.12s ease !important;
  }

  .payment-methods-holder .sellButton:active {
    transform: scale(0.96) !important;
  }

  .payment-methods-holder .sellButton i {
    font-size: 1.35rem !important;
    margin-bottom: 0 !important;
  }

  .payment-methods-holder .sellButton p {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
  }

  .pay-btn-close {
    order: 5 !important;
    grid-column: 1 / -1 !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px var(--q-danger-a25) !important;
  }

  .pay-btn-close i {
    font-size: 1.15rem !important;
    margin-bottom: 0 !important;
  }

  .pay-btn-close p {
    font-size: 0.92rem !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  .sellButton {
    height: 56px !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
    transition: transform 0.12s ease !important;
  }

  .sellButton:active {
    transform: scale(0.96) !important;
  }

  .sellButton i {
    font-size: 1.3rem !important;
    margin-bottom: 2px !important;
  }

  .sellButton p {
    font-size: 11px !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  .numpad {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    border: 1px solid var(--q-primary-a35) !important;
    background-color: var(--q-ink-85) !important;
    color: var(--q-white) !important;
    transition: transform 0.12s ease, background-color 0.12s ease !important;
  }

  .numpad:active {
    transform: scale(0.95) !important;
    background-color: var(--q-primary) !important;
    color: var(--q-white) !important;
  }

  .numpad.btn-success {
    background-color: var(--q-success) !important;
    border-color: var(--q-success-hover-strong) !important;
  }

  /* ========================================================
     GLOBAL MODAL RESPONSIVE STYLING (MOBILE & TABLET)
     ======================================================== */
  .modal-dialog {
    margin: calc(10px + var(--q-safe-top)) auto calc(10px + var(--q-safe-bottom)) !important;
    max-width: calc(100% - 20px - 2 * max(var(--q-safe-left), var(--q-safe-right))) !important;
    width: calc(100% - 20px - 2 * max(var(--q-safe-left), var(--q-safe-right))) !important;
  }

  .modal-content {
    max-height: calc(100vh - 20px - var(--q-safe-top) - var(--q-safe-bottom)) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  /* H2 — mobilde modal BAŞLIĞI 6.17px kısaldı.
   * ÖLÇÜM (390x844, Playwright, 36 modal): gövde ve altbilgi birebir
   * aynı (noteModal gövde 251.66 = 251.66, userModal 178 = 178), tek
   * fark başlıkta: BS4 49px, BS5 42.83px. Sebep: BS4'te `.close`
   * `float:right` idi (yüksekliğe katılmaz, ama taban çizgisi başlığa
   * ~7px ekliyordu); BS5 `.btn-close` `align-self:center` + negatif
   * margin ile başlığa 13.59px katkı veriyor. Farkı dikey padding ile
   * kapatıyoruz: 10px → 13.09px (toplam +6.17px). Yatay padding ve
   * masaüstü (orada zaten 69px = 69px birebir) DEĞİŞMEDİ. */
  .modal-header {
    padding: 13.09px 14px !important;
    align-items: center !important;
  }

  .modal-header .modal-title,
  .modal-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  /* BS5: `.close` kaldırıldı; `.btn-close` SVG arka planlı.
   * ÖLÇÜM: BS4'te 38x44, ilk BS5 denemesinde 46x60 — 60px yükseklik
   * başlığı şişiriyordu (iOS Simulator raporu: "başlık satırını da
   * yükseltiyor"). Sebep: `.btn-close` flex başlıkta GERİLİYOR
   * (align-self:stretch) + content-box padding.
   * Düzeltme: esnemeyi kes, boyutu BS4'e yakın sabitle. */
  /* ⚠️ `filter` BURAYA YAZILMAZ — iOS Simulator'da ölçüldü (2026-10-01).
   * Bootswatch Superhero 5.3.8'in `.btn-close` kuralı ×'i ZATEN BEYAZ
   * çiziyor: `--bs-btn-close-bg: url(... fill='%23fff' ...)`. Buna
   * `btn-close-white` eklemek `--bs-btn-close-filter: invert(1)
   * grayscale(100%) brightness(200%)` uygulatıyor ve beyaz ×'i SİYAH'A
   * çeviriyordu. Gerçek Safari'deki kanıt: BS4 beyaz ×, BS5 siyah ×
   * (aynı modal, aynı koyu başlık zemini).
   * Düzeltme: 37 `btn-close-white` sınıfı markup'tan kaldırıldı;
   * `.btn-close` filtresiz hâliyle temanın beyaz ×'ini veriyor. */
  .modal-header .btn-close {
    /* PAKETİN 44px DOKUNMA HEDEFİ KURALI BURAYA DA UYANIYORDU:
     * `button { min-height: 44px }` + content-box padding = 56px kutuyu,
     * başlık 49px → 61px şişiyordu (ölçüm). Kapatma ikonu harici bir
     * düğme hedefi değil, ikon düğmesi; kuralı burada kaldırıyoruz.
     * Erişilebilirlik: ikon düğmesinin tıklanabilir alanı ~30x30, hover/
     * focus hâlinde `background-color` ile belirginleşiyor. */
    min-height: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    font-size: 1.1rem !important;
    padding: 6px 10px !important;
    margin: -8px -10px -8px auto !important;
    opacity: 0.8 !important;
    background-size: 1em auto;
    box-sizing: content-box;
  }

  .modal-body {
    max-height: calc(100vh - 125px - var(--q-safe-top) - var(--q-safe-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
  }

  .modal-body h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }

  .modal-body h5 {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }

  .modal-body p {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
  }

  .modal-body label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }

  .modal-body .form-control,
  .modal-body .form-control-lg {
    font-size: 0.9rem !important;
    height: var(--q-touch-min) !important;
    min-height: var(--q-touch-min) !important;
    padding: 6px 10px !important;
  }

  /* BS5 `form-select`: aynı ölçüler, AMA ok `background-image` ile
   * çizildiği için sağdaki 2.25rem (36px) boşluk okun yeri. Yukarıdaki
   * `padding` kısaltması seçiciye de uygulansaydı ok metnin üstüne
   * binerdi. ÖLÇÜM (390x844, productModalCatId): padding-right 10px →
   * ok soldan 12px, 16px genişlik → sağdan 12–28px dolu; 30px yeterli.
   * Bu blok eklenmeden önce: yükseklik 42px, font 16px (BS4: 38px/14.4px)
   * — sebep, aşağıdaki seçicilerin `form-control-lg` aramasıydı. */
  .modal-body select.form-select,
  .modal-body select.form-select-lg {
    font-size: 0.9rem !important;
    height: var(--q-touch-min) !important;
    min-height: var(--q-touch-min) !important;
    padding: 6px 30px 6px 10px !important;
  }

  .modal-body .input-group-text {
    font-size: 0.85rem !important;
    padding: 6px 10px !important;
    height: var(--q-touch-min) !important;
  }

  .modal-body .btn-lg {
    font-size: 0.9rem !important;
    padding: 6px 12px !important;
    min-height: var(--q-touch-min) !important;
  }

  .modal-body table th,
  .modal-body table td {
    font-size: 0.82rem !important;
    padding: 6px 8px !important;
  }

  .modal-footer {
    padding: 8px 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .modal-footer .btn,
  .modal-footer .btn-lg {
    font-size: 0.88rem !important;
    padding: 6px 14px !important;
    min-height: var(--q-touch-min) !important;
    height: auto !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    margin: 0 !important;
  }

  /* Home View Main Menu Cards on Tablet */
  .mainCard {
    min-height: 120px !important;
    height: 18vh !important;
    max-height: 180px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }

  .mainCard p {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
    left: 0 !important;
    top: 0 !important;
  }

  .mainCard:before,
  .mainCard.endoftheday:before {
    font-size: 110px !important;
    bottom: -15px !important;
    right: -20px !important;
  }
}

/* Mobile Phones (<=767.98px) */
@media (max-width: 767.98px) {
  /* ==================== 1. LOGIN SCREEN (8PT GRID & PERFECT CENTER) ==================== */
  body.view-is-login #view-login.active {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: calc(16px + var(--q-safe-top)) calc(12px + var(--q-safe-right)) calc(16px + var(--q-safe-bottom)) calc(12px + var(--q-safe-left)) !important;
  }

  #login-holder {
    margin: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 320px !important;
  }

  .login-brand {
    margin-bottom: 16px !important;
  }

  .login-brand img {
    height: clamp(38px, 6vh, 48px) !important;
  }

  #pincodeHolder {
    width: 288px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #pincodeHolder .input-group {
    width: 100% !important;
    height: 54px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  #pincodeHolder input {
    font-size: 2.2rem !important;
    height: 54px !important;
    letter-spacing: 0.4rem !important;
    border: none !important;
  }

  #pincodeHolder .input-group .btn {
    height: 54px !important;
    min-height: 48px !important;
    width: 60px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .login-buttons-holder {
    width: 288px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .login-button {
    height: clamp(64px, 10vh, 88px) !important;
    min-height: 48px !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  /* 0 tuşu tam 8'in altında ve ortalanmış */
  .login-button:nth-child(10) {
    grid-column: 2 !important;
  }

  /* ==================== 2. HOME MAIN MENU CARDS ==================== */
  .mainCard {
    min-height: 85px !important;
    height: 18vh !important;
    max-height: 125px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    border-radius: 6px !important;
  }

  .mainCard p {
    font-size: clamp(1.1rem, 4.5vw, 1.35rem) !important;
    left: 0 !important;
    top: 0 !important;
  }

  .mainCard:before,
  .mainCard.endoftheday:before {
    font-size: 85px !important;
    bottom: -12px !important;
    right: -12px !important;
  }

  /* ==================== 3. STORE VIEW (MASALAR) ==================== */
  #tablesGridContainer > .col-card,
  #store-sec-masalar #tablesGridContainer > .col-card {
    margin-bottom: 12px !important;
  }

  .tableCard {
    height: 96px !important;
    min-height: 96px !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 1px 1px 4px var(--q-oil) !important;
    border: none !important;
    transition: transform 0.12s ease !important;
  }

  .tableCard:active {
    transform: scale(0.96) !important;
  }

  .tableCard h1,
  .tableCard h1.card-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
  }

  .tableCard .long-name,
  .tableCard h1.long-name {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
  }

  .tableCard .table-card-total {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
  }

  .tableCard .tableInfo {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.82rem !important;
    margin-top: auto !important;
  }

  .tableCard.bg-warning {
    background-color: var(--q-warning) !important;
    color: var(--q-oil) !important;
  }
  .tableCard.bg-warning * {
    color: var(--q-oil) !important;
  }

  .tableCard.bg-success {
    background-color: var(--q-success) !important;
    color: var(--q-white) !important;
  }
  .tableCard.bg-success * {
    color: var(--q-white) !important;
  }

  .tableCard.bg-danger {
    background-color: var(--q-danger) !important;
    color: var(--q-white) !important;
  }
  .tableCard.bg-danger * {
    color: var(--q-white) !important;
  }

  .tableCard.bg-indigo {
    background-color: var(--q-indigo) !important;
    color: var(--q-white) !important;
  }
  .tableCard.bg-indigo * {
    color: var(--q-white) !important;
  }

  .tableCard.bg-info {
    background-color: var(--q-info) !important;
    color: var(--q-white) !important;
  }
  .tableCard.bg-info * {
    color: var(--q-white) !important;
  }

  /* ==================== 4. SELLING SCREEN CARDS & CONTAINER ALIGNMENT ==================== */
  #view-selling,
  #view-selling > .row,
  #view-selling .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #view-selling .card.full-height {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  #view-selling .card.full-height > .card-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  #view-selling > .row > [class*="col-"],
  #view-selling #sellMenuCol {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  #view-selling #sellMenuCol [class*="col-12"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #view-selling #sellMenuCol .card.inside-height {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  #view-selling #categoryHolder,
  #view-selling #productHolder {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #view-selling #categoriesGrid,
  #view-selling #productsGrid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -4px !important;
    margin-right: -4px !important;
    padding: 0 !important;
  }

  #view-selling #categoriesGrid > .col-card,
  #view-selling #productsGrid > .col-card {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  #view-selling #categoriesGrid .catCard,
  #view-selling #productsGrid .proCard {
    margin-bottom: 0 !important;
  }

  #view-selling #subcatHeader {
    background: var(--q-surface-deep) !important;
    border-radius: 10px !important;
    border: 1px solid var(--q-white-a8) !important;
    margin-bottom: 8px !important;
    padding: 6px 8px !important;
  }

  .selling-view-header {
    background: var(--q-surface-deep) !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 2px 8px var(--q-black-a25) !important;
    border: 1px solid var(--q-white-a8) !important;
    position: sticky !important;
    top: var(--q-safe-top) !important;
    z-index: 1020 !important;
  }

  .selling-view-header .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .selling-view-header [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .selling-view-header #sellTableName {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: var(--q-white) !important;
  }

  .selling-search-group {
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid var(--q-gray-400) !important;
    background-color: var(--q-white) !important;
    box-shadow: 0 2px 6px var(--q-black-a12) !important;
  }

  .selling-search-group .input-group-text {
    background: var(--q-white) !important;
    border: none !important;
    color: var(--q-gray-muted) !important;
    padding-left: 12px !important;
  }

  .selling-search-group #productSearchInput {
    background: var(--q-white) !important;
    border: none !important;
    color: var(--q-gray-900) !important;
    font-weight: 500 !important;
    height: 38px !important;
    font-size: 14px !important;
  }

  .selling-search-group #productSearchInput::placeholder {
    color: var(--q-gray-muted) !important;
    opacity: 1 !important;
  }

  .selling-search-group #productSearchInput:focus {
    background: var(--q-white) !important;
    color: var(--q-ink) !important;
    box-shadow: none !important;
  }

  .selling-header-actions .btn {
    height: 38px !important;
    min-height: 38px !important;
    min-width: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
    font-size: 15px !important;
    box-shadow: 0 2px 5px var(--q-black-a25) !important;
    transition: transform 0.12s ease !important;
  }

  .selling-header-actions .btn:active {
    transform: scale(0.94) !important;
  }

  /* Category Cards */
  .catCard {
    height: 76px !important;
    min-height: 76px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #37475a 0%, #2b3947 100%) !important;
    border: 1px solid var(--q-white-a9) !important;
    box-shadow: 0 4px 10px var(--q-black-a25) !important;
    color: var(--q-white) !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  }

  .catCard:active {
    transform: scale(0.96) !important;
  }

  .catCard .card-body {
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .catCard h2,
  .catCard h2.card-title {
    color: var(--q-white) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  .catCard .cat-count {
    color: var(--q-info) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-top: 3px !important;
  }

  /* Product Cards: Same authentic colors as normal desktop POS */
  .proCard {
    height: 80px !important;
    min-height: 80px !important;
    border-radius: 12px !important;
    background: var(--q-oil) !important;
    background-color: var(--q-oil) !important;
    border: 1px solid var(--q-white-a8) !important;
    box-shadow: 0 4px 10px var(--q-black-a25) !important;
    margin-bottom: 0 !important;
    transition: transform 0.12s ease !important;
  }

  .proCard:active {
    transform: scale(0.96) !important;
    background-color: var(--q-black) !important;
  }

  .proCard .card-body {
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
  }

  .proCard h2,
  .proCard h2.card-title,
  .proCard .long-name {
    color: var(--q-warning) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: pre-wrap !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .proCard p.card-text {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.92rem !important;
    margin-top: auto !important;
  }

  .proCard .price,
  .proCard p.card-text .price {
    color: var(--q-danger) !important;
    font-weight: 800 !important;
    font-size: 0.98rem !important;
    float: none !important;
  }

  .proCard .category,
  .proCard p.card-text .category {
    font-size: 11px !important;
    opacity: 0.9 !important;
    color: var(--q-white) !important;
    float: none !important;
  }

  .pro-cart-pill {
    position: absolute !important;
    top: -6px !important;
    right: -4px !important;
    background-color: var(--q-primary) !important;
    color: var(--q-white) !important;
    border-radius: 12px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px var(--q-black-a40) !important;
    border: 2px solid var(--q-oil) !important;
    z-index: 2 !important;
  }

  /* Selling Check Items */
  #sellingBottomSheet #check-products .check-product {
    padding: 8px 6px !important;
    border-bottom: 1px dashed var(--q-white-a12) !important;
    transition: background 0.15s ease !important;
  }

  #sellingBottomSheet #check-products .check-product.selected-check-item {
    background: var(--q-primary-a18) !important;
    border-radius: 6px !important;
    border-bottom-color: transparent !important;
  }

  /* Check-product general mobile typography & layout */
  .check-product {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border-bottom: 1px dashed var(--q-white-a15) !important;
    margin-bottom: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .check-product::after {
    display: none !important;
  }

  .check-product .product-name {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 64% !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .check-product .product-price {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    float: none !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* Transparent Icon-Only Back to Categories Button */
  #btnBackToCategories {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--q-white) !important;
    font-size: 1.35rem !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
  }
  #btnBackToCategories:active {
    opacity: 0.6 !important;
    transform: scale(0.9) !important;
    background: transparent !important;
  }
  #btnBackToCategories:hover,
  #btnBackToCategories:focus {
    color: var(--q-warning) !important;
    text-decoration: none !important;
    background: transparent !important;
    outline: none !important;
  }

  /* Subcategories horizontal chips scroll */
  #subcatHeader {
    padding: 3px 6px !important;
    background: var(--q-surface-deep-95) !important;
    border-bottom: 1px solid var(--q-white-a8) !important;
    min-height: 34px !important;
  }

  #btnBackToCategories {
    height: 26px !important;
    width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    margin-right: 6px !important;
  }

  #subcatsButtonRow {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 0 !important;
    scrollbar-width: none !important;
    touch-action: pan-x pan-y !important;
    align-items: center !important;
  }
  #subcatsButtonRow::-webkit-scrollbar {
    display: none !important;
  }
  #subcatsButtonRow .btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    border-radius: 14px !important;
    padding: 2px 10px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    line-height: 20px !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
    margin-right: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px var(--q-black-a20) !important;
  }

  /* Check Options Modal Mobile Layout */
  #checkOptionsModal .modal-dialog {
    margin: calc(10px + var(--q-safe-top)) auto calc(10px + var(--q-safe-bottom)) !important;
    max-width: calc(100% - 20px - 2 * max(var(--q-safe-left), var(--q-safe-right))) !important;
  }
  #checkOptionsModal .modal-body {
    padding: 12px !important;
  }
  #checkOptionsModal .btn {
    white-space: normal !important;
    word-break: normal !important;
  }
  #checkOptionsModal .col-6 .btn {
    padding: 10px 6px !important;
    font-size: 13px !important;
  }
  #checkOptionsModal .col-6 .btn i {
    font-size: 1.4rem !important;
    margin-bottom: 4px !important;
  }
  #checkOptionsModal #btnResetTableState {
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    padding: 10px 12px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }

  /* ========================================================
     SPECIFIC POS MODALS ON MOBILE
     ======================================================== */

  /* 1. Note Modal (Ürüne Not Ekle) Mobile Layout */
  #noteModal .modal-body {
    padding: 12px !important;
  }
  #noteModal .input-group {
    margin-bottom: 10px !important;
  }
  #noteModal #productCustomNoteInput {
    font-size: 0.9rem !important;
    height: var(--q-touch-min) !important;
  }
  #noteModal .input-group .btn {
    font-size: 0.9rem !important;
    padding: 6px 14px !important;
    min-height: var(--q-touch-min) !important;
  }
  #noteModal .row .btn,
  #noteModal .ready-note-btn {
    font-size: 11.5px !important;
    padding: 4px 2px !important;
    height: var(--q-touch-min) !important;
    min-height: var(--q-touch-min) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
  }
  #noteModal .modal-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    justify-content: stretch !important;
  }
  #noteModal .modal-footer .btn {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 75px !important;
    font-size: 12.5px !important;
    padding: 7px 4px !important;
    min-height: var(--q-touch-min) !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* 2. Specs / Variant Modal */
  #specsModal .modal-body {
    padding: 12px !important;
  }
  #specsModal .btn-specs {
    font-size: 13.5px !important;
    padding: 8px 10px !important;
    min-height: 46px !important;
    line-height: 1.25 !important;
  }
  #specsModal .btn-specs .spec-price {
    font-size: 13px !important;
  }

  /* 3. Product Price Editor Modal */
  #productPricer #productPricerInput {
    font-size: 1.6rem !important;
    height: 44px !important;
  }
  #productPricer .input-group-text i {
    font-size: 1.3rem !important;
  }
  #productPricer .numpad {
    height: 42px !important;
    font-size: 1.15rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 4. Cancel Product Modal */
  #cancelProductModal .modal-body {
    padding: 12px !important;
  }
  #cancelProductModal #cancelModalProductDesc {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  #cancelProductModal .btn-danger {
    padding: 10px 6px !important;
    font-size: 12.5px !important;
  }
  #cancelProductModal .btn-danger i {
    font-size: 1.3rem !important;
    margin-bottom: 3px !important;
  }

  /* 5. Close Check Modal */
  #closeCheckModal p {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }

  /* 6. Split Table Modal */
  #splitTableModal #targetTablesList .col-4 {
    padding: 4px !important;
  }
  #splitTableModal #targetTablesList .btn {
    padding: 8px 4px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }
  #splitTableModal #targetTablesList .btn small {
    font-size: 11px !important;
  }

  /* 7. Occupation / Kuver Modal */
  #occupationModal .modal-body .row {
    margin-bottom: 12px !important;
  }
  #occupationModal label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  #occupationModal .input-group-lg {
    flex-wrap: wrap !important;
  }
  #occupationModal .input-group > :first-child {
    margin-bottom: 6px !important;
  }
  #occupationModal .input-group-text i {
    font-size: 1.2rem !important;
  }
  #occupationModal #kuverMaleInput,
  #occupationModal #kuverFemaleInput {
    font-size: 16px !important;
    height: var(--q-touch-min) !important;
    max-width: 60px !important;
    margin-bottom: 6px !important;
  }
  #occupationModal .ig-flex {
    width: 100% !important;
    flex-wrap: wrap !important; /* 9 düğme x 44px tek satıra sığmaz */
    display: flex !important;
    gap: 3px !important;
    margin-left: 0 !important;
  }
  #occupationModal .kuver-btn {
    flex: 1 0 var(--q-touch-min) !important;
    max-width: 56px !important; /* son satırdaki 1-2 düğme tüm genişliğe yayılmasın */
    font-size: 13px !important;
    padding: 6px 0 !important;
    min-width: var(--q-touch-min) !important;
    height: var(--q-touch-min) !important;
    line-height: 22px !important;
  }

  /* 8. Discount Modal */
  #discountModal .row .btn {
    font-size: 13px !important;
    padding: 8px 2px !important;
    min-height: var(--q-touch-min) !important;
  }

  /* 9. Calculator Modal */
  #calculatorModal .row .btn {
    font-size: 12.5px !important;
    padding: 8px 2px !important;
    min-height: var(--q-touch-min) !important;
  }

  /* 10. Report Modals */
  #reportDetailModal table,
  #reportStoreCheckDetailModal table,
  #reportStoreCancelDetailModal table,
  #reportStoreEditCheckModal table,
  #reportStorePaymentDetailModal table {
    font-size: 0.82rem !important;
  }

  /* Form Elements */
  .input-group > .input-group-text:first-child:not(.normal) {
    width: auto !important;
    min-width: 80px !important;
    font-size: 0.85rem !important;
    padding: 0.375rem 0.5rem !important;
  }

  /* `normal` sarmalayıcıdan çocuğa taşındı (bs5-input-group-ac.mjs) */
  .input-group > .input-group-text.normal {
    width: auto !important;
    min-width: unset !important;
    font-size: 0.9rem !important;
    padding: 0.375rem 0.65rem !important;
  }
}



/* ============================================================================
 * DOKUNMA HEDEFLERİ — MOBİL
 * ----------------------------------------------------------------------------
 * Denetim (2026-09-29, Playwright · iPhone 12 390px ve 360px): navbar, satış
 * aksiyon butonları, ödeme butonları, rapor/ayar kartları ve yönetim filtre
 * alanları 38–42px yükseklikteydi. Parma hedefi 44px (--q-touch-min).
 * Ölçümdeki her düşük hedef buraya karşılık gelir; ölçüm tekrar edildiğinde
 * liste boşalmalıdır.
 * ========================================================================== */
@media (max-width: 991.98px) {
  /* Navbar: logo ve hamburger her ekranda var. */
  #navBar .navbar-brand,
  #navBar .navbar-toggler {
    min-height: var(--q-touch-min);
    min-width: var(--q-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Satış ekranı başlık aksiyonları (Masa Değiştir / Hesap İşlemleri / QR).
     Ölçümde bilinçli olarak 38px !important ile sabitlenmişti; parmak hedefi
     44px altında kaldığı için burada yükseltilir. */
  .selling-header-actions .btn {
    min-height: var(--q-touch-min) !important;
    min-width: var(--q-touch-min) !important;
  }

  /* Ödeme ekranı: peek barındaki "Ödeme Al", hızlı nakit çipleri
     (Tam / 50 ₺ / …) ve bottom sheet'i kapatan "Kapat". */
  #paymentBottomSheetPeekBar .btn,
  #payMethodsCol .btn,
  #payNumpadCol .btn-sm,
  .quick-cash-chips-row .btn,
  .pay-btn-close {
    min-height: var(--q-touch-min) !important;
  }

  /* Rapor ve ayar kartları — ikisi de #settings-holder içinde, yatay
     kaydırmalı karusel olarak dizilir; kartlar birincil gezinme öğesidir. */
  #settings-holder .card.mb-2,
  #reports-holder .card.mb-2 {
    min-height: var(--q-touch-min);
  }

  /* Form alanları: arama, filtre, sayı girişi (mağaza dahil) */
  #view-store input,
  #view-payment input,
  #view-selling input.form-control,
  #view-reports input,
  #view-settings input,
  #view-admin input,
  #view-admin select {
    min-height: var(--q-touch-min);
  }

  /* Yönetim konsolundaki dar ikon butonları */
  #view-admin .btn-xs,
  #view-admin .btn-outline-light {
    min-width: var(--q-touch-min);
    min-height: var(--q-touch-min);
  }

  /* Yönetim filtresi satırı: 6 öğe tek satırda (Anahtar etiketi, girdi,
   * Değer etiketi, girdi, Sorgula, temizle). BS5 `.input-group >
   * .form-control { flex:1 1 auto; width:1%; min-width:0 }` kuralı
   * 360px'te iki girdiyi 36.5px'e sıkıştırıyor — 44px dokunma hedefinin
   * ALTINDA (yükseklik 44px idi, GENİŞLİK 36.53px).
   * ÖLÇÜM (360x740, admin): düzeltme öncesi 2 eleman 36.53 x 44 →
   * düzeltme sonrası 0 eleman <44px. Kural yalnız bu gruba bağlı
   * (`:has()` ile markup değişmeden hedefleniyor); genel `.input-group`
   * 139 yerde kullanıldığı için genel sarmama yapılmadı. */
  #view-admin .input-group:has(#adminFilterKeyInput) {
    flex-wrap: wrap;
  }
  #adminFilterKeyInput,
  #adminFilterValInput {
    min-width: var(--q-touch-min);
  }

  /* Modallar: footer butonları, kapat, form alanları, ızgara onay kutuları.
     Yukarıdaki 38px/42px !important kuralları (modal footer, #noteModal, input) tek tek
     değiştirilmedi; bu blok sonda yüklenip !important ile hepsini 44px tabana çeker. */
  .modal .btn,
  #noteModal .modal-footer .btn {
    min-height: var(--q-touch-min) !important;
  }
  .modal .btn-close {
    width: var(--q-touch-min);
    height: var(--q-touch-min);
    padding: 0;
    background-size: 1em;
  }
  .form-control:not(.form-control-plaintext),
  .form-select {
    min-height: var(--q-touch-min) !important;
  }
  /* 24px'lik genel kutu kuralı (.modal .form-check-input) !important; mobilde matris hücresinde 44px */
  .modal td > .form-check-input {
    width: var(--q-touch-min) !important;
    height: var(--q-touch-min) !important;
  }
  .kuver-btn {
    min-width: var(--q-touch-min) !important;
  }

  /* Dokunulabilir tablo satırı (rapor listesi) */
  .table tbody tr[onclick] > td {
    height: var(--q-touch-min);
  }

  /* Satış: adisyon kalemi, kategoriye dön, alt kategori hapları */
  #sellingBottomSheet #check-products .check-product,
  .check-product {
    min-height: var(--q-touch-min) !important;
  }
  #btnBackToCategories,
  #subcatsButtonRow .btn {
    min-height: var(--q-touch-min) !important;
    min-width: var(--q-touch-min) !important;
  }

  /* Mobil navbar "Çıkış" */
  .navbar-toolbar > span.text-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--q-touch-min);
    min-width: var(--q-touch-min);
  }
}

/* ============================================================================
 * KROKİ — kat başlığı
 * ----------------------------------------------------------------------------
 * "Tüm Masalar" seçilince katlar kendi koordinat düzlemlerinde tanımlıdır;
 * hepsi tek tuvale yığılırsa 64 masa 103 çakışmayla üst üste biner.
 * renderKrokiMap() bu nedenle katları alt alta, adıyla yığar (store.js).
 * ========================================================================== */
.kroki-kat-basligi {
  position: absolute;
  left: 0;
  right: 0;
  z-index: var(--q-z-sticky);
  margin: 0;
  padding: 6px 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--q-light-gray);
  background: var(--q-bg-dark-85);
  border-left: 4px solid var(--q-primary);
  border-radius: 0 var(--q-radius-modern-sm, 6px) var(--q-radius-modern-sm, 6px) 0;
}

.kroki-kat-basligi small {
  font-weight: 400;
  color: var(--q-text-muted);
}

/* Ana menü kartı başlığı: 320px'te iki sütunlu kart içeriği (~106px) 1.1rem'lik "Raporlar"ı
   sığdırmıyor; BS5 .card word-wrap:break-word kelimeyi ortadan bölüyordu. */
@media (max-width: 339.98px) {
  .mainCard p {
    font-size: 0.95rem !important;
    overflow-wrap: normal;
  }
}

/* Kurulum sihirbazı: dar ekranda etiket + girdi yan yana sığmıyor (320px'te "Anahtar (Key)"
   değeri kesiliyordu) → etiket üstte, girdi altta tam genişlik. */
@media (max-width: 575.98px) {
  #view-setup .input-group {
    flex-wrap: wrap;
  }
  #view-setup .input-group > .input-group-text {
    flex: 1 0 100%;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  }
  #view-setup .input-group > .form-control {
    flex: 1 0 100%;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
    margin-left: 0 !important;
  }
}

/* ============================================================================
 * AYARLAR EKRANI — ortak düzeltmeler
 * ========================================================================== */

/* Seçili satır `list-group-item-warning` (amber zemin): `btn-outline-warning`
 * metni zeminle aynı renkti (kontrast 1:1, "Düzenle" görünmüyordu). Koyu
 * metin/kenar zemin üstünde okunur kalır; üzerine gelince dolgu tersine döner. */
.list-group-item-warning .btn-outline-warning {
  --bs-btn-color: var(--q-bg-dark);
  --bs-btn-border-color: var(--q-bg-dark);
  --bs-btn-hover-color: var(--q-warning);
  --bs-btn-hover-bg: var(--q-bg-dark);
  --bs-btn-hover-border-color: var(--q-bg-dark);
  --bs-btn-active-color: var(--q-warning);
  --bs-btn-active-bg: var(--q-bg-dark);
  --bs-btn-active-border-color: var(--q-bg-dark);
}

/* Sekme altı başlık satırı: yalnız başlıklı (butonsuz) sekmeler 49px, butonlu
 * olanlar 55px idi; hepsi aynı tabana oturur. */
#view-settings .card.ntb > .card-header {
  min-height: 55px;
}

/* Tablo işlem butonları tek satır: dar "İşlem" sütununda ikon üstte metin altta
 * yığılıp satırı 79–103px yapıyordu; sütun artık butona göre genişler. */
#view-settings td .btn {
  white-space: nowrap;
}

/* Düşük yükseklikli masaüstü (≈720px): 9 kenar menüsü kartı ve yüksek modallar
 * ekrana sığmıyordu. Kart yüksekliği küçülür; modal gövdesi iç kaydırır, başlık
 * ve altbilgi görünür kalır. ≥800px yükseklikte değişiklik yok. */
@media (min-width: 992px) and (max-height: 799.98px) {
  #view-settings .settings-sidebar .card,
  #view-reports .settings-sidebar .card {
    height: 60px;
  }
  .modal-content {
    max-height: calc(100vh - 2 * var(--bs-modal-margin));
  }
  .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 991.98px) {
  /* Liste/detay panelleri: `col-lg-3 pe-0` + `col-lg-9 ps-0` düzeni yalnız
   * yan yana (≥992px) anlamlı. Yığılınca iki kutu 12px kayık ve gövdeden
   * taşıyordu; gutter sıfırlanınca ikisi de gövde kenarlarına oturur. */
  #settingsMainHolder .row:has(> [class*="col-lg-3"].pe-0) {
    --bs-gutter-x: 0;
  }

  /* Başlık + "…Ekle" butonu tek kalıp: başlık ile buton arasında boşluk,
   * buton başlık metniyle aynı kenarlardan hizalı (pe-2/ps-0 yalnız masaüstü). */
  #view-settings .card-header > .row > [class*="col-lg-8"]:has(+ [class*="col-lg-4"]) {
    margin-bottom: 0.5rem;
  }
  #view-settings .card-header > .row > [class*="col-lg-4"] {
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important; /* .ps-0'ı yener */
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important; /* .pe-2'yi yener */
  }

  /* Tablo içi onay kutusu ve `.btn-xs`: 44px dokunma tabanı (modal için aynı
   * kural yukarıda). 24px'lik genel kutu kuralı !important. */
  #view-settings td > .form-check-input {
    width: var(--q-touch-min) !important;
    height: var(--q-touch-min) !important;
  }
  #view-settings .btn-xs {
    min-width: var(--q-touch-min);
    min-height: var(--q-touch-min);
  }

  /* Kenar menüsü karuseli: sağda devamı olduğunu bildiren solma
   * (`has-overflow-right`, app.js; nav-tabs ile aynı mekanizma). */
  .settings-sidebar.has-overflow-right::after {
    content: "";
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    align-self: stretch;
    width: 40px;
    margin: 0 -1px 0 -8px; /* gap'i geri alır */
    background: linear-gradient(to left, var(--q-oil) 20%, transparent);
    pointer-events: none;
  }
}

@media (max-width: 575.98px) {
  /* Onay matrisi (grup izinleri, bölge özellikleri): 5 sütun × 44px kutu +
   * 8px hücre dolgusu 320–360px'te sığmıyordu; dolgu daralır, son sütun görünür. */
  .modal-body .table.text-center th,
  .modal-body .table.text-center td,
  #view-settings .table.text-center th,
  #view-settings .table.text-center td {
    padding: 6px 2px !important; /* .modal-body table th/td !important'ını yener */
    font-size: 0.75rem !important;
  }
}

@media (max-width: 359.98px) {
  /* 320px: "Rezervasyon" başlığı 12px'te sütunu 5px aşıyordu */
  .modal-body .table.text-center th,
  #view-settings .table.text-center th {
    font-size: 0.6875rem !important; /* yukarıdaki 0.75rem !important'ını yener */
  }
}

/* ==================== "Ana ekrana ekle" bandı (js/pwa-install.js) ====================
   Yalnız giriş + kurulum sihirbazında (body.view-is-login) görünür; JS yalnız uygun
   bağlamda (dokunmatik/mobil veya ?install= zorlaması) `hidden`'ı kaldırır.
   Giriş: sabit alt bant, ekranın alt dolgusu bandı da kapsar. Kurulum: belgenin en üstünde
   (kayınca gider, form alanlarını/klavyeyi hiç örtmez). --q-install-h = bandın ölçülen yüksekliği. */
.install-band {
  position: fixed;
  left: calc(var(--q-install-gap) + var(--q-safe-left));
  right: calc(var(--q-install-gap) + var(--q-safe-right));
  bottom: calc(var(--q-install-gap) + var(--q-safe-bottom));
  z-index: var(--q-z-fixed);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 6px 12px;
  background: var(--q-surface-deep);
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-modern);
  color: var(--q-light-gray);
  font-size: 0.8125rem;
  box-shadow: 0 2px 12px var(--q-border-strong);
}
.install-band[hidden],
body:not(.view-is-login) .install-band {
  display: none;
}
body.view-is-setup .install-band {
  position: absolute;
  top: calc(var(--q-install-gap) + var(--q-safe-top));
  bottom: auto;
}
.install-band__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.3;
}
.install-band__step {
  white-space: nowrap;
  font-weight: 600;
}
.install-band__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.install-band__btn {
  min-height: var(--q-touch-min);
  min-width: var(--q-touch-min);
  padding: 0 10px;
  font-size: 0.875rem;
}
/* Giriş: belge kayabilir (kurulumdaki gibi) — kısa/yatay ekranda tuşlar ve bağlantı bandın
   altından kaydırılarak erişilir; sığıyorsa görünüm değişmez (min-height 100vh, ortalı). */
body.view-is-login.has-install-band,
body.view-is-login.has-install-band #appHolder,
body.view-is-login.has-install-band #mainHolder,
body.view-is-login.has-install-band #routerHolder {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important; /* giriş kilidinin !important'ını yener */
}
body.view-is-login.has-install-band #view-login.active {
  height: auto !important;
  padding-bottom: calc(12px + var(--q-install-h) + var(--q-install-gap) + var(--q-safe-bottom)) !important;
}
body.view-is-login.view-is-setup.has-install-band #view-setup {
  padding-top: calc(var(--q-safe-top) + var(--q-install-h) + 2 * var(--q-install-gap));
}
@media (max-height: 500px) {
  /* Yatay/kısa ekran: alt bant tuşları örter ve alt dolgu yetmez. Bant kurulumdaki gibi
     belgenin en üstüne alınır (kayınca gider), içerik altına itilir — hiçbir kaydırma
     konumunda örtme olmaz. */
  body.view-is-login:not(.view-is-setup) .install-band {
    position: absolute;
    top: calc(var(--q-install-gap) + var(--q-safe-top));
    bottom: auto;
  }
  body.view-is-login.has-install-band #view-login.active {
    padding-top: calc(12px + var(--q-safe-top) + var(--q-install-h) + 2 * var(--q-install-gap)) !important;
    padding-bottom: calc(12px + var(--q-safe-bottom)) !important;
  }
}
@media (max-width: 767.98px) and (max-height: 700px) {
  /* Kısa telefon: bant yerini açmak için tuşlar ve logo küçülür (48px ≥ --q-touch-min) */
  body.view-is-login.has-install-band .login-button {
    height: 48px !important;
  }
  body.view-is-login.has-install-band .login-brand {
    margin-bottom: 8px !important;
  }
  body.view-is-login.has-install-band .login-brand img {
    height: 32px !important;
  }
  body.view-is-login.has-install-band #login-holder > .mt-4 {
    margin-top: 8px !important; /* BS5 .mt-4 !important */
  }
}
@media (max-width: 359.98px) {
  .install-band__text {
    font-size: 0.75rem;
  }
}