:root {
    --bg-dark: #2b2b2b;
    --bg-panel: #333333;
    --text-white: #ffffff;
    --btn-red: #d32f2f;
    --btn-green: #008000;
    --btn-blue: #000080;
    --btn-orange: #FF8C00;
    --border-color: #555;
    
    /* KART RENKLERİ */
    --card-bg-normal: #455a64; 
    --card-bg-selected: #d50000; 
    
    --box-blue: #0023b9; 
    --box-black: #000000; 
    --text-yellow: #ffeb3b;
    --text-cyan: #00e5ff;
    --text-green: #76ff03;
    
    /* Tarayıcıların koyu tema input desteği için */
    color-scheme: dark;
}

button { border-radius: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; user-select: none; }

body { background-color: var(--bg-dark); color: var(--text-white); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

button { transition: all 0.1s; border: none; color: white; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; }
button:hover { filter: brightness(1.2); }

header { background-color: #222; padding: 5px 10px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); font-weight: bold; font-size: 14px; }

/* NAV BAR */
.top-nav { 
    display: flex; 
    background-color: #000; 
    padding: 4px; 
    gap: 10px; 
    align-items: center; 
    height: 55px;
}

.nav-left-group { display: flex; gap: 2px; }
.nav-btn { padding: 0 15px; height: 45px; border: 1px solid #444; background: #111; color: white; font-weight: bold; font-size: 13px; text-decoration: none; display: flex; align-items: center; }
.nav-btn.active { background-color: var(--btn-red); }
.nav-btn.yellow-text { color: var(--btn-yellow); }

/* HEADER SAĞ BÖLÜM (Tarih + İstatistik) */
.header-right-group {
    margin-left: auto; /* En sağa yasla */
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 10px;
}

/* YENİ: TARİH FİLTRE ALANI */
.date-filter-box {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #222;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #444;
    height: 45px;
}
.date-input {
    background-color: #111;
    border: 1px solid #555;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    width: 110px;
}
.btn-filter-ok {
    background-color: var(--btn-blue);
    color: white;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 12px;
    height: 30px;
}
.btn-filter-today {
    background-color: #444;
    color: white;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 12px;
    height: 30px;
    text-decoration: none;
    display: flex; align-items: center;
}

/* İSTATİSTİK KARTLARI */
.stats-wrapper {
    display: flex;
    gap: 10px;
}
.stat-card {
    background-color: #222;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 130px;
    height: 45px;
}
.stat-icon {
    width: 32px; height: 32px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.bg-icon-purple { background: rgba(115, 103, 240, 0.2); color: #7367f0; }
.bg-icon-blue { background: rgba(0, 207, 232, 0.2); color: #00cfe8; }
.bg-icon-red { background: rgba(234, 84, 85, 0.2); color: #ea5455; }
.bg-icon-green { background: rgba(40, 199, 111, 0.2); color: #28c76f; }

.stat-info { display: flex; flex-direction: column; line-height: 1.1; }
.stat-label { font-size: 10px; color: #aaa; }
.stat-value { font-size: 13px; font-weight: bold; color: white; }

.btn-settings {
    background-color: #198754; 
    color: white;
    border: 1px solid #146c43;
    border-radius: 4px;
    padding: 0 15px;
    height: 45px;
    font-size: 14px;
}
.btn-settings:hover { background-color: #157347; color: white; }


.main-container { display: flex; flex: 1; height: 100%; overflow: hidden; }
.split-panel-container { flex: 3; display: flex; border-right: 2px solid var(--border-color); }
.split-block { flex: 1; display: flex; flex-direction: column; border-right: 1px solid #444; background: #2b2b2b; }

.block-content { flex: 1; background-color: #2b2b2b; border-bottom: 1px solid var(--border-color); padding: 5px; overflow-y: auto; }
.block-content::-webkit-scrollbar { width: 8px; }
.block-content::-webkit-scrollbar-track { background: #222; }
.block-content::-webkit-scrollbar-thumb { background: #555; }

.order-card {
    background-color: var(--card-bg-normal);
    color: white;
    margin-bottom: 6px;
    border: 1px solid #333;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    transition: background-color 0.2s;
    min-height: 110px;
}

.order-card.selected-card {
    background-color: var(--card-bg-selected) !important;
    border: 1px solid #ff5252;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.card-top-row { display: flex; height: 100px; }

.box-left-blue {
    width: 60px;
    background-color: var(--box-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #ffeb3b; 
    text-align: center;
}
.order-time { color: white; font-size: 13px; margin-top: 2px; }
.timer-val { color: white; font-size: 11px; margin-top: 5px; display: flex; align-items: center; gap: 2px; }

.box-info-container {
    flex: 2.2; /* Daha geniş alan (Eskiden 1.5 idi) */
    padding: 5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.cust-name-row {
    font-weight: bold;
    font-size: 14px;
    color: white;
    margin-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.info-details-row { display: flex; flex: 1; }
.info-left-logo { 
    margin-right: 12px; 
    display: flex; 
    align-items: center; 
}
.ys-logo-new { 
    width: 55px; 
    height: 55px; 
    border-radius: 50%; 
    border: 2px solid #fff; 
    background: white; 
    object-fit: contain; 
}

.info-right-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    overflow: hidden;
}
.cust-phone-new { 
    font-size: 15px; 
    color: #ffffff; 
    font-weight: 800; 
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
}
.cust-address-new { 
    font-size: 13px; 
    color: #eeeeee; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    line-height: 1.3; 
    font-weight: 500;
}

.box-items {
    flex: 1.8;
    background-color: white;
    color: blue;
    padding: 5px;
    font-size: 12px;
    font-weight: 500;
    overflow-y: auto;
    line-height: 1.1;
}
.box-items ul { list-style: none; padding: 0; margin: 0; }
.box-items li { margin-bottom: 3px; border-bottom: 1px dashed #ccc; padding-bottom: 1px; }

.box-price {
    width: 85px;
    background-color: var(--box-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    padding: 8px 0;
    text-align: center;
}
.price-val { color: var(--text-yellow); font-size: 15px; font-weight: bold; }
.pay-method { color: var(--text-cyan); font-size: 11px; font-weight: bold; }

.card-bottom-row {
    padding: 3px 5px;
    font-size: 11px;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    background: rgba(0,0,0,0.1);
}
.meta-line { display: flex; flex-wrap: wrap; gap: 10px; font-weight: bold; }
.online-code { color: var(--text-green); }
.note-text { color: var(--text-yellow); font-style: italic;}
.rest-note { color: orange; }

.left-actions, .right-actions { background-color: var(--bg-panel); padding: 5px; display: flex; flex-direction: column; gap: 5px; }
.left-actions-row-1 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; } 
.left-actions-row-2 { display: grid; grid-template-columns: 1fr; gap: 5px; }

.right-actions-row-1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.right-actions-row-2 { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 5px; }

.btn-h-50 { height: 50px; font-size: 16px; }
.btn-orange { background: var(--btn-orange); color: black; }
.btn-green { background: var(--btn-green); }
.btn-pink { background: #FF69B4; color: black; }
.btn-blue { background: #000080; font-size: 20px; }
.btn-light-blue { background: #6495ED; font-size: 12px; flex-direction: column; line-height: 1.2; }
.btn-brown { background: #fbc02d; color: black; }
.btn-salmon { background: #e64a19; }
.btn-red { background: var(--btn-red); }
.btn-dark-gray { background: #333; border: 1px solid #555; }
.btn-black { background: #000; border: 1px solid #555; }

.right-sidebar { flex: 1.2; background-color: #222; display: flex; flex-direction: column; padding: 5px; }
.integration-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 5px; }
.int-btn { background: #000; color: white; border: 1px solid #444; padding: 10px 2px; font-size: 11px; }
.courier-btn { background: var(--btn-red); width: 100%; padding: 10px; margin-bottom: 5px; font-size: 14px; }
.report-row { display: flex; gap: 5px; margin-bottom: 5px; }
.report-btn { flex: 1; background: black; border: 1px solid #444; padding: 5px; color: white; }
.search-row { display: flex; margin-bottom: 5px; }
.search-input { flex: 1; background: #333; border: 1px solid #555; color: #dcb76e; padding: 5px; }
.customer-area { display: flex; flex: 1; gap: 2px; }
.customer-list { flex: 1; background: #333; border: 1px solid #444; font-size: 12px; }
.customer-actions { width: 60px; display: flex; flex-direction: column; gap: 2px; }
.side-btn { background: #444; color: #aaa; border: 1px solid #555; padding: 15px 5px; font-size: 12px; }

footer { background: #222; padding: 5px 10px; font-size: 12px; display: flex; justify-content: space-between; border-top: 1px solid var(--border-color); }
#start-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.95); z-index: 10000; display: none; flex-direction: column; justify-content: center; align-items: center; color: white; }

/* --- KURYE KUTUSU (SAĞ SÜTUN İÇİN) --- */
.box-courier {
    flex: 1.1; /* Daha dar alan (Eskiden 1.8 idi) */
    background-color: #d50000;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-right: 1px solid #b71c1c;
    text-align: center;
    padding: 0 2px;
}

.courier-name {
    font-size: 13px; /* Yazı biraz küçültüldü sığması için */
    text-transform: uppercase;
    margin-bottom: 1px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.courier-phone-badge {
    font-size: 13px;  /* Boyut büyütüldü (10px -> 13px) */
    color: white;     /* Renk beyaz yapıldı */
    margin-bottom: 3px;
    font-weight: bold; /* Daha net görünmesi için kalınlaştırıldı */
}

.courier-timer-badge {
    font-size: 12px;
    background: rgba(0,0,0,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- KURYE SEÇİM BUTONLARI --- */
.btn-courier-select {
    background-color: #333;
    color: white;
    border: 1px solid #555;
    text-align: left;
    padding: 15px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
}
.btn-courier-select:hover {
    background-color: var(--btn-red);
    color: white;
    border-color: var(--btn-red);
}
.btn-courier-select i {
    margin-right: 10px;
    color: var(--text-yellow);
}