/* FAZ 3 — TANIMSIZ SINIFLAR
   =========================
   Olcum: markupta kullanilan 47 sinifin CSS'te hicbir tanimi yoktu (67 dosyada,
   103 kullanim). Projede sayfa ici <style> blogu da yok, yani baska bir yerde de
   tanimli degillerdi — bu ogeler gercekten stilsiz ciziliyordu.

   YAKLASIM: sinifi markuptan SILMEK yerine TANIMLAMAK. Sekiz sinif JavaScript
   secicisi olarak da kullaniliyor (mx-shipment-link, mx-no-loading,
   mx-pricing-panel, mx-badge--lg, mx-form-grid--3, mx-placeholder,
   mx-route-board__check, mx-sevk-bulk-tools); silmek davranisi bozardi.

   DIKKAT — [hidden] KORUNUR: kap siniflarina kosulsuz "display" VERILMEZ.
   Ornegin .mx-auto-designer ve .mx-table-wrap ogeleri JS acana kadar
   hidden duruyor; kosulsuz bir display kurali onlari acardi. */

/* ---------- 1) Var olan bir sinifin es adlari ---------- */

/* InvoiceMatch sayfasi baslik siniflarini farkli adlandirmis. */
.mx-page-header__title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mx-text-main);
}

.mx-page-header__desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--mx-text-muted);
}

/* .mx-table-container ile ayni is; iki ad tek davranis. */
.mx-table-wrap:not([hidden]) {
    display: block;
    overflow-x: auto;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
}

.mx-muted {
    color: var(--mx-text-muted);
}

.mx-my-8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.mx-placeholder {
    color: var(--mx-text-light);
    font-style: italic;
}

.mx-list {
    margin: 0;
    padding-left: 18px;
}

.mx-list > li + li {
    margin-top: 4px;
}

/* ---------- 2) Form ---------- */

/* label > span + input dizilimi. Tanimsizken etiket ile alan YAN YANA
   ciziliyordu; Depo sevk formunda 12 alanin hepsi boyleydi. */
.mx-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mx-field > span {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mx-text-muted);
}

/* Icinde dugme tasiyan form grubu: etiketi yok, alt hizaya oturur. */
.mx-form-group--actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.mx-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mx-form-grid--compact {
    gap: 8px;
}

@media (max-width: 720px) {
    .mx-form-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* ---------- 3) Arac cubugu ---------- */

/* .mx-toolbar--compact tanimliydi ama TABAN sinif degildi; degistirici
   olmadan kullanilan 3 yerde ogeler bosluksuz alt alta diziliyordu. */
.mx-toolbar:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mx-sevk-bulk-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- 4) Tablo ---------- */

/* Secim kutusu hucresi: dar kalsin, metin gibi genislemesin. */
.mx-table__check {
    width: 34px;
    text-align: center;
}

.mx-invoice-match__table {
    font-variant-numeric: tabular-nums;
}

.mx-delivery-form-table {
    width: 100%;
    border-collapse: collapse;
}

.mx-shipment-link {
    color: var(--mx-primary);
    text-decoration: none;
    font-weight: 500;
}

.mx-shipment-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 5) Rozet, kart, dugme cesitleri ---------- */

.mx-badge--lg {
    font-size: 13px;
    padding: 4px 10px;
}

.mx-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mx-text-muted);
}

.mx-btn--ghost:hover {
    background: var(--mx-surface-hover);
    border-color: var(--mx-border);
    color: var(--mx-text-main);
}

.mx-card--wide {
    grid-column: 1 / -1;
}

.mx-card--warning {
    border-color: var(--mx-warning);
    background: var(--mx-warning-light);
}

/* Ilerleme cubugu tonlari — ana sayfada uc ayri olcu ayni renkteydi. */
.mx-progress--tone-primary > * {
    background: var(--mx-primary);
}

.mx-progress--tone-success > * {
    background: var(--mx-success);
}

.mx-progress--tone-info > * {
    background: var(--mx-info);
}

/* ---------- 6) Bilesen ic parcalari ---------- */

/* .mx-sevk-kpi__item ve __label tanimliydi, __value degildi: sayi etiketle
   ayni boyutta ciziliyordu ve KPI okunmuyordu. */
.mx-sevk-kpi__value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--mx-text-main);
}

.mx-permission-preview__section {
    padding: 10px 0;
    border-top: 1px solid var(--mx-border-light);
}

.mx-permission-preview__section:first-child {
    border-top: 0;
}

.mx-ops-station__scan {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.mx-ops-station__active {
    border-color: var(--mx-primary);
}

.mx-kiosk__subtitle {
    font-size: 0.9375rem;
    color: var(--mx-text-muted);
    margin-bottom: 12px;
}

.mx-pkg-card__title-block {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.mx-label-designer__controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.mx-route-board__check {
    width: 30px;
    text-align: center;
}

.mx-cargo-customer-search {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.mx-cargo-list-filters__customer {
    min-width: 200px;
}

.mx-cargo-panel {
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    padding: 12px;
}

.mx-cargo-doc-panel:not([hidden]) {
    display: block;
    border-top: 1px solid var(--mx-border-light);
    padding-top: 10px;
    margin-top: 10px;
}

.mx-cargo-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.mx-cargo-admin-view {
    display: contents;
}

.mx-pricing-panel {
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    padding: 12px;
}

/* JS bu sinifi yukleme gostergesini bastirmak icin ekliyor. */
.mx-no-loading::after {
    content: none !important;
}

/* Tasarimci kokune display VERILMEZ: JS acana kadar hidden kalir. */
.mx-auto-designer {
    min-width: 0;
}

/* ---------- 7) Yazdirma / takip ekranlari ---------- */

.mx-merged-irsaliye {
    background: var(--mx-surface);
}

.mx-irsaliye-page {
    page-break-after: always;
    padding: 12px 0;
}

.mirex-delivery-signature {
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid var(--mx-text-main);
    min-height: 48px;
}

.mirex-tracking-page {
    min-height: 100vh;
    background: var(--mx-bg);
}

.mirex-tracking-search,
.mx-tracking-search-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- 8) Barkod odak rozeti ----------
   Okutan kisi odagin korunup korunmadigini GORMELI; aksi halde her okutmadan
   once alana tiklamayi aliskanlik ediniyor ve ozellik ise yaramiyor. */
.mx-barcode-toggle {
    appearance: none;
    border: 1px solid transparent;
    cursor: pointer;
    margin-left: 8px;
    font-size: 11px;
    vertical-align: middle;
}

.mx-barcode-toggle:hover {
    border-color: currentColor;
}

/* ---------- 9) Operasyon tarih araligi ----------
   Diger filtreler tarayicida calisiyor; tarih sunucuya gidiyor. Ayri bir form
   olmasi gerektigi icin gorsel olarak komsulariyla ayni hizada durmali. */
.mx-cargo-list-filters__dates {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- 10) Otomasyon gecmisi (gonderi detayi) ----------
   Kapali baslar; ozet satiri "kac calisma, kac hata, ne zaman" der.
   Detay isteyene acilir. */
.mx-automation-history__summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    user-select: none;
}

.mx-automation-history__summary::-webkit-details-marker {
    display: none;
}

.mx-automation-history__summary::before {
    content: "▸";
    color: var(--mx-text-muted);
    font-size: 12px;
}

.mx-automation-history[open] > .mx-automation-history__summary::before {
    content: "▾";
}

.mx-automation-history__last {
    font-size: 12px;
    color: var(--mx-text-muted);
    margin-left: auto;
}

/* ---------- 11) Konektör süzgeci (otomasyon paleti) ----------
   Node'lar palette TURUNE gore gruplu; konektor ikinci eksen — ayni is
   nesnesine dokunan tetikleyici ve aksiyonlari bir arada gostermek icin. */
.mx-auto-palette-connectors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--mx-border-light);
    margin-bottom: 8px;
}

.mx-auto-connector-chip {
    appearance: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--mx-border);
    background: var(--mx-surface, #fff);
    color: var(--mx-text-muted);
    white-space: nowrap;
}

.mx-auto-connector-chip:hover {
    border-color: var(--mx-primary);
    color: var(--mx-primary);
}

.mx-auto-connector-chip.is-active {
    background: var(--mx-primary);
    border-color: var(--mx-primary);
    color: #fff;
    font-weight: 600;
}

/* ---------- 12) Şablon galerisi ----------
   Kartlar: ad + ne yaptığı + adım zinciri. Önceden 10 şablon bir <select>
   içindeydi ve kullanıcı hangisinin ne yaptığını adından tahmin ediyordu. */
.mx-auto-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.mx-auto-template-card {
    appearance: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface, #fff);
    min-width: 0;
}

.mx-auto-template-card:hover {
    border-color: var(--mx-primary);
    box-shadow: var(--mx-shadow-card);
}

.mx-auto-template-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mx-text-main);
}

.mx-auto-template-card__desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--mx-text-muted);
}

/* Adim zinciri: akisin ne yapacagini tek satirda gosterir. */
.mx-auto-template-card__chain {
    font-family: var(--mx-font-mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--mx-primary);
    padding-top: 5px;
    border-top: 1px dashed var(--mx-border-light);
    overflow-wrap: anywhere;
}

/* ---------- 13) Otomasyon tasarımcısı — akış görünümü ----------
   BU SINIFLAR PARALEL BIR CALISMADAN GELDI (Cursor, dikey akis gorunumu +
   zoom). Markupta kullaniliyorlardi ama CSS tanimlari yoktu; sinif kapsami
   testi bunu yakaladi. Kontroller stilsiz kaldiginda dugmeler duz metin
   gibi goruluyor ve tiklanabilir olduklari anlasilmiyor.

   BILINCLI OLARAK MINIMAL: yalnizca kontrolun ISLEVI icin gereken yerlesim
   ve okunabilirlik verildi, dekorasyon verilmedi. Boylece asil calismayi
   yurutenler kendi bicimlerini yazdiginda catisma yuzeyi kucuk kalir. */

/* Görünüm seçici — segment kontrolü (Akış / Serbest) */
.mx-auto-designer__view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background: var(--mx-surface-hover);
}

.mx-auto-view-btn {
    appearance: none;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: var(--mx-text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.mx-auto-view-btn:hover {
    color: var(--mx-text-main);
}

/* Seçili görünüm tek bakışta okunmalı — segment kontrolünün tüm işi bu. */
.mx-auto-view-btn.is-active {
    background: var(--mx-surface);
    color: var(--mx-primary);
    font-weight: 600;
    box-shadow: var(--mx-shadow-subtle);
}

/* Yakınlaştırma grubu */
.mx-auto-designer__zoom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mx-auto-designer__zoom-label {
    min-width: 44px;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--mx-text-muted);
}

/* Canvas sahnesi: yakınlaştırma bu kabın içinde olur, taşma kırpılır. */
.mx-auto-designer__canvas-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

/* Dikey akış modunda canvas ortalanır. */
.mx-auto-designer__canvas--flow {
    margin-inline: auto;
}

/* Akış modunda node'ları birbirine bağlayan çizgi katmanı. */
.mx-auto-flow-chrome {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* "Adım ekle" listesi */
.mx-auto-add-step-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* JS acana kadar tasarimci gizli kalir; --boot o ilk ani isaretliyor.
   display VERILMEZ: kok ogenin [hidden] davranisi bozulmasin. */
.mx-auto-designer--boot {
    min-width: 0;
}