/* Genel Arka Plan ve Metin Rengi */
         body {
			background-color: #212529; /* Bootstrap'in bg-dark rengine yakın */
			color: #f8f9fa; /* Açık renk metin */
			/* Metin seçimini ve çift dokunma davranışını engeller */
			touch-action: manipulation; 
		}
		/* KRİTİK: ANA SAYFA KAYDIRMASINI ENGELLE */
		html, body {
			height: 100%;
			overflow: hidden; 
		}
        /* Sol Menü Stili */
        .sidebar {
            background-color: #343a40; /* Daha koyu bir menü arka planı */
            padding: 0;
            height: 100vh; /* Tam ekran yüksekliği */
            border-right: 1px solid #495057;
        }
        /* Modal'ın içindeki sabit içeriğin açılmadan önce kesinlikle görünmemesini sağla */
		/* Özellikle Adisyon Modal'ın içindeki başlık/header içeriğini hedefleyelim */
		#adisyonModal .modal-content {
			visibility: hidden; /* Görünürlüğü kaldır */
		}

		/* Modal açıldığında (Bootstrap JS tarafından yönetilir) tekrar görünür yap */
		#adisyonModal.show .modal-content {
			visibility: visible;
		}
        /* Revize Edilen Sol Menü Butonları (Eşit Boyutlu ve Ortalanmış) */
        .sidebar .menu-button, .sidebar .action-button {
            width: 100%;
            padding: 15px 10px; /* Daha kalın bir görünüm için padding artırıldı */
            margin-bottom: 2px;
            border-radius: 0;
            color: #f8f9fa;
            border: none;
            background-color: #495057; /* Gri/Koyu Gri arka plan */
            text-align: center; /* Metin ortalandı */
            font-weight: bold;
            font-size: 14px;
        }
        .sidebar .menu-button:hover, .sidebar .action-button:hover {
            background-color: #5a6268; /* Hover rengi */
        }

        /* Mavi Buton Stili (Adisyon Yazdır) */
        .sidebar .btn-primary {
            background-color: #007bff; /* Mavi */
            border-color: #007bff;
            padding: 20px 10px; /* Daha büyük yapıldı */
            font-size: 16px;
        }

        /* Masa Butonları (Mevcut Masa Düzeni) */
        .table-btn {
            height: 80px; 
            width: 100%;
            margin: 5px 0;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid #495057;
            border-radius: 4px;
        }
        .table-btn.table-free {
            background-color: #e9ecef; color: #212529;
        }
        .table-btn.table-occupied {
            background-color: #dc3545; color: #f8f9fa;
        }
		/* Yeni Açılan Masa (table-hot-start) Stili */
		/* Masa dolu (occupied) durumundan daha dikkat çekici olmalı */
		.table-btn.table-hot-start {
			background-color: #28a745 !important; /* Bootstrap'in Success rengi */
			color: white;
			border: 3px solid #1e7e34; /* Kalın yeşil kenarlık (isteğe bağlı) */
		}
        .table-btn.table-closed {
            background-color: #343a40; color: #f8f9fa;
        }
		/* Yeni Kilitli Masa (table-locked) Stili */
		.table-btn.table-locked {
			background-color: #343a40; /* Koyu Gri (Sizin genel koyu temanız) */
			color: #f8f9fa; /* Açık renk metin */
			border: 2px solid #ffc107; /* Sarı/Turuncu kenarlık (Opsiyonel, daha belirgin olması için) */
		}
		/* Yeni Rezervasyonlu Masa (table-reserved) Stili */
		.table-btn.table-reserved {
			background-color: #6f42c1; /* Mor (Bootstrap secondary rengine yakın) */
			color: #f8f9fa;
		}

		/* Yeni Özel Masa (table-special) Stili */
		.table-btn.table-special {
			background-color: #fd7e14; /* Turuncu */
			color: #f8f9fa;
		}
        /* ... Diğer stiller önceki koddan korundu ... */
        .top-header {
            background-color: #343a40;
            border-bottom: 2px solid #007bff;
            padding: 5px 15px;
        }
        .area-btn {
            background-color: #007bff;
            color: #fff;
            font-weight: bold;
            height: 40px;
            margin: 0 5px;
            border: none;
            border-radius: 4px;
            padding: 5px 15px;
        }
        /* ÖZEL: Masa Izgarası için 20 Butonluk Düzen */
        .col-xl-20 {
            @media (min-width: 1366px) {
            width: 5%;
            flex: 0 0 auto;
            padding: 0 2px;
            }
        }

        /* Context Menü başlangıçta gizlenir ve sabit pozisyonda (sağ tıklanan yerde) gösterilmeye hazırlanır. */
        #table-context-menu {
            position: fixed; /* Ekranda kaybolmamasını sağlar */
            display: none; /* Başlangıçta gizli */
            z-index: 1050; /* Diğer her şeyin üstünde görünür */
            top: 0;
            left: 0;
        }

        /* Dropdown menünün standart Bootstrap görünümünü kullan */
        #table-context-menu .dropdown-menu {
            /* display: block !important; KALDIRILDI */
            margin: 0;
            border-radius: 0; /* Görseldeki gibi kare kenarlar */
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
        }

        /* Opsiyonel: Daha beyaz bir arka plan için (Görseldeki gibi) */
        #table-context-menu .dropdown-item {
            padding: 8px 16px;
            font-size: 14px;
            color: #212529; /* Koyu metin rengi */
        }
        /* Alt Menü (Submenu) Stili */
        .sub-menu {
            /* Başlangıçta alt menüyü GİZLE */
            display: none; /* !important kaldırıldı, normal hover ile çalışmalı */
            
            /* Alt menünün sağa doğru açılmasını sağla */
            position: absolute;
            top: 0;
            left: 100%; /* Ana menü öğesinin hemen sağına konumlandır */
            margin-top: -1px; 
            margin-left: -1px; 
            border-radius: 0;
            background-color: #fff;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
        }

        /* Submenu'nin (Görünüm) üzerine gelindiğinde AÇILMASINI sağla */
        .submenu-item:hover > .sub-menu {
            display: block; /* !important kaldırıldı, normal hover ile çalışmalı */
        }

        /* Ok (toggle) simgesini görseldeki gibi sağa hizalamak ve koyu renk yapmak */
        .dropdown-item.dropdown-toggle::after {
            /* Varsayılan Bootstrap okunu kaldır */
            content: "▶" !important;
            border: none !important;
            vertical-align: middle;
            margin-left: 0.5em;
            font-size: 0.75em;
            color: #333;
        }
        /* TAŞMAYI ENGELLEYEN KRİTİK CSS KURALLARI */

        /* Modal dialog'un içindeki boşluğu sıfırla */
        .modal-dialog {
            padding: 0 !important;
            margin: 0 !important;
        }

        /* Tüm flex öğelerinin dikey taşmasını engellemek için */
        .d-flex.flex-column, .row.h-100 {
            min-height: 0 !important; 
        }
        
        /* modal-body'nin de taşmamasını sağla */
        .modal-body {
            min-height: 0 !important;
        }

        /* DARK MODE PLACEHOLDER DÜZELTMESİ */
        /* Tarayıcılar arası uyumluluk için birden fazla kural gereklidir */
        .form-control.bg-dark::placeholder {
            color: #a0a0a0 !important; /* Açık gri tonu */
            opacity: 1; /* Bazı tarayıcıların varsayılan opaklık ayarını sıfırlar */
        }

        /* Firefox için ayrı bir kural */
        .form-control.bg-dark::-moz-placeholder {
            color: #a0a0a0 !important;
            opacity: 1;
        }

        /* Edge için ayrı bir kural (varsa) */
        .form-control.bg-dark:-ms-input-placeholder { 
            color: #a0a0a0 !important;
        }

        /* Porsiyon Butonları Dark Mode Düzeltmesi */
        .btn-secondary {
            background-color: #495057 !important; /* Seçili olmayan koyu gri */
            border-color: #495057 !important;
            color: #f8f9fa !important;
        }

        /* Seçili Olduğunda: btn-secondary'yi maviye (Primary) çevir */
        /* Bu kural, sadece seçili olanın mavi olmasını sağlar. */
        .btn-check:checked + .btn-secondary {
            background-color: #0d6efd !important; /* Bootstrap'in btn-primary rengi */
            border-color: #0d6efd !important;
            color: white !important;
        }

        /* Porsiyon başlangıçta seçili ve Primary olmalı, bu yüzden onu da override edelim */
        .btn-primary {
            background-color: #0d6efd !important;
            border-color: #0d6efd !important;
        }

        /* NUMBER INPUT SPINNER OKLARINI KALDIRMA */
        /* Webkit (Chrome, Safari, Edge) */
        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield; /* Okları gizler */
        }
        /* Seçili Adisyon Satırı Stili */
        .adisyon-satiri.secili {
            background-color: #007bff !important; /* Mavi arka plan */
            font-weight: bold;
        }

        /* İkinci modal için ortalamayı zorla (GÜNCELLENDİ: ID yerine yeni sınıf kullanıldı) */
        .pos-sub-modal {
            /* Normalde bu stillere modal-dialog-centered zaten sahiptir, 
            ancak iç içe modal sorununu çözmek için zorlamalı olarak eklenir. */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) !important; 
            margin: 0 !important;
        }

        /* Yandaki Modal Hata Çözümü için Genelleştirme */
        .modal.show .modal-dialog.pos-sub-modal {
            transform: translate(-50%, -50%) !important;
        }

        /* Sadece İKİNCİ MODAL VE ONUN BACKDROP'U İÇİN GÜÇLENDİRME */
        #fiyatModal {
            z-index: 1070 !important; /* Normal z-index'ten daha yüksek */
        }

        /* Kategori Kaydırma Alanı için ID'yi hedefle */
        #kategori-scroll-alan {
            /* Scrollbar'ı gösterme, ancak kaydırma işlevini koru (Genel olarak) */
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* Webkit (Chrome, Safari) için scrollbar'ı tamamen gizle */
        #kategori-scroll-alan::-webkit-scrollbar {
            display: none;
            width: 0; 
            height: 0;
        }
		
		/* SADECE MOBİL/TABLET YATAY GÖRÜNÜMÜ İÇİN DÜZELTMELER */
		/* (Max-width 767px, yani sm-md arası cihazları hedefler) */
		@media (max-width: 767px) {

			/* Alt Orta Alan: Toggle Butonları ve NumPad Kapsayıcısı */
			/* NumPad ve Porsiyonlar (200px yerine 150px) */
			#adisyonModal .modal-body .row.g-0.flex-shrink-0 {
				height: 150px !important;
			}
			/* Orta Sütun: Ürün Arama ve Ürün Listesi Kapsayıcısını hedefle */
			#adisyonModal .modal-body .col-6 > .d-flex.flex-column.flex-grow-1 {
				/* Ürün Listesi Alanını Dikeyde Büyümeye Zorla */
				flex-grow: 1 !important;
				min-height: 0 !important; 
			}
		}

		/* TABLET YATAY (Örn: 991px ve altı) veya çok dar ekranlar için ek ayar */
		@media (max-width: 991px) {

			/* İşlem Butonu Yüksekliklerini Azaltma (Sağ Alt Köşe) */
			/* 80px yerine 60px yapalım */
			#adisyonModal .modal-content .col-4 .row.g-0.flex-shrink-0 > .col-3 {
				height: 60px !important;
			}

			/* İşlem Butonu içindeki yazıların küçük kalması için */
			#adisyonModal .modal-content .col-4 .row.g-0.flex-shrink-0 button small {
				font-size: 0.65rem !important;
			}

			/* Sağ Üst Bilgi (Açılış Saati) Alanını Sıkıştırma */
			#adisyonModal .modal-body .col-4 .bg-dark.border-bottom.border-secondary {
				height: 35px !important;
			}
		}
		/* İŞLEMLER LİSTESİ SEÇİLEBİLİR SATIR STİLİ */
		.islemler-satiri {
			cursor: pointer;
			color: #f8f9fa; /* Metin rengi */
			background-color: #2c3034; /* Varsayılan koyu arka plan */
			transition: background-color 0.1s ease;
		}

		/* Mouse Üzerine Geldiğinde (Hover) */
		.islemler-satiri:hover {
			background-color: #495057; /* Hafif koyulaştırma */
		}

		/* Seçili Olduğunda (Tıklandığında) */
		.islemler-satiri.secili-islem {
			background-color: #007bff !important; /* Mavi arka plan */
			font-weight: bold;
		}
	
		/* MASA GRİDİ SCROLL DÜZELTMESİ - KRİTİK ZORLAMA */
		#masa-gridi-kapsayici {
			overflow-y: auto !important; /* CRITICAL: Kaydırma çubuğunu DAİMA göster */
			flex-grow: 1; 
			min-height: 0; 
		}

		/* Ana İçerik Kapsayıcılarının Dikey Büyümeye İzin Vermesi Gerekir */
		/* Flexbox Hiyerarşisi İçin Gerekli Olanlar */
		.main-content {
			display: flex;
			flex-direction: column;
			min-height: 0;
			flex-grow: 1;
		}
		.tab-content {
			flex-grow: 1;
			display: flex;
			flex-direction: column; 
			min-height: 0;
		}
		.tab-pane.show.active {
			display: flex;
			flex-direction: column;
			min-height: 0;
			flex-grow: 1; /* Masalar sekmesinin tüm alanı kaplamasını sağla */
		}