/* ============================================================
   🔹 SINTAN CHEMICALS - Corporate Theme
   ============================================================ */
:root {
    --sintan-blue: #47AAC6;
    --sintan-blue-dark: #004b95;
    --sintan-blue-light: #A9D7E4;
    --sintan-orange: #DF5A41;
    --sintan-green: #57B37F;
    --sintan-green-light: #8BCBA3;
    --sintan-red: #E4002B;
    --text-dark: #1B1B1B;
    --text-light: #FFFFFF;
    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --border-gray: #E6E6E6;
    --shadow: rgba(0, 0, 0, 0.05);
    --sintan-yellow: #FFB81C;
    --sintan-purple: #2E3192;
    --sintan-darkgray: #2D2926;
    --sintan-gray: #6D8CA1;
    --sintan-orange-strong: #FF8200;
    --sintan-green-dark: #006537;
    --sintan-brown: #977C47;
}

/* ============================================================
   🌐 GENERAL
   ============================================================ */
body {
    font-family: 'Work Sans', Arial, sans-serif;
    /*font-family: 'Inter', sans-serif;*/
    background: var(--bg-light);
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    overscroll-behavior-y: contain;
}

h1, h2, h3 {
    color: var(--text-dark);
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 600;
}

/* ============================================================
   🧭 NAVBAR
   ============================================================ */
.navbar {
    background: var(--sintan-blue);
    min-height: 52px;
    padding: 6px 10px;
    box-shadow: 0 2px 4px var(--shadow);
}

.navbar-brand {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--text-light) !important;
    text-decoration: none;
}

    .navbar-brand img {
        height: 38px;
        margin-right: 8px;
    }

.navbar-nav .nav-link {
    color: var(--text-light) !important;
    font-size: 0.9rem;
    padding: 6px 10px;
    transition: all .2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 8px;
}

.navbar-nav .nav-sipa {
    background-color: var(--sintan-blue-dark);
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 600;
}

.navbar-nav .nav-neworder {
    background-color: var(--sintan-orange);
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 600;
}

.navbar-nav .nav-admin {
    background-color: var(--sintan-green);
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 600;
}

.navbar-nav .nav-sipa:hover {
    background-color: var(--sintan-blue-light);
    color: #fff !important;
}

.navbar-nav .nav-neworder:hover {
    background-color: #d66b18;
    color: #fff !important;
}

.navbar-nav .nav-admin:hover {
    background-color: var(--sintan-green-light);
    color: #fff !important;
}

#nav-neworder2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sintan-orange) !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: lowercase;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

/* ============================================================
   ⚙️ BUTTONS
   ============================================================ */
.btn-primary {
    background: var(--sintan-blue);
    color: var(--text-light);
    border: none;
    padding: 12px 0;
    font-weight: 600;
    font-size: 15px;
    border-radius: 6px;
}

#btnAddCustomer {
    color: var(--sintan-blue-dark);
    text-decoration: none;
}

    #btnAddCustomer:hover {
        color: var(--sintan-blue);
        text-decoration: underline;
        cursor: pointer;
    }

.btn-primary:hover {
    background: var(--sintan-blue-dark);
}

.btn-success {
    background: var(--sintan-green);
    color: #fff;
}

.btn-danger {
    background: var(--sintan-red);
    color: #fff;
}

/* ============================================================
   🧾 FORM ELEMENTS
   ============================================================ */
input[type=text],
input[type=password],
input[type=number],
select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

    button:focus, input:focus, select:focus {
        outline: 2px dashed var(--sintan-blue);
        outline-offset: 2px;
    }

/* ============================================================
   📋 TABLES
   ============================================================ */
.table-wrapper {
    background: var(--bg-white);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 1px 4px var(--shadow);
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .data-table th, .data-table td {
        padding: 12px 10px;
        border-bottom: 1px solid var(--border-gray);
        vertical-align: middle;
    }

    .data-table th {
        background: #f9f9f9;
        font-weight: 600;
    }

/* ============================================================
   💬 STATUS LABELS
   ============================================================ */
.status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
}

    .status.info {
        background: var(--sintan-blue);
    }

    .status.success {
        background: var(--sintan-green);
    }

    .status.warning {
        background: #F39C12;
    }

    .status.danger {
        background: var(--sintan-red);
    }

/* ============================================================
   🔐 LOGIN PAGE
   ============================================================ */

body.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.login-container {
    width: 100%;
    max-width: 400px;
    text-align: center;
    background: #ffffff;
    padding: 40px 25px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

    .login-container img {
        width: 210px;
        height: auto;
        margin-bottom: 25px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .login-container h3 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #333;
    }
    .login-container input[type="email"],
    .login-container input[type="password"] {
        width: 100%;
        height: 46px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 15px;
        padding: 10px;
        margin-bottom: 12px;
        box-sizing: border-box;
    }

    .login-container button:hover {
        background-color: #0072d1;
        transform: scale(1.02);
    }

/* === 🔹 Mobile === */
@media (max-width: 768px) {
    .login-container {
        width: 92%;
        padding: 25px 20px;
        margin-top: 0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

        .login-container img {
            width: 140px;
            margin-bottom: 20px;
        }

        .login-container button {
            height: 54px;
            font-size: 1.05rem;
            border-radius: 8px;
        }
}

/* ============================================================
   📦 CREATE PAGE — ITEM ROW
   ============================================================ */
.item-row {
    background: #fff;
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    padding: 10px 12px;
    margin-bottom: 12px;
    position: relative;
}

.item-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f2f8ff;
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 8px;
}

    .item-row-header .badge {
        background-color: var(--sintan-blue);
        font-size: 0.85rem;
        padding: 0.35rem 0.7rem;
    }

.item-row .remove-item {
    position: absolute;
    top: .35rem;
    right: .35rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--sintan-red);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 3px rgba(0,0,0,0.15);
    transition: all 0.2s ease-in-out;
}

    .item-row .remove-item:hover {
        background: var(--sintan-red);
        color: #fff;
        transform: scale(1.1);
    }
#tdsContent p {
    line-height: 1.6;
    margin-bottom: 12px;
}

#tdsContent h5 {
    margin-top: 20px;
    font-weight: 600;
}

/* ============================================================
   🚫 ACCESS DENIED PAGE
   ============================================================ */
.access-denied {
    background: var(--bg-white);
    border-radius: 10px;
    padding: 40px 30px;
    max-width: 420px;
    margin: 100px auto;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,.08);
}

    .access-denied h2 {
        color: var(--sintan-blue);
        font-weight: 600;
    }

    .access-denied .btn {
        background: var(--sintan-blue);
        color: #fff;
        padding: 10px 22px;
        border-radius: 6px;
        border: none;
    }

/* ============================================================
   📱 MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {

    .navbar {
        min-height: 48px !important;
        padding: 4px 10px !important;
    }

    .navbar-brand img {
        height: 34px;
    }

    .login-container {
        width: 95%;
        padding: 10px;
        margin-top: -40px;
    }

    .footer {
        font-size: .8rem;
    }

    .item-row {
        padding: 8px;
        margin-bottom: 10px;
    }

        .item-row .remove-item {
            width: 26px;
            height: 26px;
        }

    .access-denied {
        width: 92%;
        padding: 25px 15px;
        margin: 60px auto;
        box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }
}
/* ============================================================
   ⚠️ WARNINGS – BORDERS
   ============================================================ */
.border-danger {
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.5);
}

/* === 🔹 Mobile refresh prevent === */
body {
    overscroll-behavior-y: contain; /* Android Chrome */
}

html, body {
    touch-action: pan-x pan-y;
    overscroll-behavior: none; /* iOS Safari */
}

/*-----------------------------------------*/
.currency-label {
    display: inline-block;
    text-align: center;
    width: 40px;
    color: #222;
}

.total-amount[readonly] {
    background-color: #f8f9fa;
    font-weight: 600;
}

.input-group-text {
    height: 100%;
    align-items: center;
    font-size: 0.95rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* ----- Order Summary Card ----- */
.summary-item {
    background: #fff;
    border-left: 4px solid #47AAC6;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.summary-product-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 300px;
    font-size: 0.95rem;
}

@media (max-width: 576px) {
    .summary-product-name {
        max-width: 180px;
    }
}

.summary-details {
    color: #444;
    font-size: 0.88rem;
    margin-top: 6px;
}

    .summary-details span {
        margin-right: 6px;
    }

.order-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
    padding: 8px 0;
}

    .order-compact-grid .grid-item {
        display: flex;
        justify-content: space-between;
        font-size: 0.88rem;
    }

    .order-compact-grid label {
        font-weight: 600;
        color: #444;
    }

    .order-compact-grid span {
        font-weight: 500;
    }

.order-item-header {
    font-weight: 600;
    color: #1a73e8;
}

.order-status {
    font-size: .78rem;
    padding: 4px 8px;
    font-weight: 600;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.card.shadow-sm {
    margin-bottom: 1rem;
}

/* STATUS COLORS */
.status-yeni {
    background-color: #1976d2;
}

.status-onaybekleniyor {
    background-color: #FFC107;
    color: black;
}

.status-onaylandı {
    background-color: #28A745;
}

.status-üretimde {
    background-color: #17A2B8;
}

.status-iptal {
    background-color: #DC3545;
}

/* Duplicate block (kept intact — DO NOT REMOVE) */
.summary-item {
    background: #fff;
    border-left: 4px solid #47AAC6;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.summary-details {
    color: #444;
    font-size: 0.88rem;
    margin-top: 6px;
}

    .summary-details div {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    .summary-details i {
        margin-left: 6px;
        color: #444;
    }

.currency-total {
    font-size: 0.9rem;
    margin-right: 12px;
    white-space: nowrap;
}

.currency-icon i {
    margin-left: 4px;
}

.currency-summary {
    display: flex;
    flex-wrap: nowrap;
    font-size: 0.85rem;
    gap: 10px;
    overflow-x: auto;
}

    .currency-summary .currency-total {
        white-space: nowrap;
    }
/* ============================================================
   DESKTOP ORDER TABLE — CUSTOM DESIGN
   ============================================================ */

.order-table thead th {
    background: #f8f9fa;
    font-weight: 600;
}

/* ❗ Muhtemelen eski düz tablo yapısından kalma — yeni collapse table'da kullanılmıyor olabilir */
/*
.order-row {
    background: #ffffff;
}
*/

/* ❗ Muhtemelen eski ayraç çizgisi — collapse sonrası kullanılmıyor olabilir */
/*
.order-divider td {
    padding: 0;
    border: none;
    height: 6px;
    background: linear-gradient(to right, #ffffff 0%, #dce6f5 50%, #ffffff 100%);
}
*/

/* ❗ Eski detay satırı — collapse yapısı bunu kullanmıyor olabilir */
/*
.order-detail-row td {
    background: #f4f6f8;
    border-top: 1px solid #e1e4e8;
    border-bottom: 2px solid #dde2e6;
}
*/

/* --- Müşteri hücresi --- */
/* ❗ Yeni tasarım MÜŞTERİ bilgilerini collapse header’da gösteriyor.
      Bu sınıf artık direkt kullanılmıyor olabilir. KALDIRMADIM. */
/*
.customer-col {
    max-width: 220px;
}
*/

.customer-name {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Ürün Adı --- */
/* ❗ Collapse altındaki item-tablosu kendi stilini kullanıyor olabilir */
/*
.product-name {
    font-weight: 600;
}
*/

/* --- Numerik kolonlar --- */
/* ❗ Eski kolon bazlı tablo yapısından kalma olabilir */
/*
.num-col {
    text-align: right;
    min-width: 110px;
}
*/

/* ❗ Eski miktar metni */
/*
.order-num {
    font-weight: 600;
    font-size: 0.95rem;
}
*/

/* ❗ Eski birim metni */
/*
.order-unit {
    font-size: 0.75rem;
    color: #999;
    margin-left: 2px;
}
*/

/* ❗ Eski tutar stili */
/*
.order-amount {
    font-weight: 700;
    color: #0054A6;
}
*/

/* ❗ Para birimi etiketi — collapse yapısında “PB” başka yerde olabilir */
/*
.currency-tag {
    background: #e9f0ff;
    padding: 3px 7px;
    border-radius: 6px;
    font-weight: 600;
    color: #003c80;
    font-size: 0.85rem;
}
*/

/* --- Kare Edit Button (kullanılıyor) --- */
.btn-square {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- DURUM ROZETLERİ (kullanılıyor) --- */
.order-status {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.status-yeni {
    background: #1976d2;
}

.status-onaybekleniyor {
    background: #FFC107;
    color: #000;
}

.status-onaylandı {
    background: #28A745;
}

.status-üretimde {
    background: #17A2B8;
}

.status-iptal {
    background: #DC3545;
}

/* --- CUSTOMER DETAILS (aktif kullanılıyor) --- */
.customer-details i {
    color: #888;
    margin-right: 2px;
}

.customer-details {
    font-size: 0.75rem;
    color: #7a7a7a;
    margin-top: 3px;
    line-height: 1.35;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    opacity: 0.75;
}
/* ============================================================
   NEW COLLAPSE TABLE DESIGN (aktif kullanılan bölüm)
   ============================================================ */

.order-block {
    background: #fff;
    margin-bottom: 14px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid #e1e4e8;
}

.order-header {
    padding: 14px 16px;
    background: #f7f9fc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-title {
    font-weight: 650;
    font-size: 1rem;
    color: #1a1a1a;
}

.customer-details {
    font-size: 0.75rem;
    color: #666;
}

/* Collapse içindeki ürün tablosu */
.order-items {
    background: #fff;
    padding: 10px 16px 16px 16px;
    border-top: 1px solid #e1e4e8;
}

.items-table {
    width: 100%;
    border-collapse: collapse;
}

    .items-table th {
        text-align: left;
        font-weight: 600;
        font-size: 0.85rem;
        padding: 6px;
        background: #fafafa;
    }

    .items-table td {
        font-size: 0.84rem;
        padding: 6px;
        border-bottom: 1px solid #ececec;
    }

        .items-table td:last-child {
            text-align: right;
        }

/* Sipariş Liste Kartı */
.order-block {
    margin-bottom: 18px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Header */
.order-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #f3f6fa;
    border-bottom: 1px solid #dcdcdc;
}

    .order-header:hover {
        background: #e8eef4;
    }

/* Müşteri alt detayı */
.customer-details {
    font-size: 0.72rem;
    opacity: 0.75;
    color: #666;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

    .customer-details i {
        color: #777;
        margin-right: 4px;
    }

/* hederse = container fix */
.hederse {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
/* =============================
   ÖZET PANELİ (TAM & FINAL)
=============================*/
.summary-header {
    margin-top: 4px !important; /* ↓ Çok daha yakın */
    padding-top: 4px !important; /* ↓ Başlığı yukarı al */
}
.summary-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding-top: 0 !important
    padding: 0; 
    margin-bottom: 20px;
    margin-top: 4px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.05);
}
/* ===== SUMMARY TITLE ===== */
.summary-title-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    font-size: 1.05rem;
    padding: 10px 14px 2px 14px;
    color: var(--sintan-blue);
}

    .summary-title-bar i {
        font-size: 1.2rem;
        color: var(--sintan-blue);
    }

/* ===== SUMMARY TABS — MODERN ===== */
.summary-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e4e6eb;
}

.summary-tab {
    background: #f2f5f8;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #444;
    font-size: 0.9rem;
    transition: .2s;
}

    .summary-tab:hover {
        background: #e4e8ed;
    }

    .summary-tab.active {
        background: var(--sintan-blue);
        color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,.12);
    }


/* BUTTON 
.summary-toggle-btn {
    border: none;
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
} */

/* BODY */
.summary-body {
    padding: 15px 18px;
}

.summary-section {
    margin-bottom: 8px;
}
/* ============================================
   SUMMARY ROW – TEMİZ & DOĞRU TASARIM
   ============================================ */

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Üstten hizalama (çok satır olursa düzgün) */
    padding: 6px 0;
    font-size: .95rem;
    border-bottom: 1px dashed #e5e5e5;
}

    .summary-row span {
        text-align: left;
        font-weight: 500;
        color: #333;
        flex: 1; /* Sol taraf genişler */
    }

    .summary-row strong {
        text-align: right;
        font-weight: 700;
        color: #004a8f;
        white-space: nowrap;
    }

/* Alt bilgi (temsilci ürün sayısı gibi) */
.summary-info {
    display: block;
    font-size: .78rem;
    color: #666;
    margin-top: 2px;
}

/* Çok satırlı soldaki isimler içi uyum */
.summary-left-block {
    display: flex;
    flex-direction: column;
}


.rep-left {
    display: flex;
    flex-direction: column;
}

.rep-name {
    font-weight: 600;
}

.rep-products {
    font-size: 0.75rem;
    color: #666;
    margin-top: 2px;
}

.rep-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
/* TEMSILCI BLOKLARI */
.summary-row.rep-block {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #ddd;
}

.rep-left {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.rep-name {
    font-weight: 700;
    font-size: .95rem;
    color: #003d7a;
}

.rep-products {
    font-size: .80rem;
    color: #666;
    margin-top: 3px;
    line-height: 1.2;
}

.rep-right {
    text-align: right;
    white-space: nowrap;
}

    .rep-right strong {
        color: #004a8f;
        font-size: .95rem;
    }
.country-tab {
    min-width: 95px;
    font-size: 0.85rem;
}

/* ============================================
   USER NAME AUTO SHORTEN (…)
   ============================================ */
.user-name-limit {
    max-width: 110px; /* Masaüstü genişliği */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

/* Mobile */
@media(max-width: 768px) {
    .user-name-limit {
        max-width: 80px; /* Mobilde biraz daha dar */
    }
}
/* ============================================
   GREETING BAR – MODERN CORPORATE
   ============================================ */

.greeting-bar {
    background: #f9fbfc;
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 14px 2px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    gap: 12px;
}

/* Greeting text area */
.greet-left {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* USER NAME LIMIT (…) */
.user-name-limit {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* ROLE BADGE */
.user-role-badge {
    background: var(--sintan-blue);
    color: white;
    padding: 2px 8px;
    font-size: .75rem;
    border-radius: 6px;
    margin-left: 6px;
    font-weight: 600;
}

/* NEW ORDER BUTTON */
.greeting-neworder {
    background: var(--sintan-orange);
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
    transition: .15s ease-in-out;
}

    .greeting-neworder:hover {
        opacity: .9;
        transform: translateY(-1px);
    }

/* MOBILE VERSION */
@media(max-width: 768px) {
    .greeting-bar {
        flex-direction: column;
        text-align: center;
        padding: 10px 12px;
    }

    .user-name-limit {
        max-width: 85px;
    }

    .greeting-neworder {
        width: 100%;
        margin-top: 4px;
    }
}
/* ==== ORDER AMOUNT — NO WRAP ==== */
.order-amount-line {
    white-space: nowrap !important;
    display: block;
    font-size: clamp(0.80rem, 3.5vw, 0.95rem);
}
/* SUMMARY TABS — TEXT SELECTION DISABLED */
.summary-tabs,
.summary-tab,
.summary-tab * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
/* ===== SUMMARY HEADER (TITLE + ARROW SAME LINE) ===== */

.summary-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 4px !important;
    padding: 2px 4px 4px 4px;
    margin-bottom: 0 !important;
}

.summary-title-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 650;
    font-size: 1.05rem;
    color: var(--sintan-blue);
}

    .summary-title-left i {
        font-size: 1.2rem;
        color: var(--sintan-blue);
    }

/* Toggle button */
.summary-toggle-btn {
    border: none;
    background: #ffffff;
    padding: 2px 6px !important;
    cursor: pointer;
    border-radius: 6px;
    transition: .2s;
    box-shadow: none;
}

    .summary-toggle-btn i {
        font-size: 1.1rem !important;
        color: var(--sintan-blue);
        transition: transform .25s ease;
    }

    /* Hover */
    .summary-toggle-btn:hover {
        background: #f1f5fa;
    }

    /* Rotate on open */
    .summary-toggle-btn.rotated i {
        transform: rotate(180deg);
    }

/* Tabs below title row */
.summary-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e4e6eb;
}

/* Disable text selection */
.summary-tabs,
.summary-tab,
.summary-tab * {
    user-select: none;
}

/* Tabs design */
.summary-tab {
    background: #f2f5f8;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #444;
    font-size: 0.88rem;
    transition: .2s;
}

    .summary-tab.active {
        background: var(--sintan-blue);
        color: #fff;
    }

.country-tab {
    min-width: 95px;
    font-size: 0.85rem;
}
/* ===========================================================
   SMART PRODUCT SELECT (Responsive – Mobile + Desktop)
   =========================================================== */

.hidden {
    display: none !important;
}

/* Desktop Panel */
.smart-dropdown {
    position: absolute;
    z-index: 9999;
    width: 350px;
    max-height: 420px;
    background: #fff;
    border: 1px solid #d3d7de;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Mobile Fullscreen */
@media(max-width: 768px) {
    .smart-dropdown {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* Header */
.smart-dropdown-header {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #f5f7fb;
    border-bottom: 1px solid #e1e5eb;
}

    .smart-dropdown-header input {
        flex: 1;
        padding: 8px;
        border-radius: 6px;
        border: 1px solid #c8d0d8;
        font-size: 0.9rem;
    }

    .smart-dropdown-header button {
        margin-left: 8px;
        height: 36px;
        width: 36px;
        border: none;
        border-radius: 6px;
        background: #fff;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,.15);
    }

        .smart-dropdown-header button:hover {
            background: #f0f0f0;
        }

/* List */
.smart-dropdown-list {
    overflow-y: auto;
    padding: 8px 0;
}

/* Category Header */
.smart-category {
    padding: 8px 12px;
    font-weight: 600;
    background: #eef1f5;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e2e5e9;
}

    .smart-category:hover {
        background: #e1e5eb;
    }

    /* Expand Icon */
    .smart-category i {
        transition: transform 0.2s;
    }

    .smart-category.expanded i {
        transform: rotate(90deg);
    }

/* Product item */
.smart-product {
    padding: 7px 16px;
    cursor: pointer;
    font-size: 0.92rem;
    border-bottom: 1px solid #f3f3f3;
}

    .smart-product:hover {
        background: #f3f7ff;
    }
/* PRODUCT SELECT – native dropdown özelliğini kapat */
.product-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    background-color: transparent; 
}

    /* Açılır oku gizle */
    .product-select::-ms-expand {
        display: none;
        -webkit-appearance: none; /* Safari/Chrome */
        -moz-appearance: none; /* Firefox */
        appearance: none;
    }
.item-row {
    overflow: visible !important; /* smart dropdown kesilmesin */
}

/*==============================================
               KAPALI SİPARİŞLER
==============================================*/

.closed-filter-row .form-control,
.closed-filter-row .form-select,
.closed-filter-row .input-group-text,
.closed-filter-row .closed-filter-btn {
    height: 52px;
}

.closed-filter-row .input-group {
    height: 52px;
}

    .closed-filter-row .input-group .form-control {
        height: 52px;
    }

    .closed-filter-row .input-group .input-group-text {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
    }

.closed-filter-row .closed-filter-btn {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.closed-filter-row .form-label {
    margin-bottom: 6px;
}

.closed-filter-row input[type="date"] {
    min-height: 52px;
}

/* Sayfa içindeki Kapalı Siparişler + Yeni Sipariş satırı */
.closed-orders-toolbar {
    flex-wrap: wrap;
}

.closed-orders-btn {
    white-space: nowrap;
    width: auto;
    min-width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobilde butonlar sıkışmasın */
@media (max-width: 576px) {
    .closed-orders-toolbar {
        justify-content: space-between;
        gap: 12px;
    }

    .closed-orders-btn {
        white-space: nowrap;
        width: auto;
        min-width: 145px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .closed-orders-toolbar .btn-primary {
        white-space: nowrap;
        min-width: 145px;
    }
}

/* Navbar içindeki Kapalı Siparişler linki */
.nav-closed-orders-btn {
    white-space: nowrap;
}
.closed-filter-row > [class*='col-'] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.closed-filter-row .form-label {
    margin-bottom: 6px;
    min-height: 24px;
}

.closed-filter-row .form-control,
.closed-filter-row .form-select,
.closed-filter-row .input-group,
.closed-filter-row .closed-filter-btn {
    min-height: 52px;
}

    .closed-filter-row .input-group .form-control,
    .closed-filter-row .input-group .input-group-text {
        height: 52px;
    }