* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

/* Tablet/telefonda pull-to-refresh ve "kenardan kaydirinca geri git"
   hareketlerini kapatir. Sadece sayfanin kaydirma kutusu olan html'de
   olmali; ic ogelerde kaydirmanin sayfaya aktarilmasini engeller. */
html {
    overscroll-behavior: contain;
}

body {
    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: #172033;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(59, 130, 246, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(139, 92, 246, 0.07),
            transparent 30%
        ),
        #f4f7fb;
}

#openReportsButton {
    color: #9aa3b8;
}
/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    height: 76px;

    padding: 0 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0b1426 0%,
            #101d35 55%,
            #12284a 100%
        );

    color: #ffffff;

    box-shadow:
        0 4px 18px rgba(15, 23, 42, 0.16);
}


.brand h1 {
    margin: 0;

    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;

    position: relative;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 22%,
            #93c5fd 38%,
            #67e8f9 50%,
            #93c5fd 62%,
            #ffffff 78%,
            #ffffff 100%
        );

    background-size: 180% 100%;
    background-position: 0% 50%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: laserTitleFlow 6s ease-in-out infinite;
}


@keyframes laserTitleFlow {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand-title {
    display: flex;
    flex-direction: column;
}

.creator {
    display: flex;
    flex-direction: column;

    padding-left: 24px;

    border-left: 1px solid rgba(255, 255, 255, 0.18);

    line-height: 1.2;
}

.creator span {
    font-size: 10px;
    font-weight: 600;

    color: rgba(255, 255, 255, 0.55);

    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.creator strong {
    margin-top: 4px;

    font-size: 13px;
    font-weight: 700;

    color: rgba(255, 255, 255, 0.55);

    letter-spacing: 0.2px;
}

.brand p {
    margin: 4px 0 0;

    font-size: 12px;
    color: #9ca3af;

    letter-spacing: 0.4px;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 12px;
    font-weight: 600;

    margin-left: 32px;
}

#connectionDot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #f59e0b;
}


/* ============================================================
   MAIN
   ============================================================ */

main {
    width: 100%;

    /* ONEMLI - DUZELTME: eskiden "max-width: 1800px" ile
       sinirlandirilip ortalaniyordu - genis bir masaustu
       ekraninda (1800px'den genis) bu, kenarlarda GERCEKTEN
       kullanilmayan bos alan birakiyordu (grid'in kac sutun
       sigdirdigindan BAGIMSIZ olarak). Simdi icerik, sidebar'dan
       sonra kalan TUM genisligi kullaniyor. */
    margin: 0 auto;

    padding: 24px;
}


/* ============================================================
   SUMMARY
   ============================================================ */

.summary-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.45fr
        0.75fr;

    gap: 18px;

    margin-bottom: 24px;
}

.summary-card {
    min-height: 135px;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.92) 100%
        );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.05);

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.summary-label {
    font-size: 11px;
    font-weight: 800;

    color: #475569;

    letter-spacing: 1px;
    text-transform: uppercase;

    display: flex;
    align-items: center;
    gap: 7px;
}

.summary-label::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    flex-shrink: 0;

    background: #64748b;
}

.summary-card:nth-child(1) .summary-label::before {
    background: #3b82f6;
}

.summary-card:nth-child(2) .summary-label::before {
    background: #8b5cf6;
}

.summary-card:nth-child(3) .summary-label::before {
    background: #10b981;
}

.summary-card:nth-child(4) .summary-label::before {
    background: #f59e0b;
}

.summary-card strong {
    margin-top: 9px;

    font-size: 36px;
    line-height: 1;

    font-weight: 750;

    letter-spacing: -0.8px;

    color: #172033;
}

.summary-card small {
    margin-top: 8px;

    font-size: 11px;
    font-weight: 600;

    color: #9ca3af;
}


.summary-card:nth-child(1) {
    border-top: 3px solid #3b82f6;

    background:
        linear-gradient(
            180deg,
            rgba(219, 234, 254, 0.78) 0%,
            rgba(255, 255, 255, 0.94) 82%
        );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 5px 18px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


.summary-card:nth-child(2) {
    border-top: 3px solid #8b5cf6;

    background:
        linear-gradient(
            180deg,
            rgba(237, 233, 254, 0.78) 0%,
            rgba(255, 255, 255, 0.94) 82%
        );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.summary-card:nth-child(3) {
    border-top: 3px solid #10b981;

    background:
        linear-gradient(
            180deg,
            rgba(209, 250, 229, 0.78) 0%,
            rgba(255, 255, 255, 0.94) 82%
        );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.summary-card:nth-child(4) {
    border-top: 3px solid #f59e0b;

    background:
        linear-gradient(
            180deg,
            rgba(254, 243, 199, 0.78) 0%,
            rgba(255, 255, 255, 0.94) 82%
        );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ============================================================
   KPI CARDS (Production panel summary row)
   ============================================================ */

.kpi-grid {
    --kpi-bg: rgba(255, 255, 255, 0.78);
    --kpi-line: #d6dce6;
    --kpi-text: #172033;
    --kpi-text-2: #475569;
    --kpi-text-3: #94a3b8;
    --kpi-title: #334155;
    --kpi-track: #eef2f7;
    --kpi-shadow: 0 6px 18px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);

    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}

.kpi-card {
    --kpi-accent: #3b82f6;
    --kpi-accent-soft: rgba(59, 130, 246, 0.12);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 138px;
    padding: 15px 18px;
    border-radius: 14px;
    border: 1px solid var(--kpi-line);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 42%),
        var(--kpi-bg);
    box-shadow: var(--kpi-shadow);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 70px;
    background: linear-gradient(180deg, var(--kpi-accent-soft), transparent);
    opacity: 0.7;
    pointer-events: none;
}

.kpi-card > * {
    position: relative;
}

.kpi-performance { --kpi-accent: #8b5cf6; --kpi-accent-soft: rgba(139, 92, 246, 0.12); --gauge-value: 0; }
.kpi-status { --kpi-accent: #10b981; --kpi-accent-soft: rgba(16, 185, 129, 0.12); }
.kpi-failures { --kpi-accent: #64748b; --kpi-accent-soft: rgba(100, 116, 139, 0.1); }
.kpi-failures.has-open { --kpi-accent: #f59e0b; --kpi-accent-soft: rgba(245, 158, 11, 0.16); }

.kpi-failures.has-open {
    border-color: rgba(245, 158, 11, 0.55);
}

.kpi-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.kpi-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--kpi-perf, var(--kpi-accent));
    box-shadow: 0 0 0 3px var(--kpi-accent-soft), 0 0 10px var(--kpi-perf, var(--kpi-accent));
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.kpi-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--kpi-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-chip {
    margin-left: auto;
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--kpi-track);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kpi-text-2);
}

.kpi-chip b {
    color: var(--kpi-accent);
}

.kpi-chip[hidden] {
    display: none;
}

.kpi-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.kpi-main strong {
    font-size: 30px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
    color: var(--kpi-text);
}

.kpi-failures.has-open .kpi-main strong {
    color: var(--kpi-accent);
}

.kpi-main small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--kpi-text-3);
}

.kpi-split-bar {
    display: flex;
    gap: 3px;
    height: 8px;
    margin-top: auto;
    border-radius: 8px;
    background: var(--kpi-track);
    overflow: hidden;
}

.kpi-split-seg {
    height: 100%;
    min-width: 4px;
    border-radius: 8px;
    transition: width 0.5s ease;
}

.kpi-split-seg.is-shift-1,
.kpi-legend-item i.is-shift-1 { background: #3b82f6; }
.kpi-split-seg.is-shift-2,
.kpi-legend-item i.is-shift-2 { background: #8b5cf6; }
.kpi-split-seg.is-shift-3,
.kpi-legend-item i.is-shift-3 { background: #14b8a6; }
.kpi-split-seg.is-running { background: #10b981; }
.kpi-split-seg.is-stopped { background: #f59e0b; }
.kpi-split-seg.is-offline { background: #94a3b8; }

.kpi-split-seg.is-current {
    box-shadow: 0 0 0 2px var(--kpi-bg), 0 0 10px rgba(59, 130, 246, 0.6);
}

.kpi-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12px;
    color: var(--kpi-text-3);
}

.kpi-production .kpi-legend {
    margin-top: -2px;
}

.kpi-failures .kpi-legend {
    margin-top: auto;
}

.kpi-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.kpi-legend-item i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.kpi-legend-item b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kpi-text);
}

.kpi-legend-item.is-current {
    color: var(--kpi-text-2);
    font-weight: 600;
}

.kpi-card > .kpi-perf-body {
    position: static;
}

.kpi-perf-body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.kpi-perf-text {
    flex: 1;
    min-width: 0;
    padding-right: 84px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kpi-performance .kpi-main strong {
    color: var(--kpi-perf, var(--kpi-text));
}

.kpi-legend-stack {
    flex-direction: column;
    gap: 4px;
}

.kpi-legend-stack .kpi-legend-item {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-legend-stack .kpi-legend-item i {
    display: inline-block;
    margin-right: 6px;
}

.kpi-gauge {
    --gauge-thickness: 11px;
    position: absolute;
    top: 50%;
    right: 20px;
    width: 70px;
    height: 70px;
    margin-top: -35px;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--kpi-track) 0deg 3.1deg, transparent 3.1deg 3.6deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--gauge-thickness)), #000 calc(100% - var(--gauge-thickness) + 0.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--gauge-thickness)), #000 calc(100% - var(--gauge-thickness) + 0.5px));
}

.kpi-gauge-fill {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: conic-gradient(#000 calc(var(--gauge-value) * 1%), transparent 0);
    mask: conic-gradient(#000 calc(var(--gauge-value) * 1%), transparent 0);
}

.kpi-gauge-knob {
    position: absolute;
    inset: 0;
    transform: rotate(calc(var(--gauge-value) * 3.6deg));
}

.kpi-gauge-knob::after,
.kpi-gauge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--gauge-thickness);
    height: var(--gauge-thickness);
    margin-left: calc(var(--gauge-thickness) / -2);
    border-radius: 50%;
}

.kpi-gauge-knob::after {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 24%, transparent 30%),
        var(--kpi-perf, var(--kpi-accent));
}

/* Rounded start cap (the conic fill itself starts with a flat edge). */
.kpi-gauge::before {
    z-index: 1;
    background: rgb(220, 38, 38);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.kpi-performance.has-value .kpi-gauge::before {
    opacity: 1;
}

.kpi-gauge-knob[hidden] {
    display: none;
}

.kpi-status-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.kpi-status-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kpi-status-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--kpi-text-3);
}

.kpi-status-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.kpi-status-item.is-running .kpi-status-label::before { background: #10b981; }
.kpi-status-item.is-stopped .kpi-status-label::before { background: #f59e0b; }
.kpi-status-item.is-offline .kpi-status-label::before { background: #94a3b8; }

.kpi-status-item strong {
    font-size: 26px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.6px;
    font-variant-numeric: tabular-nums;
    color: var(--kpi-text);
}

body.dark-mode .kpi-grid {
    --kpi-bg: rgba(28, 36, 57, 0.72);
    --kpi-line: #38456a;
    --kpi-text: #f1f5f9;
    --kpi-text-2: #a6b1c9;
    --kpi-text-3: #6f7a94;
    --kpi-title: #e2e8f4;
    --kpi-track: rgba(255, 255, 255, 0.06);
    --kpi-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body.dark-mode .kpi-failures.has-open { --kpi-accent: #fbbf24; }

body.dark-mode .kpi-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 45%),
        var(--kpi-bg);
}

body.dark-mode .kpi-card::before {
    opacity: 1;
}

@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }

    .kpi-status,
    .kpi-failures {
        grid-column: 1 / -1;
    }

    .kpi-card {
        min-height: 0;
        padding: 14px;
        gap: 8px;
    }

    .kpi-head {
        gap: 8px;
    }

    .kpi-title {
        font-size: 10px;
        letter-spacing: 0.6px;
    }

    .kpi-main strong {
        font-size: 26px;
    }

    .kpi-production .kpi-main strong,
    .kpi-performance .kpi-main strong {
        font-size: 23px;
    }

    .kpi-main small {
        font-size: 10px;
    }

    .kpi-production .kpi-legend {
        flex-direction: column;
        gap: 3px;
        font-size: 11px;
    }

    .kpi-perf-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main gauge"
            "legend legend";
        align-items: center;
        gap: 8px 6px;
    }

    .kpi-perf-text {
        display: contents;
    }

    .kpi-performance .kpi-main {
        grid-area: main;
        min-width: 0;
    }

    .kpi-performance .kpi-legend {
        grid-area: legend;
        font-size: 11px;
    }

    .kpi-gauge {
        --gauge-thickness: 8px;
        grid-area: gauge;
        position: relative;
        top: auto;
        right: auto;
        width: 50px;
        height: 50px;
        margin: 0;
    }

    .kpi-status-item strong {
        font-size: 24px;
    }
}

/* ============================================================
   VERITABANI BILGILERI KARTLARI (Ayarlar > Database Information)
   Tailwind tarzi: notr kart (renkli gradient degil), kucuk renkli
   ikon rozeti, kompakt pill boyut etiketi, auto-fit grid (kart
   panelin tamamini kaplamaz, icerigine gore genislik alir).
   ============================================================ */

.db-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.db-info-card {
    padding: 18px;

    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04);
}

.db-info-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 14px;
}

.db-info-title {
    min-width: 0;
}

.db-info-title h3 {
    margin: 0;

    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.1px;

    color: #172033;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-info-title .filename {
    display: block;
    margin-top: 1px;

    font-size: 11px;
    font-weight: 500;

    color: #94a3b8;
}

.db-info-size {
    flex-shrink: 0;

    padding: 5px 10px;

    border-radius: 999px;
    border: 1px solid rgba(var(--db-accent-rgb, 37, 99, 235), 0.22);

    background: rgba(var(--db-accent-rgb, 37, 99, 235), 0.1);
    color: var(--db-accent, #2563eb);

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.db-info-card.db-accent-blue {
    --db-accent: #2563eb;
    --db-accent-rgb: 37, 99, 235;
}

.db-info-card.db-accent-green {
    --db-accent: #059669;
    --db-accent-rgb: 5, 150, 105;
}

.db-info-card.db-accent-purple {
    --db-accent: #7c3aed;
    --db-accent-rgb: 124, 58, 237;
}

/* Koyu temada duz/pastel rozet yerine, kartin renkli ust
   kenariyla ayni dilde INCE bir "cip": transparan renkli
   dolgu + parlak metin - koyu arka planda daha okunakli ve
   duz beyaz bir kutu gibi durmuyor. */
body.dark-mode .db-info-card.db-accent-blue {
    --db-accent: #7dabfb;
}

body.dark-mode .db-info-card.db-accent-green {
    --db-accent: #4fd1a5;
}

body.dark-mode .db-info-card.db-accent-purple {
    --db-accent: #b79cf9;
}

body.dark-mode .db-info-size {
    background: rgba(var(--db-accent-rgb, 37, 99, 235), 0.16);
    border-color: rgba(var(--db-accent-rgb, 37, 99, 235), 0.32);
}

.db-info-card .detail-table-wrapper {
    border-radius: 10px;
}

.db-info-card .detail-table th {
    padding: 7px 10px;
    font-size: 9.5px;
}

.db-info-card .detail-table td {
    padding: 7px 10px;
    font-size: 12px;
}

/* ============================================================
   PANEL
   ============================================================ */

.panel {
    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    padding: 22px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.05);
}

.panel-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.panel-header h2 {
    margin: 0;
    left: 5px;
    font-size: 21px;
    font-weight: 750;
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
}

/* "Machine Status" (Uretim) icin CANLI/nabiz noktasi - sadece
   .h2-live sinifi olan basliklarda. Raporlar/Analiz/Ayarlar gibi
   canli veri akmayan sayfa basliklarinda artik BU degil, asagidaki
   .h2-icon rozetleri kullanilir. */
.panel-header h2.h2-live::before {
    content: "";

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22c55e;

    animation: livePulse 1.9s ease-in-out infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
    }

    30% {
        opacity: 0.15;
    }
}

/* ============================================================
   SAYFA BASLIGI IKON ROZETLERI (Raporlar / Analiz / Ayarlar)
   Yanip sonen yesil nokta yerine, her sayfaya ozel renkli/SVG
   bir simge - kucuk yumusak renkli bir "chip" icinde.
   ============================================================ */

.panel-header h2.h2-icon::before,
.machine-detail-header h2.h2-icon::before {
    content: "";

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    border-radius: 9px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;

    animation: none;
}

.panel-header h2.h2-icon-reports::before {
    background-color: rgba(37, 99, 235, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
}

.panel-header h2.h2-icon-analytics::before {
    background-color: rgba(124, 58, 237, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}

.panel-header h2.h2-icon-failures::before {
    background-color: rgba(220, 38, 38, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

.panel-header h2.h2-icon-parts::before,
.machine-detail-header h2.h2-icon-parts::before {
    background-color: rgba(37, 99, 235, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.89 1.45l8 4A2 2 0 0 1 22 7.24v9.53a2 2 0 0 1-1.11 1.79l-8 4a2 2 0 0 1-1.79 0l-8-4a2 2 0 0 1-1.11-1.79V7.24a2 2 0 0 1 1.11-1.79l8-4a2 2 0 0 1 1.79 0z'/%3E%3Cpolyline points='2.32 6.16 12 11 21.68 6.16'/%3E%3Cline x1='12' y1='22.76' x2='12' y2='11'/%3E%3C/svg%3E");
}

.panel-header h2.h2-icon-settings::before {
    background-color: rgba(217, 119, 6, 0.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
}

body.dark-mode .panel-header h2.h2-icon-reports::before {
    background-color: rgba(96, 165, 250, 0.16);
}

body.dark-mode .panel-header h2.h2-icon-analytics::before {
    background-color: rgba(167, 139, 250, 0.16);
}

body.dark-mode .panel-header h2.h2-icon-failures::before {
    background-color: rgba(248, 113, 113, 0.18);
}

body.dark-mode .panel-header h2.h2-icon-parts::before,
body.dark-mode .machine-detail-header h2.h2-icon-parts::before {
    background-color: rgba(96, 165, 250, 0.16);
}

body.dark-mode .panel-header h2.h2-icon-settings::before {
    background-color: rgba(251, 191, 36, 0.16);
}

.panel-header p {
    margin: 5px 0 0;

    font-size: 12px;
    color: #6b7280;
}


#lastUpdate {
    font-size: 11px;

    color: #9ca3af;
}


.panel-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(1px);
}

.panel-title-row h2 {
    margin: 0;
}

.panel-title-row p {
    margin: 0;
    font-size: 11px;
    color: #94a3b8;
    transform: translateX(15px);
}

.panel-title-row p::first-line {
    color: #64748b;
}


/* Dashboard paneli deneme amacli %5 kucultuldu - begenilmezse bu kural silinir */
#panel-uretim {
    zoom: 0.92;
}

/* ============================================================
   MACHINE GRID
   ============================================================ */

.machine-grid {
    display: grid;

    /* ONEMLI - DUZELTME: eskiden HER ZAMAN sabit 6 sutundu. "main"
       artik tam genislik kullandigi icin (yukarida), genis bir
       ekranda 6 sabit sutun kartlarin GEREGINDEN FAZLA genis
       olmasina yol aciyordu. "auto-fill" ile tarayici, her kart
       EN AZ 260px (rahat, "sikismis" hissettirmeyecek bir genislik)
       kalacak sekilde kac sutun sigdigini kendisi hesaplar - yeterli
       yer varsa fazladan bir sutun daha ekler, yoksa eklemez. */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    gap: 12px;
}

.loading {
    padding: 30px;

    text-align: center;

    color: #9ca3af;
}


/* ============================================================
   MACHINE CARD
   ============================================================ */

.machine-card {
    padding: 13px 18px;

    background: #fafbfc;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: default;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.96)
        );

    border: 1px solid rgba(203, 213, 225, 0.75);

    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.04);
}

.machine-card:hover {
    transform: translateY(-2px);

    border-color: #cbd5e1;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.10);
}

.machine-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.machine-number {
    font-size: 19px;
    font-weight: 700;
}


/* ============================================================
   STATUS
   ============================================================ */

.status {
    padding: 5px 9px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.4px;
}

.status-running {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.status-stopped {
    background: #fee2e2;
    color: #991b1b;
}

.status-offline {
    background: #e5e7eb;
    color: #64748b;

    border: 1px solid #d1d5db;
    
}

.machine-card.status-offline {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(241, 245, 249, 0.96) 0%,
            rgba(248, 250, 252, 0.98) 65%,
            rgba(255, 255, 255, 0.98) 100%
        );

    border-color: #d1d5db;

    box-shadow:
        0 3px 10px rgba(100, 116, 139, 0.07);
}

.machine-card.status-offline::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;

    border-radius: 0 4px 4px 0;

    background: #94a3b8;

    opacity: 0.7;
}

.machine-card.status-offline .machine-number {
    color: #475569;
}

/* YENI: acik arizali bir makine ayni zamanda CEVRIMDISI da olsa,
   baslik rengi "donuk" gri KALMAZ - normal (canli) renginde
   kalir. Boylece ariza vurgusu, cevrimdisi durumundan bagimsiz
   olarak HER ZAMAN ayni "canlilikta" gorunur - sadece OFFLINE
   rozetinin kendisi (baglanti durumu) gri kalmaya devam eder. */
.machine-card.has-failure .machine-number {
    color: #0f172a;
}

.status-unknown {
    background: #f3f4f6;
    color: #6b7280;
}

/* YENI: makinede acik ariza rozeti - .status ile ayni pill sekli,
   dikkat cekmesi icin uyari (amber/kirmizi) rengi. */
.machine-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* YENI - DUZELTME: acik ariza gostergesi artik metin degil (dile
   gore genisligi degisip basligi alt satira itebiliyordu), sabit
   boyutlu bir ikon - dil ne olursa olsun HER ZAMAN ayni
   genislikte, basligi asla sikistirmaz. Ayrintili aciklama
   title="" tooltip'inde.

   GORUNUM - DUZELTME: artik "buton/rozet" (arka plan, kenarlik,
   golge) DEGIL - sadece kendi rengini (sari + koyu kontur) tasiyan
   sade bir ikon. Cerceve/arka plan olmadigi icin acik/koyu tema
   ayrimina da GEREK YOK - SVG kendi rengini her zeminde korur. */
.failure-icon-badge {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.failure-icon-badge svg {
    width: 22px;
    height: 22px;
}


/* ============================================================
   MACHINE INFO
   ============================================================ */

.machine-info {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}

.info-label {
    display: block;

    font-size: 10px;
    font-weight: 600;

    color: #9ca3af;

    text-transform: uppercase;

    letter-spacing: 0.4px;
}

.info-value {
    display: block;

    margin-top: 4px;

    font-size: 14px;
    font-weight: 600;

    color: #1f2937;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .creator {
        display: none !important;
    }

    /* =====================================================
       MOBILE DASHBOARD
    ===================================================== */

    /* Yatay tasmayi sayfa seviyesinde gizler. Sadece html: body'ye de
       verilince body kendi kaydirma kutusu oluyor ve Android Chrome'da
       tek parmakla dikey kaydirma kilitleniyordu (iki parmak gerekiyordu). */
    html {
        overflow-x: hidden;
    }

    /* iOS Safari, 16px'den kucuk yazi boyutuna sahip bir input'a
       dokunulunca sayfayi otomatik yakinlastiriyor. Bu tek sayfalik
       uygulamada (giristen sonra sayfa yenilenmiyor) o yakinlastirma
       sonraki tum ekranlara (dashboard dahil) tasiyordu - kullanici
       elle uzaklastirana kadar. Tum input/select/textarea'lari
       16px'e sabitleyerek bu otomatik yakinlastirmayi tetiklemesini
       onluyoruz. Masaustunu etkilemez (sadece bu media query).*/
    input,
    select,
    textarea {
        font-size: 16px !important;
    }


    /* =====================================================
       TOP BAR
    ===================================================== */

    .topbar {
    height: 68px;

    padding: 8px 16px;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: space-between;

    gap: 8px;
    }


    .brand {
        display: flex;
        align-items: center;

        gap: 12px;

        min-width: 0;
    }


    .brand-title {
        min-width: 0;
    }


    .brand h1 {
    font-size: 20px;

    line-height: 1;

    letter-spacing: 0.6px;

    white-space: nowrap;
    }


    .brand p {
        margin-top: 3px;

        font-size: 8px;

        line-height: 1;

        white-space: nowrap;
    }


    /* Creator mobilde kalsın ama küçülsün */

    .creator {
        padding-left: 12px;

        min-width: 88px;

        line-height: 1.1;
    }


    .creator span {
        font-size: 7px;

        letter-spacing: 0.4px;
    }


    .creator strong {
        margin-top: 3px;

        font-size: 10px;
    }


    .connection-status {
        position: absolute;

        right: 16px;
        bottom: 10px;

        gap: 5px;

        font-size: 9px;
    }


    #connectionDot {
        width: 7px;
        height: 7px;
    }


    /* =====================================================
       MAIN
    ===================================================== */

    main {
        width: 100%;

        padding: 12px;
    }


    /* =====================================================
       SUMMARY CARDS
    ===================================================== */

    .summary-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
    }


    .summary-card {
    min-height: 92px;

    padding: 12px 14px;

    border-radius: 10px;
    }


    .summary-label {
        font-size: 10px;

        letter-spacing: 0.8px;
    }


    .summary-label::before {
        width: 6px;
        height: 6px;
    }


    .summary-card strong {
        margin-top: 7px;

        font-size: 32px;
    }


    .summary-card small {
        margin-top: 5px;

        font-size: 9px;
    }


    /* Machine Status summary */

    .machine-status-counts {
        gap: 8px;

        margin-top: 8px;
    }


    .machine-status-label {
        font-size: 8px;
    }


    .machine-status-item strong {
        font-size: 25px;
    }


    .total-machines-summary strong {
        font-size: 30px;
    }


    /* =====================================================
       MACHINE STATUS PANEL
    ===================================================== */

    .panel {
        padding: 14px 12px;

        border-radius: 12px;
    }

    .panel-header {
        display: block;

        margin-bottom: 10px;
    }


    .panel-title-row {
        display: flex;

        flex-wrap: wrap;

        align-items: center;

        gap: 5px;

        transform: none;
    }


    .panel-title-row h2 {
        font-size: 16px;

        line-height: 1.2;

        transform: none;
    }


    .panel-title-row p {
        width: 100%;

        margin: 2px 0 0;

        font-size: 9px;

        line-height: 1.4;

        transform: none;
    }


    #lastUpdate {
        margin-top: 5px;

        font-size: 9px;

        text-align: left;
    }


    /* =====================================================
       MACHINE GRID

       ONEMLI: telefon/tablet gorunumu ESKISI GIBI SABIT sutun
       sayisiyla kaliyor (kullanicinin istegi) - "auto-fill"
       davranisi SADECE masaustunde (>1200px) gecerli. Bu kural
       yukaridaki temel ".machine-grid" kuralini (auto-fill) bu
       genislik araliginda EZER (override).
    ===================================================== */

    .machine-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
    }


    /* =====================================================
       MACHINE CARD
    ===================================================== */

    .machine-card {
        padding: 11px;

        border-radius: 9px;
    }


    .machine-header {
        margin-bottom: 9px;
    }


    .machine-number {
        font-size: 15px;
    }


    .status {
        padding: 4px 8px;

        font-size: 9px;
    }


    .design-section {
        margin-bottom: 9px;
    }


    .info-label {
        font-size: 9px;
    }


    .info-value {
        margin-top: 3px;

        font-size: 11px;
    }


    .shift-grid {
    display: none;
    }


    .unit-value {
        margin-top: 4px;

        font-size: 19px;
    }


    .today-section {
        margin-top: 8px;

        padding-top: 8px;

        gap: 8px;
    }


    .today-value {
        margin-top: 3px;

        font-size: 25px;
    }


    .stop-time-value {
        margin-top: 4px;

        font-size: 12px;
    }


    .network-time {
        margin-top: 4px;

        font-size: 9px;
    }

}

/* ============================================================
   MOBILE PANEL HEADER - ONE LINE
   ============================================================ */

@media (max-width: 700px) {

    .panel-title-row {
        display: flex;

        align-items: center;

        flex-wrap: nowrap;

        gap: 7px;

        width: 100%;
    }


    .panel-title-row h2 {
        flex-shrink: 0;
    }


    .panel-title-row p {
        width: auto;

        margin: 0;

        flex: 1;

        min-width: 0;

        font-size: 8px;

        line-height: 1.2;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        transform: none;
    }


    .dashboard-date-control {
        flex-shrink: 0;

        display: flex;

        align-items: center;

        gap: 3px;
    }


    .production-date-button {
        font-size: 13px;

        padding: 1px;
    }

}

/* ============================================================
   09. MACHINE CONTENT
   ============================================================ */

.design-section {
    margin-bottom: 13px;
}

.design-value {
    margin-top: 3px;
}


.shift-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

    padding-top: 15px;

    border-top: 1px solid #e5e7eb;
}


.unit-value {
    display: block;

    margin-top: 5px;

    font-size: 20px;
    font-weight: 700;

    color: #172033;
}


.today-section {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-top: 13px;
    padding-top: 12px;

    border-top: 1px solid #e5e7eb;
}

.today-value {
    display: block;

    margin-top: 4px;
    color: #0f172a;
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -0.5px;
}


.stop-time-section {

    text-align: right;

}

.stop-time-value {
    display: block;
    margin-top: 5px;
    font-size: 17px;
    font-weight: 600;
    color: #64748b;
}

.network-time {
    margin-top: 4px;

    text-align: right;

    font-size: 10px;
    font-weight: 600;

    color: #94a3b8;
}

/* ============================================================
   MACHINE DETAIL MODAL
   ============================================================ */

.machine-detail-modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 24px;
}

.machine-detail-modal.is-open {
    display: flex;
}


.machine-detail-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(15, 23, 42, 0.55);

    backdrop-filter: blur(3px);
}


.machine-detail-panel {
    position: relative;

    width: min(1100px, 100%);

    max-height: 90vh;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.20);

    overflow: hidden;
}


.machine-detail-header {
    flex-shrink: 0;

    padding: 20px 24px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #e5e7eb;
}


.machine-detail-header h2 {
    margin: 0;

    font-size: 22px;
    font-weight: 700;
}

.machine-detail-header h2.h2-icon {
    display: flex;
    align-items: center;
    gap: 11px;
}


.machine-detail-header p {
    margin: 4px 0 0;

    font-size: 12px;

    color: #9ca3af;
}


.detail-close-button {
    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 8px;

    background: #f3f4f6;

    color: #374151;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}


.detail-close-button:hover {
    background: #e5e7eb;
}


.machine-detail-content {
    padding: 24px;

    overflow-y: auto;
}


/* DATE */

.detail-date-row {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}


.detail-date-row label {
    font-size: 11px;
    font-weight: 700;

    color: #6b7280;

    letter-spacing: 0.6px;
}


.detail-date-row input {
    padding: 8px 10px;

    border: 1px solid #d1d5db;

    border-radius: 7px;

    font-family: inherit;

    font-size: 13px;

    color: #172033;

    background: #ffffff;
}


/* SUMMARY */

.detail-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 24px;
}


.detail-summary-card {
    min-width: 0;

    padding: 15px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 9px;
}


.detail-summary-card span {
    display: block;

    font-size: 9px;
    font-weight: 700;

    color: #9ca3af;

    letter-spacing: 0.5px;
}


.detail-summary-card strong {
    display: block;

    margin-top: 6px;

    font-size: 20px;

    color: #172033;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.detail-summary-card .detail-design {
    font-size: 13px;
}

.detail-summary-card .detail-estimate-line {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.detail-summary-card .detail-estimate-line:empty {
    display: none;
}

body.dark-mode .detail-summary-card .detail-estimate-line {
    color: #9aa6bf;
}


/* SECTIONS */

.detail-section {
    margin-top: 32px;
}


.detail-section-header {
    margin-bottom: 10px;
}


.detail-section-header h3 {
    margin: 0;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.5px;

    color: #374151;
}

.detail-table tr.clickable-row {
    cursor: pointer;
}

.detail-table tr.clickable-row:hover {
    background: rgba(37, 99, 235, 0.06);
}

body.dark-mode .detail-table tr.clickable-row:hover {
    background: rgba(96, 165, 250, 0.08);
}

/* Personel Devam Tablosu: secili satir (hover'la karisip fark
   edilmesin diye belirgin renk + sol kenarlik). */
.detail-table tr.clickable-row.shift-list-changed {
    background: rgba(37, 99, 235, 0.1);
    box-shadow: inset 3px 0 0 #2563eb;
}

.detail-table tr.clickable-row.shift-list-changed:hover {
    background: rgba(37, 99, 235, 0.14);
}

body.dark-mode .detail-table tr.clickable-row.shift-list-changed {
    background: rgba(96, 165, 250, 0.14);
    box-shadow: inset 3px 0 0 #60a5fa;
}

body.dark-mode .detail-table tr.clickable-row.shift-list-changed:hover {
    background: rgba(96, 165, 250, 0.18);
}

/* ============================================================
   RAPOR/BOLUM KARTLARI (Raporlar sekmesi - Makine Basina Uretim /
   Uretilen Tasarimlar) + alt baslik ikon rozetleri.
   .db-info-card ile AYNI gorsel dil - genel amacli kart.
   ============================================================ */

.report-tables-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;

    margin-top: 22px;
}

.report-tables-grid .section-card {
    margin-top: 0;

    /* Grid ogeleri varsayilan olarak icerigin (orn. genis tablo)
       dogal genisligine kuculemiyor (min-width: auto), bu da
       kartin grid hucresinden tasip sayfayi mobilde yatay
       kaydirmasina sebep oluyordu. min-width: 0 karti hucreye
       sigacak sekilde kucultuyor, tasan tablo o zaman kendi
       ic scroll'unu (.detail-table-wrapper) kullanabiliyor. */
    min-width: 0;
}

@media (max-width: 1100px) {
    .report-tables-grid {
        grid-template-columns: 1fr;
    }
}

.section-card {
    margin-top: 22px;

    padding: 18px;

    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04);
}

.section-card .detail-section-header h3 {
    font-size: 15px;
}

.section-card-blue {
    border-top: 3px solid #2563eb;
}

.section-card-purple {
    border-top: 3px solid #7c3aed;
}

.section-card-red {
    border-top: 3px solid #dc2626;
}

.section-card-orange {
    border-top: 3px solid #d97706;
}

.detail-section-header h3.h3-icon {
    display: flex;
    align-items: center;
    gap: 9px;
}

.detail-section-header h3.h3-icon::before {
    content: "";

    width: 24px;
    height: 24px;

    flex-shrink: 0;

    border-radius: 7px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

.h3-icon-machines::before {
    background-color: rgba(37, 99, 235, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

.h3-icon-designs::before {
    background-color: rgba(124, 58, 237, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41L13.42 20.58a2 2 0 0 1-2.83 0L2.59 12.58A2 2 0 0 1 2 11.17V4a2 2 0 0 1 2-2h7.17a2 2 0 0 1 1.41.59l8 8a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}

.h3-icon-add::before {
    background-color: rgba(37, 99, 235, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
}

.h3-icon-failures::before {
    background-color: rgba(220, 38, 38, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

.h3-icon-downtime::before {
    background-color: rgba(217, 119, 6, 0.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.h3-icon-records::before {
    background-color: rgba(100, 116, 139, 0.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

.h3-icon-category::before {
    background-color: rgba(124, 58, 237, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='18'/%3E%3Crect x='14' y='9' width='7' height='12'/%3E%3Cline x1='3' y1='9' x2='10' y2='9'/%3E%3C/svg%3E");
}

.h3-icon-reliability::before {
    background-color: rgba(37, 99, 235, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.4 8.4-8 10-4.6-1.6-8-5-8-10V6z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}

.h3-icon-device::before {
    background-color: rgba(37, 99, 235, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3C/svg%3E");
}

.h3-icon-bell::before {
    background-color: rgba(124, 58, 237, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

.h3-icon-moon::before {
    background-color: rgba(217, 119, 6, 0.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

.h3-icon-mute::before {
    background-color: rgba(100, 116, 139, 0.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 9.33-5'/%3E%3Cpath d='M18 8a6 6 0 0 1 .6 2.6c0 3.4 1 5.4 1.9 6.4H4a10 10 0 0 0 1.7-3.9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E");
}

.h3-icon-tv::before {
    background-color: rgba(124, 58, 237, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='18' x2='12' y2='21'/%3E%3C/svg%3E");
}

.h3-icon-zoom::before {
    background-color: rgba(217, 119, 6, 0.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cline x1='21' y1='21' x2='15' y2='15'/%3E%3Cline x1='10' y1='7' x2='10' y2='13'/%3E%3Cline x1='7' y1='10' x2='13' y2='10'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   TASARIM ARAMA KUTUSU (Raporlar > Üretilen Tasarımlar başlığı)
   ------------------------------------------------------------ */

.detail-section-header-with-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.table-search {
    position: relative;
    flex: 0 0 auto;
}

.table-search::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

.table-search input {
    width: 400px;
    padding: 7px 10px 7px 30px;

    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;

    font-size: 12.5px;
    color: #111827;

    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.table-search input::placeholder {
    color: #9ca3af;
}

.table-search input:focus {
    outline: none;
    border-color: #7c3aed;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

body.dark-mode .table-search input {
    background: rgba(255, 255, 255, 0.04);
    border-color: #232d45;
    color: #e7ecf7;
}

body.dark-mode .table-search input::placeholder {
    color: #5b6a8c;
}

body.dark-mode .table-search input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16);
}

/* Arama kutusu masaustunde sabit 400px genislikteydi - dar
   ekranlarda konteynerden tasip sayfayi yatay kaydiriyordu. */
@media (max-width: 800px) {
    .table-search {
        flex: 1 1 100%;
    }

    .table-search input {
        width: 100%;
    }
}

body.dark-mode .section-card {
    background:
        linear-gradient(
            180deg,
            rgba(23, 31, 51, 0.85) 0%,
            rgba(17, 23, 38, 0.95) 100%
        );

    border: 1px solid #232d45;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35);
}

body.dark-mode .h3-icon-machines::before {
    background-color: rgba(96, 165, 250, 0.16);
}

body.dark-mode .h3-icon-designs::before {
    background-color: rgba(167, 139, 250, 0.16);
}

body.dark-mode .h3-icon-add::before {
    background-color: rgba(96, 165, 250, 0.16);
}

body.dark-mode .h3-icon-failures::before {
    background-color: rgba(248, 113, 113, 0.18);
}

body.dark-mode .h3-icon-downtime::before {
    background-color: rgba(251, 191, 36, 0.16);
}

body.dark-mode .h3-icon-records::before {
    background-color: rgba(148, 163, 184, 0.16);
}

body.dark-mode .h3-icon-device::before {
    background-color: rgba(96, 165, 250, 0.16);
}

body.dark-mode .h3-icon-bell::before {
    background-color: rgba(167, 139, 250, 0.16);
}

body.dark-mode .h3-icon-moon::before {
    background-color: rgba(251, 191, 36, 0.16);
}

body.dark-mode .h3-icon-mute::before {
    background-color: rgba(148, 163, 184, 0.16);
}

body.dark-mode .h3-icon-tv::before {
    background-color: rgba(167, 139, 250, 0.16);
}

body.dark-mode .h3-icon-zoom::before {
    background-color: rgba(251, 191, 36, 0.16);
}


.detail-table-wrapper {
    border: 1px solid #e5e7eb;

    border-radius: 8px;

    overflow: auto;
}


.table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-top: 12px;
}

.table-pagination-info {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.table-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


.detail-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}


.detail-table th {
    padding: 10px 12px;

    text-align: left;

    background: #f8fafc;

    color: #6b7280;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.5px;

    white-space: nowrap;
}


.detail-table td {
    padding: 10px 12px;

    border-top: 1px solid #f1f5f9;

    color: #374151;

    white-space: nowrap;

    /* Aciklama gibi ikinci bir satir icin yer olan hucreler (orn.
       fatura Kalem sutunu), yuksekligi diger tek satirlik hucrelerden
       fazla olabiliyor - varsayilan "middle" hizalamasi bu durumda
       ust satiri (orn. "MODULE") diger hucrelerdeki tek satirdan
       daha yukarida gosteriyordu. "top" ile hepsi ayni hizadan baslar. */
    vertical-align: top;
}


.detail-table td.units {
    font-weight: 700;

    color: #172033;

    text-align: right;
}

.detail-table tfoot td {
    border-top: 2px solid #e2e8f0;
    background: #f8fafc;
}

body.dark-mode .detail-table tfoot td {
    border-top-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.detail-table td.design-date,
.detail-table th.design-date {
    width: 120px;
    white-space: nowrap;
}

.detail-table td.design-date {
    color: #94a3b8;
}

body.dark-mode .detail-table td.design-date {
    color: #7c8698;
}


.detail-table td.design {
    max-width: 420px;

    overflow: hidden;

    text-overflow: ellipsis;
}


.detail-loading {
    padding: 25px;

    text-align: center;

    color: #9ca3af;

    font-size: 12px;
}


.detail-empty {
    padding: 25px;

    text-align: center;

    color: #9ca3af;

    font-size: 12px;
}


/* MOBILE */

@media (max-width: 800px) {

    .machine-detail-modal {
        padding: 10px;
    }

    .machine-detail-panel {
        max-height: 95vh;
    }

    .machine-detail-content {
        padding: 16px;
    }

    .detail-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* ============================================================
   10. DOWNTIME HISTORY
   ============================================================ */

.detail-section {
    margin-top: 32px;
}

.detail-section h3 {
    margin: 0 0 12px 0;

    font-size: 16px;
    font-weight: 700;

    color: #334155;

    letter-spacing: 0.3px;
}

.downtime-table th,
.downtime-table td {
    white-space: nowrap;
}

.downtime-table td:last-child {
    font-weight: 600;
}

/* ============================================================
   11. TEXT SELECTION / CARET
   ============================================================ */

html,
body,
button,
label,
span,
strong,
h1,
h2,
h3,
p,
div,
section,
table,
th,
td {
    caret-color: transparent;
}

input,
textarea,
[contenteditable="true"] {
    caret-color: auto;
}

#detailDate {
    caret-color: transparent;
    user-select: none;
}

/* ============================================================
   12. MACHINE STATUS SUMMARY
   ============================================================ */


.machine-status-counts {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 10px;
}

.machine-status-item {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.machine-status-label {
    font-size: 9px;

    font-weight: 700;

    color: #9ca3af;

    letter-spacing: 0.5px;
}

.machine-status-item strong {
    margin-top: 0;

    font-size: 28px;

    line-height: 1;
}

.total-machines-summary strong {
    font-size: 34px;
}

.machine-status-summary {
    justify-content: flex-start;
}

.machine-status-summary .summary-label {
    margin-top: 0;
    transform: translateY(2px);
}

.machine-status-counts {
    margin-top: 10px;
}


.machine-card.status-stopped {
    background: #fff7f7;
    border-color: #fecaca;
    border: 1px solid #fca5a5;
}

/* YENI: acik ariza - STOPPED ile ayni kosede vurgu deseni, ama
   sari/amber tonda ve STOPPED/OFFLINE renginin uzerine yazilacak
   sekilde (dosyada onlardan SONRA tanimli) - bir makinede hem
   duruş hem ariza ayni anda olsa bile ariza vurgusu daha belirgin
   kalir. */
.machine-card.has-failure {
    background: #fffbeb;
    border-color: #fbbf24;
    border: 1px solid #f59e0b;
}

/* Job left open across a shift change: units still go to the previous
   shift. Outline (not border) so no skin's card styling is overridden
   and the card size never changes. */
.machine-card.has-carryover {
    outline: 2px solid #8b5cf6;
    outline-offset: -1px;
    animation: carryover-pulse 1.6s ease-in-out infinite;
}

@keyframes carryover-pulse {
    50% {
        outline-color: rgba(139, 92, 246, 0.2);
    }
}

.carryover-note {
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.12);
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #6d28d9;
}

body.dark-mode .carryover-note {
    background: rgba(139, 92, 246, 0.16);
    color: #c4b5fd;
}

body:not(.tv-mode) .kpi-failures {
    cursor: pointer;
}


/* ============================================================
   13. TV MODE
   ============================================================ */

@media screen {

    body.tv-mode {
        overflow: hidden;

        /* TV genel arka planı - YEDEKTEKİ DEĞER */
        background: #cbd4df;

        /* zoom artık Ayarlar > TV Ekranı'ndan geliyor - templates/tv.html
           bunu satır içi style olarak basar (bkz. tv_settings.zoom). */
    }

    body.tv-mode .topbar {
        height: 50px;
    }

    body.tv-mode .brand h1 {
        font-size: 20px;
    }

    body.tv-mode .brand p {
        margin-top: 1px;
        font-size: 10.5px;
    }

    body.tv-mode .creator span {
        font-size: 9px;
    }

    body.tv-mode .creator strong {
        margin-top: 2px;
        font-size: 12px;
    }

    body.tv-mode .theme-toggle {
        width: 32px;
        height: 32px;
    }


    /* ========================================================
       TV MAIN
       ======================================================== */

    body.tv-mode main {
        max-width: none;

        padding-left: 30px;
        padding-right: 30px;

        padding-top: 12px;
        padding-bottom: 12px;
    }


    /* ========================================================
       TV SUMMARY
       ======================================================== */

    body.tv-mode .summary-grid {

        grid-template-columns:
            1fr
            1fr
            1.45fr
            0.75fr;

        gap: 12px;

        margin-bottom: 8px;
    }


    body.tv-mode .summary-card {

        min-height: 64px;

        padding: 10px 18px;
    }


    body.tv-mode .summary-card strong {

        font-size: 27px;

        line-height: 1;
    }


    body.tv-mode .summary-card small {

        margin-top: 2px;

        font-size: 9px;
    }


    /* KPI cards: the 14px taken from the topbar goes here, so the machine grid doesn't move. */

    body.tv-mode .kpi-grid {
        grid-template-columns: 1.15fr 0.95fr 1.3fr 0.85fr;
        gap: 12px;
        margin-bottom: 8px;
    }

    body.tv-mode .kpi-card {
        height: 106.82px;
        min-height: 0;
        padding: 12px 20px;
        gap: 7px;
        border-radius: 12px;
    }

    body.tv-mode .kpi-card::before {
        height: 58px;
    }

    body.tv-mode .kpi-title {
        font-size: 11.5px;
    }

    body.tv-mode .kpi-chip {
        padding: 2px 9px;
        font-size: 11.5px;
    }

    body.tv-mode .kpi-main strong {
        font-size: 31px;
    }

    body.tv-mode .kpi-main small {
        font-size: 10px;
    }

    body.tv-mode .kpi-legend {
        font-size: 12.5px;
    }

    body.tv-mode .kpi-split-bar {
        height: 7px;
    }

    body.tv-mode .kpi-production {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "head head"
            "main legend"
            "bar bar";
        align-items: center;
        column-gap: 16px;
    }

    body.tv-mode .kpi-production .kpi-head { grid-area: head; }
    body.tv-mode .kpi-production .kpi-main { grid-area: main; }
    body.tv-mode .kpi-production .kpi-split-bar { grid-area: bar; margin-top: 0; }

    body.tv-mode .kpi-production .kpi-legend {
        grid-area: legend;
        justify-self: end;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 2px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        margin-top: 0;
        font-size: 11.5px;
        line-height: 1.2;
    }

    body.tv-mode .kpi-production .kpi-main {
        min-width: 0;
    }

    body.tv-mode .kpi-perf-text {
        gap: 7px;
        padding-right: 84px;
    }

    body.tv-mode .kpi-gauge {
        --gauge-thickness: 10px;
        right: 20px;
        width: 70px;
        height: 70px;
        margin-top: -35px;
    }

    body.tv-mode .kpi-status-counts {
        gap: 8px;
    }

    body.tv-mode .kpi-status-item {
        gap: 4px;
    }

    body.tv-mode .kpi-status-label {
        font-size: 10.5px;
    }

    body.tv-mode .kpi-status-item strong {
        font-size: 28px;
    }


    /* ========================================================
       TV MACHINE PANEL
       ======================================================== */

    body.tv-mode .panel {

        /* YEDEKTEKİ KOYU PANEL */
        background: #cdd3db;

        padding: 10px 6px 12px;
        margin-left: -10px;
        margin-right: -10px;
        margin-left: 0;
        margin-right: 0;
    }


    body.tv-mode .panel-header {

        margin-bottom: 8px;
    }


    /* ========================================================
       TV MACHINE GRID
       ======================================================== */

    body.tv-mode .machine-grid {

        grid-template-columns:
            repeat(
                7,
                minmax(
                    0,
                    1fr
                )
            );

        gap: 10px;
    }


    /* ========================================================
       TV MACHINE CARD - SADECE BOYUT
       
       ÖNEMLİ:
       Burada background / border / color YOK.
       Böylece normal CSS'deki:
       
       RUNNING  -> beyaz
       STOPPED  -> kırmızı
       OFFLINE  -> gri
       
       kuralları aynen çalışır.
       ======================================================== */

    body.tv-mode .machine-card {

        min-width: 0;

        padding: 7px 10px;

        /* Performans */
        transition: none;
    }


    body.tv-mode .machine-header {

        margin-bottom: 6px;
    }


    body.tv-mode .machine-number {

        font-size: 16px;
    }


    body.tv-mode .status {

        font-size: 8px;

        padding: 3px 6px;
    }


    body.tv-mode .design-section {

        margin-bottom: 6px;
    }


    body.tv-mode .info-label {

        font-size: 8px;
        white-space: nowrap;
    }


    body.tv-mode .info-value {

        font-size: 11px;
    }


    body.tv-mode .today-section {

        display: flex;

        align-items: flex-start;

        justify-content: flex-start;

        gap: 25px;

        width: 100%;

        margin-top: 7px;

        padding-top: 7px;

        padding-bottom: 7px;

        border-top: 1px solid #e5e7eb;

        border-bottom: 1px solid #e5e7eb;
    }


    body.tv-mode .today-value {

        font-size: 19px;
    }

    .performance-section {
    text-align: center;
    min-width: 0;
    }

    .performance-value {
        display: block;
        margin-top: 5px;
        font-size: 20px;
        font-weight: 700;
        white-space: nowrap;
    }

    .performance-good {
        color: #16a34a;
    }

    .performance-warning {
        color: #e37d08;
    }

    .performance-danger {
        color: #dc2626;
    }

    .performance-normal {
        color: #64748b;
    }



    body.tv-mode .stop-time-value {

        font-size: 12px;
    }


    body.tv-mode .network-time {

        font-size: 8px;
    }


    /* ========================================================
       TV SHIFT
       ======================================================== */

    body.tv-mode .shift-grid {

        display: none;
    }


    /* ========================================================
       TV PERFORMANCE
       
       Animasyonları kapatıyoruz.
       Renkleri / card tasarımını değiştirmiyoruz.
       ======================================================== */

    body.tv-mode *,
    body.tv-mode *::before,
    body.tv-mode *::after {

        transition: none !important;

        animation: none !important;
    }


    /* ========================================================
       LARGE TV
       ======================================================== */

    @media (min-width: 3000px) {

        body.tv-mode main {

            padding-left: 10px;

            padding-right: 10px;

            padding-top: 12px;

            padding-bottom: 12px;
        }


        body.tv-mode .machine-grid {

            gap: 10px;
        }

    }

}

body.tv-mode .machine-card.status-offline::before {
    display: none;
}


/* ============================================================
   TV MODE — PERFORMANCE GLASS EFFECT
   ============================================================ */

.tv-mode .machine-card {

    /* Mevcut kart renklerini koru */
    border: 1px solid rgba(255, 255, 255, 0.55);

    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);

    position: relative;
    overflow: hidden;
}


/* Cam yüzey highlight */

.tv-mode .machine-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.9),
            transparent
        );

    pointer-events: none;
}


/* TV'de hover kart rengini bozmasın */

.tv-mode .machine-card:hover {

    transform: none;

    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}


/* ============================================================
   PRODUCTION DATE SELECTOR
   ============================================================ */

.dashboard-date-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.production-date-button {
    border: none;
    background: transparent;
    padding: 2px;
    margin: 0;
    font-size: 15px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

.production-date-button:hover {
    opacity: 1;
}

.production-date-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

 /* ============================================================
    TV — MACHINE STATUS HEADER INDICATOR
    ============================================================ */

body.tv-mode .panel-header h2.h2-live::before {

    width: 14px;
    height: 14px;

    background: #22c55e;

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.10);

    animation:
        tvPanelLivePulse
        1.9s
        ease-in-out
        infinite !important;
}


@keyframes tvPanelLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        opacity: 0.25;
        transform: scale(0.85);
    }
}

body.tv-mode .summary-card:first-child strong {
    font-size: 32px;
}


/* ============================================================
   PLANNED BREAK BADGE — NORMAL MODE ONLY
   ============================================================ */

.downtime-duration-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

.downtime-duration-value {
    display: inline-block;
    min-width: 52px;
}

body:not(.tv-mode) .planned-break-label {
    display: inline-flex;
    align-items: center;

    padding: 3px 8px;

    border-radius: 999px;

    background: #dcfce7;
    border: 1px solid #86efac;

    color: #166534;

    font-size: 9px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}


/* ============================================================
   MOBILE CARD COMPACT
   ============================================================ */

@media (max-width: 700px) {

    /* SHIFT 1 / SHIFT 2 gizle */
    .shift-grid {
        display: none !important;
    }


    /* TODAY'S UNITS / STOP TIME alanı */
    .today-section {
        margin-top: 7px;
        padding-top: 7px;
        gap: 8px;
    }


    /* STOP TIME başlığı */
    .stop-time-section .info-label {
        font-size: 8px;
    }


    /* STOP TIME değeri */
    .stop-time-value {
        margin-top: 3px;
        font-size: 11px;
    }


    /* TODAY'S UNITS başlığı */
    .today-section .info-label {
        font-size: 8px;
    }


    /* TODAY'S UNITS değeri */
    .today-value {
        font-size: 20px;
    }

}


/* ============================================================
   14. THEME TOGGLE BUTTON
   ============================================================ */

.theme-toggle {
    position: relative;

    width: 38px;
    height: 38px;

    margin-left: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);

    color: #cbd5e1;
    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.theme-toggle:active {
    transform: scale(0.93);
}

.theme-icon {
    width: 19px;
    height: 19px;

    position: absolute;

    transition:
        opacity 0.25s ease,
        transform 0.35s ease;
}

.theme-icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

.theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

body.dark-mode .theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

body.dark-mode .theme-icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

@media (max-width: 700px) {

    .theme-toggle {
        width: 30px;
        height: 30px;

        margin-left: 10px;

        border-radius: 8px;
    }

    .theme-icon {
        width: 15px;
        height: 15px;
    }

}


/* ============================================================
   15. DARK MODE THEME
   ============================================================
   Profesyonel, "deep navy / slate" tabanlı koyu tema.
   Ana renkler:
     arka plan zemin : #0b0f19 / #0e1424
     panel / kart     : #131a2b / #171f33
     kenarlık         : #232d45
     birincil metin   : #e6ebf5
     ikincil metin    : #93a0bd
   Vurgu renkleri mevcut açık temadaki mavi/mor/yeşil/turuncu
   paletle uyumlu tutuldu, sadece doygunluk/parlaklık dark
   arka plana göre ayarlandı.
   ============================================================ */

body.dark-mode {
    color: #e6ebf5;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(59, 130, 246, 0.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(139, 92, 246, 0.09),
            transparent 30%
        ),
        #0b0f19;
}

/* Topbar zaten koyu olduğu için sadece ince bir alt çizgi ekliyoruz */

body.dark-mode .topbar {
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.45),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .brand p {
    color: #7c8aad;
}

body.dark-mode .creator {
    border-left-color: rgba(255, 255, 255, 0.12);
}


/* ------------------------------------------------------------
   SUMMARY CARDS
   ------------------------------------------------------------ */

body.dark-mode .summary-card {
    background:
        linear-gradient(
            180deg,
            rgba(23, 31, 51, 0.85) 0%,
            rgba(17, 23, 38, 0.95) 100%
        );

    border: 1px solid #232d45;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35);
}

body.dark-mode .summary-label {
    color: #93a0bd;
}

body.dark-mode .summary-card strong {
    color: #f1f5f9;
}

body.dark-mode .summary-card small {
    color: #64748b;
}

body.dark-mode .summary-card:nth-child(1) {
    border-top: 3px solid #3b82f6;

    background:
        linear-gradient(
            180deg,
            rgba(37, 65, 122, 0.35) 0%,
            rgba(17, 23, 38, 0.95) 82%
        );

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark-mode .summary-card:nth-child(2) {
    border-top: 3px solid #8b5cf6;

    background:
        linear-gradient(
            180deg,
            rgba(76, 58, 133, 0.32) 0%,
            rgba(17, 23, 38, 0.95) 82%
        );
}

body.dark-mode .summary-card:nth-child(3) {
    border-top: 3px solid #10b981;

    background:
        linear-gradient(
            180deg,
            rgba(20, 90, 74, 0.30) 0%,
            rgba(17, 23, 38, 0.95) 82%
        );
}

body.dark-mode .summary-card:nth-child(4) {
    border-top: 3px solid #f59e0b;

    background:
        linear-gradient(
            180deg,
            rgba(120, 84, 20, 0.30) 0%,
            rgba(17, 23, 38, 0.95) 82%
        );
}

body.dark-mode .machine-status-label {
    color: #93a0bd;
}


/* ------------------------------------------------------------
   VERITABANI BILGILERI KARTLARI (dark mode)
   ------------------------------------------------------------ */

body.dark-mode .db-info-card {
    background:
        linear-gradient(
            180deg,
            rgba(23, 31, 51, 0.85) 0%,
            rgba(17, 23, 38, 0.95) 100%
        );

    border: 1px solid #232d45;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35);
}

body.dark-mode .db-info-title .label {
    color: #93a0bd;
}

body.dark-mode .db-info-title h3 {
    color: #f1f5f9;
}

body.dark-mode .db-info-title .filename {
    color: #64748b;
}

body.dark-mode .db-info-size small {
    color: #64748b;
}

body.dark-mode .db-info-card.db-accent-blue {
    background:
        linear-gradient(
            180deg,
            rgba(37, 65, 122, 0.35) 0%,
            rgba(17, 23, 38, 0.95) 82%
        );
}

body.dark-mode .db-info-card.db-accent-green {
    background:
        linear-gradient(
            180deg,
            rgba(20, 90, 74, 0.30) 0%,
            rgba(17, 23, 38, 0.95) 82%
        );
}

body.dark-mode .db-info-card.db-accent-purple {
    background:
        linear-gradient(
            180deg,
            rgba(76, 58, 133, 0.32) 0%,
            rgba(17, 23, 38, 0.95) 82%
        );
}


/* ------------------------------------------------------------
   PANEL
   ------------------------------------------------------------ */

body.dark-mode .panel {
    background: #111827;

    border: 1px solid #232d45;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35);
}

body.dark-mode .panel-header p {
    color: #7c8aad;
}

body.dark-mode .panel-title-row p,
body.dark-mode .panel-title-row p::first-line {
    color: #7c8aad;
}

body.dark-mode #lastUpdate {
    color: #64748b;
}

body.dark-mode .loading {
    color: #64748b;
}


/* ------------------------------------------------------------
   MACHINE CARD
   ------------------------------------------------------------ */

body.dark-mode .machine-card {
    background:
        linear-gradient(
            145deg,
            rgba(23, 31, 51, 0.95),
            rgba(17, 23, 38, 0.97)
        );

    border: 1px solid #232d45;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.30);
}

body.dark-mode .machine-card:hover {
    border-color: #35415e;

    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.45);
}

body.dark-mode .machine-number {
    color: #f1f5f9;
}

body.dark-mode .info-label {
    color: #64748b;
}

body.dark-mode .info-value {
    color: #e2e8f0;
}

body.dark-mode .shift-grid,
body.dark-mode .today-section {
    border-top-color: #232d45;
}

body.dark-mode .unit-value {
    color: #f1f5f9;
}

body.dark-mode .today-value {
    color: #f8fafc;
}

body.dark-mode .stop-time-value {
    color: #93a0bd;
}

body.dark-mode .network-time {
    color: #5b6a8c;
}

body.dark-mode .design-value {
    color: #e2e8f0;
}


/* STATUS BADGES — kontrastı korumak için hafif ayarlandı */

body.dark-mode .status-running {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
}

body.dark-mode .status-stopped {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

body.dark-mode .status-offline {
    background: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

body.dark-mode .status-unknown {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

body.dark-mode .machine-card.status-offline {
    background:
        linear-gradient(
            145deg,
            rgba(23, 28, 40, 0.95) 0%,
            rgba(17, 21, 31, 0.97) 100%
        );

    border-color: #2a3348;
}

body.dark-mode .machine-card.status-offline .machine-number {
    color: #93a0bd;
}

body.dark-mode .machine-card.status-offline::before {
    background: #5b6a8c;
}

body.dark-mode .machine-card.status-stopped {
    background:
        linear-gradient(
            145deg,
            rgba(60, 24, 24, 0.55) 0%,
            rgba(17, 23, 38, 0.97) 100%
        );

    border-color: rgba(248, 113, 113, 0.35);
}

body.dark-mode .performance-good {
    color: #4ade80;
}

body.dark-mode .performance-warning {
    color: #fbbf24;
}

body.dark-mode .performance-danger {
    color: #f87171;
}

body.dark-mode .performance-normal {
    color: #93a0bd;
}

body.dark-mode .planned-break-label {
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #4ade80;
}


/* ------------------------------------------------------------
   MACHINE DETAIL MODAL
   ------------------------------------------------------------ */

body.dark-mode .machine-detail-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

body.dark-mode .machine-detail-panel {
    background: #111827;

    border: 1px solid #232d45;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55);
}

body.dark-mode .machine-detail-header {
    border-bottom-color: #232d45;
}

body.dark-mode .machine-detail-header p {
    color: #7c8aad;
}

body.dark-mode .detail-close-button {
    background: #1c2438;
    color: #cbd5e1;
}

body.dark-mode .detail-close-button:hover {
    background: #263049;
}

body.dark-mode .detail-date-row label {
    color: #93a0bd;
}

body.dark-mode .detail-date-row input,
body.dark-mode #detailDate {
    background: #0e1424;
    border-color: #2a3548;
    color: #e6ebf5;

    color-scheme: dark;
}

body.dark-mode .detail-summary-card {
    background: #171f33;
    border-color: #232d45;
}

body.dark-mode .detail-summary-card span {
    color: #64748b;
}

body.dark-mode .detail-summary-card strong {
    color: #f1f5f9;
}

body.dark-mode .detail-section-header h3,
body.dark-mode .detail-section h3 {
    color: #93a0bd;
}

body.dark-mode .detail-table-wrapper {
    border-color: #232d45;
}

body.dark-mode .detail-table th {
    background: #171f33;
    color: #7c8aad;
}

body.dark-mode .detail-table td {
    border-top-color: #1e2740;
    color: #cbd5e1;
}

body.dark-mode .detail-table td.units {
    color: #f1f5f9;
}

body.dark-mode .detail-loading,
body.dark-mode .detail-empty {
    color: #5b6a8c;
}

body.dark-mode .table-pagination-info {
    color: #7c8aad;
}


/* ------------------------------------------------------------
   PRODUCTION DATE INPUT (üst panel takvim seçici)
   ------------------------------------------------------------ */

body.dark-mode #productionDate {
    color-scheme: dark;
}

/* ============================================================
   16. TV MODE — DARK THEME OVERRIDES
   ============================================================
   TV modu normalde sabit gri tonlar kullanıyor
   (body.tv-mode arka planı ve .panel arka planı).
   Dark mode aktifken bu sabit renkleri, genel dark
   temanın lacivert paletiyle değiştiriyoruz.
   Machine card / status renklerine dokunmuyoruz,
   onlar zaten yukarıdaki genel body.dark-mode
   kurallarından geliyor.
   ============================================================ */

@media screen {

    body.dark-mode.tv-mode {
        background: #0b0f19;
    }

    body.dark-mode.tv-mode .panel {
        background: #111827;
    }

}

body.dark-mode.tv-mode .topbar {
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.45),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode.tv-mode .today-section {
    border-top-color: #232d45;
    border-bottom-color: #232d45;
}

/* ============================================================
   17. DARK MODE — CARD/PANEL CONTRAST (ELEVATION FIX)
   ============================================================
   Amaç: sayfa arka planı en koyu seviyede kalsın, panel bir
   ton daha açık, kartlar (summary-card / machine-card /
   detail-summary-card / modal) ondan da açık ve belirgin
   kenarlıklı olsun. Böylece kartlar arka plandan net ayrışır.
   Bu blok, önceki dark mode kurallarının ÜZERİNE yazıldığı
   için (aynı seçiciler, sonradan gelen kazanır) ayrı bir
   dosya/refactor gerekmiyor.
   ============================================================ */

body.dark-mode {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(59, 130, 246, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(139, 92, 246, 0.07),
            transparent 30%
        ),
        #03040a;
}

body.dark-mode .panel {
    background: #0d1322;
    border-color: #2a3550;
}

/* ---- SUMMARY CARDS ---- */

body.dark-mode .summary-card {
    background: #1e2740;
    border: 1px solid #38456a;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* nth-child(1-4) renk geçişleri kasıtlı olarak burada
   ezilmiyor: bölüm 15'teki orijinal (önceki tasarımdaki)
   linear-gradient tanımları, pseudo-class kullandıkları için
   zaten daha yüksek özgüllüğe sahip ve otomatik olarak
   kazanıyor. Böylece üst kart renk geçişleri eski haliyle
   kalırken, kenarlık/gölge gibi genel kontrast iyileştirmeleri
   (yukarıdaki .summary-card kuralı) geçerli olmaya devam
   ediyor. */

/* ---- MACHINE CARDS ---- */

body.dark-mode .machine-card {
    background: #1c2439;
    border: 1px solid #38456a;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark-mode .machine-card:hover {
    border-color: #4d5c88;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark-mode .machine-card.status-offline {
    background: #23262b;
    border-color: #40454d;
}

body.dark-mode .machine-card.status-offline .machine-number {
    color: #9aa3ad;
}

/* YENI: acik arizali bir makine ayni zamanda CEVRIMDISI da olsa,
   baslik rengi donuk gri KALMAZ - ariza vurgusu her zaman ayni
   canlilikta gorunur (bkz. yukarida acik tema versiyonu). */
body.dark-mode .machine-card.has-failure .machine-number {
    color: #f1f5f9;
}

body.dark-mode .machine-card.status-stopped {
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(239, 68, 68, 0.65) 0%,
            rgba(153, 27, 27, 0.30) 32%,
            #1c2439 66%
        );

    border-color: #9a3d3d;

    box-shadow:
        0 4px 16px rgba(220, 38, 38, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* YENI: acik ariza - STOPPED ile ayni desen (0% 0% koseden
   radial-gradient), sari/amber tonda. Dosyada STOPPED/OFFLINE
   kurallarindan SONRA geldigi icin, bir makinede ikisi ayni anda
   olsa bile ariza rengi kazanir. */
body.dark-mode .machine-card.has-failure {
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(245, 158, 11, 0.65) 0%,
            rgba(180, 83, 9, 0.30) 32%,
            #1c2439 66%
        );

    border-color: #b45309;

    box-shadow:
        0 4px 16px rgba(245, 158, 11, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---- MACHINE DETAIL MODAL ---- */

body.dark-mode .machine-detail-panel {
    background: #0d1322;
    border-color: #2a3550;
}

body.dark-mode .detail-summary-card {
    background: #1c2439;
    border-color: #38456a;
}

body.dark-mode .detail-date-row input,
body.dark-mode #detailDate {
    background: #171f33;
    border-color: #3d4a6e;
}

body.dark-mode .detail-table th {
    background: #171f33;
}

body.dark-mode .detail-table-wrapper {
    border-color: #2a3550;
}

/* ---- TV MODE (aynı yükseklik mantığı) ---- */

@media screen {

    body.dark-mode.tv-mode {
        background: #03040a;
    }

    body.dark-mode.tv-mode .panel {
        background: #0d1322;
    }

}
/* ============================================================
   18. MACHINE DETAIL — TAB BAR
   ============================================================ */

.detail-tab-bar {
    display: flex;
    gap: 4px;

    padding: 0 24px;

    border-bottom: 1px solid #e2e8f0;
}

.detail-tab-button {
    padding: 12px 18px;

    border: none;
    background: none;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;

    cursor: pointer;

    border-bottom: 2px solid transparent;

    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.detail-tab-button:hover {
    color: #1e293b;
}

.detail-tab-button.is-active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.detail-tab-panel {
    display: none;
}

.detail-tab-panel.is-active {
    display: block;
}

/* ============================================================
   18b. AYARLAR — SEKME (TAB) YAPISI (YENI, TAMAMEN EKTIR)
   Raporlar panelindeki ".report-tabs" / ".report-tab-btn" /
   ".report-tab-content" ile AYNI gorunum (bkz. asagida "RAPORLAR
   PANELI SEKMELERI"). Ayni sinifi DEGIL, ayni GORUNUME sahip ayri
   sinif adlari kullanildi ki Raporlar sekmelerinin tiklama
   dinleyicisiyle (".report-tab-btn" secicisi) CAKISMASIN.
   ============================================================ */

.settings-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
}

.settings-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
}

.settings-tab-btn:hover {
    color: #1e293b;
}

.settings-tab-btn.is-active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

/* YENI - KOYU TEMA: acik tema icin yukaridaki degerler, koyu tema
   icin ise onceki (Raporlar sekmeleriyle ayni) koyu-uyumlu
   degerler kullanilir - boylece tema degistirilince renk GERCEKTEN
   degisir (eskiden sabitti). */
body.dark-mode .settings-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .settings-tab-btn {
    color: #8891a7;
}

body.dark-mode .settings-tab-btn:hover {
    color: #e7ecf7;
}

body.dark-mode .settings-tab-btn.is-active {
    color: #6f9bff;
    border-bottom-color: #5b8cff;
}

.settings-tab-content {
    display: none;
    padding-top: 20px;
}

.settings-tab-content.is-active {
    display: block;
}

/* ============================================================
   18c. PARCA / FATURA - SEKME (TAB) YAPISI (YENI, TAMAMEN EKTIR)
   ".settings-tab-btn" ile AYNI gorunum, ayri sinif adi -
   yukaridaki ayni sebep (tiklama dinleyicisi cakismasin).
   ============================================================ */

.parts-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
}

.parts-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
}

.parts-tab-btn:hover {
    color: #1e293b;
}

.parts-tab-btn.is-active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

body.dark-mode .parts-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .parts-tab-btn {
    color: #8891a7;
}

body.dark-mode .parts-tab-btn:hover {
    color: #e7ecf7;
}

body.dark-mode .parts-tab-btn.is-active {
    color: #6f9bff;
    border-bottom-color: #5b8cff;
}

.parts-tab-content {
    display: none;
    padding-top: 20px;
}

.parts-tab-content.is-active {
    display: block;
}

.detail-table td.invoice-description-cell {
    white-space: normal;
    max-width: 220px;
    overflow-wrap: break-word;
    font-size: 10.5px;
    color: #9ca3af;
}

body.dark-mode .invoice-description-cell {
    color: #64748b;
}

/* Fatura tablosu basliklari (Invoice No./Date/Supplier/.../Note)
   diger detail-table'lardan (Part Orders vb.) etkilenmesin diye
   sadece #invoiceTableContainer icine ozel, buyutulmus versiyon. */
#invoiceTableContainer .detail-table th {
    font-size: 11.5px;
    letter-spacing: 0.4px;
}

.order-status-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.order-status-requested {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border: 1px solid rgba(71, 85, 105, 0.25);
}

.order-status-ordered {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border: 1px solid rgba(180, 83, 9, 0.25);
}

.order-status-received {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.order-status-cancelled {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

body.dark-mode .order-status-requested {
    background: rgba(148, 163, 184, 0.16);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.3);
}

body.dark-mode .order-status-ordered {
    background: rgba(251, 191, 36, 0.16);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

body.dark-mode .order-status-received {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

body.dark-mode .order-status-cancelled {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}

.machine-scope-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

body.dark-mode .machine-scope-badge {
    background: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
}


/* ============================================================
   18d. ONAY DIYALOGU (YENI) - tarayicinin native confirm()
   penceresi yerine kullanilan ozel onay penceresi.
   ============================================================ */

.confirm-dialog-panel {
    width: min(400px, 100%);
    max-height: none;

    padding: 28px 28px 22px;

    align-items: center;
    text-align: center;
}

.confirm-dialog-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;

    border-radius: 50%;
    background-color: rgba(239, 68, 68, 0.12);

    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

.confirm-dialog-message {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
}

.confirm-dialog-actions {
    justify-content: center;
    width: 100%;
}

#confirmDialogOkButton.confirm-dialog-danger-button {
    background: #dc2626;
}

#confirmDialogOkButton.confirm-dialog-danger-button:hover {
    background: #b91c1c;
}

/* Silme disindaki onaylar icin (orn. toplu ariza ac/kapat) - kirmizi
   cop kutusu yerine notr mavi bir bilgi ikonu. */
.confirm-dialog-icon.is-neutral {
    background-color: rgba(37, 99, 235, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

body.dark-mode .confirm-dialog-icon {
    background-color: rgba(248, 113, 113, 0.16);
}

body.dark-mode .confirm-dialog-icon.is-neutral {
    background-color: rgba(96, 165, 250, 0.16);
}

body.dark-mode .confirm-dialog-message {
    color: #cbd5e1;
}

body.dark-mode #confirmDialogOkButton.confirm-dialog-danger-button {
    background: #dc2626;
}

body.dark-mode #confirmDialogOkButton.confirm-dialog-danger-button:hover {
    background: #ef4444;
}


/* ============================================================
   19. MAINTENANCE — FORMS
   ============================================================ */

.detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.btn-small {
    padding: 6px 12px;

    border: 1px solid #cbd5e1;
    border-radius: 6px;

    background: #f8fafc;
    color: #334155;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-small:hover {
    background: #eef2ff;
    border-color: #93c5fd;
}

.maintenance-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;

    margin: 12px 0 18px;
    padding: 16px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.maintenance-form.is-hidden {
    display: none;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-row-full {
    grid-column: 1 / -1;
}

.form-row-header {
    grid-column: 1 / -1;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #94a3b8;

    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
}

.form-row label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #64748b;
    text-transform: uppercase;
}

.form-row input,
.form-row select,
.form-row textarea {
    padding: 8px 10px;

    border: 1px solid #cbd5e1;
    border-radius: 6px;

    font-size: 13px;
    font-family: inherit;
    color: #1e293b;

    background: #ffffff;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-row textarea {
    resize: vertical;
}

.form-actions {
    grid-column: 1 / -1;

    display: flex;
    gap: 10px;
    margin-top: 4px;
}

/* ------------------------------------------------------------
   AYARLAR > BILDIRIMLER (Web Push)
   ------------------------------------------------------------ */

.notif-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 0 10px;

    font-size: 13px;
    font-weight: 700;
    color: #334155;

    cursor: pointer;
}

.notif-toggle-note {
    font-weight: 400;
    color: #94a3b8;
}

.notif-hint {
    margin: 8px 0 0;

    font-size: 12px;
    color: #64748b;
}

.notif-test-result {
    display: inline-block;
    margin-left: 10px;

    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
}

body.dark-mode .notif-toggle-row {
    color: #cbd5e1;
}

body.dark-mode .notif-hint {
    color: #7c8698;
}

body.dark-mode .notif-test-result {
    color: #4ade80;
}

.notif-event-list {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

body.dark-mode .notif-event-list {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------
   AYARLAR > TV EKRANI
   ------------------------------------------------------------ */

.tv-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.tv-settings-row-divider {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

body.dark-mode .tv-settings-row-divider {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.tv-settings-row .form-row input[type="number"] {
    width: 140px;
}

.settings-segmented {
    display: inline-flex;
    gap: 2px;

    padding: 3px;

    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.settings-segmented-btn {
    padding: 7px 16px;

    border: none;
    border-radius: 7px;
    background: transparent;

    font-size: 13px;
    font-weight: 600;
    color: #64748b;

    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-segmented-btn:hover {
    color: #1e293b;
}

.settings-segmented-btn.is-active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

body.dark-mode .settings-segmented {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .settings-segmented-btn {
    color: #94a3b8;
}

body.dark-mode .settings-segmented-btn:hover {
    color: #e2e8f0;
}

body.dark-mode .settings-segmented-btn.is-active {
    background: rgba(37, 99, 235, 0.28);
    color: #93c5fd;
    box-shadow: none;
}

.notif-machine-mute-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;

    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;

    padding: 2px;
}

.notif-machine-mute-chip {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 600;
    color: #475569;

    cursor: pointer;
    user-select: none;
}

.notif-machine-mute-chip input {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: #ef4444;
}

.notif-machine-mute-chip:has(input:checked) {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}

body.dark-mode .notif-machine-mute-chip {
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

body.dark-mode .notif-machine-mute-chip:has(input:checked) {
    border-color: rgba(248, 113, 113, 0.6);
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

/* ------------------------------------------------------------
   BILDIRIM IZNI ONERI KARTI (push-prompt) - sabit koyu ton,
   acik/koyu tema secimden BAGIMSIZ (kucuk, gecici bir toast).
   ------------------------------------------------------------ */

.push-prompt-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;

    max-width: 520px;
    margin: 0 auto;

    padding: 14px 16px;
    border-radius: 12px;
    background: #111827;
    color: #f1f5f9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.push-prompt-banner.is-hidden {
    display: none;
}

.push-prompt-text {
    display: flex;
    flex-direction: column;
    gap: 2px;

    font-size: 13px;
}

.push-prompt-text span {
    font-size: 12px;
    color: #94a3b8;
}

.push-prompt-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .push-prompt-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        flex-direction: column;
        align-items: stretch;
    }
}

.btn-primary {
    padding: 9px 18px;

    border: none;
    border-radius: 7px;

    background: #2563eb;
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: background 0.15s ease;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-secondary {
    padding: 9px 18px;

    border: 1px solid #cbd5e1;
    border-radius: 7px;

    background: #ffffff;
    color: #475569;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.btn-secondary:hover {
    background: #f1f5f9;
}


/* ---- ARIZA DURUM KUTUSU ---- */

.failure-status-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 14px 16px;
    margin-bottom: 4px;

    border-radius: 10px;

    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.failure-status-box.has-open-failure {
    background: #fef2f2;
    border-color: #fecaca;
}

.failure-status-text {
    font-size: 13px;
    font-weight: 600;
    color: #166534;
}

.failure-status-box.has-open-failure .failure-status-text {
    color: #991b1b;
}

.failure-status-meta {
    font-size: 12px;
    color: #64748b;
}


/* ---- ROZETLER ---- */

.badge {
    display: inline-block;
    padding: 3px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.badge-open {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.badge-closed {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.badge-requested {
    background: rgba(148, 163, 184, 0.15);
    color: #475569;
}

.badge-ordered {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.badge-received {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}


/* ---- BAGLANTI VE SENKRONIZASYON (Ayarlar - YENI, TAMAMEN EKTIR) ---- */

.conn-table td {
    vertical-align: top;
}

.conn-machine-id {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: #9ca3af;
}

.conn-target {
    font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
    font-size: 11px;
    color: #475569;
    white-space: nowrap;
}

.conn-target-muted {
    color: #cbd5e1;
    font-family: inherit;
}

.conn-error-note {
    margin-top: 5px;
    max-width: 240px;
    font-size: 10px;
    color: #b91c1c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conn-offline-note {
    margin-top: 4px;
    font-size: 10px;
    color: #92400e;
    white-space: nowrap;
}

.conn-ago-unit {
    font-size: 10px;
    color: #9ca3af;
    text-transform: lowercase;
}

.conn-ago-never {
    color: #9ca3af;
    font-weight: 600;
}

.conn-ago-now {
    color: #16a34a;
    font-weight: 700;
}

.conn-method-smb {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border: 1px solid rgba(29, 78, 216, 0.25);
}

.conn-method-http {
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
    border: 1px solid rgba(109, 40, 217, 0.25);
}

tr.conn-row-disabled {
    opacity: 0.55;
}

.identity-check-actions {
    display: flex;
    gap: 8px;
}

.identity-match {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.identity-mismatch {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.identity-unreachable {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border: 1px solid rgba(71, 85, 105, 0.25);
}

.identity-no-baseline {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border: 1px solid rgba(180, 83, 9, 0.25);
}

tr.identity-row-alert {
    background: rgba(239, 68, 68, 0.05);
}


/* ---- BELGE YÜKLEME ---- */

.document-upload-box {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 10px 0 16px;
}

.document-upload-box input[type="file"] {
    flex: 1;

    padding: 8px 10px;

    border: 1px dashed #cbd5e1;
    border-radius: 7px;

    font-size: 12px;
    background: #f8fafc;
}

.document-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.document-link:hover {
    text-decoration: underline;
}



/* ---- DOCUMENT ACTION BUTTONS ---- */

.document-actions .document-action-view,
.document-actions .document-action-delete {
    min-width: 62px;
    height: 30px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

#showMaintenanceFormBtn,
#showOrderFormBtn,
#showInvoiceFormBtn {
    background: #17332b;
    border-color: #2f6654;
    color: #b8e0d0;
}

#showMaintenanceFormBtn:hover,
#showOrderFormBtn:hover,
#showInvoiceFormBtn:hover {
    background: #1d4035;
    border-color: #3f8069;
}

/* ------------------------------------------------------------
   MAINTENANCE TABLE ACTIONS
   ------------------------------------------------------------ */

.order-status-actions,
.document-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    white-space: nowrap;
}

.order-status-actions button,
.document-action-view,
.document-action-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 72px;
    height: 34px;
    padding: 0 14px;

    border: 1px solid #334155;
    border-radius: 7px;

    background: #172033;
    color: #cbd5e1;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    text-decoration: none;

    box-sizing: border-box;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.order-status-actions button:hover,
.document-action-view:hover,
.document-action-delete:hover {
    background: #202b40;
    border-color: #4b5d7a;
}

.order-status-actions button:hover {
    background: #f1f5f9;
}

/* ---- MAINTENANCE TABLE ACTIONS ---- */

.maintenance-action-cell {
    text-align: right;
    white-space: nowrap;
}

.maintenance-action-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.maintenance-action-buttons button {
    min-width: 62px;
    height: 30px;
    padding: 4px 10px;

    font-size: 12px;
    font-weight: 600;

    border: 1px solid #35415e;
    border-radius: 6px;

    background: #171f33;
    color: #cbd5e1;

    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.maintenance-action-buttons button:hover {
    background: #1e2740;
    border-color: #4a5a82;
}


/* ============================================================
   20. DARK MODE — MAINTENANCE MODULE
   ============================================================ */

body.dark-mode .detail-tab-bar {
    border-bottom-color: #232d45;
}

body.dark-mode .detail-tab-button {
    color: #7c8aad;
}

body.dark-mode .detail-tab-button:hover {
    color: #e6ebf5;
}

body.dark-mode .detail-tab-button.is-active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

/* ---- AYARLAR SEKME (TAB) - KOYU TEMA (YENI, TAMAMEN EKTIR) ---- */
body.dark-mode .settings-tab-bar {
    border-bottom-color: #232d45;
}

body.dark-mode .settings-tab-button {
    color: #7c8aad;
}

body.dark-mode .settings-tab-button:hover {
    color: #e6ebf5;
}

body.dark-mode .settings-tab-button.is-active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

body.dark-mode .btn-small {
    background: #171f33;
    border-color: #35415e;
    color: #cbd5e1;
}

body.dark-mode .btn-small:hover {
    background: #1e2740;
    border-color: #4a5a82;
}

body.dark-mode .maintenance-form {
    background: #131a2b;
    border-color: #2a3550;
}

body.dark-mode .form-row-header {
    color: #64748b;
    border-top-color: #2f3b58;
}

body.dark-mode .form-row label {
    color: #93a0bd;
}

body.dark-mode .form-row input,
body.dark-mode .form-row select,
body.dark-mode .form-row textarea {
    background: #0e1424;
    border-color: #35415e;
    color: #e6ebf5;

    color-scheme: dark;
}

body.dark-mode .form-row input:focus,
body.dark-mode .form-row select:focus,
body.dark-mode .form-row textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

body.dark-mode .btn-primary {
    background: #2563eb;
}

body.dark-mode .btn-primary:hover {
    background: #3b82f6;
}

body.dark-mode .btn-secondary {
    background: #171f33;
    border-color: #35415e;
    color: #cbd5e1;
}

body.dark-mode .btn-secondary:hover {
    background: #1e2740;
}

body.dark-mode .failure-status-box {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(74, 222, 128, 0.25);
}

body.dark-mode .failure-status-box.has-open-failure {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.3);
}

body.dark-mode .failure-status-text {
    color: #4ade80;
}

body.dark-mode .failure-status-box.has-open-failure .failure-status-text {
    color: #f87171;
}

body.dark-mode .failure-status-meta {
    color: #7c8aad;
}

body.dark-mode .badge-open {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}

body.dark-mode .badge-closed {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

body.dark-mode .badge-requested {
    background: rgba(148, 163, 184, 0.14);
    color: #93a0bd;
}

body.dark-mode .badge-ordered {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

body.dark-mode .conn-target {
    color: #94a3b8;
}

body.dark-mode .conn-target-muted {
    color: #475569;
}

body.dark-mode .conn-machine-id {
    color: #64748b;
}

body.dark-mode .conn-error-note {
    color: #f87171;
}

body.dark-mode .conn-offline-note {
    color: #fbbf24;
}

body.dark-mode .conn-ago-unit,
body.dark-mode .conn-ago-never {
    color: #64748b;
}

body.dark-mode .conn-ago-now {
    color: #4ade80;
}

body.dark-mode .conn-method-smb {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.3);
}

body.dark-mode .conn-method-http {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
    border-color: rgba(196, 181, 253, 0.3);
}

body.dark-mode .badge-received {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

body.dark-mode .identity-match {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

body.dark-mode .identity-mismatch {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}

body.dark-mode .identity-unreachable {
    background: rgba(148, 163, 184, 0.16);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.3);
}

body.dark-mode .identity-no-baseline {
    background: rgba(251, 191, 36, 0.16);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

body.dark-mode tr.identity-row-alert {
    background: rgba(248, 113, 113, 0.06);
}

body.dark-mode .document-upload-box input[type="file"] {
    background: #131a2b;
    border-color: #35415e;
    color: #cbd5e1;
}

body.dark-mode .document-link {
    color: #60a5fa;
}

body.dark-mode .order-status-actions button {
    background: #171f33;
    border-color: #35415e;
    color: #cbd5e1;
}

body.dark-mode .order-status-actions button:hover {
    background: #1e2740;
}


.document-upload-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.document-upload-button,
.document-camera-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #172033;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.document-upload-button:hover,
.document-camera-button:hover {
    background: #202b40;
    border-color: #4b5d7a;
}

.document-file-name {
    margin-top: 8px;
    color: #94a3b8;
    font-size: 13px;
}

.document-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.75);
}

.document-preview-modal {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    padding: 10px;
    border-radius: 12px;
    background: #111827;
    border: 1px solid #334155;
}

.document-preview-modal img {
    display: block;
    max-width: 85vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
}

.document-preview-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.document-preview-close:hover {
    background: #334155;
}

/* ============================================================
   TABLET / iPAD — MACHINE GRID

   ONEMLI: telefon/tablet gorunumu ESKISI GIBI SABIT sutun
   sayisiyla kaliyor (kullanicinin istegi) - "auto-fill"
   davranisi SADECE masaustunde (>1200px) gecerli.
   ============================================================ */

@media (min-width: 701px) and (max-width: 1400px) {
    .machine-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .shift-grid {
        display: none !important;
    }
}

@media (min-width: 701px) and (max-width: 900px) {
    .machine-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shift-grid {
        display: none !important;
    }
}
/* ============================================================
   21. EDIT / DELETE ACTION BUTTONS (Maintenance & Failure Report)
   ============================================================
   Duzenle butonlari mevcut .btn-small gorunumunu koruyor,
   sil butonlari ayirt edici olsun diye kirmizi tonlanıyor.
   ============================================================ */

.invoice-delete-button,
.failure-delete-button,
.order-delete-button {
    border-color: rgba(220, 38, 38, 0.35) !important;
    color: #dc2626 !important;
}

.invoice-delete-button:hover,
.failure-delete-button:hover,
.order-delete-button:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.55) !important;
}

body.dark-mode .invoice-delete-button,
body.dark-mode .failure-delete-button,
body.dark-mode .order-delete-button {
    border-color: rgba(248, 113, 113, 0.35) !important;
    color: #f87171 !important;
}

body.dark-mode .invoice-delete-button:hover,
body.dark-mode .failure-delete-button:hover,
body.dark-mode .order-delete-button:hover {
    background: rgba(248, 113, 113, 0.12) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
}

.invoice-edit-button,
.failure-edit-button,
.order-edit-button {
    margin-right: 4px;
}


/* ============================================================
   YENI - GENEL YARDIMCI SINIF
   ============================================================ */

.is-hidden {
    display: none !important;
}


/* Login screen - machine wall built by static/login_scene.js; always dark, skin/theme only apply after login. */

.login-screen {
    --lg-bg: #04060d;
    --lg-text: #eef2ff;
    --lg-text-2: #b4bfd8;
    --lg-text-3: #7d89a6;
    --lg-line: rgba(255, 255, 255, 0.12);
    --lg-line-2: rgba(255, 255, 255, 0.2);
    --lg-accent: #7aa2ff;
    --lg-accent-2: #5ee7ff;
    --lg-grad: linear-gradient(120deg, #a9c1ff 0%, #7aa2ff 45%, #5ee7ff 100%);

    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(1000px 640px at 50% 45%, rgba(91, 140, 255, 0.10), transparent 70%),
        var(--lg-bg);
    color: var(--lg-text);
}

.login-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--lg-text-3);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.login-loading-mark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(122, 162, 255, 0.18);
    border-top-color: var(--lg-accent-2);
    animation: login-spin 0.9s linear infinite;
}

.login-wall-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    perspective: 1400px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.login-wall {
    --wall-scale: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1400px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 132px;
    grid-auto-flow: dense;
    gap: 16px;
    transform: translate(-50%, -50%) scale(var(--wall-scale)) rotateX(26deg) rotateZ(-4deg);
    transform-origin: center;
    opacity: 0.6;
}

.lw-card {
    --lw-color: #7aa2ff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px 14px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.lw-tile {
    --lw-color: #34d399;
    box-shadow: inset 0 2px 0 0 var(--lw-color-soft, rgba(52, 211, 153, 0.35));
    transition: box-shadow 0.8s ease;
}

.lw-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7d89a6;
}

.lw-kpi-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.lw-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #e7ecf7;
}

.lw-kpi-date {
    font-size: 1.6rem;
}

.lw-kpi-alert {
    color: #f87171;
}

.lw-kpi-total {
    font-size: 1rem;
    color: #7d89a6;
}

.lw-delta {
    font-size: 0.75rem;
    font-weight: 700;
    color: #34d399;
}

.lw-spark {
    width: 100%;
    height: 28px;
    margin-top: auto;
}

.lw-spark path,
.lw-line .lw-stroke {
    fill: none;
    stroke: #7aa2ff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.lw-chart .lw-line {
    flex: 1;
    width: 100%;
    min-height: 0;
}

.lw-line .lw-gridlines line {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.lw-donut-body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.lw-donut {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    transform: rotate(-90deg);
}

.lw-donut circle {
    fill: none;
    stroke-width: 5;
}

.lw-donut-track {
    stroke: rgba(255, 255, 255, 0.06);
}

.lw-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.72rem;
    color: #9aa7c4;
}

.lw-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lw-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.lw-legend li[data-state="running"] i { background: #34d399; }
.lw-legend li[data-state="stopped"] i { background: #fbbf24; }
.lw-legend li[data-state="offline"] i { background: #64748b; }

.lw-legend b {
    margin-left: auto;
    padding-left: 10px;
    color: #e7ecf7;
}

.lw-hbars {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.lw-hbar {
    display: grid;
    grid-template-columns: 38px 1fr 34px;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    color: #9aa7c4;
}

.lw-hbar div {
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.lw-hbar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5b8cff, #5ee7ff);
    transition: width 0.9s ease;
}

.lw-hbar b {
    text-align: right;
    color: #e7ecf7;
    font-variant-numeric: tabular-nums;
}

.lw-dots {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 4px;
    margin-top: auto;
}

.lw-dots i {
    aspect-ratio: 1;
    border-radius: 3px;
    background: #34d399;
    opacity: 0.8;
}

.lw-dots i[data-state="stopped"] { background: #fbbf24; }
.lw-dots i[data-state="offline"] { background: #64748b; }
.lw-dots i[data-state="failure"] { background: #f87171; }

.lw-tile[data-state="running"] { --lw-color: #34d399; --lw-color-soft: rgba(52, 211, 153, 0.35); }
.lw-tile[data-state="stopped"] { --lw-color: #fbbf24; --lw-color-soft: rgba(251, 191, 36, 0.35); }
.lw-tile[data-state="offline"] { --lw-color: #64748b; --lw-color-soft: rgba(100, 116, 139, 0.3); }
.lw-tile[data-state="failure"] { --lw-color: #f87171; --lw-color-soft: rgba(248, 113, 113, 0.4); }

.lw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lw-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #9aa7c4;
}

.lw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lw-color);
    box-shadow: 0 0 10px var(--lw-color);
    transition: background 0.8s ease, box-shadow 0.8s ease;
}

.lw-tile[data-state="running"] .lw-dot {
    animation: lw-pulse 2.4s ease-in-out infinite;
}

.lw-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #dbe4f8;
}

.lw-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.lw-bars i {
    flex: 1;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, rgba(122, 162, 255, 0.75), rgba(122, 162, 255, 0.2));
    transition: height 0.9s ease;
}

.lw-progress {
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.lw-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--lw-color);
    transition: width 0.9s ease, background 0.8s ease;
}

.login-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 520px 460px at 50% 50%, rgba(4, 6, 13, 0.78), rgba(4, 6, 13, 0.25) 100%),
        linear-gradient(180deg, rgba(4, 6, 13, 0.85) 0%, rgba(4, 6, 13, 0) 30%, rgba(4, 6, 13, 0) 70%, rgba(4, 6, 13, 0.9) 100%);
}

.login-topbar {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
}

#loginScreen .lang-switch {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--lg-line);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#loginScreen .lang-switch-btn {
    color: var(--lg-text-3);
}

#loginScreen .lang-switch-btn:hover {
    color: var(--lg-text);
}

#loginScreen .lang-switch-btn.is-active {
    color: var(--lg-text);
    background: rgba(122, 162, 255, 0.2);
}

.login-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: login-stage-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.login-card {
    position: relative;
    width: 400px;
    max-width: 100%;
    padding: 34px 32px 26px;
    border-radius: 24px;
    border: 1px solid var(--lg-line);
    background:
        linear-gradient(160deg, rgba(40, 56, 96, 0.78) 0%, rgba(14, 20, 38, 0.86) 45%, rgba(8, 12, 24, 0.9) 100%);
    box-shadow:
        0 40px 90px -30px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 1px 0 rgba(255, 255, 255, 0.14) inset;
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
}

.login-screen {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

.login-screen input {
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

.login-screen button,
.login-screen .login-remember,
.login-screen .login-remember span {
    cursor: pointer;
}

.login-card-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at 30% 0%, rgba(255, 255, 255, 0.1), transparent 55%);
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    background: var(--lg-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-title {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--lg-text);
}

.login-subtitle {
    margin: -6px 0 8px;
    font-size: 0.88rem;
    color: var(--lg-text-3);
}

.login-field {
    position: relative;
}

.login-field input {
    width: 100%;
    height: 56px;
    padding: 22px 16px 8px;
    border-radius: 14px;
    border: 1px solid var(--lg-line);
    background: rgba(4, 7, 16, 0.55);
    color: var(--lg-text);
    font: inherit;
    font-size: 0.95rem;
    caret-color: var(--lg-accent-2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-field input[type="password"],
.login-field input.is-revealed {
    padding-right: 52px;
}

.login-field input:hover {
    border-color: var(--lg-line-2);
}

.login-field input:focus {
    outline: none;
    border-color: rgba(122, 162, 255, 0.75);
    background: rgba(122, 162, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(122, 162, 255, 0.16);
}

.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-text);
    -webkit-box-shadow: 0 0 0 1000px #121a2e inset;
    transition: background-color 9999s ease-out;
}

.login-field label {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: left center;
    font-size: 0.95rem;
    color: var(--lg-text-3);
    pointer-events: none;
    transition: transform 0.18s ease, color 0.18s ease;
}

.login-field input:focus + label,
.login-field input:not(:placeholder-shown) + label,
.login-field input:-webkit-autofill + label {
    transform: translateY(-122%) scale(0.76);
    color: var(--lg-text-2);
}

.login-field input:focus + label {
    color: var(--lg-accent);
}

.login-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--lg-text-3);
    cursor: pointer;
}

.login-eye:hover {
    color: var(--lg-text);
    background: rgba(255, 255, 255, 0.07);
}

.login-eye svg {
    width: 19px;
    height: 19px;
}

.login-eye-closed,
.login-eye.is-on .login-eye-open {
    display: none;
}

.login-eye.is-on .login-eye-closed {
    display: block;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin: 2px 0 4px;
    font-size: 0.86rem;
    color: var(--lg-text-2);
    cursor: pointer;
    user-select: none;
}

.login-remember input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.login-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--lg-line-2);
    background: rgba(255, 255, 255, 0.04);
    color: #0b1020;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.login-check svg {
    width: 13px;
    height: 13px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.login-remember input:checked + .login-check {
    background: var(--lg-grad);
    border-color: transparent;
}

.login-remember input:checked + .login-check svg {
    opacity: 1;
    transform: scale(1);
}

.login-remember input:focus-visible + .login-check {
    box-shadow: 0 0 0 4px rgba(122, 162, 255, 0.25);
}

.login-submit {
    position: relative;
    height: 56px;
    margin-top: 4px;
    padding: 0 8px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border: none;
    border-radius: 14px;
    background: var(--lg-grad);
    color: #0b1020;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 18px 36px -16px rgba(94, 160, 255, 0.85), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.login-submit::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.login-submit:hover {
    filter: brightness(1.06);
    box-shadow: 0 22px 44px -16px rgba(94, 200, 255, 0.95), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.login-submit:hover::after {
    left: 120%;
}

.login-submit:active {
    transform: translateY(1px) scale(0.995);
}

.login-submit:focus-visible {
    outline: 2px solid var(--lg-accent-2);
    outline-offset: 3px;
}

.login-submit-chip {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(11, 16, 32, 0.14);
}

.login-submit-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.login-submit:hover .login-submit-arrow {
    transform: translateX(3px);
}

.login-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(11, 16, 32, 0.25);
    border-top-color: #0b1020;
    animation: login-spin 0.8s linear infinite;
}

.login-submit.is-loading {
    pointer-events: none;
    filter: saturate(0.8);
}

.login-submit.is-loading .login-submit-arrow {
    display: none;
}

.login-submit.is-loading .login-spinner {
    display: block;
}

.login-card .login-error {
    margin: 0;
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.32);
    color: #ff9b9b;
    border-radius: 12px;
}

.login-card-footer {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.76rem;
    color: var(--lg-text-3);
    text-align: center;
    letter-spacing: 0.04em;
}

.login-card.is-shaking {
    animation: login-shake 0.42s ease;
}

@keyframes lw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@keyframes login-spin {
    to { transform: rotate(360deg); }
}

@keyframes login-stage-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes login-shake {
    0%, 100% { translate: 0; }
    20% { translate: -8px; }
    40% { translate: 7px; }
    60% { translate: -5px; }
    80% { translate: 3px; }
}

@media (max-width: 480px) {
    .login-stage {
        padding: 16px;
    }

    .login-card {
        padding: 28px 22px 22px;
        border-radius: 20px;
    }

    .login-title {
        font-size: 1.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-stage,
    .login-card.is-shaking,
    .lw-dot {
        animation: none !important;
    }

    .login-submit::after {
        display: none;
    }
}

.login-error {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #b91c1c;
    font-size: 0.8rem;
    text-align: left;
}

body.dark-mode .login-error {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #ff8a8a;
}


/* ============================================================
   YENI - UYGULAMA KABUGU / SIDEBAR
   ============================================================ */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    /* ONEMLI - DUZELTME: sidebar artik ".app-shell"in (tum sayfa
       icerigi kadar uzayabilen) yuksekligine gore UZAMIYOR - eskiden
       bu yuzden alt kisimdaki "Cikis Yap" dugmesi ancak SAYFANIN
       EN ALTINA kadar kaydirildiginda goruluyordu. Simdi sidebar
       kendi 100vh'lik yuksekligine "yapisik" (sticky) kaliyor,
       sayfa kaydirilsa bile ekranda sabit gorunur; ic icerigi
       (cok kisa oldugu icin normalde gerekmez ama guvenlik icin)
       gerekirse kendi ici kaydirilabilir. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: width 0.18s ease, padding 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

/* YENI: Masaustunde "daraltilinca ince ikon rayi" yerine, mobil/
   tabletteki gibi TAMAMEN GIZLENIR (genislik 0). Icerik alani
   (.app-content) otomatik olarak bosalan alani kaplar. Menuyu
   tekrar acmak icin ust bardaki (topbar) hamburger dugmesi
   (#mobileSidebarToggle) artik HER EKRAN GENISLIGINDE gorunur -
   bkz. asagida ".mobile-sidebar-toggle". */
.sidebar.is-collapsed {
    width: 0;
    padding: 0;
    border-right-color: transparent;
    overflow: hidden;
}

.sidebar.is-collapsed .sidebar-brand-block,
.sidebar.is-collapsed .sidebar-logo,
.sidebar.is-collapsed .sidebar-nav-label,
.sidebar.is-collapsed .sidebar-user-text {
    display: none;
}

.sidebar.is-collapsed .sidebar-user {
    justify-content: center;
}

.sidebar-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.sidebar-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
}

.sidebar-brand-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sidebar-toggle {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sidebar-toggle:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.2);
    color: #0f172a;
}

.sidebar-toggle svg {
    width: 14px;
    height: 14px;
}

/* Daraltilinca ok yonu ters cevrilir (ac/kapa gostergesi). */
.sidebar.is-collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

.sidebar-brand {
    display: block;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand-subtitle {
    display: block;
    color: #64748b;
    font-size: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    flex: 1;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.sidebar-nav-item:hover {
    background: rgba(15, 23, 42, 0.05);
    color: #0f172a;
}

/* YENI - GORUNUM: secili menu ogesi yumusak bir mavi vurgu +
   sol kenarda ince mavi bir cizgi ile isaretleniyor (Vercel/
   Linear tarzi dashboard'larda yaygin bir "active nav item"
   deseni). Koyu temada daha belirgin bir versiyonu asagida
   "body.dark-mode .sidebar-nav-item.is-active" icinde. */
.sidebar-nav-item.is-active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(34, 211, 238, 0.06));
    border-left-color: #3b82f6;
    color: #0f172a;
}

.sidebar-nav-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-nav-icon svg {
    width: 18px;
    height: 18px;
}

.sidebar-bottom {
    padding: 14px;
    border-top: 1px solid #e5e7eb;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.sidebar-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user strong {
    display: block;
    color: #0f172a;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user span {
    color: #64748b;
    font-size: 0.68rem;
    text-transform: uppercase;
}

.sidebar-logout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    border-radius: 8px;
    padding: 9px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sidebar-logout svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.sidebar-logout:hover {
    background: rgba(255, 90, 90, 0.15);
    border-color: rgba(255, 90, 90, 0.3);
    color: #ff8a8a;
}

/* ============================================================
   SIDEBAR KOYU TEMA
   ============================================================ */

body.dark-mode .sidebar {
    background: #0d1420;
    border-right-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .sidebar-top {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .sidebar-toggle {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #a6afc4;
}

body.dark-mode .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #e7ecf7;
}

body.dark-mode .sidebar-brand {
    color: #e7ecf7;
}

body.dark-mode .sidebar-brand-subtitle {
    color: #8891a7;
}

body.dark-mode .sidebar-nav-item {
    color: #a6afc4;
}

body.dark-mode .sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e7ecf7;
}

body.dark-mode .sidebar-nav-item.is-active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(34, 211, 238, 0.1));
    border-left-color: #3b82f6;
    color: #ffffff;
}

body.dark-mode .sidebar-bottom {
    border-top-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .sidebar-user strong {
    color: #e7ecf7;
}

body.dark-mode .sidebar-user span {
    color: #6f7996;
}

body.dark-mode .sidebar-logout {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #d0d6e5;
}

.app-content {
    flex: 1;
    min-width: 0;
}

.app-panel {
    display: none;
}

.app-panel.is-active {
    display: block;
}


/* ============================================================
   YENI - RAPORLAR / ANALIZ KONTROLLERI
   ============================================================ */

.report-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.report-quick-ranges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   ARIZALAR PANELI - toplu islem butonlari ile rapor filtreleri
   tek satirda sikisip birbirine karisiyordu; iki ayri satira
   (kendi basligi + aralarinda ince bir bolucu ile) ayriliyor.
   ------------------------------------------------------------ */

.fail-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.fail-controls-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 20px;
}

.fail-controls-bulk {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fail-controls-filters .report-custom-range {
    margin-left: 0;
}

#panel-arizalar #failReportTable tbody tr:nth-child(even) td,
#panel-arizalar #failReliabilityTable tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.02);
}

#panel-arizalar #failReportTable tbody tr:hover td,
#panel-arizalar #failReliabilityTable tbody tr:hover td {
    background: rgba(37, 99, 235, 0.06);
}

body.dark-mode #panel-arizalar #failReportTable tbody tr:nth-child(even) td,
body.dark-mode #panel-arizalar #failReliabilityTable tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.025);
}

body.dark-mode #panel-arizalar #failReportTable tbody tr:hover td,
body.dark-mode #panel-arizalar #failReliabilityTable tbody tr:hover td {
    background: rgba(96, 165, 250, 0.08);
}

.report-custom-range {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.report-custom-range label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.72rem;
    color: #8891a7;
}

.report-custom-range input[type="date"] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 7px 10px;
    color: #e7ecf7;
}

.report-custom-range select {
    background: #1a2332;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 7px 10px;
    color: #e7ecf7;
    min-width: 160px;
}

.report-custom-range select option {
    background: #1a2332;
    color: #e7ecf7;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 16px 20px;
}

/* Fatura ozet kartlari: sayi degiskenlik gosterebiliyor (1 fatura
   sayaci + kullanilan para birimi kadar kart), bu yuzden 1/3'e esit
   bolunen grid yerine icerige gore daralan, tek satirda kalabilen
   flex satiri kullaniliyor. */
#invoiceSummaryCards {
    display: flex;
    flex-wrap: wrap;
}

#invoiceSummaryCards .stat-tile {
    flex: 0 1 auto;
    width: auto;
    padding: 14px 80px 14px 18px;
    justify-content: flex-start;
}

#invoiceSummaryCards .stat-tile-icon {
    width: 38px;
    height: 38px;
}

#invoiceSummaryCards .stat-tile-value {
    font-size: 22px;
}

/* ------------------------------------------------------------
   STAT TILE (Raporlar / Analiz ozet kartlari) - .summary-card'dan
   BILEREK farkli bir gorunum: dikey nokta+etiket+sayi istifi yerine
   yatay ikon rozeti + etiket/sayi. Dashboard'daki ust bar (.summary-
   grid .summary-card) ile KARISTIRILMASIN diye ayri bir sinif.
   ------------------------------------------------------------ */

.stat-tile {
    display: flex;
    align-items: center;
    gap: 14px;

    /* Grid hucresi (.report-summary-grid) icinde varsayilan
       min-width:auto, uzun etiketli kartlarin sutunu esit
       paylasmak yerine tasmasina sebep oluyordu - .stat-tile-label
       zaten ellipsis ile kisaltmaya hazir, sadece kucula bilmesi
       gerekiyordu. */
    min-width: 0;

    padding: 16px 18px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;

    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.stat-tile-icon {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border-radius: 11px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
}

.stat-tile-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-tile-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-tile-value {
    margin-top: 4px;

    font-size: 25px;
    font-weight: 750;
    letter-spacing: -0.5px;
    line-height: 1.1;

    color: #0f172a;
}

.stat-tile-blue .stat-tile-icon {
    background-color: rgba(59, 130, 246, 0.12);
}

.stat-tile-purple .stat-tile-icon {
    background-color: rgba(139, 92, 246, 0.12);
}

.stat-tile-green .stat-tile-icon {
    background-color: rgba(16, 185, 129, 0.12);
}

.stat-tile-red .stat-tile-icon {
    background-color: rgba(239, 68, 68, 0.12);
}

.stat-tile-amber .stat-tile-icon {
    background-color: rgba(245, 158, 11, 0.12);
}

.stat-icon-units {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.89 1.45l8 4A2 2 0 0 1 22 7.24v9.53a2 2 0 0 1-1.11 1.79l-8 4a2 2 0 0 1-1.79 0l-8-4a2 2 0 0 1-1.11-1.79V7.24a2 2 0 0 1 1.11-1.79l8-4a2 2 0 0 1 1.79 0z'/%3E%3Cpolyline points='2.32 6.16 12 11 21.68 6.16'/%3E%3Cline x1='12' y1='22.76' x2='12' y2='11'/%3E%3C/svg%3E");
}

.stat-icon-jobs {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

.stat-icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.stat-icon-alert {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

.stat-icon-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

.stat-icon-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

.stat-icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.stat-icon-trend {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}

body.dark-mode .stat-tile {
    background:
        linear-gradient(
            180deg,
            rgba(23, 31, 51, 0.85) 0%,
            rgba(17, 23, 38, 0.95) 100%
        );
    border-color: #232d45;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .stat-tile-label {
    color: #7c8aad;
}

body.dark-mode .stat-tile-value {
    color: #f1f5f9;
}

body.dark-mode .stat-tile-blue .stat-tile-icon {
    background-color: rgba(96, 165, 250, 0.16);
}

body.dark-mode .stat-tile-purple .stat-tile-icon {
    background-color: rgba(167, 139, 250, 0.16);
}

body.dark-mode .stat-tile-green .stat-tile-icon {
    background-color: rgba(52, 211, 153, 0.16);
}

body.dark-mode .stat-tile-red .stat-tile-icon {
    background-color: rgba(248, 113, 113, 0.18);
}

body.dark-mode .stat-tile-amber .stat-tile-icon {
    background-color: rgba(251, 191, 36, 0.16);
}

@media (max-width: 640px) {
    .stat-tile {
        padding: 14px;
    }
    .stat-tile-value {
        font-size: 21px;
    }
}

.shift-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 20px 8px;
}

.shift-settings-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
    color: #a6afc4;
}

.shift-settings-grid input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 10px;
    color: #e7ecf7;
}

.inline-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 8px;
    color: #e7ecf7;
    font-size: 0.8rem;
    width: 100%;
}

/* select acildiginda tarayicinin acilir liste (dropdown) kismi bu
   background/color'lardan degil, native OS temasindan geliyor -
   koyu modda beyaz gorunmesin diye color-scheme'i acikca koyuya
   ceviriyoruz (sadece koyu modda - .inline-input acik modda da
   kullanildigi icin genel kural olarak eklenemez). color-scheme
   tek basina yeterli olmayabiliyor (tarayiciya gore degisiyor),
   bu yuzden option'lara da ACIKCA koyu renk veriyoruz - bu ikisi
   birlikte butun Chromium/Edge surumlerinde calisiyor. */
body.dark-mode select.inline-input {
    color-scheme: dark;
}

body.dark-mode select.inline-input option {
    background-color: #0e1424;
    color: #e6ebf5;
}

@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 500;
        height: 100vh;
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }
    .sidebar.is-collapsed {
        /* Mobilde "daraltilmis ikon rayi" kavrami yok - her zaman
           tam genislikte (etiketli) acilir/kapanir. */
        width: 240px;
    }
    .sidebar.is-collapsed .sidebar-brand,
    .sidebar.is-collapsed .sidebar-nav-label {
        display: inline;
    }
    .sidebar.is-collapsed .sidebar-brand-block {
        display: flex;
    }
    .sidebar.is-collapsed .sidebar-logo {
        display: flex;
    }
    .sidebar.is-collapsed .sidebar-user-text {
        display: flex;
    }
    .sidebar.is-collapsed .sidebar-user {
        display: flex;
    }
    .sidebar.is-mobile-open {
        transform: translateX(0);
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 450;
    }
    .sidebar-backdrop.is-visible {
        display: block;
    }
    .report-summary-grid {
        grid-template-columns: 1fr;
    }
    .shift-settings-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   YENI - DIL SECICI (TR/EN)
   ============================================================ */

.topbar-right-group {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.sidebar-backdrop {
    display: none;
}

.mobile-sidebar-toggle {
    /* YENI: Masaustunde VARSAYILAN OLARAK gizli - cunku sidebar
       acikken zaten kendi ic dugmesi (#sidebarToggle) var, ikisini
       AYNI ANDA gostermek gereksiz olurdu. Sidebar masaustunde
       tamamen gizlenince (".sidebar.is-collapsed"), admin_ui.js
       bu dugmeye ".is-visible-desktop" sinifini ekleyip tekrar
       acilabilir hale getirir - bkz. asagida. Mobil/tablette ise
       (asagidaki media query) HER ZAMAN gorunur, cunku sidebar
       orada zaten ekran disinda baslar ve ic dugmeye erisilemez.

       GORUNUM - DUZELTME: eskiden kare + 3 cizgili "hamburger"
       ikonuydu, sidebar'in kendi ac/kapa dugmesiyle (#sidebarToggle
       - yuvarlak + ok isareti) tutarsiz/eski gorunuyordu. Simdi AYNI
       dairesel + yon oku dili kullaniyor - bu dugme HER ZAMAN
       "menuyu ac" anlamina geldigi icin sabit sag yonlu ok yeterli
       (ayri bir donme durumu gerekmez, cunku bu dugme zaten sadece
       sidebar KAPALIYKEN gorunur). */
    display: none;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    margin-left: -6px;
    margin-right: 10px;
}

.mobile-sidebar-toggle:hover {
    background: rgba(91, 140, 255, 0.18);
    border-color: rgba(91, 140, 255, 0.5);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.12);
}

.mobile-sidebar-toggle:active {
    transform: scale(0.93);
}

.mobile-sidebar-toggle svg {
    width: 19px;
    height: 19px;
}

/* YENI: Masaustunde sidebar gizliyken (is-collapsed) admin_ui.js
   bu sinifi ekler ki menuyu tekrar acacak bir dugme HER ZAMAN
   erisilebilir kalsin. */
.mobile-sidebar-toggle.is-visible-desktop {
    display: flex;
}

@media (max-width: 1024px) {
    .mobile-sidebar-toggle {
        display: flex;
    }
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 3px;
}

.lang-switch-btn {
    background: transparent;
    border: none;
    color: #a6afc4;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.lang-switch-btn:hover {
    color: #e7ecf7;
}

.lang-switch-btn.is-active {
    background: #5b8cff;
    color: #fff;
}


/* ============================================================
   YENI - ANALIZ PANELI GRAFIKLERI
   ============================================================ */

.analytics-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 20px 16px;
}

.analytics-chart-box {
    margin: 0 !important;
    padding-bottom: 12px;
}

.chart-canvas-wrapper {
    position: relative;
    height: 260px;
    padding: 12px 16px;
}

.chart-canvas-wrapper-wide {
    height: 300px;
}

.chart-info-note {
    font-size: 0.68rem;
    color: #8891a7;
    font-weight: 400;
    margin-left: 10px;
}

@media (max-width: 1024px) {
    .analytics-chart-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   YENI - RAPORLAR PANELI SEKMELERI (Uretim Raporu / Ariza Raporu)
   ============================================================ */

.report-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
}

.report-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
}

.report-tab-btn:hover {
    color: #1e293b;
}

.report-tab-btn.is-active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.report-tab-content {
    display: none;
}

.report-tab-content.is-active {
    display: block;
}

/* YENI - KOYU TEMA: bu sekme cubugu eskiden HER ZAMAN koyu temaya
   uygun (sabit) renklerdeydi - acik temada metin neredeyse
   okunmuyordu (ozellikle hover rengi beyaza yakindi). Simdi acik
   tema icin yukaridaki degerler, koyu tema icin asagidaki (onceki
   sabit) degerler kullaniliyor. */
body.dark-mode .report-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .report-tab-btn {
    color: #8891a7;
}

body.dark-mode .report-tab-btn:hover {
    color: #e7ecf7;
}

body.dark-mode .report-tab-btn.is-active {
    color: #6f9bff;
    border-bottom-color: #5b8cff;
}

.report-summary-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .report-summary-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .report-summary-grid-4 {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   AYARLAR > GORUNUM - tema secici kartlari
   Onizlemeler, temanin kendi renklerini gosterdigi icin aktif
   temadan bagimsiz sabit renklerle ciziliyor. Foundry tema
   aktifken kartin kendisi theme-foundry.css'ten stillenir.
   ============================================================ */

.skin-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
    gap: 16px;
    padding: 4px 0 8px;
}

.skin-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;

    text-align: left;
    font: inherit;
    color: inherit;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;

    overflow: hidden;
    cursor: pointer;

    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.skin-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.skin-card.is-selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6, 0 8px 24px rgba(59, 130, 246, 0.15);
}

body.dark-mode .skin-card {
    background: #1c2439;
    border-color: #38456a;
}

body.dark-mode .skin-card:hover {
    border-color: #4d5c88;
}

body.dark-mode .skin-card.is-selected {
    border-color: #5b8cff;
    box-shadow: 0 0 0 1px #5b8cff, 0 8px 24px rgba(91, 140, 255, 0.18);
}

.skin-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
}

.skin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.skin-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

body.dark-mode .skin-card-title {
    color: #f1f5f9;
}

.skin-card-badge {
    display: none;

    padding: 2px 8px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    background: #3b82f6;
    color: #ffffff;
}

.skin-card.is-selected .skin-card-badge {
    display: inline-block;
}

.skin-card-desc {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

body.dark-mode .skin-card-desc {
    color: #93a0bd;
}

/* ---- Mini onizleme ---- */

.skin-preview {
    display: flex;
    gap: 8px;
    height: 150px;
    padding: 10px;
}

.sp-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 22%;
    padding: 8px 6px;
}

.sp-nav {
    display: block;
    height: 7px;
}

.sp-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.sp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sp-card {
    display: block;
    height: 30px;
}

.sp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    flex: 1;
}

.sp-tile {
    display: block;
}

/* Klasik: lacivert, yuvarlak, mavi/mor vurgulu */
.skin-preview-classic {
    background: #03040a;
}

.skin-preview-classic .sp-sidebar {
    background: #0d1420;
    border-radius: 6px;
}

.skin-preview-classic .sp-nav {
    border-radius: 4px;
    background: rgba(166, 175, 196, 0.25);
}

.skin-preview-classic .sp-nav:first-child {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.6), rgba(34, 211, 238, 0.3));
}

.skin-preview-classic .sp-card {
    border-radius: 6px;
    background: #1e2740;
    border-top: 2px solid #3b82f6;
}

.skin-preview-classic .sp-card:nth-child(2) {
    border-top-color: #8b5cf6;
}

.skin-preview-classic .sp-card:nth-child(3) {
    border-top-color: #10b981;
}

.skin-preview-classic .sp-tile {
    border-radius: 6px;
    background: #1c2439;
    border: 1px solid #38456a;
}

.skin-preview-classic .sp-tile-alert {
    background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.6), #1c2439 70%);
    border-color: #9a3d3d;
}

/* Foundry: notr antrasit zemin, keskin koseler, ince cizgiler, camgobegi/amber vurgu */
.skin-preview-foundry {
    background: #0b0c0e;
}

.skin-preview-foundry .sp-sidebar {
    background: #151618;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 3px;
}

.skin-preview-foundry .sp-nav {
    border-radius: 2px;
    background: rgba(182, 178, 169, 0.22);
}

.skin-preview-foundry .sp-nav:first-child {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.75), rgba(245, 158, 11, 0.45));
}

.skin-preview-foundry .sp-card {
    border-radius: 3px;
    background: #1c1e21;
    border-top: 2px solid #22d3ee;
}

.skin-preview-foundry .sp-card:nth-child(2) {
    border-top-color: #f59e0b;
}

.skin-preview-foundry .sp-card:nth-child(3) {
    border-top-color: #22c55e;
}

.skin-preview-foundry .sp-tile {
    border-radius: 3px;
    background: #1c1e21;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.skin-preview-foundry .sp-tile-alert {
    background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.55), #1c1e21 70%);
    border-color: rgba(239, 68, 68, 0.4);
}


/* ============================================================
   AYARLAR > KULLANICILAR - Hesaplar / Oturum Kayitlari / Islem
   Gecmisi. Ustteki Ayarlar sekme seridiyle karismasin diye alt
   cizgili degil, hap seklinde bir secici.
   ============================================================ */

.users-subtabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;

    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.users-subtab-btn {
    padding: 7px 14px;

    background: transparent;
    border: none;
    border-radius: 7px;

    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;

    cursor: pointer;
}

.users-subtab-btn:hover {
    color: #0f172a;
}

.users-subtab-btn.is-active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

body.dark-mode .users-subtabs {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .users-subtab-btn {
    color: #8891a7;
}

body.dark-mode .users-subtab-btn:hover {
    color: #e7ecf7;
}

body.dark-mode .users-subtab-btn.is-active {
    background: rgba(91, 140, 255, 0.18);
    color: #cfdcff;
    box-shadow: inset 0 0 0 1px rgba(91, 140, 255, 0.35);
}

.users-subtab-content {
    display: none;
}

.users-subtab-content.is-active {
    display: block;
}

.activity-filters {
    padding-left: 0;
    padding-right: 0;
}

.activity-filters .report-custom-range {
    margin-left: 0;
}

.activity-session-chip {
    align-self: flex-end;
}

.activity-muted {
    font-size: 0.72rem;
    color: #94a3b8;
}

.activity-failed {
    font-size: 0.72rem;
    font-weight: 700;
    color: #dc2626;
}

body.dark-mode .activity-muted {
    color: #6f7996;
}

body.dark-mode .activity-failed {
    color: #f87171;
}

.activity-hint {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

.activity-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
    background: #94a3b8;
}

.activity-dot-good { background: #22c55e; }
.activity-dot-bad { background: #ef4444; }
.activity-dot-view { background: #94a3b8; }
.activity-dot-action { background: #3b82f6; }
.activity-dot-export { background: #f59e0b; }
.activity-dot-neutral { background: #64748b; }


/* ============================================================
   PERSONEL YONETIMI PANELI (static/personnel.js)
   Acik tema kurallari + body.dark-mode karsiliklari. Foundry temasi
   icin ayrica theme-foundry.css'e bakin.
   ============================================================ */

.panel-header h2.h2-icon-personnel::before,
.machine-detail-header h2.h2-icon-personnel::before {
    background-color: rgba(14, 165, 233, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

body.dark-mode .panel-header h2.h2-icon-personnel::before,
body.dark-mode .machine-detail-header h2.h2-icon-personnel::before {
    background-color: rgba(56, 189, 248, 0.16);
}

.h3-icon-users::before {
    content: "";
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    background-color: rgba(14, 165, 233, 0.12);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

body.dark-mode .h3-icon-users::before {
    background-color: rgba(56, 189, 248, 0.16);
}

.stat-icon-users {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.stat-tile-sub {
    margin-top: 3px;
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   PERSONNEL > OVERVIEW: staffing (required vs current headcount)
   ============================================================ */

.staff-tile {
    position: relative;
    width: 100%;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.staff-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.14);
}

.staff-tile:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.staff-tile .stat-tile-body {
    flex: 1;
}

.staff-tile .stat-tile-sub {
    display: flex;
    align-items: center;
    gap: 8px;
}

.staff-tile-target {
    font-size: 0.62em;
    font-weight: 600;
    color: #94a3b8;
}

.staff-tile-bar {
    flex: 1;
    min-width: 40px;
    max-width: 120px;
    height: 5px;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.staff-tile-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #22d3ee);
}

.staff-tile-hint {
    color: #3b82f6;
    font-weight: 600;
}

.staff-tile-arrow {
    align-self: center;
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    transition: transform 0.15s ease, color 0.15s ease;
}

.staff-tile:hover .staff-tile-arrow {
    transform: translateX(3px);
    color: #3b82f6;
}

.staff-gap {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.staff-gap.is-short {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.staff-gap.is-over {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.staff-gap.is-ok {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.staff-panel {
    max-width: min(1080px, 96vw);
}

.staff-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
    gap: 12px;
    margin-bottom: 16px;
}

.staff-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.06);
}

.staff-stat span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #64748b;
}

.staff-stat strong {
    font-size: 24px;
    font-weight: 750;
    line-height: 1.1;
    color: #0f172a;
}

.staff-stat.is-short strong { color: #dc2626; }
.staff-stat.is-over strong { color: #2563eb; }
.staff-stat.is-ok strong { color: #059669; }

.staff-summary-bar {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.06);
    overflow: hidden;
}

.staff-summary-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.22), rgba(34, 211, 238, 0.22));
    transition: width 0.6s ease;
}

.staff-summary-bar.is-short span { background: linear-gradient(90deg, rgba(245, 158, 11, 0.22), rgba(239, 68, 68, 0.22)); }
.staff-summary-bar.is-ok span { background: linear-gradient(90deg, rgba(16, 185, 129, 0.22), rgba(34, 211, 238, 0.22)); }

.staff-summary-bar em {
    position: relative;
    font-style: normal;
    font-size: 22px;
    font-weight: 750;
    color: #0f172a;
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 12px;
}

.staff-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.05);
}

.staff-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid #eef2f7;
}

.staff-card-head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.staff-card-head span {
    font-size: 11.5px;
    color: #94a3b8;
}

.staff-card-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.staff-card-total strong {
    font-size: 20px;
    font-weight: 750;
    line-height: 1;
    color: #0f172a;
}

.staff-card-total small {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
}

.staff-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px auto auto;
    align-items: center;
    gap: 8px;
    min-height: 30px;
}

.staff-row.is-editing {
    grid-template-columns: minmax(0, 1fr) auto 64px;
}

.staff-row.is-editing .staff-bar {
    display: none;
}

.staff-role {
    min-width: 0;
}

.staff-role .pers-role {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-bar {
    height: 6px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.staff-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #94a3b8;
    transition: width 0.5s ease;
}

.staff-bar.is-short span { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.staff-bar.is-over span { background: linear-gradient(90deg, #3b82f6, #22d3ee); }
.staff-bar.is-ok span { background: linear-gradient(90deg, #10b981, #22d3ee); }

.staff-count {
    font-size: 13px;
    color: #94a3b8;
    white-space: nowrap;
    text-align: right;
}

.staff-count strong {
    font-size: 15px;
    color: #0f172a;
}

.staff-gap-cell {
    display: flex;
    justify-content: flex-end;
    min-width: 58px;
}

.staff-current {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.staff-input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #0f172a;
}

.staff-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.staff-warning {
    grid-column: 1 / -1;
    padding: 10px 14px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    font-size: 12.5px;
    color: #b45309;
}

.staff-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

body.dark-mode .staff-tile-target,
body.dark-mode .staff-card-total small,
body.dark-mode .staff-card-head span,
body.dark-mode .staff-count {
    color: #6f7996;
}

body.dark-mode .staff-stat,
body.dark-mode .staff-summary-bar,
body.dark-mode .staff-card {
    border-color: #2a3550;
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .staff-card-head {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .staff-stat span,
body.dark-mode .staff-current {
    color: #8891a7;
}

body.dark-mode .staff-stat strong,
body.dark-mode .staff-summary-bar em,
body.dark-mode .staff-card-head h4,
body.dark-mode .staff-card-total strong,
body.dark-mode .staff-count strong {
    color: #e7ecf7;
}

body.dark-mode .staff-stat.is-short strong,
body.dark-mode .staff-gap.is-short { color: #f87171; }
body.dark-mode .staff-stat.is-over strong,
body.dark-mode .staff-gap.is-over { color: #7aa2ff; }
body.dark-mode .staff-stat.is-ok strong,
body.dark-mode .staff-gap.is-ok { color: #34d399; }

body.dark-mode .staff-input {
    border-color: #38456a;
    background: rgba(255, 255, 255, 0.04);
    color: #e7ecf7;
}

body.dark-mode .staff-warning {
    color: #fbbf24;
}

@media (max-width: 640px) {
    .staff-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .staff-summary-bar {
        grid-column: 1 / -1;
        min-height: 44px;
    }

    .staff-stat strong {
        font-size: 20px;
    }

    .staff-row {
        gap: 8px;
    }
}

.personnel-tab-content .stat-tile-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pers-rank-of {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

/* ---- sekmeler ---- */

.personnel-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
}

.personnel-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
}

.personnel-tab-btn:hover {
    color: #1e293b;
}

.personnel-tab-btn.is-active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

body.dark-mode .personnel-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .personnel-tab-btn {
    color: #8891a7;
}

body.dark-mode .personnel-tab-btn:hover {
    color: #e7ecf7;
}

body.dark-mode .personnel-tab-btn.is-active {
    color: #6f9bff;
    border-bottom-color: #5b8cff;
}

.personnel-tab-content {
    display: none;
    padding-top: 12px;
}

.personnel-tab-content.is-active {
    display: block;
}

.personnel-hint {
    margin: 12px 20px 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #94a3b8;
}

.section-card .personnel-hint {
    margin: 12px 0 0;
}

.personnel-form-note {
    display: block;
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #94a3b8;
}

/* ---- ortak kucuk parcalar ---- */

.pers-muted {
    color: #94a3b8;
}

.pers-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.pers-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pers-chip.is-temp {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

body.dark-mode .pers-chip {
    background: rgba(91, 140, 255, 0.12);
    border-color: rgba(91, 140, 255, 0.3);
    color: #b9cbff;
}

body.dark-mode .pers-chip.is-temp {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.32);
    color: #fcd34d;
}

.pers-person-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
}

.pers-person-chip.is-warn {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

body.dark-mode .pers-person-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

body.dark-mode .pers-person-chip.is-warn {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.3);
    color: #fdba74;
}

.pers-chip-remove {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(100, 116, 139, 0.18);
    color: inherit;
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
}

.pers-chip-remove:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.pers-role {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pers-role-supervisor {
    background: #fef3c7;
    color: #92400e;
}

.pers-role-pc_operator {
    background: #ede9fe;
    color: #6d28d9;
}

.pers-role-operator {
    background: #e0f2fe;
    color: #0369a1;
}

body.dark-mode .pers-role-supervisor {
    background: rgba(245, 158, 11, 0.14);
    color: #fcd34d;
}

body.dark-mode .pers-role-pc_operator {
    background: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
}

body.dark-mode .pers-role-operator {
    background: rgba(56, 189, 248, 0.13);
    color: #7dd3fc;
}

.pers-shift-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pers-shift-1 {
    background: #dbeafe;
    color: #1e40af;
}

.pers-shift-2 {
    background: #e0e7ff;
    color: #4338ca;
}

.pers-shift-3 {
    background: #ccfbf1;
    color: #0f766e;
}

.pers-shift-none {
    background: #f1f5f9;
    color: #64748b;
}

body.dark-mode .pers-shift-1 {
    background: rgba(59, 130, 246, 0.16);
    color: #93c5fd;
}

body.dark-mode .pers-shift-2 {
    background: rgba(129, 140, 248, 0.16);
    color: #c7d2fe;
}

body.dark-mode .pers-shift-3 {
    background: rgba(45, 212, 191, 0.14);
    color: #5eead4;
}

body.dark-mode .pers-shift-none {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
}

.pers-perf {
    display: inline-block;
    min-width: 58px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pers-perf-good {
    background: #dcfce7;
    color: #15803d;
}

.pers-perf-mid {
    background: #fef3c7;
    color: #b45309;
}

.pers-perf-low {
    background: #fee2e2;
    color: #b91c1c;
}

body.dark-mode .pers-perf-good {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

body.dark-mode .pers-perf-mid {
    background: rgba(245, 158, 11, 0.14);
    color: #fcd34d;
}

body.dark-mode .pers-perf-low {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

.pers-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pers-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pers-status-active {
    color: #16a34a;
}

.pers-status-left {
    color: #94a3b8;
}

body.dark-mode .pers-status-active {
    color: #4ade80;
}

.pers-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
}

.pers-rank-1 { background: #fef3c7; color: #b45309; }
.pers-rank-2 { background: #e2e8f0; color: #334155; }
.pers-rank-3 { background: #ffedd5; color: #c2410c; }

body.dark-mode .pers-rank {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

body.dark-mode .pers-rank-1 { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
body.dark-mode .pers-rank-2 { background: rgba(203, 213, 225, 0.16); color: #e2e8f0; }
body.dark-mode .pers-rank-3 { background: rgba(251, 146, 60, 0.18); color: #fdba74; }

.pers-tag {
    display: inline-block;
    margin: 4px 4px 0 0;
    padding: 2px 7px;
    border-radius: 5px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.pers-tag-temp {
    background: #fffbeb;
    color: #b45309;
}

.pers-tag-overtime {
    background: #fdf2f8;
    color: #be185d;
}

body.dark-mode .pers-tag {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

body.dark-mode .pers-tag-temp {
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
}

body.dark-mode .pers-tag-overtime {
    background: rgba(236, 72, 153, 0.12);
    color: #f9a8d4;
}

.pers-danger:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #dc2626;
}

body.dark-mode .pers-danger:hover {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.pers-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.pers-row-left td {
    opacity: 0.6;
}

.pers-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.pers-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #94a3b8;
}

.pers-scroll {
    max-height: 460px;
}

/* ---- personel listesi ---- */

.pers-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pers-name-cell small {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.pers-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.pers-directory-table td {
    vertical-align: middle;
}

.pers-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 20px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.pers-empty-state strong {
    color: #1e293b;
    font-size: 15px;
}

.pers-empty-state span {
    max-width: 440px;
    line-height: 1.5;
}

body.dark-mode .pers-empty-state {
    color: #8891a7;
}

body.dark-mode .pers-empty-state strong {
    color: #e7ecf7;
}

.pers-empty-icon,
.pers-choice-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 16px;
    background-color: rgba(14, 165, 233, 0.12);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.pers-choice-icon {
    margin: 0 auto 12px;
}

.pers-choice-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* ---- genel bakis: vardiya kartlari ---- */

.personnel-shift-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    padding: 4px 20px 0;
}

.pers-shift-card,
.pers-plan-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.pers-shift-card.is-current {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

body.dark-mode .pers-shift-card,
body.dark-mode .pers-plan-card {
    background: linear-gradient(180deg, rgba(23, 31, 51, 0.85) 0%, rgba(17, 23, 38, 0.95) 100%);
    border-color: #232d45;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .pers-shift-card.is-current {
    border-color: rgba(91, 140, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pers-shift-card-head,
.pers-plan-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pers-shift-card h4,
.pers-plan-card h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 750;
    color: #0f172a;
}

.pers-shift-card-head span {
    font-size: 12px;
    color: #64748b;
}

body.dark-mode .pers-shift-card h4,
body.dark-mode .pers-plan-card h4 {
    color: #f1f5f9;
}

body.dark-mode .pers-shift-card-head span {
    color: #8891a7;
}

.pers-live-badge,
.pers-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pers-live-badge,
.pers-state-live {
    background: #dcfce7;
    color: #15803d;
}

.pers-live-badge::before,
.pers-state-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: livePulse 1.9s ease-in-out infinite;
}

.pers-state-future {
    background: #e0f2fe;
    color: #0369a1;
}

.pers-state-past {
    background: #f1f5f9;
    color: #64748b;
}

body.dark-mode .pers-live-badge,
body.dark-mode .pers-state-live {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

body.dark-mode .pers-state-future {
    background: rgba(56, 189, 248, 0.13);
    color: #7dd3fc;
}

body.dark-mode .pers-state-past {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

.pers-shift-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pers-shift-stats div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
}

.pers-shift-stats strong {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.pers-shift-stats span {
    font-size: 11px;
    color: #64748b;
}

body.dark-mode .pers-shift-stats div {
    background: rgba(255, 255, 255, 0.035);
}

body.dark-mode .pers-shift-stats strong {
    color: #f1f5f9;
}

body.dark-mode .pers-shift-stats span {
    color: #8891a7;
}

/* Vardiya Listesi: 4 gorev + genel toplam = 5 kutu, tek satirda sigsin
   diye Genel Bakis'taki (4 kutuluk) halinden daha kucuk/sik - iki
   sinif birlikte kullanilir, bu kural ozgullugu sayesinde ustteki
   .pers-shift-stats degerlerini gecersiz kilar. */
.pers-shift-stats.pers-schedule-stats {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.pers-shift-stats.pers-schedule-stats div {
    padding: 6px 4px;
    align-items: center;
    text-align: center;
}

.pers-shift-stats.pers-schedule-stats strong {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.pers-shift-stats.pers-schedule-stats span {
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

body.dark-mode .pers-shift-stats.pers-schedule-stats strong {
    color: #cbd5e1;
}

body.dark-mode .pers-shift-stats.pers-schedule-stats span {
    color: #aab4c8;
}

/* Vardiya Listesi tablosu: Ad Soyad sutunu uzun isimlerde satir
   ICINDE kirilsin diye sabit sutun genislikleri (yoksa tarayici
   tabloyu tasip GOREV sutununu yatay kaydirmaya iter). */
.pers-schedule-table {
    table-layout: fixed;
}

.pers-schedule-table th:first-child,
.pers-schedule-table td:first-child {
    width: 80px;
}

.pers-schedule-table th:last-child,
.pers-schedule-table td:last-child {
    width: 130px;
}

.pers-schedule-table td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
}

.pers-shift-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pers-shift-row-label {
    flex-shrink: 0;
    width: 110px;
    padding-top: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #94a3b8;
}

.pers-coverage-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
    color: #64748b;
}

.pers-coverage-top strong {
    color: #0f172a;
}

body.dark-mode .pers-coverage-top {
    color: #8891a7;
}

body.dark-mode .pers-coverage-top strong {
    color: #f1f5f9;
}

.pers-coverage-bar,
.pers-bar {
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.pers-coverage-bar span,
.pers-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
}

.pers-bar {
    height: 4px;
    margin-top: 6px;
    max-width: 180px;
}

body.dark-mode .pers-coverage-bar,
body.dark-mode .pers-bar {
    background: rgba(255, 255, 255, 0.07);
}

.pers-open-plan {
    align-self: flex-start;
}

/* ---- vardiya ve atamalar ---- */

.personnel-shift-switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.pshift-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
}

.pshift-btn small {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.8;
}

.pshift-btn:hover {
    color: #0f172a;
}

.pshift-btn.is-active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.pshift-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: livePulse 1.9s ease-in-out infinite;
}

body.dark-mode .personnel-shift-switch {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .pshift-btn {
    color: #8891a7;
}

body.dark-mode .pshift-btn:hover {
    color: #e7ecf7;
}

body.dark-mode .pshift-btn.is-active {
    background: rgba(91, 140, 255, 0.18);
    color: #cfdcff;
    box-shadow: inset 0 0 0 1px rgba(91, 140, 255, 0.35);
}

.personnel-plan-header {
    padding: 16px 20px 0;
}

.pers-plan-moment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

body.dark-mode .pers-plan-moment {
    color: #8891a7;
}

.pers-plan-headcount {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #64748b;
}

.pers-plan-headcount strong {
    font-size: 16px;
    color: #0f172a;
}

body.dark-mode .pers-plan-headcount {
    color: #8891a7;
}

body.dark-mode .pers-plan-headcount strong {
    color: #f1f5f9;
}

.pers-apply-note {
    padding: 9px 12px;
    border-radius: 9px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12px;
    font-weight: 600;
}

.pers-apply-note.is-past {
    background: #fffbeb;
    color: #b45309;
}

body.dark-mode .pers-apply-note {
    background: rgba(91, 140, 255, 0.1);
    color: #b9cbff;
}

body.dark-mode .pers-apply-note.is-past {
    background: rgba(245, 158, 11, 0.1);
    color: #fcd34d;
}

.pers-add-supervisor {
    width: auto !important;
    min-width: 170px;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

.pers-plan-table td {
    vertical-align: middle;
}

.pers-slot-select {
    width: 100%;
    min-width: 170px;
    max-width: 240px;
}

.pers-slot-select.is-empty {
    border-style: dashed !important;
    color: #94a3b8 !important;
}

.pers-row-open td:first-child {
    box-shadow: inset 3px 0 0 #f59e0b;
}

.pers-row-disabled td {
    opacity: 0.55;
}

.pers-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 360px;
}

.pers-timeline-item {
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 11px;
    white-space: nowrap;
}

.pers-timeline-item strong {
    font-variant-numeric: tabular-nums;
}

.pers-timeline-pc_operator {
    background: #f5f3ff;
    color: #6d28d9;
}

body.dark-mode .pers-timeline-item {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
}

body.dark-mode .pers-timeline-pc_operator {
    background: rgba(167, 139, 250, 0.12);
    color: #c4b5fd;
}

/* ---- haftalik vardiya listesi ---- */

.shift-list-panel {
    max-width: 880px !important;
}

.shift-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.shift-list-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.shift-list-toolbar input[type="date"],
.shift-list-toolbar select {
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #1e293b;
    font: inherit;
    font-size: 13px;
}

.shift-list-toolbar .table-search {
    margin-left: auto;
}

body.dark-mode .shift-list-toolbar label {
    color: #8891a7;
}

body.dark-mode .shift-list-toolbar input[type="date"],
body.dark-mode .shift-list-toolbar select {
    background: #1a2332;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e7ecf7;
}

.shift-list-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 12px;
}

.shift-list-counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.shift-list-count {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.shift-list-count strong {
    font-size: 13px;
    color: #0f172a;
}

.shift-list-count span {
    font-size: 18px;
    font-weight: 800;
    color: #2563eb;
}

.shift-list-count small {
    font-size: 11px;
    color: #94a3b8;
}

body.dark-mode .shift-list-count {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.07);
}

body.dark-mode .shift-list-count strong {
    color: #e7ecf7;
}

body.dark-mode .shift-list-count span {
    color: #8fb0ff;
}

.shift-list-table {
    max-height: 48vh;
}

.shift-list-table td {
    vertical-align: middle;
}

.shift-list-changed td {
    background: rgba(59, 130, 246, 0.06);
}

.shift-seg {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: 9px;
    background: #f1f5f9;
}

.shift-seg-btn {
    min-width: 40px;
    padding: 5px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.shift-seg-btn:hover {
    color: #0f172a;
}

.shift-seg-btn.is-active.shift-seg-1 { background: #2563eb; color: #ffffff; }
.shift-seg-btn.is-active.shift-seg-2 { background: #4f46e5; color: #ffffff; }
.shift-seg-btn.is-active.shift-seg-3 { background: #0d9488; color: #ffffff; }
.shift-seg-btn.is-active.shift-seg-none { background: #94a3b8; color: #ffffff; }

body.dark-mode .shift-seg {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .shift-seg-btn {
    color: #8891a7;
}

body.dark-mode .shift-seg-btn:hover {
    color: #e7ecf7;
}

.shift-list-arrow {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
}

body.dark-mode .shift-list-arrow {
    color: #8fb0ff;
}

.shift-list-keep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
}

body.dark-mode .shift-list-keep {
    color: #cbd5e1;
}

.shift-list-actions {
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
}

.shift-list-change-count {
    margin-right: auto;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.shift-list-actions .btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---- uretim raporu ---- */

.pers-report-table th {
    vertical-align: bottom;
}

.pers-report-table th small {
    font-weight: 500;
    opacity: 0.75;
}

.pers-report-table tfoot td {
    border-top: 2px solid #e2e8f0;
    background: #f8fafc;
}

body.dark-mode .pers-report-table tfoot td {
    border-top-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.pers-report-table .pers-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #ffffff;
}

.pers-report-table th.pers-sticky {
    background: #f8fafc;
}

.pers-report-table .pers-sticky-2 {
    left: 40px;
    box-shadow: 1px 0 0 #e5e7eb;
}

.pers-report-table td.pers-sticky:first-child,
.pers-report-table th.pers-sticky:first-child {
    width: 40px;
    min-width: 40px;
}

body.dark-mode .pers-report-table .pers-sticky {
    background: #111827;
}

body.dark-mode .pers-report-table th.pers-sticky {
    background: #151d2e;
}

body.dark-mode .pers-report-table .pers-sticky-2 {
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08);
}

/* ---- personel analizi ---- */

.pers-profile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 16px 20px 0;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
}

body.dark-mode .pers-profile {
    border-color: #232d45;
    background: linear-gradient(135deg, rgba(23, 31, 51, 0.95) 0%, rgba(30, 41, 72, 0.85) 100%);
}

.pers-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.6);
}

.pers-profile-main {
    min-width: 0;
}

.pers-profile-main h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

body.dark-mode .pers-profile-main h3 {
    color: #f1f5f9;
}

.pers-profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pers-profile-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-left: auto;
}

.pers-profile-facts > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pers-profile-facts span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #94a3b8;
}

.pers-profile-facts strong {
    font-size: 14px;
    color: #0f172a;
}

body.dark-mode .pers-profile-facts strong {
    color: #f1f5f9;
}

/* ---- bildirim ---- */

.pers-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 3000;
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 18px;
    border-radius: 12px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pers-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pers-toast-ok {
    border-left: 4px solid #22c55e;
}

.pers-toast-warn {
    border-left: 4px solid #f59e0b;
}

.pers-toast-error {
    border-left: 4px solid #ef4444;
}

/* ---- mobil ---- */

@media (max-width: 700px) {
    .personnel-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 8px;
        scrollbar-width: none;
    }

    .personnel-tab-btn {
        flex-shrink: 0;
        padding: 12px 12px;
    }

    .personnel-shift-cards,
    .personnel-plan-header {
        padding-left: 0;
        padding-right: 0;
    }

    .personnel-shift-cards {
        grid-template-columns: 1fr;
    }

    .pers-shift-row {
        flex-direction: column;
        gap: 6px;
    }

    .pers-shift-row-label {
        width: auto;
        padding-top: 0;
    }

    .pers-profile {
        margin: 12px 0 0;
    }

    .pers-profile-facts {
        margin-left: 0;
    }

    .personnel-hint {
        margin: 12px 0 0;
    }

    .shift-list-toolbar .table-search {
        margin-left: 0;
        width: 100%;
    }

    .shift-seg-btn {
        min-width: 34px;
        padding: 5px 8px;
    }

    .pers-schedule-table th:first-child,
    .pers-schedule-table td:first-child {
        width: 52px;
    }

    .pers-schedule-table th:last-child,
    .pers-schedule-table td:last-child {
        width: 88px;
    }

    .pers-schedule-table .pers-role {
        white-space: normal;
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1.25;
    }

    .pers-schedule-table th {
        padding: 8px 4px;
        font-size: 8px;
        white-space: normal;
        line-height: 1.2;
    }

    .pers-shift-stats.pers-schedule-stats {
        gap: 4px;
    }

    .pers-shift-stats.pers-schedule-stats div {
        min-width: 0;
        padding: 5px 2px;
    }

    .pers-shift-stats.pers-schedule-stats strong {
        font-size: 12px;
    }

    .pers-shift-stats.pers-schedule-stats span {
        font-size: 9px;
    }

    /* "Personel Analizi" secim kutusu: native <select> uzun personel
       isimlerinin genisligine gore kendini buyutuyor, konteynerini
       tasip yatay sayfa kaymasina yol aciyordu. */
    .report-custom-range {
        width: 100%;
    }

    .report-custom-range label {
        min-width: 0;
        flex: 1 1 140px;
    }

    .report-custom-range select {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
}


/* ---- maas karti (ozel) ---- */

.pers-private-badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 700;
}

body.dark-mode .pers-private-badge {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.pers-salary-current {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 14px;
}

.pers-salary-current span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #94a3b8;
}

.pers-salary-current strong {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.pers-salary-current small {
    font-size: 12px;
    color: #94a3b8;
}

body.dark-mode .pers-salary-current strong {
    color: #f1f5f9;
}

.pers-role-quality {
    background: #dcfce7;
    color: #166534;
}

body.dark-mode .pers-role-quality {
    background: rgba(34, 197, 94, 0.13);
    color: #86efac;
}

.pers-shift-stats {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 420px) {
    .pers-shift-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ---- personel maliyeti ---- */

.cost-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px;
}

.cost-toolbar > label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 320px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #64748b;
}

.cost-toolbar input[type="number"],
.cost-toolbar input[type="date"] {
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #1e293b;
    font: inherit;
    font-size: 13px;
    text-transform: none;
}

.cost-toolbar input[type="number"] {
    width: 90px;
}

.cost-toolbar .personnel-form-note {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

body.dark-mode .cost-toolbar > label {
    color: #8891a7;
}

body.dark-mode .cost-toolbar input[type="number"],
body.dark-mode .cost-toolbar input[type="date"] {
    background: #1a2332;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e7ecf7;
}

.cost-save {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    align-self: center;
}

.cost-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cost-salary-input,
#pfSalary {
    -moz-appearance: textfield;
}

.cost-salary-input::-webkit-outer-spin-button,
.cost-salary-input::-webkit-inner-spin-button,
#pfSalary::-webkit-outer-spin-button,
#pfSalary::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cost-salary-input {
    width: 120px !important;
    text-align: right;
}

.cost-currency-input {
    width: auto !important;
}

.cost-person-table td {
    vertical-align: middle;
}

.cost-row-missing .cost-salary-input {
    border-color: #fca5a5 !important;
}

body.dark-mode .cost-row-missing .cost-salary-input {
    border-color: rgba(248, 113, 113, 0.5) !important;
}

.pers-bar-inline {
    display: inline-block;
    width: 70px;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

@media (max-width: 700px) {
    .cost-save {
        margin-left: 0;
    }
}


/* ---- devamsizlik ---- */

.att-subnav {
    padding: 4px 20px 0;
}

.att-subnav .users-subtabs {
    margin-bottom: 0;
}

.att-view {
    display: none;
}

.att-view.is-active {
    display: block;
}

.plan-subnav {
    padding: 4px 20px 0;
}

.plan-subnav .users-subtabs {
    margin-bottom: 0;
}

.plan-view {
    display: none;
}

.plan-view.is-active {
    display: block;
}

.att-date-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.att-date-nav input[type="date"] {
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #1e293b;
    font: inherit;
    font-size: 13px;
}

body.dark-mode .att-date-nav input[type="date"] {
    background: #1a2332;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e7ecf7;
}

.att-day-step {
    min-width: 36px;
    font-size: 18px;
    line-height: 1;
}

.att-banner {
    margin: 12px 20px 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}

.att-banner-holiday {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.att-banner-off {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

body.dark-mode .att-banner-holiday {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.3);
    color: #fdba74;
}

body.dark-mode .att-banner-off {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

.att-machine-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 20px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    font-size: 13px;
}

.att-machine-alert strong {
    display: block;
    margin-bottom: 6px;
    color: #9a3412;
}

body.dark-mode .att-machine-alert {
    background: rgba(251, 146, 60, 0.08);
    border-color: rgba(251, 146, 60, 0.28);
}

body.dark-mode .att-machine-alert strong {
    color: #fdba74;
}

/* durum renk tonlari (rozet / buton / sayac) */
.att-tone-green  { --att: #16a34a; --att-bg: #dcfce7; }
.att-tone-red    { --att: #dc2626; --att-bg: #fee2e2; }
.att-tone-blue   { --att: #2563eb; --att-bg: #dbeafe; }
.att-tone-purple { --att: #7c3aed; --att-bg: #ede9fe; }
.att-tone-teal   { --att: #0d9488; --att-bg: #ccfbf1; }
.att-tone-gray   { --att: #475569; --att-bg: #e2e8f0; }
.att-tone-amber  { --att: #b45309; --att-bg: #fef3c7; }
.att-tone-orange { --att: #c2410c; --att-bg: #ffedd5; }

body.dark-mode .att-tone-green  { --att: #86efac; --att-bg: rgba(34, 197, 94, 0.15); }
body.dark-mode .att-tone-red    { --att: #fca5a5; --att-bg: rgba(239, 68, 68, 0.16); }
body.dark-mode .att-tone-blue   { --att: #93c5fd; --att-bg: rgba(59, 130, 246, 0.16); }
body.dark-mode .att-tone-purple { --att: #c4b5fd; --att-bg: rgba(139, 92, 246, 0.16); }
body.dark-mode .att-tone-teal   { --att: #5eead4; --att-bg: rgba(20, 184, 166, 0.15); }
body.dark-mode .att-tone-gray   { --att: #cbd5e1; --att-bg: rgba(148, 163, 184, 0.14); }
body.dark-mode .att-tone-amber  { --att: #fcd34d; --att-bg: rgba(245, 158, 11, 0.15); }
body.dark-mode .att-tone-orange { --att: #fdba74; --att-bg: rgba(251, 146, 60, 0.15); }

.att-badge,
.att-count,
.pers-tag.att-tone-red,
.pers-tag.att-tone-amber {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--att-bg);
    color: var(--att);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.att-count {
    min-width: 26px;
    text-align: center;
}

.att-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.att-seg-btn,
.att-seg-select {
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #ffffff;
    color: #64748b;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.att-seg-btn:hover,
.att-seg-select:hover {
    border-color: var(--att, #94a3b8);
    color: var(--att, #0f172a);
}

.att-seg-btn.is-active,
.att-seg-select.is-active {
    background: var(--att-bg);
    border-color: var(--att);
    color: var(--att);
}

body.dark-mode .att-seg-btn,
body.dark-mode .att-seg-select {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: #8891a7;
}

body.dark-mode .att-seg-btn.is-active,
body.dark-mode .att-seg-select.is-active {
    background: var(--att-bg);
    border-color: var(--att);
    color: var(--att);
}

body.dark-mode .att-seg-select option {
    background: #1a2332;
    color: #e7ecf7;
}

.att-day-table td {
    vertical-align: middle;
}

.att-row-absent td:first-child {
    box-shadow: inset 3px 0 0 #ef4444;
}

.att-row-partial td:first-child {
    box-shadow: inset 3px 0 0 #f59e0b;
}

.att-note {
    width: 100%;
    min-width: 160px;
}

.att-rate {
    display: inline-flex;
    align-items: center;
}

.att-holiday-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.att-holiday-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.att-holiday-form input {
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #1e293b;
    font: inherit;
    font-size: 13px;
}

.att-holiday-name {
    flex: 1;
    min-width: 180px;
}

body.dark-mode .att-holiday-form label {
    color: #8891a7;
}

body.dark-mode .att-holiday-form input {
    background: #1a2332;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e7ecf7;
}

.att-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.att-weekday {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    text-transform: capitalize;
}

.att-weekday.is-off {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

body.dark-mode .att-weekday {
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

body.dark-mode .att-weekday.is-off {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.4);
    color: #fdba74;
}

@media (max-width: 700px) {
    .att-subnav,
    .att-banner,
    .att-machine-alert {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .att-machine-alert,
    .att-banner {
        padding: 10px 12px;
    }

    .att-seg-btn,
    .att-seg-select {
        padding: 6px 8px;
    }

    /* att-seg (Present/Absent/Izin butonlari) satirlarda flex-wrap
       nedeniyle alt alta yigilip satirlari asiri uzatiyordu - tablo
       zaten yatay kaydirmali (detail-table-wrapper), o yuzden tek
       satirda kalsin, geregi kadar genislesin. */
    .att-seg {
        flex-wrap: nowrap;
    }

    .att-seg-btn,
    .att-seg-select {
        white-space: nowrap;
        flex-shrink: 0;
    }
}


.att-range-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 12px;
    color: #334155;
}

.att-range-preview small {
    color: #94a3b8;
}

body.dark-mode .att-range-preview {
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
}

.att-days-link {
    margin-left: 6px;
    padding: 0;
    border: none;
    background: none;
    color: #2563eb;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

body.dark-mode .att-days-link {
    color: #8fb0ff;
}


.att-holiday-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.att-move {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.att-move.is-hidden {
    display: none;
}


/* saat / ay secicileri - tarih secicisiyle ayni gorunum */
.report-custom-range input[type="time"],
.report-custom-range input[type="month"] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 7px 10px;
    color: #e7ecf7;
    font: inherit;
    font-size: 13px;
    color-scheme: dark;
}

body:not(.dark-mode) .report-custom-range input[type="time"],
body:not(.dark-mode) .report-custom-range input[type="month"] {
    color-scheme: light;
}


#costTiles .stat-tile-value {
    font-size: 21px;
}


/* ---- vardiya plani: vardiyalar yan yana ---- */

.personnel-plan-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
}

.pers-plan-card.is-current {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

body.dark-mode .pers-plan-card.is-current {
    border-color: rgba(91, 140, 255, 0.55);
}

.pers-plan-hours {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.pers-plan-shift-col {
    min-width: 300px;
}

.pers-plan-shift-col small {
    margin-left: 6px;
    font-weight: 500;
    opacity: 0.75;
}

.pers-plan-shift-col.is-current {
    color: #2563eb !important;
}

body.dark-mode .pers-plan-shift-col.is-current {
    color: #8fb0ff !important;
}

.pers-plan-shift-col .pshift-live {
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}

.pers-plan-cell.is-current {
    background: rgba(59, 130, 246, 0.035);
}

.pers-plan-cell.is-open {
    box-shadow: inset 3px 0 0 #f59e0b;
}

.pers-plan-cell-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pers-plan-cell .pers-slot-select {
    flex: 1;
    max-width: 260px;
}

.pers-timed-btn {
    padding: 5px 8px;
    line-height: 1;
}

.pers-plan-cell .pers-timeline {
    margin-top: 6px;
}

/* Compact/Flexi (2 operatorlu makineler): iki pozisyon ust uste,
   aralarinda ince bir ayrac. */
.pers-plan-position + .pers-plan-position {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}

body.dark-mode .pers-plan-position + .pers-plan-position {
    border-top-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 700px) {
    .personnel-plan-header {
        grid-template-columns: 1fr;
    }

    .pers-plan-shift-col {
        min-width: 230px;
    }
}


.pers-role-designer {
    background: #fce7f3;
    color: #9d174d;
}

.pers-role-assistant {
    background: #e0e7ff;
    color: #3730a3;
}

body.dark-mode .pers-role-designer {
    background: rgba(236, 72, 153, 0.14);
    color: #f9a8d4;
}

body.dark-mode .pers-role-assistant {
    background: rgba(129, 140, 248, 0.16);
    color: #c7d2fe;
}


/* ============================================================
   YETKILER - rolde olmayan sayfa/sekme/dugmeler gizlenir
   (admin_ui.js applyPermissions). Asil kontrol sunucuda.
   ============================================================ */

.perm-hidden {
    display: none !important;
}

/* Makine detay penceresi ve tablolarda sonradan cizilen dugmeler */
body.no-perm-failures-edit #openFailureBtn,
body.no-perm-failures-edit #closeFailureBtn,
body.no-perm-failures-edit .failure-edit-button,
body.no-perm-failures-edit .failure-delete-button,
body.no-perm-failures-edit #failureForm,
body.no-perm-failures-edit #maintenanceRecordForm,
body.no-perm-parts-orders-edit #orderForm,
body.no-perm-parts-orders-edit #tabPanelMaintenance button[data-order],
body.no-perm-parts-orders-edit .order-edit-button,
body.no-perm-parts-orders-edit .order-delete-button,
body.no-perm-parts-invoices-edit #invoiceForm,
body.no-perm-parts-invoices-edit .invoice-edit-button,
body.no-perm-parts-invoices-edit .invoice-delete-button,
body.no-perm-documents-edit .document-action-delete,
body.no-perm-settings-machines-edit #settingsMachinesTable button,
body.no-perm-settings-shifts-edit #settingsShiftsTable button,
body.no-perm-settings-shifts-edit #settingsBreaksTable button {
    display: none !important;
}

body.no-perm-settings-machines-edit #settingsMachinesTable input,
body.no-perm-settings-machines-edit #settingsMachinesTable select,
body.no-perm-settings-shifts-edit #settingsShiftsTable input,
body.no-perm-settings-shifts-edit #settingsBreaksTable input {
    pointer-events: none;
    opacity: 0.7;
}

/* ---- kullanicilar tablosu ---- */

.users-table td {
    vertical-align: middle;
}

.user-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.user-role-badge.is-admin {
    background: #fef3c7;
    color: #92400e;
}

body.dark-mode .user-role-badge {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

body.dark-mode .user-role-badge.is-admin {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

/* ---- kullanici penceresi ---- */

.user-form {
    grid-template-columns: 1fr !important;
}

.user-role-info {
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

body.dark-mode .user-role-info {
    color: #8891a7;
}

.user-password-row {
    display: flex;
    gap: 6px;
}

.user-password-row input {
    flex: 1;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace !important;
    letter-spacing: 0.5px;
}

.user-done {
    text-align: center;
    padding: 8px 4px 4px;
}

.user-done.is-hidden {
    display: none;
}

.user-done-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 26px;
    font-weight: 800;
    line-height: 52px;
}

.user-done h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

.user-done p {
    margin: 0 0 16px;
    font-size: 13px;
    color: #64748b;
}

.user-credentials {
    display: grid;
    gap: 8px;
    margin: 0 auto 16px;
    padding: 14px 18px;
    max-width: 380px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    text-align: left;
}

.user-credentials div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.user-credentials span {
    color: #64748b;
}

.user-credentials strong {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: #0f172a;
}

.user-done .form-actions {
    justify-content: center;
}

body.dark-mode .user-done-icon {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

body.dark-mode .user-done p,
body.dark-mode .user-credentials span {
    color: #8891a7;
}

body.dark-mode .user-credentials {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .user-credentials strong {
    color: #f1f5f9;
}

/* ---- roller ve yetkiler tablosu ---- */

.roles-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.roles-toolbar .shift-list-change-count {
    margin-left: auto;
    margin-right: 0;
}

.roles-legend {
    display: inline-flex;
    gap: 6px;
}

.roles-matrix-wrapper {
    max-height: 70vh;
}

.roles-matrix th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.roles-matrix .roles-perm-head {
    min-width: 320px;
}

.roles-col {
    min-width: 130px;
    text-align: center !important;
    vertical-align: top;
}

.roles-col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    white-space: normal;
}

.roles-col-head strong {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: #0f172a;
}

.roles-col-head small {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body.dark-mode .roles-col-head strong {
    color: #f1f5f9;
}

.roles-col-actions {
    display: inline-flex;
    gap: 4px;
    margin-top: 2px;
}

.roles-col-actions .btn-small {
    padding: 2px 7px;
    font-size: 11px;
}

.roles-cell {
    text-align: center;
    vertical-align: middle !important;
}

.roles-cell input {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: #2563eb;
}

.roles-cell input:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.roles-cell.is-changed {
    background: rgba(245, 158, 11, 0.12);
}

.roles-perm {
    white-space: normal !important;
}

.roles-group td {
    background: #f1f5f9;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.3px;
    color: #0f172a;
}

body.dark-mode .roles-group td {
    background: rgba(255, 255, 255, 0.05);
    color: #e7ecf7;
}

.roles-type {
    display: inline-block;
    min-width: 76px;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

.roles-type-view { background: #e0f2fe; color: #0369a1; }
.roles-type-edit { background: #fef3c7; color: #92400e; }
.roles-type-export { background: #ede9fe; color: #6d28d9; }

body.dark-mode .roles-type-view { background: rgba(56, 189, 248, 0.13); color: #7dd3fc; }
body.dark-mode .roles-type-edit { background: rgba(245, 158, 11, 0.14); color: #fcd34d; }
body.dark-mode .roles-type-export { background: rgba(167, 139, 250, 0.15); color: #c4b5fd; }


.user-role-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.user-role-saved {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}

.user-role-saved.is-ok {
    color: #16a34a;
}

body.dark-mode .user-role-saved.is-ok {
    color: #86efac;
}


.salary-history {
    max-height: 220px;
    overflow: auto;
}

.salary-history-table td {
    vertical-align: middle;
}


/* ---- vardiya plani kartlari: duzenli yerlesim ----
   Ust satir baslik + durum, altinda sayi seridi, gorevler yan yana
   sutunlarda (her birinin basliginda sayi ve "+ Ekle"), en altta
   makinesi olmayan operatorler ve degisikligin gecerlilik notu. */

.pplan-card {
    gap: 16px;
    padding: 18px 20px 16px;
}

.pplan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
}

.pplan-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.pplan-title h4 {
    font-size: 17px;
}

.pplan-hours {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.pplan-moment {
    font-size: 12px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.pplan-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
}

.pplan-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 10px 14px;
}

.pplan-stat + .pplan-stat {
    border-left: 1px solid #e5e7eb;
}

.pplan-stat strong {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.pplan-stat span {
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pplan-teams {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pplan-team {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pplan-team-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef2f7;
}

.pplan-team-title {
    overflow: hidden;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.4px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: #64748b;
}

.pplan-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.pplan-count.is-warn {
    background: #fff7ed;
    color: #c2410c;
}

.pplan-count.is-ok {
    background: #dcfce7;
    color: #15803d;
}

/* "+ Ekle": dugme gorunumlu secim kutusu (acinca personel listesi) */
select.pplan-add {
    flex-shrink: 0;
    width: 84px;
    height: 26px;
    margin-left: auto;
    padding: 0 22px 0 11px;
    border: 1px dashed #cbd5e1;
    border-radius: 999px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%232563eb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 10px 10px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

select.pplan-add:hover,
select.pplan-add:focus {
    border-color: #3b82f6;
    border-style: solid;
    background-color: #eff6ff;
    outline: none;
}

select.pplan-add option {
    background: #ffffff;
    color: #0f172a;
    font-weight: 500;
}

/* kisiler etiket (cip) olarak yan yana; isim tek satir, sigmazsa "..." */
.pplan-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pplan-chip {
    max-width: min(100%, 300px);
    min-width: 0;
    min-height: 28px;
}

.pplan-chip:has(.pers-chip-remove) {
    padding-right: 6px;
}

.pplan-chip .pplan-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pplan-chip .att-badge,
.pplan-chip .pers-chip-remove {
    flex-shrink: 0;
}

.pplan-chip .att-badge {
    padding: 1px 7px;
    font-size: 10.5px;
}

/* bugun izinli / devamsiz: listede kalir ama soluk gorunur */
.pplan-chip.is-away .pplan-name {
    opacity: 0.55;
}

.pplan-empty {
    padding: 6px 2px;
    font-size: 12px;
    color: #94a3b8;
}

.pplan-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #eef2f7;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.pplan-foot::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
}

.pplan-foot.is-past {
    color: #b45309;
}

.pplan-foot.is-past::before {
    background: #f59e0b;
}

body.dark-mode .pplan-hours {
    color: #8891a7;
}

body.dark-mode .pplan-moment {
    color: #6b7590;
}

body.dark-mode .pplan-stats {
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
}

body.dark-mode .pplan-stat + .pplan-stat {
    border-left-color: rgba(255, 255, 255, 0.07);
}

body.dark-mode .pplan-stat strong {
    color: #f1f5f9;
}

body.dark-mode .pplan-stat span,
body.dark-mode .pplan-team-title {
    color: #8891a7;
}

body.dark-mode .pplan-team-head,
body.dark-mode .pplan-foot {
    border-color: rgba(255, 255, 255, 0.07);
}

body.dark-mode .pplan-count {
    background: rgba(255, 255, 255, 0.07);
    color: #cbd5e1;
}

body.dark-mode .pplan-count.is-warn {
    background: rgba(251, 146, 60, 0.14);
    color: #fdba74;
}

body.dark-mode .pplan-count.is-ok {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

body.dark-mode select.pplan-add {
    border-color: rgba(255, 255, 255, 0.18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238fb0ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color: #8fb0ff;
    color-scheme: dark;
}

body.dark-mode select.pplan-add:hover,
body.dark-mode select.pplan-add:focus {
    border-color: rgba(91, 140, 255, 0.6);
    background-color: rgba(91, 140, 255, 0.1);
}

body.dark-mode select.pplan-add option {
    background-color: #0e1424;
    color: #e6ebf5;
}

body.dark-mode .pplan-empty {
    color: #6b7590;
}

body.dark-mode .pplan-foot {
    color: #aab4c8;
}

body.dark-mode .pplan-foot::before {
    background: #5b8cff;
}

body.dark-mode .pplan-foot.is-past {
    color: #fcd34d;
}

body.dark-mode .pplan-foot.is-past::before {
    background: #f59e0b;
}

@media (max-width: 700px) {
    .pplan-card {
        padding: 16px;
    }

    select.pplan-add {
        width: 100px;
        height: 32px;
    }

    .pplan-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pplan-stat:nth-child(3) {
        border-left: none;
    }

    .pplan-stat:nth-child(n + 3) {
        border-top: 1px solid #e5e7eb;
    }

    body.dark-mode .pplan-stat:nth-child(n + 3) {
        border-top-color: rgba(255, 255, 255, 0.07);
    }
}


.att-offdays-save {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

/* Gecerlilik tarihi: panelin diger tarih secicileriyle ayni gorunum */
.att-offdays-save label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #64748b;
}

.att-offdays-save input[type="date"] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #1e293b;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color-scheme: light;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.att-offdays-save input[type="date"]:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.att-offdays-save .btn-primary {
    height: 38px;
}

body.dark-mode .att-offdays-save label {
    color: #8891a7;
}

body.dark-mode .att-offdays-save input[type="date"] {
    border-color: rgba(255, 255, 255, 0.12);
    background: #1a2332;
    color: #e7ecf7;
    color-scheme: dark;
}

body.dark-mode .att-offdays-save input[type="date"]:focus {
    border-color: rgba(91, 140, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.15);
}


/* ---- devam tablosu: satirin altinda acilan kisi kayitlari ---- */

.detail-table tr.att-inline-row td {
    padding: 10px 16px 14px 19px;
    background: rgba(37, 99, 235, 0.05);
    box-shadow: inset 3px 0 0 #2563eb;
}

.att-inline-head {
    margin-bottom: 8px;
    font-size: 12px;
    color: #475569;
}

.att-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.att-inline-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    font-size: 12px;
}

.att-inline-date {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.att-inline-note {
    max-width: 240px;
    overflow: hidden;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-inline-item .att-badge {
    padding: 2px 8px;
    font-size: 10.5px;
}

.att-inline-item .pers-tag {
    margin: 0;
}

body.dark-mode .detail-table tr.att-inline-row td {
    background: rgba(96, 165, 250, 0.07);
    box-shadow: inset 3px 0 0 #60a5fa;
}

body.dark-mode .att-inline-head {
    color: #aab4c8;
}

body.dark-mode .att-inline-item {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .att-inline-note {
    color: #8891a7;
}

/* ---- Arizalar paneli: Toplu Ariza Ac/Kapat, satirin en solunda ----
   .report-custom-range kendi icinde margin-left:auto ile saga
   yaslandigi icin (tarih/rapor/excel/pdf grubu) bu dugmeler onun
   DISINDA, .report-controls'un ilk cocugu olarak durur - boylece
   satirin gercek sol basinda kalir, saga yaslanan grup etkilenmez. */

.bulkfail-panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---- Toplu Ariza Ac/Kapat modali: makine secim izgarasi ---- */

.bulkfail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.bulkfail-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
}

.bulkfail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    max-height: 328px;
    padding: 4px 6px 16px 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

/* Her kart AYNI yukseklikte (has-open olan bir uyari satiri ekliyor,
   digerleri eklemiyor - min-height olmadan grid satirlari kart
   icerigine gore degisip dagitik/dusuk kaliteli gorunuyordu). */
.bulkfail-machine {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    height: 66px;
    padding: 0 13px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bulkfail-machine:hover {
    border-color: #cbd5e1;
}

.bulkfail-machine:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 1px #3b82f6;
}

/* Zaten acik arizasi olan makine: dolu bir arka plan yerine ince,
   zarif bir sol seritle isaretlenir - kart "kirmizi alarm" gibi
   bagirmaz, sadece dikkatlice fark edilir. */
.bulkfail-machine.has-open {
    border-color: #fde68a;
    box-shadow: inset 3px 0 0 #f59e0b;
}

.bulkfail-machine.has-open:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #f59e0b, 0 0 0 1px #3b82f6;
}

.bulkfail-machine.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bulkfail-machine.is-disabled:hover {
    border-color: #e2e8f0;
}

/* checkbox + isim AYNI satirda (bulkfail-machine'in kendisi dikey
   siraladigi icin bu ikisi ayri bir yatay satir icine alinir) */
.bulkfail-machine-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bulkfail-machine-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Roller ve Yetkiler tablosundaki checkbox'larla AYNI (bkz. .roles-cell input) */
.bulkfail-machine input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #2563eb;
}

.bulkfail-machine input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

#bulkFailureSelectAll {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: #2563eb;
}

/* Uyari, checkbox'in altina degil ISMIN altina hizali kucuk bir
   etiket (pers-tag-temp ile ayni amber ton); tek satir, tasarsa
   "..." ile kesilir - kart boyu ASLA icerige gore buyumez. */
.bulkfail-machine-warn {
    display: block;
    overflow: hidden;
    margin-left: 26px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fffbeb;
    color: #b45309;
    font-size: 10.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.dark-mode .bulkfail-select-all {
    color: #cbd5e1;
}

body.dark-mode .bulkfail-grid {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .bulkfail-machine {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .bulkfail-machine:hover {
    border-color: rgba(255, 255, 255, 0.22);
}

body.dark-mode .bulkfail-machine:has(input:checked) {
    border-color: rgba(91, 140, 255, 0.6);
    background: rgba(91, 140, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(91, 140, 255, 0.6);
}

body.dark-mode .bulkfail-machine.has-open {
    border-color: rgba(251, 146, 60, 0.35);
    box-shadow: inset 3px 0 0 #f59e0b;
}

body.dark-mode .bulkfail-machine.has-open:has(input:checked) {
    border-color: rgba(91, 140, 255, 0.6);
    background: rgba(91, 140, 255, 0.1);
    box-shadow: inset 3px 0 0 #f59e0b, 0 0 0 1px rgba(91, 140, 255, 0.6);
}

body.dark-mode .bulkfail-machine.is-disabled:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .bulkfail-machine-name {
    color: #e7ecf7;
}

body.dark-mode .bulkfail-machine-warn {
    background: rgba(245, 158, 11, 0.14);
    color: #fcd34d;
}

/* ============================================================
   ARIZALAR - SEKMELER, ACIK ARIZALAR, VERI KONTROLU
   Sekmeler ".parts-tab-btn" ile ayni gorunum, ayri sinif adi
   (initPartsTabs tiklama dinleyicisi cakismasin).
   ============================================================ */

.fail-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
}

.fail-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
}

.fail-tab-btn:hover {
    color: #1e293b;
}

.fail-tab-btn.is-active {
    border-bottom-color: #2563eb;
    color: #2563eb;
}

.fail-tab-content {
    display: none;
}

.fail-tab-content.is-active {
    display: block;
}

#failFilterBar.is-hidden {
    display: none;
}

.open-fail-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    font-size: 11px;
    font-weight: 750;
    color: #ffffff;
}

.open-fail-count.is-zero {
    background: #94a3b8;
}

.open-fail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.open-fail-toolbar .open-fail-summary {
    margin: 0;
}

.open-fail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.open-fail-summary:empty {
    display: none;
}

.open-fail-chip {
    padding: 5px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 12.5px;
    color: #475569;
}

.open-fail-chip b {
    color: #0f172a;
}

.open-fail-chip.is-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

/* Row tone = failure age: <1 day amber, 1-7 days red, 7+ days dark red. */
.open-fail-row,
.open-fail-subrow {
    --open-fail-tone: #f59e0b;
}

.open-fail-row.age-days,
.open-fail-subrow.age-days {
    --open-fail-tone: #ef4444;
}

.open-fail-row.age-critical,
.open-fail-subrow.age-critical {
    --open-fail-tone: #991b1b;
}

.open-fail-table td {
    vertical-align: top;
}

.open-fail-row td:first-child,
.open-fail-subrow td:first-child {
    box-shadow: inset 4px 0 0 var(--open-fail-tone);
    padding-left: 16px;
}

.open-fail-row:has(+ .open-fail-subrow:not(.is-collapsed)) td {
    border-bottom: none;
}

.open-fail-subrow td {
    padding-top: 0;
}

.open-fail-subrow.is-collapsed {
    display: none;
}

.open-fail-nowrap {
    white-space: nowrap;
}

.open-fail-title {
    font-weight: 700;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.open-fail-desc {
    margin-top: 2px;
    font-size: 12px;
    color: #475569;
    overflow-wrap: anywhere;
}

.open-fail-age-value {
    display: block;
    font-size: 15px;
    font-weight: 750;
    color: var(--open-fail-tone);
}

.open-fail-age-value + .badge {
    margin-top: 4px;
}

.open-fail-orders {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.open-fail-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 12px;
    color: #334155;
}

.open-fail-hint.is-warning {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.open-fail-close-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.open-fail-close-form.is-hidden {
    display: none;
}

.open-fail-close-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.fail-prod-check td {
    vertical-align: top;
}

.fail-prod-check .pers-muted {
    font-size: 11.5px;
}

body.dark-mode .fail-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .fail-tab-btn {
    color: #8891a7;
}

body.dark-mode .fail-tab-btn:hover {
    color: #e7ecf7;
}

body.dark-mode .fail-tab-btn.is-active {
    border-bottom-color: #5b8cff;
    color: #6f9bff;
}

body.dark-mode .open-fail-count.is-zero {
    background: #475569;
}

body.dark-mode .open-fail-chip,
body.dark-mode .open-fail-hint {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .open-fail-chip,
body.dark-mode .open-fail-hint,
body.dark-mode .open-fail-desc,
body.dark-mode .open-fail-close-form label {
    color: #a8b3cf;
}

body.dark-mode .open-fail-chip b,
body.dark-mode .open-fail-title {
    color: #e7ecf7;
}

body.dark-mode .open-fail-chip.is-warning,
body.dark-mode .open-fail-hint.is-warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
}

body.dark-mode .open-fail-row.age-days,
body.dark-mode .open-fail-subrow.age-days {
    --open-fail-tone: #f87171;
}

body.dark-mode .open-fail-row.age-critical,
body.dark-mode .open-fail-subrow.age-critical {
    --open-fail-tone: #fca5a5;
}