/* KRISTAL KESICI ALETLER -- kirmizi/beyaz tema.
   Tum tema TEK yerden buradan doner: asagida .brand degiskenleri 29 yerde
   kullaniliyor, baska yere sabit renk yazilmaz.

   DIKKAT -- kirmizi tema ozel bir tehlike tasiyor: "Sil/İptal" butonlari
   ZATEN kirmizi (--danger). Ana renk de kirmizi olunca "Kaydet" ile "Sil"
   gorsel olarak ayrismaz ve vardiyada yanlis butona basilir. Bu yuzden:
     - ANA eylem  (Kaydet/Ekle) = DOLU kirmizi zemin, beyaz yazi
     - TEHLIKE    (Sil/İptal)   = BEYAZ zemin + kirmizi cerceve/yazi
   Ikisi bir arada asla karistirilamaz. Bkz. asagidaki .btn-danger kurali. */
:root {
    --bg: #f7f5f5;
    --surface: #ffffff;
    --border: #e6dede;
    --text: #1a1414;
    --text-muted: #6b6363;
    --black: #1a1414;
    --black-hover: #2b2222;
    --brand: #d81f26;          /* ana kirmizi -- app.js'teki BRAND ile ayni */
    --brand-hover: #b8161d;
    --brand-ink: #ffffff;      /* kirmizi zemin uzerine BEYAZ yazi */
    --brand-tint: #fdeced;     /* cok acik kirmizi -- vurgu zeminleri */
    --brand-tint-2: #fbf6f6;   /* neredeyse beyaz -- satir/kart zeminleri */
    --danger: #a01018;         /* ana kirmizidan KOYU: tehlike ayirt edilsin */
    --success: #1e824c;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(26, 20, 20, 0.04), 0 6px 20px rgba(26, 20, 20, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* Ust bar: BEYAZ zemin + kalin kirmizi alt cizgi (Korkmaz'da siyah zeminti). */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 28px;
    background: var(--surface);
    color: var(--text);
    border-bottom: 4px solid var(--brand);
}
.topbar a { color: var(--brand); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-user {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted);
    background: var(--brand-tint); padding: 4px 10px; border-radius: 999px;
}
.topbar-sub {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    color: var(--brand); margin-left: 8px; vertical-align: middle;
}

.topbar h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.topbar h1::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background: var(--brand);
    border-radius: 2px;
}

.status-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    max-width: min(92vw, 480px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    animation: status-toast-in 0.15s ease-out;
}
.status-toast.hidden { display: none; }
.status-toast.ok { background: #2a2a2a; color: var(--brand); border: 1px solid rgba(245,196,0,0.4); }
.status-toast.err { background: #3a1f1f; color: #ff9d8c; border: 1px solid rgba(255,157,140,0.5); }
.status-toast span { flex: 1 1 auto; }
.status-toast button {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
    opacity: 0.75;
    cursor: pointer;
}
.status-toast button:hover { opacity: 1; }
@keyframes status-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Kayıt onayı: tam ekran büyük sarı tik (veri girişi başarılı) ---- */
.save-check {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.55);
    cursor: pointer;
    animation: save-check-bg 0.15s ease-out;
}
.save-check.fade-out { animation: save-check-bg-out 0.25s ease-in forwards; }
.save-check-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.save-check-mark {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 104px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 44px rgba(0, 0, 0, 0.4);
    animation: save-check-pop 0.36s cubic-bezier(0.2, 0.8, 0.2, 1.25);
}
.save-check-text {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
@keyframes save-check-bg { from { opacity: 0; } to { opacity: 1; } }
@keyframes save-check-bg-out { to { opacity: 0; } }
@keyframes save-check-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@media (max-width: 600px) {
    .save-check-mark { width: 132px; height: 132px; font-size: 82px; }
    .save-check-text { font-size: 1.25rem; }
}

.tabs, .process-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 10px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.process-tabs {
    padding: 0 0 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.tab-btn, .process-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.tab-btn:hover, .process-btn:hover { color: var(--text); background: var(--bg); }

.tab-btn.active, .process-btn.active {
    color: var(--black);
    background: var(--brand);
}

main {
    padding: 24px 28px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.tab-panel, .process-panel { display: none; }
.tab-panel.active, .process-panel.active { display: block; animation: fade-in 0.18s ease-out; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.grid-2 {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* Form İÇİNDEKİ iki sütunlu alan çiftleri (Paketleme'de koli+kasa, Sipariş'te
   m²+kasa vb.) sayfa düzeyindeki geniş .grid-2 kolonlarını (minmax 280-380px)
   kullanmamalı -- dar kart içinde taşarlar. Burada eşit iki sütun kullanılır;
   min-width:0 sayı kutularının kart dışına taşmasını engeller. */
.form .grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 0;
}
.form .grid-2 > label { min-width: 0; margin-bottom: 12px; }
.form .grid-2 input, .form .grid-2 select { width: 100%; box-sizing: border-box; }
/* Aynı satırdaki hücreler eşit yükseklikte olur; bir etiketin alt-satırı
   (örn. "(isteğe bağlı)") diğerinden uzun olsa bile input/seçici kutularını
   hücrenin ALTINA yaslayarak SATIR BOYUNCA HİZALAR (kayma olmaz). */
.form .grid-2 > label > input,
.form .grid-2 > label > select,
.form .grid-2 > label > .qty-row { margin-top: auto; }
@media (max-width: 480px) {
    .form .grid-2 { grid-template-columns: 1fr; }
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}

.card h2 {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
}

.form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.form input, .form select {
    font-size: 0.92rem;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Miktar + birim (ton/kg) yan yana: sayı kutusu esner, birim seçici dar.
   NOT: `.form .grid-2 input/select { width:100% }` (özgüllük 0,2,1) qty-row
   içindeki kutulara da uygular ve taşmaya yol açardı; aşağıdaki daha özgül
   (0,3,1) kurallar onu yener -> seçici içeriğe göre dar, input esner. */
.qty-row { display: flex; gap: 6px; align-items: stretch; }
.form .grid-2 .qty-row input { flex: 1 1 auto; width: auto; min-width: 0; }
.form .grid-2 .qty-row select { flex: 0 0 auto; width: auto; min-width: 72px; }

.form input:focus, .form select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(245, 196, 0, 0.3);
}

.form button {
    margin-top: 4px;
    padding: 10px 18px;
    background: var(--brand);
    color: var(--black);
    border: none;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.form button:hover { background: var(--brand-hover); }
.form button:active { transform: translateY(1px); }

.hidden { display: none !important; }

/* Geçmiş Kayıtlar (Hammadde Girişi kartında, yalnız patron) */
.history-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.history-filters label { min-width: 0; }
.history-filters input, .history-filters select { width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
    .history-filters { grid-template-columns: 1fr; }
}
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable:hover { color: var(--accent, #2b6cb0); }
th.sortable .sort-arrow { font-size: 0.75em; opacity: 0.55; margin-left: 3px; }
th.sortable.sort-active .sort-arrow { opacity: 1; }
.hint {
    margin: -6px 0 10px;
    font-size: 0.8rem;
    color: var(--brand-ink);
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
td.num { text-align: right; font-variant-numeric: tabular-nums; }

thead th {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--black);
    font-weight: 700;
    white-space: nowrap;
}

tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }

tfoot .totals-row td {
    font-weight: 700;
    color: var(--black);
    border-top: 2px solid var(--black);
    border-bottom: none;
    background: var(--brand-tint);
    /* Padding tbody'den miras ALINMAZ (tfoot ayrı); açıkça ver ki mobilde
       toplam sayıları birbirine yapışıp kutudan taşmasın. */
    padding: 8px 12px;
    white-space: nowrap;
}

tbody tr:hover { background: var(--brand-tint); }

/* --- Eksantrikte Basılan Ürünler: aynı kalıp/farklı yuva grubu --- */
#table-eksantrik-products tr.eks-group-start td { border-top: 2px solid var(--black); }

.empty-row td {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 16px;
}

/* Dizgi Sayım mini kontrol tablosu: en son girilen kayıt sarı vurguyla öne
   çıkar -- veriyi giren kendi kaydını hemen tanısın. */
.dizgi-check-latest td {
    background: rgba(245,196,0,0.22);
    font-weight: 700;
}
/* Tamir işaretli satır: hafif turuncu vurgu -- üretimden sayılmadığı hemen
   görülsün (en son girilen satır sarı vurguyla çakışırsa sarı öncelikli kalır). */
.dizgi-check-repair:not(.dizgi-check-latest) td { background: rgba(230,126,34,0.14); }
/* 6 sütun (İşçi/Saat/Desen/Tabak/Tamir/Girildi) ekrana sığsın diye kompakt. */
.dizgi-check-table th, .dizgi-check-table td { padding: 5px 7px; font-size: 0.85rem; }

a { color: var(--black); }

@media (max-width: 600px) {
    .topbar {
        padding: 14px 16px;
        flex-wrap: wrap;
    }

    .topbar h1 { font-size: 1.05rem; }

    .tabs { padding: 10px 12px; }
    .process-tabs { padding: 0 0 12px; }

    .tab-btn, .process-btn { padding: 11px 14px; font-size: 0.86rem; }

    main { padding: 16px 12px 40px; }

    .card { padding: 14px 16px; }

    /* Inputs below 16px make iOS Safari zoom in on focus; keep them at 16px
       and give them taller touch targets since this runs on phones too. */
    .form input, .form select {
        font-size: 16px;
        padding: 11px 12px;
    }

    .form button {
        width: 100%;
        padding: 13px 16px;
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------------- v2 additions */

.entry-form { max-width: 420px; }
/* İki giriş formu yan yana; dar ekranda (mobil) alt alta iner. */
.entry-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.entry-row > .entry-form { flex: 1 1 320px; }

.form-label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.check-row {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}

.check-row input[type="checkbox"] { width: auto; }

.radio-row {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
}

.radio-row label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0;
}

.radio-row input[type="radio"] { width: auto; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.stat-card {
    background: var(--black);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 3px solid var(--brand);
    /* Grid hücreleri varsayılan olarak içeriğin doğal genişliğinin altına
       küçülmez -- büyük TL tutarları (örn. "13.787.281,790") bu yüzden
       kutunun dışına taşardı. min-width: 0 küçülmeye izin verir, .stat-value
       da gerekirse ikinci satıra sarar; değer HİÇBİR ZAMAN kısaltılmaz. */
    min-width: 0;
}

.stat-value {
    font-size: clamp(1.15rem, 1.6rem + 1vw, 2rem);
    font-weight: 700;
    color: var(--brand);
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
}

.stat-label {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
}

.stat-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ---- Grafikler (patron analiz sekmesi) ---- */
.an-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.an-period-btns { display: inline-flex; gap: 6px; }
.an-period {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.an-period:hover { color: var(--text); background: var(--bg); }
.an-period.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 600; }

.an-chart-block { margin-top: 18px; }
.an-chart-title { margin: 0 0 6px; font-size: 1rem; color: var(--text); }
.an-chart { position: relative; width: 100%; min-width: 0; }
/* aspect-ratio: SVG'nin kendi iç ölçüsünden dolayı dar ekranda (mobil) kartı
   taşırmasını engeller — genişlik %100, yükseklik orana göre ölçeklenir. */
.an-svg { width: 100%; max-width: 100%; height: auto; display: block; aspect-ratio: 820 / 260; }
.an-grid { stroke: var(--border); stroke-width: 1; }
.an-grid-zero { stroke: var(--text-muted, #888); stroke-width: 1.5; }
.an-axisline { stroke: #cfccc1; stroke-width: 1; }
.an-axis { fill: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.an-axis-y { text-anchor: end; }
.an-axis-x { text-anchor: middle; }
.an-dot { transition: r 0.1s; }
.an-dot.on { r: 5; stroke: var(--surface); stroke-width: 2; }
.an-cross { stroke: #b9b6ab; stroke-width: 1; stroke-dasharray: 3 3; }
.an-hit { cursor: crosshair; }
.an-tip {
    position: absolute;
    transform: translate(-50%, -100%);
    background: var(--black);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow);
    z-index: 5;
}
.an-empty { text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 8px; }

/* ---- Fabrika alt-sekmeleri (Genel / Grafikler) ---- */
.fab-subtabs {
    display: flex;
    gap: 6px;
    padding: 0 0 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.fab-subtab-btn, .sales-subtab-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.fab-subtab-btn:hover, .sales-subtab-btn:hover { color: var(--text); background: var(--bg); }
.fab-subtab-btn.active, .sales-subtab-btn.active { color: var(--black); background: var(--brand); }
.fab-subpanel, .sales-subpanel { display: none; }
.fab-subpanel.active, .sales-subpanel.active { display: block; }

/* ---- İşçi bazlı m² grafiği (Fabrika > Grafikler) ---- */
.wm-layout { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.wm-worker-list { flex: 0 0 190px; display: flex; flex-direction: column; gap: 4px; }
.wm-chart-area { flex: 1 1 320px; min-width: 0; }
.wm-worker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.wm-worker-item:hover { background: var(--bg); }
.wm-worker-item.active { border-color: var(--brand); background: #fffbe8; font-weight: 600; }
.wm-worker-item .wm-name { flex: 1 1 auto; }
.wm-worker-item .wm-total { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.wm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
#wm-chart .an-svg { aspect-ratio: 820 / 300; }
.wm-dotpt { transition: r 0.1s; }
.wm-dotpt.on { r: 5; stroke: var(--surface); stroke-width: 2; }
/* Gruplu sütun grafiği: sütunlar + hover band vurgusu */
.wm-bar { transition: opacity 0.1s; }
.wm-band-hl { fill: rgba(0, 0, 0, 0.05); }
/* Dönem toplam üretim satırı + tooltip band toplamı */
.wm-total { font-size: 0.95rem; margin-bottom: 8px; padding: 8px 12px; background: var(--bg); border-radius: 8px; }
.wm-total strong { color: var(--black); font-variant-numeric: tabular-nums; }
.wm-tiptotal { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); font-weight: 700; }
.wm-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.wm-daterange { display: inline-flex; flex-direction: column; gap: 2px; font-size: 0.76rem; color: var(--text-muted); }
.wm-daterange input { font-size: 0.85rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: #fff; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; justify-content: center; }
.wm-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); }
.an-tip .wm-tipline { display: flex; align-items: center; gap: 6px; margin-top: 3px; white-space: nowrap; }
.an-table-wrap { margin-top: 16px; }
.an-table-wrap summary { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; }
.an-table { width: 100%; }
.an-table th.num, .an-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* En çok satış yapılan müşteriler / en çok satılan desenler (2026-07-30) --
   iki sütun (masaüstü), dar ekranda alt alta. */
.an-lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 12px; }
.an-lb-list { display: flex; flex-direction: column; gap: 6px; }
.an-lb-row {
    display: grid;
    grid-template-columns: 1.5em minmax(0, 1.6fr) minmax(60px, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
}
.an-lb-rank { color: var(--text-muted, #888); font-weight: 700; text-align: right; }
.an-lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-lb-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-lb-sub { font-weight: 400; color: var(--text-muted, #888); margin-left: 4px; }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.card-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.card-filters label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.card-filters select {
    font-size: 0.88rem;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.edit-actions { white-space: nowrap; }

.btn-small {
    display: inline-block;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: var(--brand);
    color: var(--black);
    text-decoration: none;
}

.btn-small + .btn-small { margin-left: 6px; }

/* Desen seçicilerdeki "5x10"/"Panel" kategori butonları -- tıklanınca o
   kutunun listesi sadece o kategoriye daralır (2026-07-30). */
.desen-cat-buttons { display: flex; gap: 6px; margin-bottom: 5px; }
.desen-cat-btn {
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    background: var(--surface, #fff);
    color: var(--text);
}
.desen-cat-btn.active { background: var(--brand); border-color: var(--brand); color: var(--black); }

.history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.history-head h2 { margin: 0; }
.history-return-cell { width: 28px; text-align: center; }

/* TEHLIKE butonu: kirmizi temada ana butonla KARISMAMASI icin dolu zemin
   DEGIL, beyaz zemin + kirmizi cerceve. Uzerine gelince dolar (niyet netlesir).
   Bkz. :root'taki aciklama. */
.btn-danger {
    background: var(--surface);
    color: var(--danger);
    border: 1.5px solid var(--danger);
    font-weight: 700;
}
.btn-danger:hover { background: var(--danger); color: #fff; }

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

.edit-input, .edit-input-group {
    width: 100%;
    min-width: 70px;
    font-size: 0.84rem;
    padding: 6px 8px;
    border: 1px solid var(--brand);
    border-radius: 6px;
}
/* Fatura geneli (rowspan hücrelerdeki) düzenleme kutuları -- birleşik hücre
   dar olduğu için taşmasın diye box-sizing garanti. */
.edit-input-group { box-sizing: border-box; }

/* Urun karti: recete kurucu + urun listesi */
.recipe-builder {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin: 6px 0 4px;
    background: var(--bg);
}

.recipe-builder-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted, #666);
    margin-bottom: 8px;
}

.recipe-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.recipe-add-row select { flex: 1; min-width: 120px; }
.recipe-add-row input { width: 90px; }

.recipe-lines-table { width: 100%; margin-top: 10px; }
.recipe-lines-table td { padding: 5px 6px; font-size: 0.86rem; }

.product-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
}

.product-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.product-recipe {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--text-muted, #555);
}

.crate-pending { color: #b8860b; font-weight: 600; }
.crate-received { color: var(--green, #1e824c); font-weight: 600; }

/* ---------------------------------------------------------------- müşteriler (CRM) */
.customer-pack {
    margin: 6px 0 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.customer-pack-title {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: var(--text-muted, #555);
}
.customer-pack-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}
.customer-pack-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.customer-pack-row .cp-label { flex: 0 0 auto; color: var(--brand); }
.customer-pack-row input { flex: 1 1 90px; min-width: 0; margin: 0; }
.customer-pack-row .cp-del { flex: 0 0 auto; }
.customer-pack-row .cp-kutu { flex: 1 1 100%; }
.customer-pack-row .cp-kasa-title { flex: 1 0 100%; font-size: 0.78rem; opacity: 0.7; margin-top: 4px; }
.customer-pack-row .cp-hint { flex: 1 0 100%; font-size: 0.8rem; opacity: 0.85; }
.customer-pack-profile {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
}
.customer-pack-profile:last-child { margin-bottom: 0; }
.customer-pack-profile .customer-m2-badge { margin: 0 0 6px; }

.customer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

/* Tedarikçi kartları (Hammadde sekmesi) */
.supplier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.supplier-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--card-bg, #fff);
}
.supplier-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.supplier-card-head strong { font-size: 1rem; }
.supplier-contact {
    font-size: 0.85rem;
    color: var(--text-muted, #555);
    line-height: 1.6;
    margin-bottom: 10px;
    word-break: break-word;
}
.supplier-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.85rem;
}
.supplier-stats > div { display: flex; flex-direction: column; }
.supplier-stats span { color: var(--text-muted, #777); font-size: 0.72rem; }
.supplier-stats strong { color: var(--text, #222); }

/* Tedarik ettiği hammaddeler: kartta chip, formda checkbox listesi */
.supplier-mats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.mat-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef3fb;
    color: #2c5aa0;
    font-size: 0.75rem;
}
.supplier-note {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 0.82rem;
    color: var(--text-muted, #555);
    word-break: break-word;
}
.supplier-materials-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 4px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.mat-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: normal;
    margin: 0;
    cursor: pointer;
}
.mat-check input { width: auto; }

.customer-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.customer-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.customer-card-head strong { font-size: 1.05rem; }
.customer-actions { display: flex; gap: 6px; }

.customer-contact {
    font-size: 0.88rem;
    color: var(--text-muted, #555);
    line-height: 1.6;
    margin-bottom: 10px;
    word-break: break-word;
}

/* Form içi canlı m² hesabı kutusu */
.customer-m2-box {
    margin: 4px 0 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.9rem;
    color: var(--text-muted, #555);
    line-height: 1.5;
}
.customer-m2-box.customer-m2-ok {
    background: #eef7f0;
    color: #1b6b3a;
    border: 1px solid #cfe8d6;
}

/* Kartta öne çıkan "1 kasada X m²" rozeti */
.customer-m2-badge {
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #eef3fb;
    color: #2c5aa0;
    font-size: 0.9rem;
    text-align: center;
}

/* ---- CRM araç çubuğu (özet + arama + yeni) ---- */
.crm-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.crm-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.crm-stat {
    display: flex;
    flex-direction: column;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    min-width: 90px;
}
.crm-stat span { font-size: 0.72rem; color: var(--text-muted, #777); }
.crm-stat strong { font-size: 1.1rem; }
.crm-controls { display: flex; gap: 8px; align-items: center; }
#customer-search {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 240px;
    font-size: 0.9rem;
}

/* Satış (Odoo sale.order esintili) filtre çubuğu + sıralanabilir liste */
.sales-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 10px;
}
.sales-filters #sales-search {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 220px;
    font-size: 0.9rem;
    flex: 1 1 220px;
}
.sales-filters .filt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.72rem;
    color: var(--text-muted, #777);
}
.sales-filters .filt select,
.sales-filters .filt input {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}
.sales-filters #sales-filter-clear { align-self: flex-end; }

.sales-table th.sortable, .metraj-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sales-table th.sortable:hover, .metraj-table th.sortable:hover { color: var(--accent, #2c5aa0); }
.sales-table th.sortable::after, .metraj-table th.sortable::after { content: " " attr(data-arrow); font-size: 0.75em; }
.sales-table th.sort-active, .metraj-table th.sort-active { color: var(--accent, #2c5aa0); }
/* Sayisal hucreler .num sinifiyla saga yaslanir (td.num kurali). Fatura
   gruplamasinda rowspan'li hucreler oldugu icin nth-child yerine sinif kullanilir. */
.sales-table th.num { text-align: right; }
.muted { color: #999; font-style: italic; }

/* Satış tablosunu SIKIŞTIR (Excel mantığı): dar padding/font + uzun metin
   sütunları (müşteri/desen/not) sınırlı genişlikte SARILIR -> tablo daralır,
   "Toplam" yatay kaydırma olmadan tek bakışta görünür. Sayısal sütunlar (m²,
   fiyat, toplam, kasa) tek satır kalır. */
.sales-table { font-size: 0.8rem; }
.sales-table td, .sales-table th { padding: 5px 7px; }
.sales-table .grp-party-cell { max-width: 150px; white-space: normal; overflow-wrap: anywhere; }
.sales-table .cell-desen { max-width: 130px; white-space: normal; overflow-wrap: anywhere; }
.sales-table .cell-note { max-width: 110px; white-space: normal; overflow-wrap: anywhere; }
.sales-table .cell-total { font-weight: 700; }
.sales-table .edit-actions .btn-small { padding: 3px 6px; margin: 0 1px 1px 0; }

/* ---- Fatura gruplama (Excel mantigi): ayni fatura kalemleri kalin cizgiyle
   ayrilir; fatura no/musteri/tedarikci/tarih/PDF birlesik (rowspan) hucrelerde. */
.sales-table tr.grp-start td, #table-history tr.grp-start td,
#table-sales tr.grp-start td { border-top: 3px solid var(--text, #333); }
.grp-merge { vertical-align: top; background: var(--surface-alt, rgba(0,0,0,0.02)); }
.grp-pdf { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.grp-inv { font-size: 0.78em; color: var(--text-muted, #777); font-variant-numeric: tabular-nums; }
.grp-party { font-weight: 600; }
.grp-total { margin-top: 4px; font-size: 0.85em; font-weight: 700; color: var(--accent, #2c5aa0); font-variant-numeric: tabular-nums; }

/* ---- Odoo tarzı donut (dairesel) grafikler: Fabrika > Genel ---- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.dash-chart { min-width: 0; }
.dash-chart h3 { font-size: 0.9rem; margin: 0 0 10px; text-align: center; color: var(--text-muted); font-weight: 700; }
.donut-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.donut-svg { width: 165px; height: 165px; flex: 0 0 auto; }
.donut-svg path, .donut-svg circle { transition: opacity 0.15s; cursor: pointer; }
.donut-svg path:hover, .donut-svg circle:hover { opacity: 0.82; }
/* Dokununca altta çıkan adet+tür bilgisi */
.donut-tip {
    font-size: 0.85rem; text-align: center; color: var(--text-muted, #777);
    min-height: 1.3em; padding: 4px 10px; border-radius: 8px; max-width: 100%;
    overflow-wrap: anywhere;
}
.donut-tip.on { color: var(--black, #222); font-weight: 700; background: var(--bg, #f3f3f3); }
.donut-leg[data-idx] { cursor: pointer; padding: 1px 5px; border-radius: 5px; }
.donut-leg.sel { background: var(--bg, #eee); font-weight: 700; }
.donut-total { font-size: 22px; font-weight: 800; fill: var(--black, #222); font-variant-numeric: tabular-nums; }
.donut-total-lbl { font-size: 10px; fill: var(--text-muted, #888); text-transform: uppercase; letter-spacing: 0.06em; }
.donut-legend { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.donut-leg { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; }
.donut-sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.donut-leg-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-leg-val { color: var(--text-muted, #777); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Kesim işçisi salt-okunur aktif sipariş listesi (ne kesilecek) ---- */
.cutting-orders-card { border-left: 4px solid var(--brand); }
.co-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    padding: 8px 0; border-bottom: 1px dashed var(--border, #ddd);
}
.co-row:last-child { border-bottom: none; }
.co-desen { font-weight: 700; font-size: 1.02em; min-width: 140px; }
.co-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted, #666); font-size: 0.9em; }
.co-need strong { color: var(--black); }
.co-urgent { background: rgba(220, 53, 69, 0.06); }
.co-urgent .co-desen { color: var(--danger, #c0392b); }

/* ---- Kesim ölçü kutucukları (birden fazla seçilebilir) ---- */
.cut-sizes-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 12px; }
.cut-size-check {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    font-size: 0.9rem; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; background: var(--surface, #fff);
    flex-direction: row;
}
.cut-size-check input { width: auto; margin: 0; }
.cut-size-check:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); font-weight: 700; }
.mc-sizes { color: var(--text-muted, #777); font-weight: 400; font-size: 0.9em; }

/* ---- Fabrika > Makineler: makine kartları (bugünkü kesim durumu) ---- */
.machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.machine-card { border: 1px solid var(--border, #ddd); border-radius: 10px; padding: 12px 14px; background: var(--surface, #fff); }
.machine-card.is-active { border-color: #28a745; box-shadow: 0 0 0 1px rgba(40,167,69,0.25); }
.mc-head { font-weight: 700; font-size: 1.05em; margin-bottom: 8px; }
.mc-now { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 0.95em; }
.mc-active { background: rgba(40,167,69,0.12); }
.mc-idle { background: var(--border, #eee); color: var(--text-muted, #777); }
.mc-dot { width: 10px; height: 10px; border-radius: 50%; background: #28a745; margin-top: 4px; flex: 0 0 auto; animation: mc-pulse 1.6s infinite; }
@keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.mc-since { font-size: 0.82em; color: var(--text-muted, #777); margin-top: 2px; }
.mc-hist { margin-top: 10px; }
.mc-hist-title { font-size: 0.78em; font-weight: 700; color: var(--text-muted, #777); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.mc-hist-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px dashed var(--border, #ddd); font-size: 0.9em; }
.mc-hist-dur { color: var(--text-muted, #777); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-hist-empty { font-size: 0.85em; color: var(--text-muted, #999); font-style: italic; }
.hint-inline { color: var(--text-muted, #999); font-style: italic; font-size: 0.85em; }
.cell-act .btn-small { margin: 0 2px 2px 0; }
label .opt { color: #999; font-weight: normal; font-size: 0.85em; }
/* Metraj: 4. (Tabak), 5. (m²) ve 6. (Tamir) sütunlar sağa yaslı */
.metraj-table th.num, .metraj-table td:nth-child(4),
.metraj-table td:nth-child(5), .metraj-table td:nth-child(6) { text-align: right; }
/* Toplam satırında "Toplam" hücresi colspan=3 olduğu için nth-child kayar;
   toplam sayılarını doğrudan sağa yasla ki üstteki sütunlarla hizalansın. */
.metraj-table tfoot td { text-align: right; }
.metraj-table tfoot td:first-child { text-align: left; }
/* 6 sütun ekrana sığsın diye kompakt hücre boşluğu + küçük yazı (mobilde de). */
.metraj-table th, .metraj-table td { padding: 6px 8px; font-size: 0.88rem; }

.form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.form-head h2 { margin: 0; }

/* Kart başlığı + durum rozeti */
.customer-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.crm-chip-active { background: #eef7f0; color: #1b6b3a; }
.crm-chip-done { background: #eef3fb; color: #2c5aa0; }
.crm-chip-new { background: var(--bg); color: var(--text-muted, #777); }

/* İlişki istatistikleri (sipariş/kasa/ciro/son işlem) */
.customer-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.85rem;
}
.customer-stats > div { display: flex; flex-direction: column; }
.customer-stats span { color: var(--text-muted, #777); font-size: 0.72rem; }
.customer-stats strong { color: var(--text, #222); }

/* Kart içi geçmiş paneli */
.customer-detail-btn, .supplier-detail-btn { margin-top: 10px; width: 100%; }
.customer-detail {
    margin-top: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}
.crm-hist { margin-bottom: 10px; }
.crm-hist h4 { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-muted, #555); }
.crm-hist-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
}
.crm-hist-row:last-child { border-bottom: none; }

/* Tedarikçi "Alımlar" penceresi (2026-07-29): karta tıklayınca açılan, tarih
   aralığı seçilebilen küçük pencere -- eskiden kart içinde açılan sabit
   son-30-gün kutusunun yerine geçti. */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(20, 20, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
    background: var(--surface, #fff);
    border-radius: var(--radius, 14px);
    box-shadow: var(--shadow);
    width: min(560px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.modal-head h2 { margin: 0; font-size: 1.05rem; }
.modal-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}
.modal-filters label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.72rem;
    color: var(--text-muted, #777);
}
.modal-filters input {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
}
#supplier-detail-summary { margin: 0 0 8px; font-weight: 600; }
.modal-body { overflow-y: auto; }

.customer-pack-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    font-size: 0.85rem;
}
.customer-pack-info > div {
    display: flex;
    flex-direction: column;
}
.customer-pack-info span { color: var(--text-muted, #777); font-size: 0.78rem; }
.customer-pack-info strong { color: var(--text, #222); }

.customer-note {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 0.85rem;
    color: var(--text-muted, #555);
    word-break: break-word;
}

/* Raporlar: gun be gun makine/isci trendi, tablo hucresi icinde kucuk cubuk */
.mini-bar-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
}

.mini-bar {
    flex: 1;
    height: 8px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
}

.mini-bar-fill {
    height: 100%;
    background: var(--brand);
    border-radius: 999px;
}

.mini-bar-value {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 1.5em;
    text-align: right;
}

/* Siparis takibi: tam genislik ilerleme cubugu */
.order-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
}

.order-progress-track {
    flex: 1;
    height: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.order-progress-fill {
    height: 100%;
    background: var(--brand);
}

.order-progress-fill.complete { background: var(--success); }

.order-progress-label {
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 3em;
    text-align: right;
}

/* Siparis takibi: uretilen vs hedef kasa, iki cubuklu mini grafik */
.order-chart {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.order-chart-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-chart-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    min-width: 4.5em;
}

.mini-bar-fill.complete { background: var(--success); }
.mini-bar-fill.target { background: var(--black); }

/* Buyutulmus Siparis Takibi kartlari */
.order-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
}

.order-card-behind { border-color: var(--danger); background: var(--brand-tint); }

/* Sipariş Takibi: müşteriye göre gruplandı (2026-07-30) -- her müşterinin
   başlığı, altında da o müşterinin sipariş kartları. */
.order-group { margin-bottom: 20px; }
.order-group:last-child { margin-bottom: 0; }
.order-group-head {
    font-weight: 700;
    font-size: 0.95rem;
    padding-bottom: 4px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--brand);
}
.order-group-count { font-weight: 400; font-size: 0.78rem; color: var(--text-muted, #888); }

.order-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.order-card-head strong { font-size: 1.05rem; }
.order-material {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg);
    font-size: 0.8rem;
    color: var(--text-muted, #555);
}

.order-m2 {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef3fb;
    font-size: 0.8rem;
    color: #2c5aa0;
    font-weight: 600;
}

.order-card-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted, #555);
}

/* Sipariş formu: m² -> kasa canlı önizlemesi */
.order-calc-preview {
    margin: 4px 0 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.9rem;
    color: var(--text-muted, #555);
    line-height: 1.5;
}
.order-calc-preview.order-calc-ok {
    background: #eef7f0;
    color: #1b6b3a;
    border: 1px solid #cfe8d6;
}

.product-plate {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text-muted, #777);
}

.days-ok { color: var(--success, #1e824c); font-weight: 600; }
.days-soon { color: #b8860b; font-weight: 700; }
.days-overdue { color: var(--danger); font-weight: 700; }

.order-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.order-progress-bar {
    flex: 1;
    height: 18px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    position: relative;   /* çok tarihli teslim noktalı çizgileri için */
}

.order-progress-fill {
    height: 100%;
    background: var(--brand);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.order-progress-fill.complete { background: var(--success); }
.order-progress-fill.behind { background: var(--danger); }

.order-progress-pct {
    font-weight: 700;
    min-width: 3.2em;
    text-align: right;
}

/* ---- Siparişler alt-sekmesi: Yeni Sipariş (sol) + Sipariş Takibi (sağ) yan yana;
   dar ekranda (flex-wrap) alt alta iner. ---- */
.orders-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.orders-layout .orders-new { flex: 1 1 320px; max-width: 460px; margin: 0; }
.orders-layout .orders-track { flex: 2 1 420px; min-width: 0; margin: 0; }

/* ---- Çok kalemli satış girişi: ürün kalem satırları ---- */
.sales-items-head, .sales-item-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sales-items-head {
    font-size: 0.72rem; color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; margin: 2px 0 4px; padding: 0 10px;
}
.sales-item-row {
    margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg, #fafafa);
}
.sales-item-row input, .sales-item-row select { margin: 0; }
.sales-items-head span:nth-child(1), .sales-item-row .si-material { flex: 2 1 140px; min-width: 0; width: auto; }
.sales-items-head span:nth-child(2), .sales-item-row .si-m2 { flex: 1 1 70px; min-width: 0; width: auto; }
.sales-items-head span:nth-child(3), .sales-item-row .si-unit { flex: 1 1 80px; min-width: 0; width: auto; }
.sales-items-head span:nth-child(4), .sales-item-row .si-currency { flex: 0 1 72px; min-width: 0; width: auto; }
.sales-items-head span:nth-child(5), .sales-item-row .si-crates-box { flex: 1 1 90px; min-width: 0; }
.sales-items-head span:nth-child(6), .sales-item-row .si-del { flex: 0 0 auto; }
.sales-item-row .si-del { padding: 6px 9px; }
.sales-item-row .si-crates-box { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; opacity: 0.9; }
.sales-item-row .si-profile { flex: 0 1 auto; min-width: 0; font-size: 0.8rem; padding: 3px 4px; }
#sales-add-item { margin-top: 2px; }
@media (max-width: 560px) { .sales-items-head { display: none; } }

/* ---- Çok kalemli satın alma girişi: kalem satırları ---- */
.purchase-items-head, .purchase-item-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.purchase-items-head {
    font-size: 0.72rem; color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; margin: 2px 0 4px; padding: 0 10px;
}
.purchase-item-row {
    margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg, #fafafa);
}
.purchase-item-row input, .purchase-item-row select { margin: 0; }
.purchase-items-head span:nth-child(1), .purchase-item-row .pi-material { flex: 2 1 150px; min-width: 0; width: auto; }
.purchase-items-head span:nth-child(2), .purchase-item-row .pi-unit-price { flex: 1 1 90px; min-width: 0; width: auto; }
.purchase-items-head span:nth-child(3), .purchase-item-row .pi-qty { flex: 1 1 70px; min-width: 0; width: auto; }
.purchase-items-head span:nth-child(4), .purchase-item-row .pi-unit { flex: 0 1 70px; min-width: 0; width: auto; }
.purchase-items-head span:nth-child(5), .purchase-item-row .pi-vat { flex: 0 1 90px; min-width: 0; width: auto; }
.purchase-items-head span:nth-child(6), .purchase-item-row .pi-del { flex: 0 0 auto; }
.purchase-item-row .pi-del { padding: 6px 9px; }
.purchase-item-row .pi-total-info { flex: 1 0 100%; font-size: 0.85rem; opacity: 0.85; font-weight: 600; }
.pi-fx-box { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 4px; }
.pi-fx-box .pi-fx-currency { flex: 0 1 140px; }
.pi-fx-box .pi-fx-amount { flex: 0 1 110px; }
.pi-fx-box .pi-fx-hint { flex: 1 1 auto; opacity: 0.85; }
.cell-total-tl { font-size: 0.85em; opacity: 0.8; margin-top: 2px; }
#purchase-add-item { margin-top: 2px; }
@media (max-width: 560px) { .purchase-items-head { display: none; } }

/* ---- "Diğer Satış Girişleri": desen dışı satış kalemleri (araç/hurda/hizmet).
   Ürün satış satırıyla aynı görsel dil, ama m²/kasa yerine miktar + kalem KDV. */
.other-items-head, .other-item-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.other-items-head {
    font-size: 0.72rem; color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; margin: 2px 0 4px; padding: 0 10px;
}
.other-item-row {
    margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg, #fafafa);
}
.other-item-row input, .other-item-row select { margin: 0; }
.other-items-head span:nth-child(1), .other-item-row .oi-label { flex: 2 1 170px; min-width: 0; width: auto; }
.other-items-head span:nth-child(2), .other-item-row .oi-qty { flex: 1 1 70px; min-width: 0; width: auto; }
.other-items-head span:nth-child(3), .other-item-row .oi-unit-price { flex: 1 1 90px; min-width: 0; width: auto; }
.other-items-head span:nth-child(4), .other-item-row .oi-currency { flex: 0 1 72px; min-width: 0; width: auto; }
.other-items-head span:nth-child(5), .other-item-row .oi-vat { flex: 0 1 90px; min-width: 0; width: auto; }
.other-items-head span:nth-child(6), .other-item-row .oi-del { flex: 0 0 auto; }
.other-item-row .oi-del { padding: 6px 9px; }
.other-item-row .oi-total-info { flex: 1 0 100%; font-size: 0.85rem; opacity: 0.85; font-weight: 600; }
#other-sales-add-item { margin-top: 2px; }
@media (max-width: 560px) { .other-items-head { display: none; } }

/* Satış tablosunda desen dışı ("Diğer") satırları ayırt eden küçük rozet. */
.sale-kind-tag {
    display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 1px 6px;
    border-radius: 999px; background: var(--border); color: var(--text-muted);
    vertical-align: middle; letter-spacing: 0.02em;
}

/* ---- Çok tarihli teslim programı (milestone): barda noktalı bölüm + açıklama ---- */
/* Kesikli çizgi: dar görünür çizgi + ÜSTÜNE gelmeyi kolaylaştıran geniş şeffaf
   hover alanı (title bilgisi bu alan sayesinde rahat açılır). */
.order-ms-divider {
    position: absolute; top: 0; bottom: 0; width: 11px; margin-left: -5px;
    z-index: 2; cursor: help;
}
.order-ms-divider::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    border-left: 2px dotted rgba(0, 0, 0, 0.6);
}
.order-ms-chip { cursor: help; }
.order-ms-legend { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 2px; }
.order-ms-chip {
    font-size: 0.76rem; color: var(--text); background: var(--bg);
    border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
.order-ms-chip .ms-date { font-weight: 700; }
.order-ms-chip .ms-cum { color: var(--text-muted); }
/* Milestone giriş satırları (tarih + kasa + sil) — yeni sipariş formu ve düzenleme kartı */
.order-ms-box { margin: 4px 0 10px; }
.order-ms-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.order-ms-row .ms-date { flex: 1 1 auto; min-width: 0; }
.order-ms-row .ms-kasa { flex: 0 0 90px; width: 90px; }
.order-ms-row .ms-del { flex: 0 0 auto; padding: 6px 10px; }
.order-ms-row .desen-row-select-wrap { flex: 1 1 auto; min-width: 0; align-self: stretch; }
.order-ms-row .desen-row-select-wrap .desen-cat-buttons { margin-bottom: 4px; }
.order-ms-row .desen-row-product { width: 100%; }
.order-ms-row .desen-row-m2 { flex: 0 0 90px; width: 90px; }
.order-ms-row .desen-row-kasa { flex: 0 0 90px; width: 90px; }

.order-numbers {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.order-pace {
    font-size: 0.9rem;
    padding: 8px 10px;
    border-radius: 6px;
}

.order-pace.pace-ok { background: #eef7f0; color: #1b6b3a; }
.order-pace.pace-behind { background: #fdecea; color: var(--danger); font-weight: 600; }

/* %100'e ulasan siparisin "Onayla" (tamamla) butonu */
.order-approve-btn {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--success);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.order-approve-btn:hover { background: #14663b; }
.order-approve-btn:active { transform: scale(0.99); }

/* Sipariş görüntüleme kartı: "Düzenle" (küçük) + varsa "Onayla" (tam genişlik)
   alt alta; Düzenle serbestçe içerik kadar geniş kalsın diye stretch kapalı. */
.order-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
}
.order-card-actions .order-approve-btn { margin-top: 0; }

/* Sipariş düzenleme kartı: Kaydet/Vazgeç yan yana. */
.order-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.order-card-editing { background: var(--brand-tint-2); }

/* Kısmi teslimat bilgisi (müşteri depodan kaç kasa aldı) */
.order-delivered { color: #1b6b3a; font-weight: 600; }

/* Patron bildirim paneli: bugünün üretim özeti + satış/teslimatlar */
.patron-notify {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid var(--brand);
    border-left: 5px solid var(--brand);
    border-radius: 10px;
    background: rgba(245,196,0,0.10);
}
.patron-notify .pn-head {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.patron-notify .pn-title { font-weight: 700; font-size: 0.98rem; }
.patron-notify #pn-body.hidden { display: none; }
.patron-notify .pn-total { font-size: 0.95rem; margin-bottom: 8px; }
.patron-notify .pn-total strong { font-size: 1.25rem; color: var(--brand-ink); }
.patron-notify .pn-by-product { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.patron-notify .pn-chip {
    padding: 3px 10px; border-radius: 999px; background: #fff;
    border: 1px solid var(--border); font-size: 0.85rem;
}
.patron-notify .pn-sales-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; color: var(--text-muted); }
.patron-notify .pn-sales-list { display: flex; flex-direction: column; gap: 4px; }
.patron-notify .pn-sale-row { font-size: 0.88rem; }
.patron-notify .pn-time {
    display: inline-block; min-width: 42px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.patron-notify .pn-empty { color: var(--text-muted); font-style: italic; font-size: 0.85rem; }

/* Muhasebe bildirimi: Erdem'in kaydettiği, henüz faturalandırılmamış hammadde
   girişleri -- "Faturalandır"a basılana kadar ekranda kalır. */
#raw-invoice-notify.hidden { display: none; }
.rin-list { display: flex; flex-direction: column; gap: 8px; }
.rin-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
    padding: 8px 12px; border-radius: 8px; background: #fff;
    border: 1px solid var(--border); font-size: 0.9rem;
}
.rin-card .rin-material { font-weight: 700; }
.rin-card .rin-qty, .rin-card .rin-supplier, .rin-card .rin-time { color: var(--text-muted); }
.rin-card .rin-btn { margin-left: auto; }

/* Satın alma formundaki "hammadde girişine bağlı" şeridi -- Faturalandır'a
   basılınca görünür, hangi girişe bağlı olduğunu net gösterir + kaldırma
   butonu (2026-07-29: görünmez bağın yanlış kaydı kapatması düzeltildi). */
#purchase-prefill-hint:not(.hidden) {
    display: block;
    margin: -6px 0 12px;
    background: rgba(245, 196, 0, 0.14);
    border: 1px solid var(--brand);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.5;
}
#purchase-prefill-hint .prefill-unlink { margin-left: 8px; vertical-align: baseline; }

/* Teslimata hazir siparis: fiyat/birim/not + teslim butonu satiri */
.deliver-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 6px;
}
.deliver-row label { font-size: 0.8rem; }
.deliver-row .deliver-price { width: 110px; }
.deliver-row .deliver-note { width: 180px; }
.deliver-btn {
    background: var(--success, #1e824c);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
}

/* Performans grafikleri: bagimsiz SVG cizgi grafik (Makine Verimliligi,
   Isci Performansi) */
.perf-chart-wrap {
    width: 100%;
}

.perf-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.perf-grid-line {
    stroke: var(--border);
    stroke-width: 1;
}

.perf-axis-label {
    font-size: 9px;
    fill: var(--text-muted);
}

.perf-average-line {
    stroke: var(--text-muted);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.perf-line {
    fill: none;
    stroke-width: 2.5;
}

.perf-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.perf-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.perf-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.perf-legend-dash {
    width: 14px;
    height: 0;
    border-radius: 0;
    border-top: 2px dashed var(--text-muted);
    background: none;
}

.perf-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.perf-badge.above { background: rgba(30, 130, 76, 0.14); color: var(--success); }
.perf-badge.below { background: rgba(192, 57, 43, 0.14); color: var(--danger); }

/* ==================================================================
   KRISTAL / KOSEBENT -- bu panele ozel siniflar.
   Yukarisi Korkmaz iskeletinden gelir; asagisi sadece burada kullanilir.
   ================================================================== */

/* --- Liste yonetimi (hammadde / kalip / tezgah / operator) --- */
.list-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.inline-form {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px;
}
.inline-form input, .inline-form select {
    flex: 1 1 130px; min-width: 0; margin: 0;
}
.inline-form button { flex: 0 0 auto; }

.name-list { list-style: none; margin: 0; padding: 0; }
.name-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 6px; background: var(--surface);
}
.name-list li.empty-row { justify-content: center; color: var(--text-muted); font-size: 0.85rem; }
.nl-name { font-weight: 600; word-break: break-word; }
.nl-act { flex: 0 0 auto; white-space: nowrap; }

/* --- Duzenle Modu arac cubugu --- */
.edit-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 12px; }
.edit-toolbar label { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 600; gap: 4px; }
.edit-toolbar select { margin: 0; min-width: 160px; }

/* --- Uyari / eksi deger vurgusu ---
   "Birim agirlik tanimsiz" ve "eksi stok" GIZLENMEZ, goze batar sekilde
   gosterilir ki fark edilip duzeltilsin (uydurma deger uretmek yerine). */
.warn { color: var(--danger); font-weight: 600; font-size: 0.85em; }
td.neg, .neg { color: var(--danger); font-weight: 700; }

/* --- Siparis karti --- */
.order-card {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 12px; background: var(--surface);
}
.order-card.behind { border-color: var(--danger); background: var(--brand-tint); }
.order-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.order-product { font-weight: 700; }
.order-date { color: var(--text-muted); font-size: 0.85rem; }
.order-bar {
    height: 12px; background: var(--border); border-radius: 999px;
    overflow: hidden; margin-bottom: 8px;
}
.order-bar-fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width 0.3s; }
.order-card.behind .order-bar-fill { background: var(--danger); }
.order-meta {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px;
}
.order-meta strong { color: var(--text); }
.order-pace { font-size: 0.85rem; margin-bottom: 8px; }
.order-pace.behind { color: var(--danger); font-weight: 600; }
.order-note { font-size: 0.82rem; color: var(--text-muted); font-style: italic; margin-bottom: 8px; }
.order-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.order-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- Yeni siparis karti: birden fazla urun satiri --- */
.order-item-row {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
}
.order-item-row .oi-info { margin: 4px 0 8px; min-height: 1.1em; }
.order-item-row .oi-remove { margin-top: 0; }
#order-add-item { margin-bottom: 14px; }

/* --- Urun kombobox: tek kutuda arama + acilir liste (2026-08-07) --- */
.oi-combo { position: relative; }
.oi-combo-panel {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px;
    max-height: 260px; overflow-y: auto; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
    z-index: 30;
}
.oi-combo-opt { padding: 7px 10px; font-size: 0.88rem; cursor: pointer; }
.oi-combo-opt:hover, .oi-combo-opt.active { background: var(--brand-tint, #fdeced); }
.oi-combo-empty { padding: 7px 10px; font-size: 0.85rem; color: var(--text-muted); }

/* --- Haftalik Program: gun gun hucreler --- */
.weekly-program-week { margin-bottom: 14px; }
.weekly-program-week h3 { margin: 0 0 10px; font-size: 1rem; }
.wp-cell {
    background: var(--brand-tint-2, #fdeeee); border-radius: 6px;
    padding: 4px 6px; margin-bottom: 4px; font-size: 0.82rem; line-height: 1.3;
}
.wp-cell.wp-changeover {
    background: transparent; border: 1px dashed var(--border); color: var(--text-muted);
}
.wp-cell.wp-urgent { border: 1px solid var(--brand); }

.check-row-inline { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }

/* --- Gruplama: her tezgahin kart icindeki kalip kontrol listesi --- */
.group-products-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px 10px; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px; padding: 10px;
    margin-bottom: 10px; background: var(--surface);
}
.gp-item { font-weight: 400; font-size: 0.88rem; }

/* --- Makineler: her makine icin kart, uc(u) de yan yana --- */
.machine-cards-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px; align-items: start;
}
.press-card { margin-bottom: 14px; }
.press-card h3 { margin: 0 0 8px; font-size: 1rem; }
.pc-search { width: 100%; margin-bottom: 8px; }
.press-card-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.pc-rate-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-weight: 400; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px;
}
.pc-rate-row .pc-rate { width: 90px; flex: 0 0 auto; }
@media (max-width: 760px) {
    .press-columns { grid-template-columns: 1fr; }
}

/* --- Operator grafigi: solda liste, sagda grafik --- */
.wm-side {
    flex: 0 0 190px; max-height: 340px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 10px; padding: 6px;
}
.wm-main { flex: 1 1 380px; min-width: 0; }
.wm-worker-item {
    display: flex; justify-content: space-between; gap: 8px; align-items: center;
    padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 0.88rem;
}
.wm-worker-item:hover { background: var(--brand-tint-2); }
.wm-worker-item.active { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.wm-worker-total { font-variant-numeric: tabular-nums; opacity: 0.85; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 0.8rem; }
.wm-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.wm-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.wm-tipline { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.wm-tiptotal { border-top: 1px solid rgba(255,255,255,0.25); margin-top: 3px; padding-top: 3px; font-weight: 700; }
.wm-band-hl { fill: var(--brand); opacity: 0.08; }

@media (max-width: 700px) {
    .wm-side { flex: 1 1 100%; max-height: 170px; }
}

/* Sayisal sutunlar saga yasli + tabular rakam (rakamlar alt alta hizalansin). */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Urun katalogu: cok sutunlu form + filtre + boyali rozeti --- */
.product-form input[type="number"] { flex: 0 1 92px; }
.product-form input[name="name"] { flex: 1 1 130px; }
.product-form input[name="category"] { flex: 1 1 150px; }
.prod-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.prod-filter input[type="search"] { flex: 1 1 220px; margin: 0; }
.prod-filter select { flex: 0 1 190px; margin: 0; }
.prod-filter .hint { margin: 0; white-space: nowrap; }
.tag-painted {
    display: inline-block; font-size: 0.66rem; font-weight: 700; padding: 1px 6px;
    border-radius: 999px; background: var(--brand); color: var(--brand-ink);
    vertical-align: middle; letter-spacing: 0.02em;
}
#table-products { font-size: 0.86rem; }
#table-products td { white-space: nowrap; }