/* ============================================================================
   BITS Theme overrides — body.theme-light için açık tema
   Default (body veya body.theme-dark): koyu tema (component CSS'lerinde tanımlı)
   ============================================================================ */

/* ---------- LIGHT THEME ---------- */
body.theme-light {
    background: #f5f5f5;
    color: #1d1d1d;
}

body.theme-light .bits-shell { background: #f5f5f5; color: #1d1d1d; }
/* Top bar her temada aynı: açık gri + siyah yazı (component CSS'i ile aynı) */
body.theme-light .bits-header { background: #dadada; color: #1d1d1d; border-bottom-color: #b8b8b8; }
body.theme-light .bits-header .title { color: #1d1d1d; }
body.theme-light .user-trigger { color: #1d1d1d; }
body.theme-light .user-trigger .adsoyad { color: #1d1d1d; }
body.theme-light .user-trigger .caret { color: #555; }

/* Genel panel ve kart renkleri */
body.theme-light .bits-main,
body.theme-light .home-grid,
body.theme-light .modul-page,
body.theme-light .veri-page,
body.theme-light .erp-page,
body.theme-light .form-shell,
body.theme-light .detay,
body.theme-light .admin-content {
    background: #f5f5f5;
    color: #1d1d1d;
}

/* Kart/panel'ler — koyu yerine açık gri */
body.theme-light .modul-header,
body.theme-light .step-card,
body.theme-light .sync-status,
body.theme-light .info-banner,
body.theme-light .form-card,
body.theme-light .card,
body.theme-light .key-card,
body.theme-light .create-card,
body.theme-light .form,
body.theme-light .selected-wo,
body.theme-light .mevcut-hatalar,
body.theme-light .toolbar,
body.theme-light .data-table,
body.theme-light .header {
    background: #fff !important;
    color: #1d1d1d !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Sol nav */
body.theme-light .admin-nav { background: #fff; border-right: 1px solid #ddd; }
body.theme-light .nav-link { color: #555; }
body.theme-light .nav-link:active { background: #e5e5e5; }
body.theme-light .nav-link.active { background: #4a5a66; color: #fff; }
body.theme-light .nav-title { color: #888; }

/* Input/select/textarea — açık */
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
    background: #fff !important;
    color: #1d1d1d !important;
    border: 1px solid #ccc !important;
}
body.theme-light input::placeholder,
body.theme-light textarea::placeholder { color: #999; }

/* Form label'ları SİYAH — beyaz arkaplan üstünde siliklik (#ccc) okunmuyordu.
   Tüm sayfalarda ve gelecek sayfalarda label'lar koyu siyah görünür. */
body.theme-light label,
body.theme-light .field label,
body.theme-light .form-title,
body.theme-light legend {
    color: #1d1d1d !important;
    font-weight: 600;
}
/* Field içindeki ipucu / hint metinleri yarı belirgin gri (orjinal #888'den daha okunaklı) */
body.theme-light .field .hint,
body.theme-light .field .req {
    color: #555;
}
body.theme-light .field .req { color: #c0392b; }
/* Selected-wo / mevcut-hatalar gibi panellerde label color */
body.theme-light .selected-wo .label,
body.theme-light .section-title { color: #1d1d1d; font-weight: 700; }
body.theme-light .selected-wo .value,
body.theme-light .selected-wo .wo-detail { color: #1d1d1d; }

/* Tablolar */
body.theme-light .data-table th { background: #e5e5e5; color: #555; }
body.theme-light .data-table td { border-bottom-color: #eee; color: #1d1d1d; }
body.theme-light .data-table tr:hover td { background: #f0f0f0; }
body.theme-light .data-table .small { color: #666; }
body.theme-light .data-table .tedarikci { color: #2e7d32; }
body.theme-light .data-table code { background: #e5e5e5; color: #1d1d1d; }

/* Dropdown */
body.theme-light .dropdown { background: #fff; color: #1d1d1d; border: 1px solid #ddd; }
body.theme-light .dd-section { border-bottom-color: #eee; }
body.theme-light .dd-section.info { background: #f5f5f5; }
body.theme-light .dd-item { color: #1d1d1d; }
body.theme-light .dd-item:active { background: #eee; }
body.theme-light .dd-name { color: #1d1d1d; }
body.theme-light .dd-email, body.theme-light .dd-sicil { color: #555; }
body.theme-light .role-tag { background: #ddd; color: #1d1d1d; }
body.theme-light .theme-toggle { background: #f0f0f0; }
body.theme-light .theme-opt { color: #555; }

/* Hata kartları */
body.theme-light .hata-card { background: #fff; color: #1d1d1d; }
body.theme-light .hata-card:active { background: #f0f0f0; }
body.theme-light .card-body strong { color: #1d1d1d; }
body.theme-light .card-body .row { color: #555; }
body.theme-light .card-footer { border-top-color: #eee; color: #777; }

/* Tile (Home, /uretim, /kalite) */
body.theme-light .tile { background: #fff; color: #1d1d1d; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
body.theme-light .tile:active:not(.disabled) { background: #e5e5e5; color: #1d1d1d; }
body.theme-light .tile.disabled { background: #ddd; color: #888; }
body.theme-light .tile-sub { color: #777; }

/* Tab bar */
body.theme-light .tab-bar { background: #fff; border-bottom-color: #ddd; }
body.theme-light .tab { color: #777; }
body.theme-light .tab:active, body.theme-light .tab:hover { color: #1d1d1d; }
body.theme-light .tab.active { color: #1d1d1d; }

/* Buton renkleri kalsın (yeşil/turuncu/kırmızı net), ama disabled state açıkta */
body.theme-light button.secondary,
body.theme-light .btn-secondary { background: #ccc; color: #1d1d1d; }
body.theme-light .btn-page { background: #ddd; color: #1d1d1d; }
body.theme-light .btn-refresh { background: #4a5a66; color: #fff; }

/* Sasi list (Hata Giriş sol panel) */
body.theme-light .panel { background: #fff; }
body.theme-light .panel-header { background: #f5f5f5; color: #555; }
body.theme-light .sasi-item { background: #f5f5f5; color: #1d1d1d; }
body.theme-light .sasi-item:active { background: #e5e5e5; }
body.theme-light .sasi-item.selected { background: #4a5a66; color: #fff; }
body.theme-light .sasi-item .wo-meta { color: #777; }

/* Mevcut chip'ler */
body.theme-light .mevcut-chip { background: #f5f5f5; color: #1d1d1d; }
body.theme-light .chip-id { color: #777; }
body.theme-light .chip-durum { background: #ddd; color: #555; }

/* Hash preview */
body.theme-light .hash-preview { background: #f5f5f5; }
body.theme-light .hash-value { background: #fff; color: #1d1d1d; }

/* Status badge'lerin görünür kalması */
body.theme-light .badge.active { background: #4caf50; color: #fff; }
body.theme-light .badge.revoked, body.theme-light .badge.expired { background: #888; color: #fff; }
body.theme-light .badge.pending { background: #ff9800; color: #1d1d1d; }
body.theme-light .badge.ok { background: #4caf50; color: #fff; }

/* Endpoints box (Admin Sync) */
body.theme-light .endpoints-box { background: #f5f5f5; color: #555; }
body.theme-light .endpoints-box code { background: #fff; color: #1d1d1d; border: 1px solid #ddd; }

/* Muted text */
body.theme-light .muted { color: #777; }

/* Login sayfası dark kalmalı (estetik tercih), DİĞER her şey light olur */
/* body.theme-light .login-bg dokunma — sayfayı dark bırak */

/* Status hash satırı (özel - dark mode olduğu için bunu zorla light yapmıyoruz) */

/* ============================================================================
   ORIENTATION (GLOBAL — tüm sayfalara uygulanır)
   ----------------------------------------------------------------------------
   BITS her zaman landscape (yatay) gösterilir.
   - Installed PWA: manifest 'orientation: landscape' + screen.orientation.lock
     OS seviyesinde yatay kilitler.
   - Browser tab (özellikle iOS Safari): yukarıdakiler çalışmaz, CSS rotation
     devreye girer — body'nin etrafındaki #orient-shell wrapper'ı 90deg döner,
     içerik yatay görünür (kullanıcı telefonu çevirip okur).
   - Beyaz boşluk fix: html bg ALWAYS dark (light mode'da html.theme-light
     ile light'a döner). Body zoom kaldırıldı.
   ============================================================================ */

html { background: #1d1d1d; min-height: 100vh; }
html.theme-light { background: #f5f5f5; }
/* Body bg MUTLAKA tema rengi — Bootstrap default #fff'i ezer. Zoom matematiği
   tam tutmasa, layout boşluk bıraksa bile beyaz sızmasın. */
body { margin: 0; padding: 0; background: #1d1d1d; }
body.theme-light { background: #f5f5f5; }
#orient-shell { background: #1d1d1d; }
.theme-light #orient-shell { background: #f5f5f5; }

/* Default — orient-shell viewport'u doldurur */
#orient-shell { width: 100%; min-height: 100vh; }

/* Portrait + dar viewport → wrapper'ı 90deg döndür, içerik yatay görünür.
   Phone portrait (~393x800) → rotated shell 800x393 design = landscape. */
@media screen and (orientation: portrait) and (max-width: 1024px) {
    html, body { overflow: hidden; width: 100vw; height: 100vh; }
    #orient-shell {
        position: absolute;
        width: 100vh;
        height: 100vw;
        top: 0;
        left: 100vw;
        transform-origin: top left;
        transform: rotate(90deg);
        overflow: auto;
    }
}

/* ============================================================================
   TELEFON ÖLÇEKLEME — content çok küçük cihazlarda daha kompakt
   ----------------------------------------------------------------------------
   Tablet (≥1024 wide veya ≥768 height) etkilenmez — orijinal tasarım.
   Phone (kısa kenar ≤500): zoom + width compensation ile fit edilir.
   ============================================================================ */

/* Phone — zoom + width 1/zoom + min-height 1/zoom kompansasyonu.
   Width comp: visual width = 100% viewport (saga kayma yok).
   Height comp: visual min-height = 100vh (bitsshell viewport'u tam doldurur,
   alt bos alan kalmaz — Home gibi az icerikli sayfalar da viewport doldurur). */

/* Phone landscape — vh = viewport tall edge */
@media screen and (max-width: 1000px) and (max-height: 500px) {
    .bits-shell, .login-bg {
        zoom: 0.65;
        width: 153.846%;
        min-height: 153.846vh;
    }
}
/* Phone portrait (rotated by #orient-shell) — rotated shell height = 100vw */
@media screen and (max-width: 500px) and (max-height: 1000px) {
    .bits-shell, .login-bg {
        zoom: 0.65;
        width: 153.846%;
        min-height: 153.846vw;
    }
}

/* Çok küçük phone landscape (iPhone SE class) */
@media screen and (max-width: 700px) and (max-height: 400px) {
    .bits-shell, .login-bg {
        zoom: 0.58;
        width: 172.414%;
        min-height: 172.414vh;
    }
}
/* Çok küçük phone portrait */
@media screen and (max-width: 400px) and (max-height: 700px) {
    .bits-shell, .login-bg {
        zoom: 0.58;
        width: 172.414%;
        min-height: 172.414vw;
    }
}