/* ==========================================================================
   TASARIM SİSTEMİ - TOKEN'LAR
   Renk, yazı, yarıçap, boşluk ve gölge değerlerinin TEK kaynağı. Bu iki
   bloğun dışında ham renk değeri yazılmaz (tests/test_ui_design_system.py).
   Anlamsal roller: primary, secondary, accent, surface, background, border,
   text, muted, success, warning, error, info (+ special, neutral, chrome).
   Her rolün alt token'ları: (yok)=dolgu, -hover, on-*=dolgu üstü metin,
   -soft=açık zemin, -text=yüzey üstü metin, -border=çerçeve.
   ========================================================================== */
:root, [data-theme="light"] {
    color-scheme: light;

    /* zemin ve yüzey */
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-subtle: #f8fafc;
    --color-surface-muted: #f1f5f9;
    --color-surface-strong: #e2e8f0;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-border-control: #7b8798;

    /* metin */
    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #586579;
    --color-text-inverse: #f8fafc;
    --color-on-solid: #ffffff;

    /* primary: marka laciverti */
    --color-primary: #1e3a8a;
    --color-primary-hover: #1e40af;
    --color-primary-active: #172f73;
    --color-on-primary: #ffffff;
    --color-primary-soft: #eff6ff;
    --color-primary-text: #1e40af;
    --color-primary-border: #3b82f6;

    /* secondary: nötr */
    --color-secondary: #e2e8f0;
    --color-secondary-hover: #cbd5e1;
    --color-on-secondary: #1e293b;

    /* accent: etkileşim mavisi (seçili, bağlantı, odak) */
    --color-accent: #2563eb;
    --color-accent-hover: #1d4ed8;
    --color-on-accent: #ffffff;
    --color-accent-soft: #eff6ff;
    --color-accent-text: #1d4ed8;
    --color-accent-border: #2563eb;

    --color-success: #15803d;
    --color-success-hover: #166534;
    --color-on-success: #ffffff;
    --color-success-soft: #f0fdf4;
    --color-success-text: #15803d;
    --color-success-border: #22c55e;

    --color-warning: #f59e0b;
    --color-on-warning: #422006;
    --color-warning-soft: #fffbeb;
    --color-warning-text: #92400e;
    --color-warning-border: #f59e0b;

    --color-error: #dc2626;
    --color-error-hover: #b91c1c;
    --color-on-error: #ffffff;
    --color-error-soft: #fef2f2;
    --color-error-text: #b91c1c;
    --color-error-border: #ef4444;

    --color-info: #0369a1;
    --color-on-info: #ffffff;
    --color-info-soft: #e0f2fe;
    --color-info-text: #075985;
    --color-info-border: #7dd3fc;

    /* special: mor/çivit vurgular (iletildi, planlı vb.) */
    --color-special: #4338ca;
    --color-on-special: #ffffff;
    --color-special-soft: #eef2ff;
    --color-special-text: #3730a3;
    --color-special-border: #a5b4fc;

    --color-neutral: #64748b;
    --color-whatsapp: #0e733c;
    --color-whatsapp-hover: #0b5f31;

    --color-focus-ring: #2563eb;
    --color-overlay: rgba(15, 23, 42, 0.65);
    --color-skeleton: #e2e8f0;
    --color-skeleton-shine: #f1f5f9;
    --color-chart-surface: #ffffff;

    /* chrome: üst başlık + sekme çubuğu (iki temada da koyu) */
    --color-chrome: #0f172a;
    --color-chrome-deep: #0b1220;
    --color-chrome-2: #1e293b;
    --color-chrome-3: #172036;
    --color-chrome-mid: #13204a;
    --color-chrome-brand: #1e3a8a;
    --color-chrome-border: #334155;
    --color-chrome-text: #ffffff;
    --color-chrome-text-muted: #a9b6c9;
    --color-chrome-hover: rgba(255, 255, 255, 0.06);
    --color-chrome-accent: #38bdf8;
    --color-chrome-accent-line: rgba(56, 189, 248, 0.55);
    --color-chrome-accent-glow: rgba(56, 189, 248, 0.22);
    --color-chrome-accent-soft: rgba(56, 189, 248, 0.16);
    --color-chrome-accent-none: rgba(56, 189, 248, 0);
    --color-chrome-fade: rgba(30, 41, 59, 0);
    --color-chrome-focus: #7dd3fc;
    --color-chrome-success: #10b981;
    --color-chrome-success-text: #a7f3d0;
    --color-chrome-success-soft: rgba(16, 185, 129, 0.16);
    --color-chrome-success-border: rgba(52, 211, 153, 0.7);
    --color-brand-1: #38bdf8;
    --color-brand-2: #2563eb;
    --color-brand-3: #4338ca;
    --color-brand-shadow: rgba(37, 99, 235, 0.55);
    --color-brand-gloss: rgba(255, 255, 255, 0.35);
    --color-brand-title-2: #e0f2fe;
    --color-brand-title-3: #7dd3fc;

    /* gölge renkleri */
    --color-shadow-1: rgba(15, 23, 42, 0.08);
    --color-shadow-2: rgba(15, 23, 42, 0.12);
    --color-shadow-3: rgba(15, 23, 42, 0.28);
    --color-focus-halo: rgba(37, 99, 235, 0.2);
    --color-error-halo: rgba(220, 38, 38, 0.3);
    --color-error-glow: rgba(220, 38, 38, 0.85);
    --color-success-halo: rgba(21, 128, 61, 0.3);

    /* SCADA (ISA-101 nötr palet) - durum renkleri temadan bağımsızdır */
    --scada-running: #7a8b7d;
    --scada-running-border: #5f6f62;
    --scada-idle: #cbd5e1;
    --scada-idle-text: #334155;
    --scada-planned: #64748b;
    --scada-planned-border: #475569;
    --scada-maintenance: #f59e0b;
    --scada-maintenance-alt: #fde68a;
    --scada-maintenance-text: #78350f;
    --scada-maintenance-border: #b45309;
    --scada-fault: #dc2626;
    --scada-fault-border: #991b1b;
    --scada-no-data: #f1f5f9;
    --scada-no-data-text: #475569;
    --scada-box: #e2e8f0;
    --scada-box-border: #94a3b8;
    --scada-select: #38bdf8;
    --scada-canvas: #0b1220;
    --scada-on-solid: #ffffff;
    --scada-on-running: #0f172a;

    /* tipografi ölçeği (kök %93,75 = 15px; kullanıcının metin boyutu tercihine uyar) */
    --text-root: 93.75%;
    /* Telefonda metin giriş alanlarının yazı boyutu alt sınırı. MUTLAK 16px (rem değil: kök 15px):
       iPhone Safari 16px'ten küçük alana odaklanınca sayfayı kendiliğinden büyütür ve geri küçültmez. */
    --text-touch-input: max(16px, var(--text-md));
    --text-2xs: 0.75rem;
    --text-xs: 0.8rem;
    --text-sm: 0.875rem;
    --text-md: 0.95rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.3rem;
    --text-2xl: 1.5rem;
    --text-display: 2.5rem;

    /* köşe yarıçapı ölçeği */
    --radius-2xs: 4px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* boşluk ölçeği (2px ızgarası üzerinde 4'ün katları) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --touch-target: 48px;
    --layout-max: 1200px;
    --shadow-sm: 0 1px 3px 0 var(--color-shadow-1);
    --shadow-md: 0 4px 6px -1px var(--color-shadow-2), 0 2px 4px -1px var(--color-shadow-1);
    --shadow-lg: 0 10px 15px -3px var(--color-shadow-2);
    --motion-fast: 0.15s;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #0b1220;
    --color-surface: #111a2e;
    --color-surface-subtle: #162038;
    --color-surface-muted: #1c2843;
    --color-surface-strong: #27365a;
    --color-border: #26344f;
    --color-border-strong: #36476b;
    --color-border-control: #7286ab;

    --color-text: #e6edf7;
    --color-text-secondary: #b6c2d6;
    --color-text-muted: #9aa8bd;
    --color-text-inverse: #0b1220;
    --color-on-solid: #ffffff;

    --color-primary: #2f55c8;
    --color-primary-hover: #3a60d8;
    --color-primary-active: #2848ab;
    --color-on-primary: #ffffff;
    --color-primary-soft: #16254d;
    --color-primary-text: #93b4ff;
    --color-primary-border: #3b82f6;

    --color-secondary: #27365a;
    --color-secondary-hover: #324570;
    --color-on-secondary: #e6edf7;

    --color-accent: #2563eb;
    --color-accent-hover: #1d4ed8;
    --color-on-accent: #ffffff;
    --color-accent-soft: #13264f;
    --color-accent-text: #8ab4ff;
    --color-accent-border: #3b82f6;

    --color-success: #15803d;
    --color-success-hover: #166534;
    --color-on-success: #ffffff;
    --color-success-soft: #0f2a1d;
    --color-success-text: #6ee7a0;
    --color-success-border: #1f9d55;

    --color-warning: #f59e0b;
    --color-on-warning: #1f1300;
    --color-warning-soft: #33240a;
    --color-warning-text: #fcd34d;
    --color-warning-border: #b7791f;

    --color-error: #dc2626;
    --color-error-hover: #b91c1c;
    --color-on-error: #ffffff;
    --color-error-soft: #3a1418;
    --color-error-text: #fca5a5;
    --color-error-border: #dc2626;

    --color-info: #0369a1;
    --color-on-info: #ffffff;
    --color-info-soft: #0c2a44;
    --color-info-text: #7dd3fc;
    --color-info-border: #0ea5e9;

    --color-special: #4338ca;
    --color-on-special: #ffffff;
    --color-special-soft: #1e1b4b;
    --color-special-text: #c4b5fd;
    --color-special-border: #6366f1;

    --color-neutral: #64748b;
    --color-whatsapp: #0e733c;
    --color-whatsapp-hover: #0b5f31;

    --color-focus-ring: #60a5fa;
    --color-overlay: rgba(2, 6, 23, 0.78);
    --color-skeleton: #1c2843;
    --color-skeleton-shine: #27365a;
    --color-chart-surface: #f8fafc;

    --color-chrome: #0f172a;
    --color-chrome-deep: #070d1a;
    --color-chrome-2: #1e293b;
    --color-chrome-3: #172036;
    --color-chrome-mid: #13204a;
    --color-chrome-brand: #1e3a8a;
    --color-chrome-border: #334155;
    --color-chrome-text: #ffffff;
    --color-chrome-text-muted: #a9b6c9;
    --color-chrome-hover: rgba(255, 255, 255, 0.06);
    --color-chrome-accent: #38bdf8;
    --color-chrome-accent-line: rgba(56, 189, 248, 0.55);
    --color-chrome-accent-glow: rgba(56, 189, 248, 0.22);
    --color-chrome-accent-soft: rgba(56, 189, 248, 0.16);
    --color-chrome-accent-none: rgba(56, 189, 248, 0);
    --color-chrome-fade: rgba(30, 41, 59, 0);
    --color-chrome-focus: #7dd3fc;
    --color-chrome-success: #10b981;
    --color-chrome-success-text: #a7f3d0;
    --color-chrome-success-soft: rgba(16, 185, 129, 0.16);
    --color-chrome-success-border: rgba(52, 211, 153, 0.7);
    --color-brand-1: #38bdf8;
    --color-brand-2: #2563eb;
    --color-brand-3: #4338ca;
    --color-brand-shadow: rgba(37, 99, 235, 0.55);
    --color-brand-gloss: rgba(255, 255, 255, 0.35);
    --color-brand-title-2: #e0f2fe;
    --color-brand-title-3: #7dd3fc;

    --color-shadow-1: rgba(0, 0, 0, 0.35);
    --color-shadow-2: rgba(0, 0, 0, 0.45);
    --color-shadow-3: rgba(0, 0, 0, 0.6);
    --color-focus-halo: rgba(96, 165, 250, 0.3);
    --color-error-halo: rgba(220, 38, 38, 0.4);
    --color-error-glow: rgba(248, 113, 113, 0.9);
    --color-success-halo: rgba(21, 128, 61, 0.4);
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html { font-size: var(--text-root); }

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

body { font-size: var(--text-base); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Header */
.app-header {
    /* [kullanıcı isteği, 2026-10] Düz lacivert yerine derinlikli degrade +
       sağ üstte hafif mavi parıltı: başlık "daha etkileyici" dursun. */
    background-color: var(--color-chrome);
    background-image:
        radial-gradient(120% 140% at 100% 0%, var(--color-chrome-accent-glow) 0%, var(--color-chrome-accent-none) 55%),
        linear-gradient(115deg, var(--color-chrome-deep) 0%, var(--color-chrome-mid) 55%, var(--color-chrome-brand) 100%);
    color: var(--color-chrome-text);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 8px;
    border-bottom: 2px solid var(--color-accent-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 6px 18px var(--color-shadow-3), 0 1px 0 var(--color-chrome-accent-line);
    min-height: 54px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Simge: degrade zeminli, hafif parlayan bir "uygulama simgesi" karosu. */
.brand-icon {
    font-size: var(--text-xl);
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: linear-gradient(140deg, var(--color-brand-1) 0%, var(--color-brand-2) 55%, var(--color-brand-3) 100%);
    box-shadow: 0 4px 12px var(--color-brand-shadow), inset 0 1px 0 var(--color-brand-gloss);
}

.brand-title {
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.15;
    white-space: nowrap;
    color: var(--color-chrome-text);
}

/* Beyazdan açık maviye degrade yazı - yalnızca ana uygulamanın başlığında
   (simgesi ayrı bir karoda). Bağımsız sayfaların başlığı emoji içerir; metin
   dolgusu saydamlaştırılınca emoji boş bir kareye dönüşüyordu. */
.brand-badge .brand-title {
    background: linear-gradient(90deg, var(--color-chrome-text) 0%, var(--color-brand-title-2) 45%, var(--color-brand-title-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.facility-tag {
    font-size: var(--text-2xs);
    color: var(--color-brand-title-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    display: block;
    margin-top: 1px;
}

.header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    row-gap: 6px;
}

/* 2026-09 kullanıcı geri bildirimi: "yukarda gereksiz bir boşluk var, 3'ü
yan yana dursun" - izleme/profil/çıkış butonları .header-right içindeki
DİĞER öğelerle (rozetler, kullanıcı adı) birlikte TEK TEK sarmalanınca çıkış
butonu yalnız kalıp kendi satırına düşüyor, üstünde boşluk bırakıyordu.
flex-shrink:0 + kendi flex-wrap:nowrap'i ile bu 3 buton HER ZAMAN bir arada
kalan tek bir birim olur - ya rozet satırının sonuna sığar ya HEPSİ birlikte
bir sonraki satıra iner, asla bölünmezler. */
.header-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 6px;
}

.shift-badge-pill {
    background-color: var(--color-chrome-success-soft);
    border: 1px solid var(--color-chrome-success-border);
    color: var(--color-chrome-success-text);
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.live-dot {
    width: 7px;
    height: 7px;
    background-color: var(--color-chrome-success);
    border-radius: var(--radius-circle);
    display: inline-block;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

/* Nav tabs */
.app-nav {
    display: flex;
    background-color: var(--color-chrome-2);
    background-image: linear-gradient(180deg, var(--color-chrome-3) 0%, var(--color-chrome-2) 100%);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-chrome-border);
    position: sticky;
    top: 54px;
    z-index: 90;
}

.app-nav::-webkit-scrollbar { display: none; }

.nav-tab {
    flex: 1;
    min-width: 64px;
    min-height: 48px;
    padding: 8px 4px;
    background: none;
    border: none;
    color: var(--color-chrome-text-muted);
    font-size: var(--text-2xs);
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    white-space: normal;
    overflow: hidden;
    text-align: center;
    line-height: 1.15;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.nav-tab:hover {
    color: var(--color-chrome-text);
    background-color: var(--color-chrome-hover);
}

.nav-tab.active {
    background-image: linear-gradient(180deg, var(--color-chrome-accent-none) 0%, var(--color-chrome-accent-soft) 100%);
}

.tab-icon { font-size: var(--text-lg); }

/* Main container */
.app-main {
    width: 100%;
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 12px;
}

.tab-pane { display: none; }
/* Kullanıcı geri bildirimi (2026-09): sabit (position:fixed) duran
   .floating-feedback-btn sağ-altta duruyor; bir formun en alttaki
   butonu (ör. "ARIZA KAYDINI TAMAMLA") tam sayfa sonuna kadar
   kaydırıldığında bu sabit butonla AYNI ekran bölgesine denk gelip
   dokunuşu kapıyordu - masaüstünde fare imleciyle tam isabet ettirmek
   kolay olduğundan fark edilmiyordu, telefonda parmakla dokunuşu
   engelliyordu. Her sekmenin altına, sabit butonun kapladığı alandan
   (~68px) daha fazla boşluk ekleyerek, tam kaydırıldığında son
   butonun hep bu bölgenin ÜSTÜNDE kalmasını sağlıyoruz. */
.tab-pane.active { display: block; padding-bottom: 90px; }

/* Cards */
.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    margin-bottom: 14px;
}

.card-header {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.card-title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-text);
}

.card-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Steps */
.form-step {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.form-step:last-of-type { border-bottom: none; }

.step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: var(--text-md);
    margin-bottom: 10px;
    color: var(--color-text);
}

.step-number {
    background-color: var(--color-primary);
    color: var(--color-on-solid);
    width: 26px;
    height: 26px;
    border-radius: var(--radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
}

.required-badge {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-error-text);
    margin-left: auto;
}

/* Input styles */
.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.form-control {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-size: var(--text-md);
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Filtre satırlarındaki kısa alanlar (tarih aralığı vb.): satırı doldurmaz,
   yanındaki etiket ve düğmelerle aynı hizada kalır. */
.form-control--inline {
    width: auto;
    min-height: 36px;
    padding: 4px 8px;
}

.form-control:focus {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-focus-halo);
}

.input-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-search-wrapper .form-control {
    padding-right: 44px;
}

.btn-clear-search {
    position: absolute;
    right: 4px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-clear-search:hover { color: var(--color-text-secondary); }

/* Machine Auto-Suggestions & Search Results */
.machine-results-container {
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    margin-top: 6px;
    box-shadow: var(--shadow-md);
}

.machine-result-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.15s;
}

.machine-result-item:hover, .machine-result-item:focus {
    background-color: var(--color-primary-soft);
}

.machine-result-item:last-child { border-bottom: none; }

.btn-select-machine {
    min-height: 48px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text);
    font-family: inherit;
}

.btn-select-machine .m-code {
    font-weight: 800;
    color: var(--color-accent-text);
    font-size: var(--text-md);
}

.btn-select-machine .m-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.btn-select-machine .m-area {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Selected Machine Card */
.selected-card {
    /* Boşluksuz çok uzun metin (seri no, yapıştırılmış bağlantı) kartı taşırmasın. */
    overflow-wrap: anywhere;
    min-width: 0;
    background-color: var(--color-success-soft);
    border: 1.5px solid var(--color-success-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

/* Kayıtlarım > Eşlik Ettiklerim: eşlikçinin kendi süresini girdiği liste (history-excel-view.js). */
.companion-card {
    display: block;
    margin-top: 0;
    background-color: var(--color-surface);
    border-color: var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.companion-card strong { color: var(--color-primary-text); }
.companion-list { display: flex; flex-direction: column; gap: 10px; }
.companion-row, .companion-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px; }
.companion-filters, .companion-entry label { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-secondary); }
.companion-filters { margin-bottom: 10px; }
.companion-entry { margin-top: 8px; }
.companion-entry input { width: 96px; }
.companion-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 8px; }
.companion-note { background: var(--color-surface-subtle); padding: 6px; border-radius: var(--radius-2xs); margin-bottom: 4px; }

.selected-card-info strong {
    display: block;
    font-size: var(--text-base);
    color: var(--color-success-text);
}

.selected-card-info span {
    font-size: var(--text-sm);
    color: var(--color-success-text);
}

/* Category Buttons (12 Categories) */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.btn-cat {
    min-height: 48px;
    padding: 8px 10px;
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.15s;
}

.btn-cat:hover { background-color: var(--color-surface-strong); }


/* Failure Types Chips */
.failure-types-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding: 4px;
}

.chip-failure-type {
    min-height: 48px;
    padding: 8px 10px;
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.15s;
}

.chip-failure-type:hover {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border-control);
}


/* Toggles and Duration Buttons */
.toggle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.btn-toggle {
    min-height: 48px;
    padding: 8px;
    background-color: var(--color-surface-muted);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}



.durations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.btn-duration {
    min-height: 48px;
    background-color: var(--color-surface-muted);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.btn-duration:hover { background-color: var(--color-surface-strong); }


/* Submit Button */
.btn-submit-lg {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    background-color: var(--color-success);
    color: var(--color-on-solid);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px var(--color-success-halo);
    transition: background-color 0.15s, transform 0.1s;
}

.btn-submit-lg:hover:not(:disabled) {
    background-color: var(--color-success-hover);
}

.btn-submit-lg:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Standard Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    text-decoration: none;
}

.btn-sm {
    min-height: 38px;
    padding: 4px 10px;
    font-size: var(--text-xs);
}

.btn-primary { background-color: var(--color-primary); color: var(--color-on-primary); }
.btn-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }
.btn-danger { background-color: var(--color-error); color: var(--color-on-error); }
/* WhatsApp paylaşım bağlantısı (bkz. static/js/share.js) - <a> olduğu için
   alt çizgi kaldırılıyor; renk WhatsApp yeşili, beyaz metinle yeterli kontrast. */
.btn-whatsapp { background-color: var(--color-whatsapp); color: var(--color-on-solid); text-decoration: none; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background-color: var(--color-whatsapp-hover); color: var(--color-on-solid); }
/* Sık satırlı tablolarda (Excel görünümü, Makine Detay) satırları .btn-sm'in
   38px minimum yüksekliğine şişirmesin. */
.excel-view-table .btn-whatsapp { min-height: 0; padding: 2px 6px; }

/* 2026-09: kullanıcı isteğiyle - "Yönetim" personel listesi (ve benzer
kullanıcı kartı görünümleri) referans tasarımdaki gibi - yuvarlak
baş harfli avatar + kart düzeni, mevcut renk şemamızla. */
.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-circle);
    flex-shrink: 0;
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-weight: 800;
    font-size: var(--text-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2026-09: kullanıcı isteğiyle - referans tasarımdaki gibi ekranın her
yerinde sabit duran, metinli bir "Geri Bildirim" hap butonu (mevcut
--primary-navy renk şemamızla). */
.floating-feedback-btn {
    /* 2026-09: kullanıcı isteğiyle - "aşağıda yandan çıkmalı" - ekranın SAĞ
    KENARINA yapışık, aşağıda duran bir "sekme/tab" gibi (sağ köşesi
    yuvarlatılmamış, kenardan çıkıyormuş gibi), önceki her iki köşesi
    yuvarlak, kenardan boşluklu hap tasarımının yerine. */
    position: fixed;
    right: 0;
    bottom: 24px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-primary);
    color: var(--color-on-solid);
    border: none;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    padding: 12px 18px 12px 20px;
    font-size: var(--text-md);
    font-weight: 700;
    box-shadow: -2px 4px 12px var(--color-shadow-3);
    cursor: pointer;
}
.floating-feedback-btn:hover { background-color: var(--color-primary-hover); }

/* 2026-09: kullanıcı isteğiyle - "QR kod menüsü nerde" - üst sekme çubuğu
her zaman yatay kaydırılabilirdi (overflow-x:auto) ama scrollbar GİZLİ
(scrollbar-width:none), yani ekrana sığmayan sekmeler (QR Kod Oluştur,
Geri Bildirimler eklenince) hiçbir görsel ipucu olmadan fark edilmiyordu.
Bu, sekme çubuğunun sağına, daha fazla sekme olduğunu gösteren soluk bir
ok/gradient ipucu ekler - sadece gerçekten kaydırılabilir VE henüz sona
gelinmemişken görünür (bkz. setupNavScrollHint, init.js). */
.nav-scroll-hint {
    position: fixed;
    right: 0;
    width: 30px;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, var(--color-chrome-fade), var(--color-chrome-2) 55%);
    color: var(--color-chrome-text);
    font-size: var(--text-lg);
    font-weight: 800;
    pointer-events: none;
    animation: navScrollHintPulse 1.6s ease-in-out infinite;
}
@keyframes navScrollHintPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    overflow-wrap: normal;
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: var(--text-2xs);
    font-weight: 700;
}
.badge-info { background: var(--color-primary-soft); color: var(--color-primary-text); }
.badge-success { background: var(--color-success-soft); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.badge-danger { background: var(--color-error-soft); color: var(--color-error-text); }

/* Excel Görünümü tablosu */
.excel-view-scroll {
    overflow-x: auto;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    max-height: 60vh;
    overflow-y: auto;
}

/* Tutup sürükleyerek kaydırma (bkz. utils.js setupDragToScroll). */
.excel-view-scroll.is-pannable { cursor: grab; }
.excel-view-scroll.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }

.excel-view-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--text-xs);
    white-space: nowrap;
}

.excel-view-table th,
.excel-view-table td {
    border: 1px solid var(--color-border-strong);
    padding: 4px 8px;
    text-align: left;
}

.excel-view-table thead th {
    position: sticky;
    top: 0;
    background-color: var(--color-primary);
    color: var(--color-on-solid);
    font-weight: 700;
    z-index: 1;
}

.excel-view-table tbody tr:nth-child(even) {
    background-color: var(--color-surface-subtle);
}

.excel-view-table tbody tr:hover {
    background-color: var(--color-primary-soft);
}

/* [geri bildirim, 2026-10-14] Geniş tabloda yatay kaydırınca ilk sütun (isim) solda sabit kalır:
   hangi satırın kime ait olduğu kaybolmasın. Zemin OPAK olmalı (şeffafsa kaydırılan rakamlar
   isimle üst üste biner); çift satır ve üzerine gelme renkleri de sabit hücreye ayrıca verilir. */
.excel-view-table.sticky-first-col th:first-child,
.excel-view-table.sticky-first-col td:first-child {
    position: sticky;
    left: -1px; /* birleşik kenarlığın dış yarısı da örtülür: kaydırılan sütunun kırıntısı sol kenarda görünmez */
    box-shadow: inset -1px 0 0 var(--color-border-strong);
}
.excel-view-table.sticky-first-col tbody td:first-child {
    background-color: var(--color-surface);
    font-weight: 700;
    z-index: 1;
}
.excel-view-table.sticky-first-col tbody tr:nth-child(even) td:first-child {
    background-color: var(--color-surface-subtle);
}
.excel-view-table.sticky-first-col tbody tr:hover td:first-child {
    background-color: var(--color-primary-soft);
}
.excel-view-table.sticky-first-col thead th:first-child {
    z-index: 2; /* hem üstte (thead) hem solda (ilk sütun) sabit: diğer başlıkların da üstünde */
}

/* Responsive Media Queries */

/* [geri bildirim, 2026-10-15] "Arıza kaydı girerken ekran kendi kendine sürekli büyüyor": telefonda
   (dar ekran ya da dokunmatik) metin giriş alanları en az 16px. Yakınlaştırma KAPATILMAZ (AX-001);
   !important, filtre satırlarındaki satır içi küçük yazı boyutlarını da kapsamak içindir. */
@media (max-width: 768px), (pointer: coarse) {
    input, select, textarea { font-size: var(--text-touch-input) !important; }
}

/* Yan yana alanlar (tarih + saat) büyüyen yazıyla dar ekranda yana taşmasın: esnek kutudaki form grubu
   ve alanı, içeriğinin doğal genişliğinin altına daralabilsin. */
.form-group, .form-control { min-width: 0; }

@media (max-width: 360px) {
    .durations-grid { grid-template-columns: repeat(2, 1fr); }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .app-header { padding: 6px 8px; }
    .brand-title { font-size: var(--text-md); }
}

@media (max-width: 480px) {
    .app-main { padding: 8px; }
    .card { padding: 12px; }
}

@media (min-width: 768px) {
    .durations-grid { grid-template-columns: repeat(8, 1fr); }
    .categories-grid { grid-template-columns: repeat(4, 1fr); }
}


/* Modal Overlay */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-overlay);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.modal.open {
    display: flex !important;
}
.modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-strong);
    animation: modalIn 0.2s ease-out;
}
@keyframes modalIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 2026-09: kullanıcı isteğiyle - Aylık KPI Trendleri grafiklerinin her
   birinin ne anlama geldiğini "i" butonuna basınca net biçimde açıklayan
   bilgi kutusu (CEO sunumu netliği için). */
.reporting-info-btn {
    border: none;
    background: var(--color-primary-soft);
    color: var(--color-accent-text);
    width: 24px;
    height: 24px;
    min-height: 24px;
    border-radius: var(--radius-circle);
    font-weight: 800;
    font-size: var(--text-2xs);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.reporting-info-btn:hover {
    background: var(--color-surface-strong);
}
.reporting-chart-info {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent-border);
    border-radius: var(--radius-xs);
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* [1.3] Aktif iş talebi köprüsü şeridi */
.active-wr-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--color-primary-soft); border: 1px solid var(--color-primary-border); border-radius: var(--radius-sm);
    padding: 10px 14px; margin-bottom: 14px; font-size: var(--text-md); color: var(--color-primary-text);
}
.btn-clear-wr {
    background: transparent; border: 1px solid var(--color-primary-border); color: var(--color-primary-text);
    border-radius: var(--radius-xs); padding: 6px 12px; min-height: 36px; cursor: pointer;
    font-size: var(--text-sm); white-space: nowrap;
}
.btn-clear-wr:hover { background: var(--color-primary-hover); color: var(--color-on-solid); }


/* [denetim] "Çözüldü" aksiyonu (açık kaydı kapatma) - .btn-success tanımlı değildi,
   buton stilsiz kalıyordu. */
.btn-success {
    background: var(--color-success); color: var(--color-on-solid); border: 1px solid var(--color-success-border);
}
.btn-success:hover { background: var(--color-success-hover); }

/* [görsel kalite yükseltmesi, kullanıcı isteğiyle 2026-09-19] Raporlama'daki
   KPI kartlarına hafif bir yükselme/gölge - #reportingDashboardCard ile
   KAPSANMIŞ, .selected-card sınıfının uygulamanın GERİ KALANINDAKİ (seçili
   makine kartı, bülten kartı vb.) kullanımlarını ETKİLEMEZ. */
#reportingDashboardCard .selected-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--shadow-sm);
}
#reportingDashboardCard .selected-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Proseal SCADA (kullanıcı isteğiyle, 2026-09-19) - ISA-101 nötr renk
   paleti: parlak/dikkat dağıtıcı renklerden bilerek kaçınılıyor, sadece
   ARIZALI durumu gerçek anlamda göz alıcı (kırmızı) - bkz. brief madde 4
   "renkler yalnızca anormal durumu vurgulamak için kullanılmalı". */
.scada-legend-swatch {
    display:inline-block; width:14px; height:14px; border-radius:var(--radius-2xs);
    border:1px solid var(--scada-box-border); margin-right:6px; vertical-align:middle;
}
.scada-legend-hatch {
    background-image: repeating-linear-gradient(45deg, var(--scada-maintenance), var(--scada-maintenance) 3px, var(--scada-maintenance-alt) 3px, var(--scada-maintenance-alt) 6px);
}
.scada-component-box {
    border:1px solid var(--scada-box-border); border-radius:var(--radius-sm); padding:10px 12px;
    background:var(--scada-box); color:var(--scada-idle-text); transition: box-shadow 0.15s ease;
}
.scada-component-box.scada-status-running { background:var(--scada-running); color:var(--scada-on-running); border-color:var(--scada-running-border); }
.scada-component-box.scada-status-idle { background:var(--scada-idle); color:var(--scada-idle-text); }
.scada-component-box.scada-status-planned_stop { background:var(--scada-planned); color:var(--scada-on-solid); border-color:var(--scada-planned-border); }
.scada-component-box.scada-status-maintenance {
    background-image: repeating-linear-gradient(45deg, var(--scada-maintenance), var(--scada-maintenance) 6px, var(--scada-maintenance-alt) 6px, var(--scada-maintenance-alt) 12px);
    color:var(--scada-maintenance-text); border-color:var(--scada-maintenance-border);
}
.scada-component-box.scada-status-fault { background:var(--scada-fault); color:var(--scada-on-solid); border-color:var(--scada-fault-border); box-shadow:0 0 0 2px var(--color-error-halo); }
.scada-component-box.scada-status-no_data { background:var(--scada-no-data); color:var(--scada-no-data-text); border-style:dashed; }

/* [kullanıcı isteği, 2026-09-20] scada-diagram.js akış şeması - kutu
   renkleri yukarıdaki .scada-status-* paletiyle JS içinde birebir eşleşir
   (SVG fill CSS class'a bağlı değil, bkz. _scadaDiagramStatusFill). Burada
   sadece konveyör bağlantı çizgisinin "hareket ediyor" hissi veren animasyon
   ve seçili kutunun vurgusu tanımlanır. */
.scada-diagram-conveyor-belt { animation: scada-diagram-flow 0.9s linear infinite; }
@keyframes scada-diagram-flow { to { stroke-dashoffset: -36; } }
.scada-diagram-node.scada-diagram-selected rect:first-of-type { stroke: var(--scada-select); stroke-width: 3; }
.scada-diagram-node { transition: opacity 0.15s ease; }
.scada-diagram-glow-pulse { animation: scada-diagram-pulse 1.4s ease-in-out infinite; }
@keyframes scada-diagram-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }

/* [kullanıcı isteği, 2026-09-20: "endüstri altın standardı scada editörü"]
   2D proses şeması (scada-2d.js). Seçili bileşen açık mavi çerçeve alır,
   arıza LED'i yanıp söner, boru akış animasyonu sadece kaynak bileşen
   gerçekten 'running' iken uygulanır (sınıf JS'te koşullu eklenir). */
.scada2d-svg { display: block; max-height: 82vh; user-select: none; -webkit-user-select: none; }
.scada2d-node { cursor: pointer; transition: opacity 0.15s ease; }
.scada2d-node:focus { outline: none; }
.scada2d-node:hover .scada2d-card, .scada2d-node:focus-visible .scada2d-card { stroke-width: 3.4; }
.scada2d-node.scada2d-selected .scada2d-card { stroke: var(--scada-select); stroke-width: 3.6; stroke-dasharray: none; }
.scada2d-editing { touch-action: none; }
.scada2d-editing .scada2d-node { cursor: grab; }
.scada2d-editing .scada2d-node:active { cursor: grabbing; }
.scada2d-fault-led { animation: scada-diagram-pulse 1.1s ease-in-out infinite; }
.scada2d-flow { animation: scada2d-flow 0.9s linear infinite; }
@keyframes scada2d-flow { to { stroke-dashoffset: -24; } }
.scada2d-edit-badge {
    font-size: var(--text-xs); font-weight: 700; color: var(--color-warning-text); background: var(--color-warning-soft);
    border: 1px solid var(--color-warning-border); border-radius: var(--radius-pill); padding: 4px 10px;
}
#scadaDiagram2D:fullscreen { background: var(--scada-canvas); display: flex; align-items: center; justify-content: center; }
#scadaDiagram2D:fullscreen .scada2d-svg { max-height: 100vh; }
@media (prefers-reduced-motion: reduce) {
    .scada2d-flow, .scada2d-fault-led { animation: none; }
}

/* ==========================================================================
   TASARIM SİSTEMİ - ORTAK DURUMLAR
   Her etkileşimli bileşen için: hover, focus-visible, active, seçili,
   devre dışı, yükleniyor. Bileşene özel renkler yukarıda; buradakiler tüm
   bileşenlerin PAYLAŞTIĞI durum davranışıdır.
   ========================================================================== */

/* Odak: klavyeyle gelinen HER öğede aynı, yüksek kontrastlı halka. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="tab"], [role="button"]):focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}
.app-header, .app-nav { --color-focus-ring: var(--color-chrome-focus); }
.nav-tab:focus-visible, .form-control:focus-visible { outline-offset: -3px; }
/* Tarih/saat alanlarında odak, alanın İÇ parçalarına (gün/ay/yıl) gider; dış
   öğe :focus-visible ile eşleşmez. Halka :focus-within ile verilir. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus-within {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: -3px;
}
main:focus { outline: none; }

/* Yer tutucu metni de AA kontrastında (tarayıcı varsayılanı koyu temada okunmaz). */
::placeholder { color: var(--color-text-muted); opacity: 1; }

/* Açılır bölüm başlığı: en az 24px dokunma hedefi. */
summary { min-height: 24px; }

/* Üzerine gelme */
:where(.btn, .btn-submit-lg, .btn-cat, .chip-failure-type, .btn-toggle, .btn-duration, .btn-select-machine,
       .btn-clear-search, .reporting-info-btn, .floating-feedback-btn, .btn-clear-wr):hover:not(:disabled) {
    filter: brightness(0.94);
}
:root[data-theme="dark"] :where(.btn, .btn-submit-lg, .btn-cat, .chip-failure-type, .btn-toggle, .btn-duration,
       .btn-select-machine, .btn-clear-search, .reporting-info-btn, .floating-feedback-btn, .btn-clear-wr):hover:not(:disabled) {
    filter: brightness(1.14);
}
.form-control:hover:not(:disabled) { border-color: var(--color-text-secondary); }
.form-control:active:not(:disabled) { border-color: var(--color-accent-border); }

/* Basılı */
:where(.btn, .btn-submit-lg, .btn-cat, .chip-failure-type, .btn-toggle, .btn-duration, .btn-select-machine,
       .btn-clear-search, .reporting-info-btn, .floating-feedback-btn, .btn-clear-wr):active:not(:disabled) {
    transform: translateY(1px);
    filter: brightness(0.88);
}
.nav-tab:active { background-color: var(--color-chrome-accent-soft); }

/* Seçili: görsel durum ARIA'dan türer (aria-pressed / aria-selected JS'te sınıfla eşlenir). */
.btn-cat[aria-pressed="true"], .btn-cat.active {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary-active);
    box-shadow: var(--shadow-sm);
}
.chip-failure-type[aria-pressed="true"], .chip-failure-type.active,
.btn-duration[aria-pressed="true"], .btn-duration.active {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent-hover);
}
.btn-toggle[aria-pressed="true"], .btn-toggle.active {
    background-color: var(--color-success);
    color: var(--color-on-success);
    border-color: var(--color-success-hover);
}
.btn-toggle.danger-toggle[aria-pressed="true"], .btn-toggle.danger-toggle.active {
    background-color: var(--color-error);
    color: var(--color-on-error);
    border-color: var(--color-error-hover);
}
.nav-tab[aria-selected="true"], .nav-tab.active {
    color: var(--color-chrome-text);
    border-bottom-color: var(--color-chrome-accent);
    background-color: var(--color-chrome-accent-soft);
}

/* Devre dışı */
:where(.btn, .btn-submit-lg, .btn-cat, .chip-failure-type, .btn-toggle, .btn-duration, .nav-tab, .btn-select-machine,
       .btn-clear-search, .reporting-info-btn, .floating-feedback-btn, .btn-clear-wr, .form-control):disabled,
:where(.btn, .btn-submit-lg, .btn-cat, .chip-failure-type, .btn-toggle, .btn-duration, .nav-tab, .btn-select-machine,
       .btn-clear-search, .reporting-info-btn, .floating-feedback-btn, .btn-clear-wr, .form-control)[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}
.form-control:disabled { background-color: var(--color-surface-muted); }

/* Yükleniyor: düğme metni kalır, yanında dönen halka; tıklanamaz. */
.is-loading {
    position: relative;
    cursor: progress;
    pointer-events: none;
}
.is-loading::after {
    content: "";
    width: 1em;
    height: 1em;
    margin-left: var(--space-2);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-circle);
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* İskelet: içerik gelmeden yerini tutar (düzen kaymasını da önler). */
.skeleton {
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-skeleton) 25%, var(--color-skeleton-shine) 50%, var(--color-skeleton) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-card { height: 84px; margin-bottom: var(--space-2); }
.skeleton-line { height: 16px; margin: var(--space-1) 0; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Boş / hata / başarı durumları */
.empty-state, .state-error, .state-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-md);
    text-align: center;
    overflow-wrap: anywhere;
}
.empty-state {
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-strong);
    background-color: var(--color-surface-subtle);
}
.empty-state-title { font-size: var(--text-base); font-weight: 800; color: var(--color-text-secondary); }
.empty-state-hint { font-size: var(--text-sm); }
.state-error {
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
    background-color: var(--color-error-soft);
    font-weight: 700;
}
.state-success {
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
    background-color: var(--color-success-soft);
    font-weight: 700;
}
.state-retry {
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-error-text);
    font-weight: 700;
    font-size: var(--text-sm);
    cursor: pointer;
}
.state-retry:hover { background-color: var(--color-error-soft); }

/* Bildirimler */
.toast {
    padding: 10px 14px;
    border: 1.5px solid var(--color-info-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-info-soft);
    color: var(--color-info-text);
    font-weight: 700;
    box-shadow: var(--shadow-md);
    max-width: min(420px, calc(100vw - 32px));
    overflow-wrap: anywhere;
}
.toast--success { background-color: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success-text); }
.toast--error { background-color: var(--color-error-soft); border-color: var(--color-error-border); color: var(--color-error-text); }
.toast--warning { background-color: var(--color-warning-soft); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.toast--clickable { cursor: pointer; }

/* "İçeriğe geç": yalnızca klavye odağında görünür. */
.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -80px;
    z-index: 2000;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 800;
    text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

.theme-toggle { min-width: 38px; }
.theme-toggle-floating { position: fixed; top: var(--space-3); right: var(--space-3); z-index: 50; }

/* Açılış: kimlik doğrulanana kadar role bağlı arayüz gizli kalır - hem yanlış
   rolün arayüzü bir an görünmez hem de başlık/sekme çubuğu kayması olmaz. */
.is-booting .header-right, .is-booting .app-nav, .is-booting .app-main, .is-booting .floating-feedback-btn { visibility: hidden; }

/* Açık tema adası: SVG/canvas çizen bölgeler (şema, harita, grafik) renklerini
   JS içinde sabit üretir. Koyu temada da okunur kalmaları için bu bölgeler
   data-theme="light" taşır (token'lar açık değerlerine döner); bu sınıf da
   o değerlerle zemini ve metni uygular. */
.theme-island {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-sm);
}
/* Grafikler (Chart.js) eksen/etiket renklerini JS'te sabit üretir: tuval her
   temada açık zeminde kalır. */
canvas {
    background-color: var(--color-chart-surface);
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .skeleton, .is-loading::after { animation: none; }
}