/* ============================================================
   QR-TEMA.CSS
   Uygulamanin ortak gorunumu tek yerden buradan yonetilir:
   tablolar, sekmeler, kartlar, form alanlari ve rozetler.
   Tema CSS'ine (qrstyles/styles.css) dokunulmaz; bu dosya
   temadan SONRA yuklenir (_HeaderStyles.cshtml).
   Renk degisikligi icin once asagidaki degiskenlere bak.
   ============================================================ */

:root {
    --qr-lacivert: #14283f;
    --qr-lacivert-orta: #244a75;
    --qr-mavi: #2460a7;
    --qr-yazi: #233449;
    --qr-yazi-soluk: #55657a;
    --qr-kenar: #e6ecf2;
    --qr-kenar-input: #dfe6ee;
    --qr-zemin-soluk: #f6f8fb;
    --qr-buton-zemin: #eef3f8;
    --qr-buton-yazi: #2b4f78;
    --qr-yesil: #1f7a4d;
    --qr-yesil-koyu: #17633e;
    --qr-odak-halka: 0 0 0 3px rgba(36, 74, 117, .12);
}

/* ---------------- Tablolar ---------------- */
.k-grid {
    color: var(--qr-yazi);
    border-color: var(--qr-kenar);
    border-radius: 12px;
    overflow: hidden;
}

.k-grid .k-grid-header th.k-header {
    background-color: var(--qr-zemin-soluk);
    color: var(--qr-yazi-soluk);
    font-size: 12px;
    font-weight: 600;
}

.k-grid .k-table-td {
    padding-top: 6px;
    padding-bottom: 6px;
    border-color: #eef2f6;
}

.k-grid tr.k-master-row:not(.k-selected):hover > td {
    background-color: #f3f7fb;
}

/* Sadece simgeli satir butonlari (yazili ve ozel renkli butonlara dokunulmaz) */
.k-grid .k-command-cell .k-button.k-icon-button {
    background: var(--qr-buton-zemin);
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: var(--qr-buton-yazi);
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.k-grid .k-command-cell .k-button.k-icon-button:hover {
    background: var(--qr-lacivert-orta);
    border-color: var(--qr-lacivert-orta);
    color: #fff;
}

/* Satirdaki goruntule / PDF butonlari */
.k-grid .k-command-cell .k-grid-viewPdf,
.k-grid .k-command-cell .k-grid-downloadPdf {
    background: var(--qr-buton-zemin);
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: var(--qr-buton-yazi);
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.k-grid .k-command-cell .k-grid-viewPdf:hover,
.k-grid .k-command-cell .k-grid-downloadPdf:hover {
    background: var(--qr-lacivert-orta);
    border-color: var(--qr-lacivert-orta);
    color: #fff;
}

/* Satirdaki yazili islem butonlari: qr-satir-btn sinifiyla kullanilir */
.k-grid .k-command-cell .qr-satir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    background: var(--qr-buton-zemin);
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: var(--qr-buton-yazi);
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.k-grid .k-command-cell .qr-satir-btn:hover {
    background: var(--qr-lacivert-orta);
    border-color: var(--qr-lacivert-orta);
    color: #fff;
}

.k-grid .k-command-cell .qr-satir-btn-yesil {
    background: #e8f5ee;
    border-color: #c5e5d3;
    color: #17744a;
}

.k-grid .k-command-cell .qr-satir-btn-yesil:hover {
    background: var(--qr-yesil);
    border-color: var(--qr-yesil);
    color: #fff;
}

.k-grid .k-grid-toolbar {
    padding-block: 5px;
}

.k-grid .k-grid-toolbar .k-button {
    background: var(--qr-lacivert);
    border-color: var(--qr-lacivert);
    border-radius: 8px;
    color: #fff;
}

.k-grid .k-grid-toolbar .k-button:hover {
    background: var(--qr-lacivert-orta);
    border-color: var(--qr-lacivert-orta);
    color: #fff;
}

.k-grid .k-grid-toolbar .k-grid-excel {
    background: var(--qr-yesil);
    border-color: var(--qr-yesil);
    border-radius: 8px;
    color: #fff;
}

.k-grid .k-grid-toolbar .k-grid-excel:hover {
    background: var(--qr-yesil-koyu);
    border-color: var(--qr-yesil-koyu);
    color: #fff;
}

/* ---------------- Sekmeler ---------------- */
.qr-tab-items {
    gap: 4px;
}

.qr-tab-items .nav-link {
    background: transparent;
    color: #4f6073;
    border: 0;
    border-radius: 9px;
    transition: background-color .15s ease, color .15s ease;
}

.qr-tab-items .nav-link:hover {
    background: var(--qr-buton-zemin);
    color: var(--qr-lacivert);
}

.qr-tab-items.nav.nav-style-3 .nav-link.active {
    background-color: #e4edf8 !important;
    color: #1f4f8a;
    font-weight: 600;
}

/* ---------------- Kartlar ---------------- */
form .card,
.qr-tab-container .card {
    border: 1px solid var(--qr-kenar);
    border-radius: 12px;
    box-shadow: none;
}

form .card-header,
.qr-tab-container .card-header {
    background: transparent;
    border-bottom-color: #eef2f6;
    border-radius: 12px 12px 0 0;
}

form .card-title,
.qr-tab-container .card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--qr-lacivert);
}

/* ---------------- Form alanlari ---------------- */
.k-input,
.k-picker {
    border-color: var(--qr-kenar-input);
}

.k-input:focus-within,
.k-picker:focus-within {
    border-color: var(--qr-lacivert-orta);
    box-shadow: var(--qr-odak-halka);
}

.k-input-button,
.qrtextbox-container .k-button {
    background: var(--qr-buton-zemin);
    border-color: var(--qr-kenar-input);
    color: var(--qr-buton-yazi);
    transition: background-color .15s ease, color .15s ease;
}

.k-input-button:hover,
.qrtextbox-container .k-button:hover {
    background: var(--qr-lacivert-orta);
    color: #fff;
}

.k-input input[readonly],
.qrtextbox-container input[readonly] {
    background-color: var(--qr-zemin-soluk);
    color: #475569;
}

/* Hucredeki aranabilir liste: uzun kayit adi pencereyi genisletmesin, alt satira gecsin */
.k-list-container.qr-aramali-liste {
    width: 420px !important;
    max-width: calc(100vw - 24px);
    white-space: normal !important;
}

.qr-aramali-liste .k-list-content {
    overflow-x: hidden;
}

.qr-aramali-liste .k-list-item,
.qr-aramali-liste .k-list-optionlabel,
.qr-aramali-liste .k-list-item-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ---------------- Rozetler ---------------- */
.qr-durum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.qr-durum::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* qr-d1..5: sefer durumu degerleri; qr-r-*: renge gore kullanim */
.qr-d1, .qr-r-mavi { background: #e9f1fb; color: #2460a7; }
.qr-d2, .qr-r-turuncu { background: #fdf1dc; color: #9a6208; }
.qr-d3, .qr-r-yesil { background: #e4f5ec; color: #17744a; }
.qr-d4, .qr-r-kirmizi { background: #fce9ea; color: #b8333a; }
.qr-d5, .qr-r-mor { background: #eeeaf8; color: #5a46a0; }
.qr-r-gri { background: #eef1f5; color: #566476; }
.qr-r-koyu { background: #e3e7ec; color: #333f4d; }

.qr-plaka {
    display: inline-block;
    padding: 1px 8px 1px 7px;
    background: #fff;
    border: 1px solid #d5deea;
    border-left: 3px solid var(--qr-mavi);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 18px;
    color: var(--qr-lacivert);
    white-space: nowrap;
}

/* ---------------- Liste ust arama cubugu ---------------- */
.qr-arama {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 0;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--qr-kenar);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 40, 63, .04);
}

.qr-arama-kutu {
    position: relative;
    flex: 1;
    min-width: 0;
}

.qr-arama-ikon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b99a8;
    font-size: 13px;
    pointer-events: none;
}

.qr-arama-input {
    width: 100%;
    height: 38px;
    padding: 0 36px;
    background: #f8fafc;
    border: 1px solid var(--qr-kenar-input);
    border-radius: 9px;
    color: var(--qr-lacivert);
    font-size: 13px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.qr-arama-input::placeholder {
    color: #94a2b1;
}

.qr-arama-input:focus {
    background: #fff;
    border-color: var(--qr-lacivert-orta);
    box-shadow: var(--qr-odak-halka);
}

.qr-arama-temizle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    padding: 4px 8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #94a2b1;
    font-size: 12px;
    cursor: pointer;
}

.qr-arama-temizle:hover {
    background: #f1f4f8;
    color: var(--qr-lacivert);
}

.qr-arama-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    background: var(--qr-lacivert);
    border: 1px solid var(--qr-lacivert);
    border-radius: 9px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.qr-arama-btn:hover {
    background: var(--qr-lacivert-orta);
    border-color: var(--qr-lacivert-orta);
}

.qr-arama-btn-ikincil {
    background: #fff;
    border-color: #d3dee9;
    color: var(--qr-buton-yazi);
}

.qr-arama-btn-ikincil:hover {
    background: var(--qr-buton-zemin);
    border-color: #b9c9da;
    color: var(--qr-lacivert);
}

.qr-arama-btn-excel {
    background: var(--qr-yesil);
    border-color: var(--qr-yesil);
}

.qr-arama-btn-excel:hover {
    background: var(--qr-yesil-koyu);
    border-color: var(--qr-yesil-koyu);
}

.qr-arama-btn-excel:disabled {
    background: #6fae8e;
    border-color: #6fae8e;
    cursor: wait;
}

@media (max-width: 768px) {
    .qr-arama {
        flex-wrap: wrap;
    }

    .qr-arama-kutu {
        flex: 1 1 100%;
    }
}

/* ---------------- Filtre karti ---------------- */
.qr-filtre {
    margin: 0 0 10px 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--qr-kenar);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 40, 63, .04);
}

.qr-filtre-satir {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.qr-filtre-satir + .qr-filtre-satir {
    margin-top: 10px;
}

.qr-filtre-alan {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.qr-filtre-alan-genis {
    flex: 1 1 260px;
}

.qr-filtre-etiket {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--qr-yazi-soluk);
}

/* Secmeli dugme grubu: Tumu / Yurtici / Yurtdisi gibi */
.qr-secim {
    display: inline-flex;
    padding: 3px;
    background: var(--qr-zemin-soluk);
    border: 1px solid var(--qr-kenar);
    border-radius: 9px;
}

.qr-secim button {
    height: 30px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #4f6073;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.qr-secim button:hover {
    color: var(--qr-lacivert);
}

.qr-secim button.aktif {
    background: #e4edf8;
    color: #1f4f8a;
    font-weight: 600;
}

.qr-secim button b {
    margin-left: 4px;
    font-weight: 700;
}

.qr-secim-uyari button.aktif {
    background: #fdf1dc;
    color: #9a6208;
}

.qr-filtre-ozet {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--qr-yazi-soluk);
    text-align: right;
}