:root {
    --primary-color: #3498db;
    --primary-dark: #2980b9;
    --secondary-color: #1c446b;
    --secondary-dark: #142f4a;
    --text-primary: #2c3e50;
    --text-muted: #6b7c93;
    --border-color: #dfe6ec;
    --card-bg: #ffffff;
    --page-bg: #f2f5f8;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--text-primary);
    background: var(--page-bg);
}

a { text-decoration: none; color: inherit; }

/* ── Giriş sayfası ────────────────────────────────────────────────────── */
body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}

.login-container {
    background: var(--card-bg);
    width: 100%;
    max-width: 380px;
    padding: 40px 36px;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.login-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.login-container h1 { margin: 0 0 4px; font-size: 22px; }
.login-container .subtitle { margin: 0 0 24px; color: var(--text-muted); font-size: 14px; }
.login-container .form-group { text-align: left; margin-bottom: 16px; }

.security-info {
    margin-top: 20px;
    font-size: 12px;
    color: var(--text-muted);
}
.security-info i { color: var(--success-color); margin-right: 4px; }

/* ── Genel form ve buton stilleri ────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.form-group textarea { resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}
.form-check label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.form-check input { width: auto; }

.input-group { display: flex; gap: 8px; }
.input-group input { flex: 1; min-width: 0; }
.input-group .btn { white-space: nowrap; flex-shrink: 0; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.field-hint { font-size: 12px; color: var(--text-muted); margin: 4px 0 14px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-block { width: 100%; justify-content: center; padding: 12px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #eef1f4; color: var(--text-primary); }
.btn-secondary:hover { background: #e1e6ea; }
.btn-danger { background: #fdecea; color: var(--danger-color); }
.btn-danger:hover { background: var(--danger-color); color: #fff; }
.btn-success { background: var(--success-color); color: #fff; }
.btn-success:hover { background: #219150; }

.alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.alert-error { background: #fdecea; color: #c0392b; }
.alert-warning { background: #fef5e7; color: #9a6a00; }
.alert-success { background: #e8f8ef; color: #1e8449; }
.alert-info { background: #eaf2fb; color: #2471a3; }

/* ── Uygulama kabuğu ─────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--secondary-color);
    color: #fff;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    /* Sayfa aşağı kaydırılınca sidebar sabit kalsın (masaüstü) - .app-shell'in flex akışında
       kalmaya devam eder (position:fixed gibi .main-area'ya margin ayarlamak gerekmez),
       sadece kendi yüksekliği görünür alanı geçince kaymayı bırakır. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .brand-text, .sidebar.collapsed .menu-text,
.sidebar.collapsed .user-info, .sidebar.collapsed .submenu-arrow { display: none; }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.brand { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.sidebar-toggle { background: none; border: none; color: #fff; cursor: pointer; font-size: 16px; opacity: 0.8; }
.sidebar-toggle:hover { opacity: 1; }

.user-console {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.user-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--primary-color);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 12px; color: rgba(255,255,255,0.65); }
.logout-btn { color: rgba(255,255,255,0.75); font-size: 15px; }
.logout-btn:hover { color: #fff; }

.sidebar-menu { list-style: none; margin: 0; padding: 8px 0; flex: 1; }
.sidebar-menu > li > a, .submenu-toggle {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 18px; color: rgba(255,255,255,0.85); font-size: 14px;
}
.sidebar-menu > li > a i, .submenu-toggle i:first-child { width: 18px; text-align: center; }
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a, .submenu-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-menu > li.active > a { border-left: 3px solid var(--primary-color); }

.submenu-arrow { margin-left: auto; font-size: 11px; transition: transform 0.15s ease; }
.menu-item-with-submenu.open .submenu-arrow { transform: rotate(180deg); }
.submenu { list-style: none; margin: 0; padding: 4px 0; max-height: 0; overflow: hidden; }
.menu-item-with-submenu.open .submenu { max-height: 500px; }
.submenu li + li { margin-top: 3px; }
.submenu li a { display: block; padding: 10px 18px 10px 24px; font-size: 13.5px; color: rgba(255,255,255,0.75); }
.submenu li a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.submenu li.active a { background: rgba(255,255,255,0.08); color: #fff; border-left: 3px solid var(--primary-color); }

/* ── Ana içerik alanı ────────────────────────────────────────────────── */
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--secondary-color);
    color: #fff;
    padding: 16px 24px;
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    row-gap: 8px;
    position: sticky;
    top: 0;
    z-index: 20;
}
/* Başlık + sekme çubuğunu TEK bir grup olarak çerçeveleyen dış kutu (bkz. includes/topbar.php). */
.topbar-nav {
    display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
    padding: 6px; border-radius: 8px;
    background: rgba(44, 105, 128, 0.61);
    border: 1px solid rgba(255, 255, 255, 0.28);
}
/* min-width:0 (flex-shrink:0 DEĞİL) - dar ekranlarda (mobil) başlık kutudan taşmak yerine
   kısalıp ELLIPSIS ile kesiliyor; ikon her zaman sabit boyutta kalır (aşağıdaki flex-shrink:0). */
.page-title { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 6px; }
.page-title i { color: var(--primary-color); flex-shrink: 0; }
.page-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.page-title-brand { opacity: 0.75; }
.mobile-menu-btn { display: none; background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }
/* .mobile-menu-btn'in aksine masaüstünde de görünür - sidebar tamamen gizlendiğinde
   (bkz. includes/topbar.php) çıkış yapmanın TEK yolu bu buton, ekran boyutundan bağımsız. */
.topbar-logout-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; opacity: .85; }
.topbar-logout-btn:hover { opacity: 1; }

/* Masaüstü sekme çubuğu (bkz. assets/js/tabs.js) - mobilde @media (max-width:900px)
   içinde tamamen gizlenir, JS zaten mobilde hiç devreye girmiyor. */
.tab-bar { display: flex; align-items: center; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; }
.tab-item {
    display: flex; align-items: center; gap: 6px;
    box-sizing: border-box;
    height: 13mm; width: 55mm;
    padding: 0 8px 0 12px; border-radius: 6px;
    background: rgba(121, 124, 124, 0); color: #f8f8f8;
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    font-size: 15px; white-space: nowrap; cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, box-shadow .15s ease;
}
.tab-item:hover { background: rgba(255,255,255,0.2); }
.tab-item.active { background: #fff; color: var(--text-primary); border-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.tab-item.split { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.tab-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close-btn, .tab-split-btn {
    background: none; border: none; cursor: pointer; font-size: 11px;
    color: inherit; opacity: .6; padding: 3px; line-height: 1; flex-shrink: 0; border-radius: 4px;
}
.tab-close-btn:hover, .tab-split-btn:hover { opacity: 1; background: rgba(0,0,0,0.08); }

.content { padding: 24px; flex: 1; }
/* Bölünmüş görünümde (bkz. tabs.js toggleSplit) aktif + bölünen sekme yan yana %50/%50. */
.content.tab-split-active { display: flex; gap: 16px; align-items: flex-start; }
.content.tab-split-active .tab-pane { flex: 1 1 50%; min-width: 0; }

.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 20px;
    margin-bottom: 20px;
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-header h2 { margin: 0; font-size: 16px; }

.welcome-card-name { white-space: nowrap; }
.welcome-card p { color: var(--text-muted); line-height: 1.6; }
.dashboard-cta-card { padding: 12px; }

/* Kontrol Paneli - "Kumaş Deposu Genel Toplamı" kutusu (bkz. assets/js/kumas-depo-toplam.js).
   Tıklanabilir/odaklanabilir (role="button") - üzerine basınca canlı sorgu tetiklenir. */
.kumas-depo-toplam-kart {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kumas-depo-toplam-kart:hover, .kumas-depo-toplam-kart:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(28, 68, 107, 0.28);
    outline: none;
}
.kumas-depo-toplam-kart:active { transform: translateY(0); }
.kumas-depo-toplam-simge {
    width: 52px; height: 52px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.16);
    border-radius: 50%;
    font-size: 22px;
}
.kumas-depo-toplam-metin { flex: 1; min-width: 0; }
.kumas-depo-toplam-baslik { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .88; }
.kumas-depo-toplam-deger { font-size: 28px; font-weight: 700; line-height: 1.25; margin-top: 2px; }
.kumas-depo-toplam-zaman { font-size: 12px; opacity: .85; margin-top: 2px; }
.kumas-depo-toplam-kart.guncelleniyor .kumas-depo-toplam-simge i { animation: kumasDepoDonme 1s linear infinite; }
@keyframes kumasDepoDonme { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Kontrol Paneli - "Dokuma Bölümü Toplam Üretim" kutusu (bkz. assets/js/dokuma-uretim-toplam.js).
   Görünüm, Kumaş Deposu Genel Toplamı kutusuyla (.kumas-depo-toplam-kart) BİREBİR aynı
   gradient/renk dilini kullanır - tutarlı Kontrol Paneli görünümü için.
   Aktif vardiya (o an rotasyona göre çalışan A/B/C) canlı/vurgulu, diğerleri sönük gösterilir. */
.dokuma-uretim-toplam-kart {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    cursor: pointer;
    user-select: none;
    padding: 17px 20px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dokuma-uretim-toplam-kart:hover, .dokuma-uretim-toplam-kart:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(28, 68, 107, 0.28);
    outline: none;
}
.dokuma-uretim-toplam-kart:active { transform: translateY(0); }
.dokuma-uretim-toplam-kart .empty-row { color: rgba(255,255,255,.85); }
/* "Güncelleniyor..." durumu - Kumaş Deposu kutusundaki (.kumas-depo-toplam-deger/-zaman)
   ile BİREBİR aynı görünüm: ikonun sağında, sola yaslı. */
.dokuma-uretim-yukleniyor { text-align: left; padding: 8px 0; }
.dokuma-uretim-yukleniyor-baslik { font-size: 28px; font-weight: 700; line-height: 1.25; color: #fff; }
.dokuma-uretim-yukleniyor-alt { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 2px; }
.dokuma-uretim-toplam-ust { margin-bottom: 13px; }
.dokuma-uretim-toplam-baslik {
    margin: 0; color: #fff;
    text-align: center; text-transform: uppercase; letter-spacing: .04em;
    font-size: 15px; font-weight: 700;
}

/* Kumaş Deposu kutusundaki .kumas-depo-toplam-zaman ile AYNI görünüm - burada kutu
   tam genişlik olduğu için sağa yaslı. */
.dokuma-uretim-zaman { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 10px; text-align: right; }

/* İkon B (orta) satırın hizasında, satır kutularının DIŞINDA solda durur - kutular
   (.dokuma-uretim-satirlar-sutun, flex:1) bu yüzden ikona göre daralır. */
.dokuma-uretim-govde { display: flex; align-items: center; gap: 12px; }
.dokuma-uretim-govde-simge {
    width: 52px; height: 52px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.16);
    border-radius: 50%;
    font-size: 22px;
}
.dokuma-uretim-toplam-kart.guncelleniyor .dokuma-uretim-govde-simge i { animation: kumasDepoDonme 1s linear infinite; }
.dokuma-uretim-satirlar-sutun { flex: 1; min-width: 0; }

.dokuma-uretim-satir {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 8px; margin-bottom: 7px;
    background: rgba(255,255,255,0.1);
    transition: opacity .15s ease, background .15s ease;
}
.dokuma-uretim-satir:last-child { margin-bottom: 0; }
.dokuma-uretim-sol { display: flex; align-items: center; gap: 8px; }
.dokuma-uretim-harf {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    background: rgba(255,255,255,0.16); color: #fff;
}
.dokuma-uretim-deger { font-size: 17px; font-weight: 700; color: #fff; }

/* Aktif (o an rotasyona göre çalışan) vardiya - daha belirgin/parlak zemin. */
.dokuma-uretim-satir.aktif { background: rgba(255,255,255,0.28); }
.dokuma-uretim-satir.aktif .dokuma-uretim-harf { background: #fff; color: var(--primary-color); }

/* Pasif (o an çalışmayan) vardiya - sönük. */
.dokuma-uretim-satir.pasif { opacity: .5; }
.dashboard-cta-btn {
    width: 100%;
    height: 10mm;
    justify-content: center;
    font-size: 16px;
}

/* ── Filtreler ───────────────────────────────────────────────────────── */
/* position:relative - SADECE Dokuma İletişimleri sayfasındaki .iletisim-ozet'in mutlak
   konumlanması için gerekli (aşağıda); başka hiçbir sayfada mutlak konumlu çocuk olmadığı
   için diğer .filter-row kullanan sayfalarda görünüm/davranış AYNEN aynı kalır. */
.filter-row { position: relative; display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; padding: 12px 14px; background: var(--page-bg); border-radius: 8px; }
.filter-item { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.filter-item label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.filter-item select, .filter-item input[type="text"], .filter-item input[type="date"], .filter-item input[type="number"] { padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; width: 100%; box-sizing: border-box; }

/* Dokuma İletişimleri sayfası - seçili günün TAM (filtrelerden bağımsız) bağlı/bağlı değil
   tezgah sayısı (bkz. pages/dokuma_hatti_iletisimleri.php). Masaüstünde kutunun TAM ORTASINA
   (yatay+dikey) mutlak konumlanır - filtre öğelerinin akışından bağımsız, kutu boyu sadece
   Tarih/Durum/Makine No satırına göre belirlenir. Mobilde (satırlar alt alta yığıldığı için
   ortada mutlak konumlamak filtre kutularının üzerine binerdi) normal akışta, kendi satırında
   ortalı kalır - bkz. @media (max-width:900px) altındaki geri alma. */
.iletisim-ozet { display: flex; flex-basis: 100%; align-items: center; justify-content: center; gap: 16px; margin-top: 4px; }
.iletisim-ozet-sayi { font-size: 18px; font-weight: 700; white-space: nowrap; }
@media (min-width: 901px) {
    .iletisim-ozet {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        flex-basis: auto; margin-top: 0;
    }
}
.iletisim-ozet-var { color: var(--success-color); }
.iletisim-ozet-yok { color: var(--danger-color); }

/* ── Tablo ───────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.data-table th { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.empty-row { text-align: center; color: var(--text-muted); padding: 20px !important; }

/* Operatör Ataması - "Atanan Operatörler" tablosu, satır ayrımları turkuaz (kullanıcı isteği). */
.oa-atanan-table th, .oa-atanan-table td { border-bottom: 1px solid #17a2b8; }
.text-muted { color: var(--text-muted); }
select.field-error, input.field-error { border-color: var(--danger-color); }

/* ── Yoklama Formu (bölüm bazlı, alt birim gruplu) ──────────────────────── */
.yoklama-tarih-goster { margin: 0 0 16px; padding: 10px 14px; background: var(--page-bg); border-radius: 8px; font-size: 14px; }
.yoklama-group { margin-bottom: 22px; }
.yoklama-group:last-child { margin-bottom: 0; }
.yoklama-group-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--secondary-color); padding-bottom: 6px; border-bottom: 2px solid var(--border-color); }
.yoklama-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.yoklama-row:last-child { border-bottom: none; }
.yoklama-name { flex: 1; min-width: 160px; font-weight: 600; }
.yoklama-row select { padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; min-width: 150px; }
.yoklama-save-bar { margin-top: 20px; }

/* ── Üretim Formu (Adstar, makine bazlı) ────────────────────────────────── */
.uretim-bilgi-table { width: auto; max-width: 100%; margin: 0 0 18px; border-collapse: collapse; text-align: left; }
.uretim-bilgi-table th, .uretim-bilgi-table td { text-align: left; }
.uretim-bilgi-table th { padding: 8px 12px 8px 0; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.uretim-bilgi-table td { padding: 8px 0; }
.uretim-bilgi-table select, .uretim-bilgi-table input { padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; width: 100%; max-width: 260px; box-sizing: border-box; }
.operator-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.operator-chip-list:empty { margin-bottom: 0; }
.operator-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--primary-color); color: #fff; font-size: 12.5px; white-space: nowrap; }
.operator-chip-remove { background: rgba(255, 255, 255, 0.25); border: none; color: #fff; width: 18px; height: 18px; line-height: 1; border-radius: 50%; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0; }
.operator-chip-remove:hover { background: rgba(255, 255, 255, 0.45); }
#ihHammaddeTable .ih-torba, #ihHammaddeTable .ih-tuketim { width: 9ch; }
#ihOlcumTable .ih-olcum { width: 10ch; }
#lmHammaddeTable .lm-torba, #lmHammaddeTable .lm-tuketim { width: 9ch; }
#lmOlcumTable .lm-olcum { width: 10ch; }
#uretimSatirTable th, #uretimSatirTable td { padding: 8px 0.5mm; }
#uretimSatirTable thead th { white-space: normal; }
#uretimSatirTable input, #uretimSatirTable select { padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; box-sizing: border-box; }
#uretimSatirTable .kolon-sayi { width: 8ch; }
#uretimSatirTable .kolon-secim { width: 6.5ch; padding-left: 4px; padding-right: 4px; }
#uretimSatirTable .row-ebat { width: 10.8ch; }
#uretimSatirTable .row-firma { width: 12.5ch; }
#uretimSatirTable .row-urun_adi { width: 18ch; }
#uretimSatirTable tfoot th.uretim-toplam-satiri {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    text-align: left;
    white-space: normal;
}
#uretimSatirTable tfoot th.uretim-toplam-satiri span { display: block; text-align: left; margin-bottom: 4px; }
#uretimSatirTable tfoot th.uretim-toplam-satiri span:last-child { margin-bottom: 0; }

.row-actions { display: flex; gap: 6px; }
.icon-btn { background: #f4f6f8; border: none; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; color: var(--text-primary); }
.icon-btn:hover { background: var(--border-color); }
.btn-delete:hover { color: var(--danger-color); }

.data-table select, .data-table input[type="text"], .data-table input[type="number"] { padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 13px; white-space: normal; }
.data-table select.field-error { border-color: var(--danger-color); }

/* CF Hattı Katkı tablosundaki %/Kg sütunları (en fazla 5 haneli) - diğer sütunlardan (Hammadde
   seçimleri) çok daha kısa değer aldıkları için daraltılıyor, mobil ekranlarda yer kazandırır. */
#cfKatkiTable th:nth-child(5), #cfKatkiTable td:nth-child(5),
#cfKatkiTable th:nth-child(6), #cfKatkiTable td:nth-child(6) { width: 64px; }
#cfKatkiTable input.cf-narrow-input { width: 64px; max-width: 64px; }

/* CF Hattı/Dar Dokuma: kaydedilen üretim partisi/makine listesi - .tanim-item'ı tıklanabilir bir
   satır olarak kullanır (bkz. assets/js/cf-hatti-formu.js, assets/js/dar-dokuma-formu.js),
   üstüne tıklanınca o kayıt düzenlemeye açılır. */
.tanim-list-tiklanabilir .tanim-item { cursor: pointer; }
.tanim-list-tiklanabilir .tanim-item:hover { background: var(--border-color); }
.tanim-list-tiklanabilir .tanim-item.active { background: rgba(52, 152, 219, 0.15); }

/* Dar Dokuma/Granül listesindeki "Dar Dokuma No N:"/"Granül No N:" etiketi kalın + altı çizili
   (bkz. kullanıcı onayı, assets/js/dar-dokuma-formu.js + assets/js/granul-formu.js). */
.uretim-liste-etiket { text-decoration: underline; }

/* ── Norm Kadrolar sayfası (.norm-kadro-tablo-alan hem seçili bölümün Norm/Mevcut/Eksik
   tablolarını (#normKadroContent) hem de sayfa altındaki "Eksik Kadrolar (Tüm Bölümler)"
   özetini (#normKadroEksikOzet) sarıyor - ikisi de aynı görünümü paylaşır). ────────── */
.norm-kadro-tablo-alan h4 { margin: 18px 0 8px; font-size: 14px; color: var(--secondary-color); }
.norm-kadro-tablo-alan h4:first-child { margin-top: 0; }
.norm-bolum-toplam td { background: #f4f6f8; font-weight: 700; }
.norm-input { width: 56px; text-align: center; }
.norm-input:disabled { background: var(--page-bg); color: var(--text-muted); }
.norm-eksik-negatif { color: var(--danger-color); font-weight: 700; }

/* Satırları birbirinden ayırmak için bir satır atlamalı hafif turkuvaz zemin (Bölüm
   Toplamı satırı kendi rengini korur, çubuklama ona uygulanmaz). */
.norm-kadro-tablo-alan .data-table tbody tr:nth-child(even):not(.norm-bolum-toplam) td { background: #e3f6f5; }

/* Satır aralığı normal data-table'a göre %10 daha dar (10px -> 9px dikey boşluk).
   table-layout:fixed + sütun konumuna göre sabit genişlik, 3 ayrı tablonun (Norm/Mevcut/
   Eksik) "Alt Birim…Toplam" başlıklarının aynı hizada durmasını sağlar - Norm tablosundaki
   fazladan Kaydet sütunu (9 vardiya tipi + Toplam'dan sonraki 12. sütun) diğer iki
   tabloda hiç olmadığı için ayrı ele alınır. */
.norm-kadro-tablo-alan .data-table { table-layout: fixed; }
.norm-kadro-tablo-alan .data-table th, .norm-kadro-tablo-alan .data-table td { padding: max(0px, calc(9px - 2mm)) 11px; }
.norm-kadro-tablo-alan .data-table th:nth-child(1), .norm-kadro-tablo-alan .data-table td:nth-child(1) { width: 20%; white-space: normal; }
.norm-kadro-tablo-alan .data-table th:nth-child(n+2):nth-child(-n+11), .norm-kadro-tablo-alan .data-table td:nth-child(n+2):nth-child(-n+11) { width: calc(10% - 10mm); text-align: center; }
.norm-kadro-tablo-alan .data-table th:nth-child(n+2):nth-child(-n+11) { white-space: normal; }
.norm-kadro-tablo-alan .data-table th:nth-child(12), .norm-kadro-tablo-alan .data-table td:nth-child(12) { width: 40px; text-align: center; }

/* Başlığı "sayfa geneline" sticky yapmak, alt alta duran ayrı tablolar birbirine yakınken
   başlıkların iç içe/üst üste binmesine yol açıyordu (bir tablonun başlığı hâlâ sabitken
   bir alttaki tablonun satırlarıyla çakışıyordu). Bunun yerine her tablo KENDİ sınırlı
   yükseklikli kutusunda kaydırılır - başlık artık o kutuya göre sticky, tablolar
   birbirinden tamamen bağımsız ve çakışma riski yok. */
.norm-kadro-tablo-alan .table-wrap {
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.norm-kadro-tablo-alan .data-table th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--card-bg);
    font-weight: 700;
    color: #000;
}

/* Eksik gösteren tablolar (sayfa altındaki "Eksik Kadrolar (Tüm Bölümler)" özetindeki
   HER tablo, ve seçili bölümün kendi "Eksik Kadro" tablosu) kırmızı çerçeveyle uyarı verir. */
#normKadroEksikOzet .table-wrap { border-color: var(--danger-color); border-width: 2px; }
#normKadroContent .table-wrap:has(table[data-tablo="eksik"]) { border-color: var(--danger-color); border-width: 2px; }
/* Fazla (norm üstü) gösteren tablolar mavi çerçeveyle ayırt edilir. */
#normKadroFazlaOzet .table-wrap { border-color: var(--primary-color); border-width: 2px; }
.norm-fazla-pozitif { color: var(--primary-color); font-weight: 700; }

/* ── Üretim Verileri sayfası (listeleme tablosu) — Norm Kadrolar'daki başlık/çubuklama
   görünümüyle aynı: başlıklar siyah, bir kayıt atlamalı hafif turkuvaz zemin.
   - .uv-liste-table (üst özet tablosu): her kayıt 2 <tr> kaplıyor (özet satırı + gizli
     Detay satırı) - sadece ÖZET satırı (4n+1) renklenir. Detay satırının <td colspan>'ı
     BİLEREK renklenmiyor: renklenseydi, içindeki iç içe .uv-detay-table'ın kendi boş
     satırları (arka planı transparan) bu rengi olduğu gibi gösterir, ikisi ayırt
     edilemez hale gelirdi (bkz. ekran görüntüsüyle bildirilen "olmamış" sorunu).
   - .uv-detay-table (Detay içindeki satır/hammadde tablosu): normal tek satırlık kayıtlar,
     düz nth-child(even) ile başlıktan hemen sonraki satırdan itibaren dolu/boş sırayla döner. */
.uretim-verileri-tablo .data-table th { color: #000; }
.uretim-verileri-tablo .uv-liste-table tbody tr:nth-child(4n+1) td { background: #e3f6f5; }
.uretim-verileri-tablo .uv-detay-table tbody tr:nth-child(odd) td { background: #e3f6f5; }

/* Sayfada aynı anda birden fazla Detay tablosu (her kayıt kendi Detay'ında ayrı bir <table>)
   auto-layout ile İÇERİĞİNE göre bağımsız sütun genişliği hesaplıyordu - bu yüzden bir
   kayıttaki sütunlar bir alttaki/üstteki kayıttakiyle aynı hizada durmuyordu (her tablo kendi
   en uzun metnine göre farklı genişlikte). Sabit genişlik (Hammadde tabloları için burada
   yüzdelik, Üretim Formu satırları için değişken sütun sayısına göre JS'te satır içi stil —
   bkz. renderFormSatirlari) TÜM örneklerin, içeriklerinden bağımsız aynı hizada durmasını sağlar.
   white-space:normal genel olarak (hem Hammadde hem Üretim Formu satırları için) gerekli -
   aksi halde sabit dar sütunlarda uzun metinler taşar. */
.uretim-verileri-tablo .uv-detay-table th,
.uretim-verileri-tablo .uv-detay-table td { white-space: normal; }
.uretim-verileri-tablo .uv-hammadde-table { table-layout: fixed; }
.uretim-verileri-tablo .uv-hammadde-table th:nth-child(1), .uretim-verileri-tablo .uv-hammadde-table td:nth-child(1) { width: 5%; }
.uretim-verileri-tablo .uv-hammadde-table th:nth-child(2), .uretim-verileri-tablo .uv-hammadde-table td:nth-child(2) { width: 20%; }
.uretim-verileri-tablo .uv-hammadde-table th:nth-child(3), .uretim-verileri-tablo .uv-hammadde-table td:nth-child(3) { width: 20%; }
.uretim-verileri-tablo .uv-hammadde-table th:nth-child(4), .uretim-verileri-tablo .uv-hammadde-table td:nth-child(4) { width: 25%; }
.uretim-verileri-tablo .uv-hammadde-table th:nth-child(5), .uretim-verileri-tablo .uv-hammadde-table td:nth-child(5) { width: 15%; }
.uretim-verileri-tablo .uv-hammadde-table th:nth-child(6), .uretim-verileri-tablo .uv-hammadde-table td:nth-child(6) { width: 15%; }

/* Dokuma Detay'ındaki makine kırılım tablosu (renderDokumaMakineSatirlari) - 8 sabit sütun
   (Makine No, İletişim, Operatör, Üretim, Verimlilik, Hız, Çözgü Kopuşu, Atkı Kopuşu). */
.uretim-verileri-tablo .uv-dokuma-makine-table { table-layout: fixed; }
.uretim-verileri-tablo .uv-dokuma-makine-table th:nth-child(1), .uretim-verileri-tablo .uv-dokuma-makine-table td:nth-child(1) { width: 9%; }
.uretim-verileri-tablo .uv-dokuma-makine-table th:nth-child(2), .uretim-verileri-tablo .uv-dokuma-makine-table td:nth-child(2) { width: 7%; }
.uretim-verileri-tablo .uv-dokuma-makine-table th:nth-child(3), .uretim-verileri-tablo .uv-dokuma-makine-table td:nth-child(3) { width: 21%; }
.uretim-verileri-tablo .uv-dokuma-makine-table th:nth-child(4), .uretim-verileri-tablo .uv-dokuma-makine-table td:nth-child(4) { width: 14%; }
.uretim-verileri-tablo .uv-dokuma-makine-table th:nth-child(5), .uretim-verileri-tablo .uv-dokuma-makine-table td:nth-child(5) { width: 14%; }
.uretim-verileri-tablo .uv-dokuma-makine-table th:nth-child(6), .uretim-verileri-tablo .uv-dokuma-makine-table td:nth-child(6) { width: 11%; }
.uretim-verileri-tablo .uv-dokuma-makine-table th:nth-child(7), .uretim-verileri-tablo .uv-dokuma-makine-table td:nth-child(7) { width: 11%; }
.uretim-verileri-tablo .uv-dokuma-makine-table th:nth-child(8), .uretim-verileri-tablo .uv-dokuma-makine-table td:nth-child(8) { width: 13%; }

/* "İletişim" kolonu (Dokuma Detay) - √ yeşil (bağlı), ✗ kırmızı (bağlı değil), bkz.
   assets/js/uretim-verileri.js'deki iletisimHucresi(). */
.uv-iletisim-isaret { text-align: center; font-weight: 700; font-size: 15px; }
.uv-iletisim-var { color: var(--success-color); }
.uv-iletisim-yok { color: var(--danger-color); }

/* Bu vardiyada hiç üretmemiş ama o gün "İletişim Yok" loglanmış makineler için ("İletişim
   Olmayanları Gizle/Göster" butonuyla eklenen satırlar) - diğer satırlardan (nth-child zebra
   deseni) ayırt edilsin diye hafif kırmızımsı arka plan, ÖNCELİKLİ (!important). */
.uretim-verileri-tablo .uv-iletisimsiz-satir td { background: #fdecea !important; }

/* Dokuma makine tablosunun sıralanabilir başlıkları (bkz. bindDokumaMakineEtkilesimleri). */
.uretim-verileri-tablo .uv-dokuma-sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
.uretim-verileri-tablo .uv-dokuma-sort-th:hover { color: var(--primary-color); }
.uretim-verileri-tablo .uv-dokuma-sort-th i { font-size: 11px; margin-left: 3px; opacity: 0.6; }

/* Üretim Kayıtları'nın altındaki Dokuma "Vardiya Verimlilik Özeti" ek raporu
   (bkz. renderDokumaOzetRaporu) - ana tablodan görsel olarak ayrılsın diye üstte ince
   bir çizgi + boşluk. */
.uv-ozet-rapor { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-color); }
.uv-ozet-rapor h4 { margin: 0 0 12px; font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.uv-ozet-genel { margin: 0 0 14px; font-size: 14px; }
.uv-ozet-genel strong { font-size: 15px; }
.uv-ozet-ayrac { margin: 0 10px; color: var(--text-muted); }

/* Tesis 1 İplik Hattı (canlı) - her makine başlığının altındaki toplam üretim/segment sayısı
   özeti (bkz. renderIplikCanliTablosu). */
.uv-iplik-canli-ozet { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); }
.uv-iplik-canli-ozet strong { color: var(--text-primary); }

/* Segment tablosundaki EN GÜNCEL satır - kullanıcı isteğiyle hafif yeşil arka planla vurgulanıyor
   (bkz. renderIplikCanliTablosu) - sadece İplik segment tablosuyla sınırlı, diğer modüllerin
   paylaştığı .uv-liste-table'ı etkilemez. Detay ile açılan geçmiş segmentler ARTIK sönük DEĞİL
   (kullanıcı isteğiyle kaldırıldı - eskiden .uv-iplik-segment-tablosu tbody tr:not(...) { opacity }
   ile tüm geçmiş satırlar soluklaştırılıyordu). */
.uv-iplik-guncel-satir td { background: #e8f8ef !important; }

/* Detay ile açılan geçmiş segmentlerde "bir dolu bir boş" turkuaz şerit (kullanıcı isteği) -
   sayfanın genelindeki .uretim-verileri-tablo .uv-liste-table tbody tr:nth-child(4n+1) kuralı
   (her kaydın 2 <tr> - özet + gizli detay - kapladığı DİĞER tablolar için tasarlanmıştı) burada
   uygun değildi, her satır ayrı bir segment olduğu için düz tek-satır nth-child(odd) gerekiyor. */
.uv-iplik-segment-tablosu tbody tr:nth-child(odd) td { background: #e3f6f5; }

/* Kullanıcı/dış makinelere göre değişen içerik (ör. Detay butonu olan/olmayan tablolar) auto
   table-layout'ta HER makinenin tablosunu FARKLI oranlarda genişletip sütun başlıklarının
   makineden makineye kaymasına yol açıyordu (kullanıcı ekran görüntüsüyle bildirdi - "SARICIDAKI
   ÜRETİM KG" başlığı tablodan tabloya farklı yatay konumda görünüyordu). table-layout:fixed +
   SABİT yüzdelik genişlikler tüm İplik tablolarında (üst güncel satır + Detay ile açılan iç
   tablo - ikisi de AYNI 10 sütunu kullanır, iç tabloda son sütun boş kalır) birebir aynı sütun
   konumlarını garanti eder. */
.uv-iplik-segment-tablosu { table-layout: fixed; }
.uv-iplik-segment-tablosu th:nth-child(1), .uv-iplik-segment-tablosu td:nth-child(1) { width: 6%; }
.uv-iplik-segment-tablosu th:nth-child(2), .uv-iplik-segment-tablosu td:nth-child(2) { width: 16%; }
.uv-iplik-segment-tablosu th:nth-child(3), .uv-iplik-segment-tablosu td:nth-child(3) { width: 12%; }
.uv-iplik-segment-tablosu th:nth-child(4), .uv-iplik-segment-tablosu td:nth-child(4) { width: 9%; }
.uv-iplik-segment-tablosu th:nth-child(5), .uv-iplik-segment-tablosu td:nth-child(5) { width: 8%; }
.uv-iplik-segment-tablosu th:nth-child(6), .uv-iplik-segment-tablosu td:nth-child(6) { width: 8%; }
.uv-iplik-segment-tablosu th:nth-child(7), .uv-iplik-segment-tablosu td:nth-child(7) { width: 9%; }
.uv-iplik-segment-tablosu th:nth-child(8), .uv-iplik-segment-tablosu td:nth-child(8) { width: 11%; }
.uv-iplik-segment-tablosu th:nth-child(9), .uv-iplik-segment-tablosu td:nth-child(9) { width: 12%; }
.uv-iplik-segment-tablosu th:nth-child(10), .uv-iplik-segment-tablosu td:nth-child(10) { width: 9%; }

/* İletişim Var/Yok artık makine başlığının yanında Yeşil/Kırmızı bir "Led" noktası olarak
   gösteriliyor (kullanıcı isteği - önceden ayrı bir metin rozetiydi). Aynı .dot görsel deseni
   pass-legend'da (bkz. .pass-legend .dot) zaten var, burada makine başlığına özel boyut/renk. */
.uv-iplik-led { display: inline-block; width: 15px; height: 15px; border-radius: 60%; margin-left: 12px; vertical-align: middle; }
.uv-iplik-led-var { background: var(--success-color); }
.uv-iplik-led-yok { background: var(--danger-color); }
.uv-iplik-led-belirsiz { background: var(--text-muted); }

/* Vardiya kartları (bkz. renderDokumaOzetRaporu) - ÖNCEDEN tek geniş bir tablo idi; tezgah
   listeleri uzun olunca (bir vardiyada onlarca makine "problemli" olabilir) tablonun otomatik
   sütun genişliği hesaplaması sayfayı aşırı geniş yapıp sütunları görünmez kılıyordu (kullanıcı
   ekran görüntüsüyle bildirdi). Kart grid'i bu sorunu çözer: her kart kendi genişliğinde
   sarmalanır, grid dar ekranda otomatik satıra döker - artık yatay taşma riski yok. */
.uv-vardiya-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 14px; }
.uv-vardiya-kart { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 14px 16px; }
.uv-vardiya-kart-ust { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.uv-vardiya-harf { font-size: 15px; font-weight: 700; }
.uv-vardiya-istatistik { font-size: 13px; color: var(--text-secondary); }
.uv-vardiya-trend-svg-wrap { position: relative; margin: 6px 0 12px; }

/* Verimli/Problemli tezgah listeleri (bkz. dokumaTezgahListesi) - kart içinde yan yana iki
   sütun, her biri kendi rengiyle (yeşil/kırmızı) üst kenar çizgisiyle ayrılır. Liste çok uzarsa
   (onlarca tezgah "problemli" olabilir) kart aşırı uzamasın diye kaydırılabilir bir kutuya alınır. */
.uv-vardiya-tezgah-sutunlari { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uv-vardiya-tezgah-sutun { border-top: 3px solid var(--border-color); padding-top: 6px; }
.uv-vardiya-tezgah-sutun.uv-verimli { border-top-color: var(--success-color); }
.uv-vardiya-tezgah-sutun.uv-verimsiz { border-top-color: var(--danger-color); }
.uv-liste-baslik { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.uv-tezgah-liste { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow-y: auto; font-size: 12.5px; }
.uv-tezgah-liste li { padding: 2px 0; }

/* Dokuma "Üretim Eğilimi" - her vardiya kartının KENDİ kompakt sparkline grafiği (bkz.
   dokumaSparklineCiz) - eksen/ızgara yok, sadece şekil + hover'da tarih/değer. Tek seri
   olduğundan ayrı bir gösterge (legend) kutusu yok - kartın üstündeki rakam zaten neyin
   çizildiğini söylüyor. */
.uv-trend-svg { width: 100%; height: auto; display: block; overflow: visible; }
.uv-trend-alan { fill: var(--primary-color); opacity: 0.12; }
.uv-trend-cizgi { fill: none; stroke: var(--primary-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.uv-trend-son-halka { fill: var(--card-bg); }
.uv-trend-son-nokta { fill: var(--primary-color); }
.uv-trend-son-etiket { fill: var(--text-primary); font-size: 10px; font-weight: 600; }
.uv-trend-crosshair { stroke: var(--text-muted); stroke-width: 1; }
.uv-trend-hover-nokta { fill: var(--primary-color); stroke: var(--card-bg); stroke-width: 2; }
.uv-trend-hit { cursor: crosshair; }
.uv-trend-tooltip {
    position: absolute; transform: translateX(-50%); pointer-events: none;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px;
    padding: 6px 10px; font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); white-space: nowrap;
    z-index: 5;
}
.uv-trend-tooltip strong { display: block; margin-bottom: 2px; }
.uv-trend-tablo-btn { margin-bottom: 10px; }

/* Bölüm Kadrosu Tamam/Eksik rozeti "Düzenlemeyi Aç" butonunun hemen sağında görünsün diye
   - .filter-item'ın varsayılan dikey (column) düzenini burada yatay (row) çeviriyoruz. */
#normKadroKilitAlani { flex-direction: row; align-items: center; gap: 10px; }

/* ── Canias İş Merkezi sayfası ─────────────────────────────────────────── */
.canias-is-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.canias-is-kart { border: 1px solid var(--border-color); border-left: 4px solid var(--primary-color); border-radius: var(--radius); padding: 14px 16px; }
.canias-is-baslik { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--primary-color); margin-bottom: 8px; }
.canias-is-tarih { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.canias-is-satir { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
.canias-is-etiket { color: var(--text-muted); }
.canias-is-deger { font-weight: 600; text-align: right; }
.canias-is-rozet { margin-bottom: 8px; }
.canias-is-kart-pasif { opacity: 0.55; border-left-color: var(--text-muted); }
.canias-is-kart-tamamlandi { border-left-color: var(--success-color); }
.canias-is-aksiyon { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); }
.canias-is-baslatildi { font-size: 13px; font-weight: 600; color: var(--success-color); }
.canias-is-ilerleme { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.canias-is-durusta { font-size: 13px; font-weight: 600; color: var(--warning-color); }
.canias-is-aksiyon-butonlar { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.canias-tip-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.canias-tip-kart { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; text-align: center; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.canias-tip-kart:hover { border-color: var(--primary-color); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.canias-tip-adi { font-weight: 700; color: var(--primary-color); margin-bottom: 6px; }
.canias-tip-sayi { font-size: 13px; color: var(--text-muted); }
.canias-tip-makine-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.canias-tip-makine-satir { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; font-weight: 600; transition: box-shadow .15s, border-color .15s; }
.canias-tip-makine-satir:hover { border-color: var(--primary-color); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.canias-tip-makine-baslik { margin: 14px 0 4px; color: var(--primary-color); }

/* ── Makine Durumları sayfası ──────────────────────────────────────────── */
.makine-durum-sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 14px 0 22px; }
.makine-durum-sayi-kart { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 20px; text-align: center; }
.makine-durum-sayi { font-size: 32px; font-weight: 700; color: var(--primary-color); line-height: 1; }
.makine-durum-sayi-etiket { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.makine-durum-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: var(--radius); background: transparent; color: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.makine-durum-toggle:hover { border-color: var(--primary-color); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.makine-durum-toggle-sag { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.makine-durum-toggle .fa-chevron-down { transition: transform .15s; }
.makine-durum-toggle.acik .fa-chevron-down { transform: rotate(180deg); }
.makine-durum-liste { margin-top: 8px; }
.makine-durum-kutu-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.makine-durum-kutu { width: 100%; border-collapse: collapse; font-size: 14px; }
.makine-durum-kutu th, .makine-durum-kutu td { border: 1px solid var(--border-color); padding: 4px 8px; }
.makine-durum-kutu tbody th { text-align: left; font-weight: 400; white-space: nowrap; }
.makine-durum-kutu tbody td { text-align: right; font-weight: 600; }
.makine-durum-kutu thead th { font-weight: 700; color: var(--primary-color); text-align: left; }
.makine-durum-kutu thead th + th { text-align: right; }
.makine-durum-kutu-asim thead th { color: inherit; }
.makine-durum-kutu-asim th, .makine-durum-kutu-asim td { border-color: #dc3545; }
.makine-durum-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 12px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.makine-durum-satir-bilgi { display: flex; flex-direction: column; gap: 3px; }
.makine-durum-mc-no { font-weight: 700; color: var(--primary-color); }
.makine-durum-detay { font-size: 13px; color: var(--text-muted); }

/* ── Geçmiş Etiketler sayfası ──────────────────────────────────────────── */
.etiket-gecmis-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.etiket-gecmis-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 12px 16px; flex-wrap: wrap; }
.etiket-gecmis-satir-bilgi { display: flex; flex-direction: column; gap: 3px; }
.etiket-gecmis-is-emri { font-weight: 700; color: var(--primary-color); }
.etiket-gecmis-detay { font-size: 13px; color: var(--text-muted); }
.etiket-gecmis-tarih { font-size: 12px; color: var(--text-muted); }
.etiket-onizleme-modal-icerik { max-width: 420px; }
.etiket-onizleme { border: 2px solid var(--border-color); border-radius: var(--radius); padding: 16px; }
.etiket-onizleme-satir { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border-color); font-size: 14px; }
.etiket-onizleme-satir span { color: var(--text-muted); }
.etiket-onizleme-satir b { text-align: right; font-weight: 600; }
.etiket-onizleme-miktar { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; margin-top: 4px; border-bottom: 2px solid var(--border-color); font-size: 18px; }
.etiket-onizleme-miktar span { color: var(--text-muted); font-weight: 700; }
.etiket-onizleme-miktar b { font-size: 22px; }
.etiket-onizleme-qr-alani { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.etiket-onizleme-qr { flex: 1; border: 1px dashed var(--border-color); border-radius: var(--radius); padding: 18px 8px; text-align: center; color: var(--text-muted); }
.etiket-onizleme-qr i { font-size: 34px; display: block; margin-bottom: 6px; }
.etiket-onizleme-qr span { font-size: 12px; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-success { background: #e8f8ef; color: var(--success-color); }
.badge-danger { background: #fdecea; color: var(--danger-color); }
.badge-muted { background: #eef1f4; color: var(--text-muted); }
.badge-info { background: #eaf2fb; color: var(--primary-color); }
.badge-warning { background: #fef6e7; color: var(--warning-color); }

.menu-badge {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--danger-color); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal.open { display: flex; }
.modal-content { background: var(--card-bg); border-radius: var(--radius); width: 100%; max-width: 420px; padding: 22px; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ── Roller sayfası ──────────────────────────────────────────────────── */
.roles-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.roles-list { list-style: none; margin: 0; padding: 0; }
.role-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; margin-bottom: 4px; }
.role-item:hover { background: #f4f6f8; }
.role-item.active { background: rgba(52, 152, 219, 0.12); font-weight: 600; }

.perm-category { margin-bottom: 18px; }
.perm-category h4 { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.perm-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.perm-check input { width: auto; }

/* ── Stok Tanımları sayfası ──────────────────────────────────────────── */
.module-tabs { display: flex; gap: 6px; }
.module-tab { background: #eef1f4; color: var(--text-primary); border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.module-tab:hover { background: #e1e6ea; }
.module-tab.active { background: var(--primary-color); color: #fff; }

.tanim-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 14px; }
.tanim-group h4 { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tanim-add { display: flex; gap: 8px; margin-bottom: 10px; }
.tanim-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; }
.tanim-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tanim-item { display: flex; align-items: center; justify-content: space-between; background: #f4f6f8; border-radius: 8px; padding: 7px 10px; font-size: 13.5px; }
.tanim-actions { display: flex; gap: 2px; flex-shrink: 0; }
.tanim-edit, .tanim-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; }
.tanim-edit:hover { color: var(--primary-color, #4f46e5); }
.tanim-delete:hover { color: var(--danger-color); }

/* ── Raporlar sayfası ────────────────────────────────────────────────── */
.reports-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 14px; background: var(--page-bg); border-radius: 8px; margin-bottom: 18px; }
.reports-form .filter-item { min-width: 160px; margin-bottom: 0; }
.filter-item-btn { align-self: flex-end; }
.module-checkboxes { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.report-results { margin-top: 10px; }

/* ── Yazdırma (Raporlar → "PDF olarak kaydet") ──────────────────────── */
@media print {
    .sidebar, .topbar, .no-print, .reports-form, #reportTabs { display: none !important; }
    .content { padding: 0; }
    .card { box-shadow: none; padding: 0; }
}

.ai-chat-card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ai-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 320px;
    overflow-y: auto;
    padding: 12px;
    margin-bottom: 14px;
    background: var(--page-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.ai-chat-msg { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ai-chat-msg.user { align-self: flex-end; background: var(--primary-color); color: #fff; border-bottom-right-radius: 4px; }
.ai-chat-msg.assistant { align-self: flex-start; background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-primary); border-bottom-left-radius: 4px; }
.ai-chat-msg.typing { align-self: flex-start; background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-muted); font-style: italic; }
.ai-chat-msg-time { margin-top: 4px; font-size: 11px; text-align: right; opacity: 0.7; }
.ai-chat-msg.user .ai-chat-msg-time { color: rgba(255, 255, 255, 0.8); }
.ai-chat-msg.assistant .ai-chat-msg-time { color: var(--text-muted); }
.ai-chat-input-row { display: flex; gap: 10px; }
.ai-chat-input-row input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.ai-chat-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }

/* Gece modu - sadece mesaj alanını/baloncukları koyulaştırır, başlık aynı kalır. */
.ai-chat-card.ai-chat-gece .ai-chat-messages { background: #1a232e; border-color: #2b3949; }
.ai-chat-card.ai-chat-gece .ai-chat-msg.assistant,
.ai-chat-card.ai-chat-gece .ai-chat-msg.typing { background: #26313f; border-color: #33404f; color: #e6ecf3; }
.ai-chat-card.ai-chat-gece .ai-chat-msg.assistant .ai-chat-msg-time,
.ai-chat-card.ai-chat-gece .ai-chat-msg.typing.ai-chat-msg-time { color: #9fb0c3; }
.ai-chat-card.ai-chat-gece .ai-chat-input-row input[type="text"] { background: #1a232e; border-color: #2b3949; color: #e6ecf3; }
.ai-chat-color-picker {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

/* Sohbet sayfasının dış (main content) alanı sidebar/topbar ile aynı renkte
   (--secondary-color) tutulur - beyaz sohbet kartı bu koyu zemin üzerinde "yüzer"
   (login sayfasındaki .login-container ile aynı desen), display:flex + ai-chat-card'ın
   flex:1 olması sohbet penceresinin sayfanın en altına kadar uzamasını sağlar.
   :has(.tab-pane.active .ai-chat-card) - sadece :has(.ai-chat-card) YETERLİ DEĞİL: sekme
   sistemi (tabs.js) kapalı/pasif sekmeleri DOM'dan silmiyor, sadece gizliyor, ve :has()
   görünürlükten (display:none) etkilenmez, sadece DOM varlığına bakar - AI Sohbet sekmesi
   açık ama BAŞKA bir sekme aktifken bile eski hali hep eşleşip bu koyu-zemin/tam-yükseklik
   kurallarını yanlışlıkla TÜM sekmelere uygulardı (bölünmüş görünümde fark edildi).
   .tab-pane.active ile sadece o an gerçekten görüntülenen sekme AI Sohbet ise devreye girer. */
.content:has(.tab-pane.active .ai-chat-card) { background: var(--secondary-color); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* .ai-chat-card artık .content'in DOĞRUDAN değil .tab-pane sarmalayıcının içindeki çocuğu -
   bu sarmalayıcı da aynı flex zincirine (display:flex + flex:1 + min-height:0) dahil
   olmazsa üstteki kural etkisiz kalır, mesaj alanı taşar, yazı girişi görünür alanın
   dışına düşer. Scope gerekmez - gizli sekmelerde inline style="display:none" bunu
   geçersiz kılar. */
.tab-pane:has(.ai-chat-card) { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Dış çerçeve (sayfa/kart) hiç kaydırılmasın, SADECE mesaj listesi kendi içinde kaysın -
   bunun için tüm zincirin (body -> app-shell -> main-area) yüksekliği görünür alanla
   (100vh) SIKI SIKIYA sınırlanır (min-height değil), aksi halde içerik taştığında sayfa
   büyüyüp kayardı. .tab-pane.active şartı yukarıdaki AYNI gerekçeyle - sadece AI Sohbet
   sekmesi GERÇEKTEN aktifken geçerli, diğer sekmelerin normal kaydırmasını etkilemez. */
body:has(.tab-pane.active .ai-chat-card) { height: 100vh; overflow: hidden; }
.app-shell:has(.tab-pane.active .ai-chat-card) { height: 100vh; }
.main-area:has(.tab-pane.active .ai-chat-card) { min-height: 0; }
.ai-chat-card { overflow: hidden; }

/* ── Dokuma Şifre Kontrol (bkz. pages/pass.php, assets/js/pass.js) ─────────────────────
   Eskiden standalone tam-ekran bir sayfaydı (pass.php kökte, kendi <style> bloğu vardı) -
   artık normal bir sekme/route, bu yüzden bu stiller diğer tüm sayfalar gibi buraya taşındı. */
.pass-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.pass-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot-open { background: var(--success-color); }
.dot-locked { background: var(--danger-color); }
.dot-off { background: var(--text-muted); }
#refreshDot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--border-color); margin-right: 6px; transition: background .3s; }
#refreshDot.active { background: var(--success-color); }
.pass-updated { font-size: 13px; color: var(--text-muted); margin: 4px 0 14px; }

.pass-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 4px; }
@media (max-width: 480px) { .pass-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.pass-box {
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    min-height: 128px; justify-content: center;
    cursor: pointer; user-select: none;
    transition: border-color .3s ease, background .3s ease, transform .1s, opacity .1s, filter .1s;
    -webkit-tap-highlight-color: transparent;
}
.pass-box:not(.pass-box-off):not(.pass-box-no-toggle):active { transform: scale(.96); }
.pass-box.toggling, .pass-list-row.toggling { opacity: .25; filter: grayscale(.4); }
.pass-box-off, .pass-box-no-toggle { cursor: not-allowed; }
.pass-grid.locked-ui, .pass-list-wrap.locked-ui { opacity: .7; pointer-events: none; }

.pass-box-open { background: #e8f8ef; border-color: var(--success-color); }
.pass-box-locked { background: #fdecea; border-color: var(--danger-color); }
.pass-box-off { background: #f2f5f8; border-color: var(--border-color); }
.pass-box-unknown { background: #fef5e7; border-color: var(--warning-color); }

.pass-box-icon { font-size: 1.4rem; line-height: 1; }
.pass-box-name { font-size: 13px; font-weight: 700; color: var(--text-primary); text-align: center; }
.pass-box-hint { font-size: 11px; color: var(--text-muted); margin-top: -2px; }

.pass-box-pass {
    font-family: 'Courier New', monospace; font-size: 1.05rem; font-weight: 700;
    letter-spacing: .1em; color: var(--text-primary);
    background: rgba(255,255,255,.6); padding: 4px 10px; border-radius: 6px;
    min-width: 76px; text-align: center;
}
.pass-box-pass-empty { color: var(--text-muted); font-size: 13px; }
.pass-box-time { font-size: 11px; color: var(--text-muted); }
.pass-box-speed { font-size: 11px; font-weight: 600; color: var(--text-primary); }

.pass-tip-badge {
    display: inline-block; font-size: 10px; font-weight: 700; color: var(--text-muted);
    background: rgba(0,0,0,.06); border-radius: 4px; padding: 1px 5px; vertical-align: middle;
}

.pass-list-wrap { overflow-x: auto; margin-top: 4px; }
.pass-list-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pass-list-table th, .pass-list-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border-color); }
.pass-list-table th { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.pass-list-pass { font-family: 'Courier New', monospace; letter-spacing: .05em; }
.pass-list-table td.pass-list-speed { font-weight: 600; }
.pass-list-row { cursor: pointer; user-select: none; transition: background .15s, opacity .1s, filter .1s; -webkit-tap-highlight-color: transparent; }
.pass-list-row:not(.pass-box-off):not(.pass-box-no-toggle):hover { background: rgba(0,0,0,.03); }
.pass-list-row.pass-box-off, .pass-list-row.pass-box-no-toggle { cursor: not-allowed; }

@media (max-width: 900px) {
    .roles-layout { grid-template-columns: 1fr; }
    .sidebar { position: fixed; z-index: 200; height: 100%; left: -260px; }
    .sidebar.mobile-open { left: 0; }
    .mobile-menu-btn { display: inline-flex; }
    .sidebar-toggle { display: none; }
    .tab-bar { display: none; }

    /* Sohbet penceresi topbar'ın altından sabit yazma çubuğuna kadar tüm yüksekliği kaplar
       (display:flex + flex:1 zaten genel kuralda - burada sadece mobile özel padding/margin). */
    .content:has(.ai-chat-card) {
        padding: 13px 13px calc(65px + env(safe-area-inset-bottom, 0px));
    }
    .ai-chat-messages { margin-bottom: 10px; }
    .ai-chat-input-row {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        margin: 0;
        background: var(--card-bg);
        padding: 6px 14px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    }

    .welcome-card h2 { margin: 0 0 6px; font-size: 20px; }
    .welcome-card p { margin: 0; }
}