* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    /* Tablet/telefonda sekme butonlarina dokunurken parmagin ufak bir
       kaymasi, tarayicinin yerlesik hareketlerini tetikleyip sayfanin
       tamamen yenilenmis/kapanip-acilmis gibi gorunmesine yol
       aciyordu: dikeyde "pull-to-refresh", yatayda ise ozellikle sol
       kenara yapisik acilan mobil menude "kenardan kaydirinca geri
       git" hareketi (sidebar tam ekran kenarindan basladigi icin her
       dokunus bu bolgeye denk gelebiliyor). Ikisini de devre disi
       birakir - normal dikey/yatay kaydirmayi etkilemez. */
    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);
}

/* ============================================================
   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;
}


/* ============================================================
   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
    ===================================================== */

    html,
    body {
        overflow-x: hidden;
    }


    /* =====================================================
       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;
}


/* 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);
}

/* ============================================================
   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");
}

/* ------------------------------------------------------------
   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);
}


.detail-table-wrapper {
    border: 1px solid #e5e7eb;

    border-radius: 8px;

    overflow: auto;
}


.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 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,
input,
label,
span,
strong,
h1,
h2,
h3,
p,
div,
section,
table,
th,
td {
    caret-color: transparent;
}

#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;
}


/* ============================================================
   13. TV MODE
   ============================================================ */

@media screen {

    body.tv-mode {
        overflow: hidden;

        /* TV genel arka planı - YEDEKTEKİ DEĞER */
        background: #cbd4df;

        zoom: 1.24;
    }

    body.tv-mode .topbar {
    height: 64px;
    }


    /* ========================================================
       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;
    }


    /* ========================================================
       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
   ============================================================ */

body:not(.tv-mode) .planned-break-label {
    display: inline-flex;
    align-items: center;

    margin-left: 10px;
    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;
}


/* ------------------------------------------------------------
   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;
}

body.dark-mode .confirm-dialog-icon {
    background-color: rgba(248, 113, 113, 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;
}

.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;
}


/* ============================================================
   YENI - LOGIN EKRANI
   ============================================================ */

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    /* YENI - GORUNUM: login ekrani artik uygulamanin geri kalaniyla
       AYNI kural - varsayilan (acik tema) burada, koyu tema
       "body.dark-mode .login-screen" altinda (asagida) tanimli. */
    background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 60%, #eff6ff 100%);
}

/* ONEMLI: dashboard'un kendi koyu tema arka planiyla (body.dark-mode
   - #03040a + iki hafif mavi/mor radial glow) BIREBIR AYNI formul -
   login ekrani da geri kalan uygulamayla ayni koyulukta/tutarli
   gorunsun diye. */
body.dark-mode .login-screen {
    background:
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.10), transparent 35%),
        radial-gradient(circle at 90% 15%, rgba(139, 92, 246, 0.08), transparent 30%),
        #03040a;
}

/* YENI - GORUNUM: hafif, siliniz bir kafes (grid) deseni - login
   ekranina hafiften "teknik/endustriyel panel" hissi katmak icin.
   Cok dusuk opaklikta, alttan yukariya dogru soluklaşarak
   kayboluyor (maskeleme), asla metnin onune gecmez (z-index:0,
   pointer-events:none). */
.login-grid-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.05;
    background-image:
        linear-gradient(#94a3b8 1px, transparent 1px),
        linear-gradient(90deg, #94a3b8 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%);
    mask-image: linear-gradient(to bottom, black, transparent 80%);
    pointer-events: none;
}

body.dark-mode .login-grid-pattern {
    opacity: 0.14;
}

.login-topbar {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* .lang-switch / .lang-switch-btn'nin kendi rengi de (.theme-toggle
   gibi) HER ZAMAN koyu .topbar zemini icin tasarlanmis - login
   ekraninda acik temada kontrasti duzeltiyoruz. Uygulamanin geri
   kalanindaki (topbar icindeki) dil secici ETKILENMEZ, cunku bu
   kural SADECE #loginScreen icindeki .lang-switch'i hedefliyor. */
#loginScreen .lang-switch {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

#loginScreen .lang-switch-btn {
    color: #475569;
}

#loginScreen .lang-switch-btn:hover {
    color: #0f172a;
}

body.dark-mode #loginScreen .lang-switch {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #loginScreen .lang-switch-btn {
    color: #a6afc4;
}

body.dark-mode #loginScreen .lang-switch-btn:hover {
    color: #e7ecf7;
}

/* .theme-toggle'in kendi rengi HER ZAMAN koyu bir zemin (.topbar)
   icin tasarlanmis - login ekraninin acik tema arka plani uzerinde
   bu rengi kullanirsak neredeyse gorunmez olur. Bu yuzden SADECE
   bu login butonu icin, acik temada kontrasti duzeltiyoruz -
   uygulamanin geri kalanindaki .theme-toggle (topbar) ETKILENMEZ. */
#loginThemeToggle {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.04);
    color: #475569;
}

#loginThemeToggle:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.2);
    color: #0f172a;
}

body.dark-mode #loginThemeToggle {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

body.dark-mode #loginThemeToggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.login-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 360px;
    max-width: 90vw;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.login-brand-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.45);
}

.login-brand-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #2563eb;
}

.login-brand-subtitle {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
}

.login-box {
    width: 100%;
    max-width: 340px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.login-logo {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0f172a;
    text-align: center;
    margin-bottom: 4px;
}

.login-box-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

.login-subtitle {
    text-align: left;
    color: #64748b;
    font-size: 0.82rem;
    margin-bottom: 18px;
}

.login-box label {
    font-size: 0.75rem;
    color: #475569;
    margin-top: 10px;
}

.login-input-group {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.login-input-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: #94a3b8;
    pointer-events: none;
}

.login-box input {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px 10px 38px;
    color: #0f172a;
    font-size: 0.9rem;
}

.login-box input:focus {
    outline: none;
    border-color: #5b8cff;
    box-shadow: 0 0 0 2px rgba(91, 140, 255, 0.15);
    caret-color: #5b8cff;
}

.login-box button[type="submit"] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #5b8cff;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-weight: 600;
    cursor: pointer;
}

.login-box button[type="submit"]:hover {
    background: #4877e8;
}

.login-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.login-box button[type="submit"]:hover .login-btn-icon {
    transform: translateX(3px);
}

.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;
}

/* ============================================================
   YENI - LOGIN EKRANI KOYU TEMA
   ============================================================ */

body.dark-mode .login-brand-title {
    color: #7dd3fc;
}

body.dark-mode .login-brand-subtitle {
    color: #8891a7;
}

body.dark-mode .login-box {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

body.dark-mode .login-logo,
body.dark-mode .login-box-title {
    color: #e7ecf7;
}

body.dark-mode .login-subtitle {
    color: #8891a7;
}

body.dark-mode .login-box label {
    color: #a6afc4;
}

body.dark-mode .login-input-icon {
    color: #6f7996;
}

body.dark-mode .login-box input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e7ecf7;
}

/* ONEMLI - DUZELTME: "body.dark-mode .login-box input" (yukarida)
   ile ".login-box input:focus" AYNI ozelligi (border-color)
   degistiriyordu ve CSS specificity kurallarina gore koyu tema
   kurali DAHA GUCLUYDU - yani koyu temada bir input'a tiklaninca
   cerceve rengi hic degismiyordu (focus gorunmuyordu). Bu kural,
   koyu temada ozellikle focus durumunu ac verir hale getirir. */
body.dark-mode .login-box input:focus {
    border-color: #5b8cff;
    box-shadow: 0 0 0 2px rgba(91, 140, 255, 0.2);
    caret-color: #5b8cff;
}

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;
}

.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);
    }
}