/* =====================================================================
   Fabrika Portalı — Modern Dashboard Teması (PRD Bölüm 9)
   Slate ana renk + mavi/yeşil vurgu, kart bazlı, trafik ışığı doluluk.
   ===================================================================== */
:root {
    --slate-900:#0f172a; --slate-800:#1e293b; --slate-700:#334155;
    --slate-600:#475569; --slate-500:#64748b; --slate-400:#94a3b8;
    --slate-300:#cbd5e1; --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
    --blue:#3b82f6; --blue-dark:#2563eb; --green:#10b981; --green-dark:#059669;
    --yellow:#f59e0b; --orange:#f97316; --red:#ef4444;
    --white:#fff; --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06);
    --shadow-lg:0 10px 25px rgba(15,23,42,.10);
    --radius:12px; --radius-sm:8px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
    font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    background:var(--slate-100); color:var(--slate-800);
    font-size:14px; line-height:1.5;
}
a { color:var(--blue-dark); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { color:var(--slate-900); }

/* ---------- Üst bar ---------- */
.topbar { background:var(--slate-900); color:var(--slate-100); box-shadow:var(--shadow); }
/* İki satırlı başlık: 1. satır marka + kullanıcı/çıkış, 2. satır tam genişlik menü. */
.topbar-inner { display:flex; flex-wrap:wrap; align-items:center; column-gap:24px; row-gap:0;
    max-width:1400px; margin:0 auto; padding:11px 20px 0; }
.brand { order:1; display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; }
.brand:hover { text-decoration:none; }
.brand-mark { background:var(--blue); color:#fff; width:32px; height:32px; border-radius:8px;
    display:grid; place-items:center; font-weight:700; font-size:13px; letter-spacing:.5px; }
.brand-mark.big { width:56px; height:56px; font-size:20px; border-radius:14px; }
.brand-text { font-size:15px; }
/* 2. satır: tam genişlik, taşarsa düzgün sarar (yatay kaydırma yok). */
.mainnav { order:3; flex-basis:100%; width:100%; display:flex; flex-wrap:wrap; gap:5px;
    margin-top:11px; padding:8px 0; border-top:1px solid var(--slate-800); }
.mainnav a { color:var(--slate-300); padding:7px 13px; border-radius:8px; font-weight:500;
    font-size:13px; white-space:nowrap; transition:background .12s, color .12s; }
.mainnav a:hover { background:var(--slate-800); color:#fff; text-decoration:none; }
.mainnav a.active { background:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.35); }
.topbar-right { order:2; margin-left:auto; display:flex; align-items:center; gap:10px; }
.user-chip { display:flex; flex-direction:column; line-height:1.1; text-align:right; color:#fff; font-weight:600; font-size:13px; }
.user-chip small { color:var(--slate-400); font-weight:400; font-size:11px; }

/* ---------- Sayfa ---------- */
.page { min-height:calc(100vh - 58px - 48px); }
.container { max-width:1400px; margin:0 auto; padding:24px 20px; }
.container.narrow { max-width:640px; }
.page-title { margin:0 0 18px; font-size:22px; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.page-head h1 { margin:0; font-size:22px; }
.muted { color:var(--slate-500); }
.site-footer { text-align:center; color:var(--slate-400); padding:16px; font-size:12px; }

/* ---------- Kartlar ---------- */
.card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--slate-200); }
.card-body { padding:18px; }
.card-head { padding:14px 18px; border-bottom:1px solid var(--slate-200); font-weight:600; display:flex; justify-content:space-between; align-items:center; }

/* İstatistik kartları */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--slate-200); padding:18px; }
.stat .stat-label { color:var(--slate-500); font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; }
.stat .stat-value { font-size:30px; font-weight:700; color:var(--slate-900); margin-top:4px; }
.stat .stat-sub { color:var(--slate-400); font-size:12px; }
.stat.accent-blue { border-left:4px solid var(--blue); }
.stat.accent-green { border-left:4px solid var(--green); }
.stat.accent-orange { border-left:4px solid var(--orange); }
.stat.accent-slate { border-left:4px solid var(--slate-500); }

/* ---------- Butonlar ---------- */
.btn { display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; border-radius:var(--radius-sm);
    padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer; background:var(--slate-200); color:var(--slate-800); }
.btn:hover { text-decoration:none; filter:brightness(.97); }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-success { background:var(--green); color:#fff; }
.btn-success:hover { background:var(--green-dark); }
.btn-danger { background:var(--red); color:#fff; }
.btn-ghost { background:transparent; border-color:transparent; color:var(--slate-300); }
.btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; }
.btn-outline { background:#fff; border-color:var(--slate-300); color:var(--slate-700); }
.btn-sm { padding:6px 11px; font-size:12.5px; }
.btn-block { width:100%; justify-content:center; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ---------- Form ---------- */
label { display:block; margin-bottom:14px; }
label > span { display:block; font-size:12.5px; font-weight:600; color:var(--slate-600); margin-bottom:5px; }
input,select,textarea { width:100%; padding:9px 11px; border:1px solid var(--slate-300); border-radius:var(--radius-sm);
    font-size:14px; font-family:inherit; background:#fff; color:var(--slate-800); }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.form-grid { display:grid; gap:0; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-actions { display:flex; gap:10px; margin-top:8px; }

/* ---------- Tablo ---------- */
.table-wrap { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--slate-200); overflow:hidden; }
table.data { width:100%; border-collapse:collapse; }
table.data th, table.data td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--slate-200); }
table.data th { background:var(--slate-50); font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:var(--slate-500); font-weight:600; }
table.data tbody tr:hover { background:var(--slate-50); }
table.data td.actions { white-space:nowrap; text-align:right; }
.table-toolbar { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.filters label { margin-bottom:0; }
.filters input, .filters select { min-width:150px; }

/* ---------- Rozetler ---------- */
.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; }
.badge-blue { background:#dbeafe; color:#1e40af; }
.badge-green { background:#d1fae5; color:#065f46; }
.badge-gray { background:var(--slate-200); color:var(--slate-600); }
.badge-yellow { background:#fef3c7; color:#92400e; }
.badge-red { background:#fee2e2; color:#991b1b; }

/* ---------- Flash ---------- */
.flash-wrap { max-width:1400px; margin:16px auto 0; padding:0 20px; }
.flash { padding:11px 15px; border-radius:var(--radius-sm); margin-bottom:10px; font-size:13.5px; font-weight:500; }
.flash-basari { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.flash-hata { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.flash-uyari { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.flash-bilgi { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }

/* ---------- Login ---------- */
.login-body { display:grid; place-items:center; min-height:100vh;
    background:linear-gradient(135deg,var(--slate-900),var(--slate-700)); }
.login-card { background:#fff; padding:36px 32px; border-radius:16px; box-shadow:var(--shadow-lg); width:360px; max-width:92vw; }
.login-brand { text-align:center; margin-bottom:22px; }
.login-brand .brand-mark { margin:0 auto 12px; }
.login-brand h1 { font-size:20px; margin:0; }
.login-brand p { color:var(--slate-500); margin:4px 0 0; font-size:13px; }

/* ---------- Doluluk barı (trafik ışığı) ---------- */
.doluluk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.doluluk-kart { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
.doluluk-kart .dk-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:8px; }
.doluluk-kart .dk-title { font-weight:600; font-size:13.5px; }
.doluluk-kart .dk-sub { color:var(--slate-500); font-size:12px; }
.doluluk-kart .dk-count { font-weight:700; font-size:14px; }
.bar { height:12px; background:var(--slate-200); border-radius:999px; overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:999px; transition:width .3s; }
.dolu-yesil > span { background:var(--green); }
.dolu-sari > span { background:var(--yellow); }
.dolu-turuncu > span { background:var(--orange); }
.dolu-kirmizi > span { background:var(--red); }
.dk-foot { margin-top:7px; font-size:12px; display:flex; justify-content:space-between; align-items:center; }
.dk-foot .yuzde { font-weight:600; }
.dk-limitsiz { color:var(--slate-400); font-style:italic; }

/* ---------- Vardiya seçim renkleri (sabah/akşam/gece mavi, mesai kırmızı) ---------- */
.vardiya-sel { transition: background .15s, color .15s, border-color .15s; font-weight:600; }
.vardiya-sel.v-bos    { background:#fff;    color:var(--slate-500); font-weight:400; }
.vardiya-sel.v-sabah  { background:#bfdbfe; color:#0f2c66; border-color:#93c5fd; }
.vardiya-sel.v-aksam  { background:#93c5fd; color:#0f2c66; border-color:#60a5fa; }
.vardiya-sel.v-gece   { background:#1d4ed8; color:#fff;    border-color:#1e40af; }
.vardiya-sel.v-mesai-x { background:#dc2626; color:#fff;   border-color:#b91c1c; } /* kodu mesai* olan ama özel rengi olmayan vardiyalar */
.vardiya-sel.v-mesai  { background:#fee2e2; color:#7f1d1d; border-color:#fecaca; }
.vardiya-sel.v-mesai2 { background:#fca5a5; color:#651414; border-color:#f87171; }
.vardiya-sel.v-mesai3 { background:#ef4444; color:#fff;    border-color:#dc2626; }
.vardiya-sel.v-mesai4 { background:#dc2626; color:#fff;    border-color:#b91c1c; }
.vardiya-sel.v-mesai5 { background:#991b1b; color:#fff;    border-color:#7f1d1d; }
/* Açılır liste seçeneklerini de destekleyen tarayıcılarda renklendir */
.vardiya-sel option[value="sabah"]  { background:#bfdbfe; color:#0f2c66; }
.vardiya-sel option[value="aksam"]  { background:#93c5fd; }
.vardiya-sel option[value="gece"]   { background:#1d4ed8; color:#fff; }
.vardiya-sel option[value^="mesai"] { background:#fca5a5; } /* mesai* yedek (kırmızı ton) */
.vardiya-sel option[value="mesai"]  { background:#fee2e2; }
.vardiya-sel option[value="mesai2"] { background:#fca5a5; }
.vardiya-sel option[value="mesai3"] { background:#ef4444; color:#fff; }
.vardiya-sel option[value="mesai4"] { background:#dc2626; color:#fff; }
.vardiya-sel option[value="mesai5"] { background:#991b1b; color:#fff; }

/* ---------- Planlama matrisi: vardiya grup başlığı ---------- */
.matris .grup-baslik td, .data .grup-baslik td { background:var(--slate-100); color:var(--slate-700); font-weight:700; font-size:12.5px; letter-spacing:.2px; padding:7px 10px; border-top:2px solid var(--slate-300); }
.sira-no { display:inline-block; min-width:18px; text-align:center; font-size:11px; font-weight:700; color:var(--slate-500); background:var(--slate-100); border-radius:5px; padding:0 4px; margin-right:4px; }
/* Planlama: izinli / gelmedi gün işareti */
.matris td.gun-izinli { background:#fef9c3; }
.matris td.gun-gelmedi { background:#fee2e2; }
.gun-rozet { display:inline-block; margin-top:3px; font-size:10px; font-weight:700; line-height:1.4; padding:0 5px; border-radius:5px; }
.gun-izinli .gun-rozet { background:#fde047; color:#713f12; }
.gun-gelmedi .gun-rozet { background:#fca5a5; color:#7f1d1d; }
/* Mesai Girişi'nden gelen salt-okunur mesai rozeti (izin sarısından ayrı, mesai tonu) */
.gun-rozet.mesai-rozet { background:#fecaca; color:#7f1d1d; }

/* ---------- Servis Doluluk üst özet şeridi ---------- */
.doluluk-ozet-banner { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:16px; }
.doluluk-ozet-banner .doz-item { flex:1 1 180px; background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; }
.doluluk-ozet-banner .doz-label { color:var(--slate-500); font-size:12.5px; margin-bottom:4px; }
.doluluk-ozet-banner .doz-value { font-weight:700; font-size:24px; line-height:1.1; }
.doluluk-ozet-banner .doz-value span { font-weight:500; font-size:13px; color:var(--slate-500); }
.doluluk-ozet-banner .doz-doluluk .doz-bar { height:8px; margin-top:8px; }

/* ---------- Servis-bazlı doluluk listesi (servis başına tek blok) ---------- */
.doluluk-servis-liste { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:16px; }
.servis-blok { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); }
.servis-blok-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
.servis-blok-head .sb-ad { font-weight:700; font-size:15px; }
.servis-blok-head .sb-ozet { display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.servis-blok-head .sb-sayi { color:var(--slate-500); font-size:12.5px; }
.servis-blok-head .sb-yuzde { font-weight:700; font-size:15px; }
.servis-blok .sb-bar { height:10px; margin-bottom:12px; }
.servis-blok .sb-bos { font-size:12.5px; padding:4px 0 2px; }
.vardiya-liste { display:flex; flex-direction:column; gap:8px; }
.vardiya-satir { display:grid; grid-template-columns:96px 1fr auto auto; align-items:center; gap:10px; font-size:12.5px; }
.vardiya-satir .vs-etiket { color:var(--slate-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vardiya-satir .vs-bar-wrap .bar { height:8px; }
.vardiya-satir .vs-sayi { font-weight:600; text-align:right; min-width:48px; }
.vardiya-satir .vs-yuzde { font-weight:600; text-align:right; min-width:42px; display:flex; align-items:center; gap:6px; justify-content:flex-end; }
@media (max-width:520px){
    .vardiya-satir { grid-template-columns:80px 1fr auto; }
    .vardiya-satir .vs-bar-wrap { display:none; }
}

/* ---------- Vardiya planlama matrisi ---------- */
.plan-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.hafta-secici { display:flex; align-items:center; gap:8px; }
.hafta-secici .hafta-label { font-weight:600; min-width:220px; text-align:center; }
.matris-wrap { overflow-x:auto; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--slate-200); }
table.matris { border-collapse:collapse; width:100%; min-width:900px; }
table.matris th, table.matris td { padding:7px 9px; border-bottom:1px solid var(--slate-200); border-right:1px solid var(--slate-100); font-size:13px; }
table.matris thead th { background:var(--slate-50); position:sticky; top:0; z-index:2; font-size:11.5px; text-transform:uppercase; color:var(--slate-500); }
table.matris td.sticky-col, table.matris th.sticky-col { position:sticky; left:0; background:#fff; z-index:1; min-width:180px; box-shadow:1px 0 0 var(--slate-200); }
table.matris thead th.sticky-col { z-index:3; background:var(--slate-50); }
table.matris .pers-ad { font-weight:600; }
table.matris .pers-sicil { color:var(--slate-400); font-size:11px; }
table.matris select.vardiya-sel { padding:5px 6px; font-size:12px; min-width:138px; border-radius:6px; }
table.matris td.asildi { background:#fee2e2; }
table.matris td.asildi select { border-color:var(--red); }
.kopyala-btn { background:none; border:none; cursor:pointer; color:var(--blue); font-size:15px; padding:2px 4px; }
.kopyala-btn:hover { color:var(--blue-dark); }

/* ---------- Toast ---------- */
.toast-host { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:50; }
.toast { background:var(--slate-900); color:#fff; padding:10px 16px; border-radius:8px; font-size:13px; box-shadow:var(--shadow-lg);
    opacity:0; transform:translateY(8px); transition:.25s; }
.toast.show { opacity:1; transform:none; }
.toast.toast-ok { background:var(--green-dark); }
.toast.toast-err { background:var(--red); }

/* ---------- Uyarı banner ---------- */
.uyari-banner { background:#fff7ed; border:1px solid var(--orange); color:#9a3412; padding:11px 15px; border-radius:var(--radius-sm); margin-bottom:14px; font-weight:500; display:none; }
.uyari-banner.show { display:block; }

/* ---------- Gün sekmeleri ---------- */
.gun-tablar { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px; }
.gun-tablar button { background:#fff; border:1px solid var(--slate-300); border-radius:8px; padding:6px 14px; cursor:pointer; font-weight:600; font-size:13px; color:var(--slate-600); }
.gun-tablar button.active { background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---------- Yardımcılar ---------- */
.row-split { display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start; }
@media (max-width:980px){ .row-split{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }
.text-center { text-align:center; }
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;} .mt-2{margin-top:16px;}
.empty-state { text-align:center; padding:40px; color:var(--slate-400); }
.pagination { display:flex; gap:6px; justify-content:center; margin-top:16px; }
.pagination a, .pagination span { padding:6px 11px; border-radius:6px; border:1px solid var(--slate-300); background:#fff; font-size:13px; }
.pagination span.current { background:var(--blue); color:#fff; border-color:var(--blue); }
.inline-form { display:inline; }
/* Seçici çubukları .container ile aynı genişlik/padding'e hizalar */
.secici-wrap { max-width:1400px; margin:0 auto; padding:0 20px; }
.bolum-secici-bar { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-sm); padding:8px 14px; margin-bottom:18px; box-shadow:var(--shadow); }
.bolum-secici-bar select { width:auto; min-width:200px; }
.statu-pills { display:inline-flex; gap:4px; }
.statu-pills .pill { padding:5px 14px; border:1px solid var(--slate-300); border-radius:999px; font-size:13px; font-weight:600; color:var(--slate-600); background:#fff; }
.statu-pills .pill.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.statu-pills .pill:hover { text-decoration:none; filter:brightness(.97); }

/* ---------- PDKS Fazla Mesai renk kademeleri ---------- */
/* Mavi yaka — belirgin arka plan */
tr.fm-sari    { background:#fef9c3 !important; }
tr.fm-turuncu { background:#ffedd5 !important; }
tr.fm-kirmizi { background:#fee2e2 !important; }
/* Beyaz yaka — sönük ton */
tr.fm-soluk-sari    { background:rgba(254,249,195,.45) !important; }
tr.fm-soluk-turuncu { background:rgba(255,237,213,.45) !important; }
tr.fm-soluk-kirmizi { background:rgba(254,226,226,.45) !important; }
/* Plan yok — gri / soluk */
tr.fm-belirsiz { background:var(--slate-100) !important; color:var(--slate-400) !important; }
tr.fm-belirsiz td { color:var(--slate-400); }

/* FM rozeti */
.badge.fm-badge { background:#fff; border:1px solid currentColor; }
tr.fm-sari    .badge.fm-badge,
tr.fm-soluk-sari    .badge.fm-badge { color:#92400e; }
tr.fm-turuncu .badge.fm-badge,
tr.fm-soluk-turuncu .badge.fm-badge { color:#9a3412; }
tr.fm-kirmizi .badge.fm-badge,
tr.fm-soluk-kirmizi .badge.fm-badge { color:#991b1b; }
tr.fm-belirsiz .badge.fm-badge { color:var(--slate-500); }

/* Matris hücreleri — mavi yaka */
td.fm-sari    { background:#fef9c3; }
td.fm-turuncu { background:#ffedd5; }
td.fm-kirmizi { background:#fee2e2; }
/* Matris hücreleri — beyaz yaka sönük */
td.fm-soluk-sari    { background:rgba(254,249,195,.5); }
td.fm-soluk-turuncu { background:rgba(255,237,213,.5); }
td.fm-soluk-kirmizi { background:rgba(254,226,226,.5); }
/* Matris hücreleri — plan yok */
td.fm-belirsiz { background:var(--slate-100); color:var(--slate-400); }

/* Görünüm tab'ları (Liste / Matris geçişi) */
.gorunum-tabs { display:flex; gap:4px; }
.gorunum-tabs a { padding:6px 14px; border:1px solid var(--slate-300); border-radius:8px; font-size:13px; font-weight:600; color:var(--slate-600); background:#fff; }
.gorunum-tabs a.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.gorunum-tabs a:hover { text-decoration:none; filter:brightness(.97); }

/* Mesai alt satırı (Vardiya Planla matrisindeki mesai girişi kontrolleri) */
.mg-cell { display:flex; flex-direction:column; gap:3px; border-top:1px dashed var(--slate-200); margin-top:4px; padding-top:3px; }
.mg-cell .mesai-sel { min-width:118px; font-size:12px; padding:3px 4px; }
.mg-acik { display:flex; gap:2px; }
.mg-acik input[type=time] { width:78px; font-size:11px; padding:2px; }
.mg-kilit-isaret { font-size:10px; color:var(--slate-500); }
.mg-kendi { display:flex; align-items:center; gap:3px; font-size:10px; color:var(--slate-600); cursor:pointer; }
.mg-kendi input { width:auto; margin:0; }
.mg-kopya { border:1px solid var(--slate-300); background:#fff; border-radius:6px; cursor:pointer; padding:2px 6px; font-size:12px; line-height:1; }