/* Yoğun, kurumsal ekran düzeni; cetvel renkleri ASOS Nöbet Listesi Döküm Cetveli çıktısından alındı. */
:root {
  --bg: #eef1f5; --panel: #fff; --ink: #1d2733; --muted: #5b6876; --line: #c9d1da; --line2: #e3e7ec;
  --top: #123a63; --top2: #0d2c4c; --menu: #1b4a78; --menu-h: #2a5f94; --accent: #1a6db5; --accent-ink: #fff;
  --weekend: #87cefa; --weekend-ink: #10222f; --holiday: #ffe08a; --holiday-ink: #33280a; --head: #dfe6ee;
  --ok: #1d7a46; --warn: #a8660a; --err: #b3261e; --err-bg: #fdecea; --warn-bg: #fff4dc; --ok-bg: #e5f5ec; --info-bg: #e6f0fa;
}
:root[data-theme="dark"] {
  --bg: #12181f; --panel: #1b232c; --ink: #e4e9ef; --muted: #9aa7b4; --line: #38444f; --line2: #2a343e;
  --top: #0c2239; --top2: #081827; --menu: #14304c; --menu-h: #1f4569; --accent: #4a9be0; --accent-ink: #06131f;
  --weekend: #1f5a7d; --weekend-ink: #e6f4fd; --holiday: #6d5612; --holiday-ink: #fff3cf; --head: #26313b;
  --ok: #5ccb8d; --warn: #e6b050; --err: #f28b82; --err-bg: #3a1d1b; --warn-bg: #3a2e13; --ok-bg: #16321f; --info-bg: #182c3f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.4 Arial, Helvetica, sans-serif; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h2 { font-size: 16.5px; margin: 0; }
h3 { font-size: 14px; margin: 0 0 6px; }
.muted { color: var(--muted); }
.right { text-align: right; }
.grow { flex: 1; }

/* Üst şerit */
.top { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; background: var(--top); color: #fff; position: relative; }
.top .geri-bildir { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.top b { font-size: 16.5px; letter-spacing: .2px; }
.top .kim { font-size: 13px; opacity: .9; text-align: right; line-height: 1.2; }
.top button { background: transparent; border: 1px solid #ffffff55; color: #fff; padding: 3px 8px; border-radius: 2px; cursor: pointer; }
.top button:hover { background: #ffffff22; }
.menu-btn { display: none; }

.shell { display: flex; height: calc(100vh - 42px); }
.side { width: 230px; flex: none; background: var(--menu); color: #dbe7f3; overflow-y: auto; }
.side .grup { padding: 9px 12px 3px; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; opacity: .7; }
.side a { display: block; padding: 7px 12px 7px 18px; color: inherit; text-decoration: none; border-left: 3px solid transparent; }
.side a:hover { background: var(--menu-h); }
.side a.on { background: var(--menu-h); border-left-color: #ffc94d; color: #fff; font-weight: bold; }
.main { flex: 1; min-width: 0; overflow: auto; padding: 10px; }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 7px; }

/* Panel ve filtre */
.panel { background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; }
.panel > header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--head); border-bottom: 1px solid var(--line); font-weight: bold; }
.panel > .body { padding: 10px; }
.filtre { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.filtre label, .form label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
input, select, textarea { background: var(--panel); border: 1px solid var(--line); padding: 4px 6px; border-radius: 2px; min-height: 30px; color: var(--ink); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, .c:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn { background: var(--panel); border: 1px solid var(--line); padding: 5px 12px; min-height: 30px; cursor: pointer; border-radius: 2px; }
.btn:hover { background: var(--head); }
.btn.p { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: bold; }
.btn.p:hover { filter: brightness(1.08); }
.btn.d { color: var(--err); border-color: var(--err); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.araclar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Tablolar */
.tw { overflow: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; background: var(--panel); }
th, td { border: 1px solid var(--line); padding: 3px 6px; vertical-align: middle; }
th { background: var(--head); font-weight: bold; text-align: left; font-size: 13px; }
tbody tr:hover td { background: var(--info-bg); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.link { cursor: pointer; }

/* Durum rozetleri */
.tag { display: inline-block; padding: 0 6px; font-size: 12.5px; line-height: 17px; border: 1px solid currentColor; border-radius: 2px; white-space: nowrap; }
.tag.ok { color: var(--ok); background: var(--ok-bg); }
.tag.warn { color: var(--warn); background: var(--warn-bg); }
.tag.err { color: var(--err); background: var(--err-bg); }
.tag.info { color: var(--accent); background: var(--info-bg); }

/* Nöbet listesi (cetvel) */
.cetvel-w { overflow: auto; max-height: calc(100vh - 305px); min-height: 220px; border: 1px solid var(--line); }
table.cetvel { width: max-content; font-size: 12.5px; border-collapse: separate; border-spacing: 0; }
.cetvel th, .cetvel td { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1px 2px; }
.cetvel thead th { position: sticky; top: 0; z-index: 3; text-align: center; font-weight: normal; }
.cetvel thead th.gun { width: 36px; min-width: 36px; padding: 2px 0; }
.gun .g { display: block; font-weight: bold; font-size: 13px; }
.gun .a { display: block; font-size: 10.5px; }
.cetvel thead th.ozet { min-width: 44px; max-width: 62px; font-size: 11px; line-height: 1.05; }
.cetvel .sabit { position: sticky; z-index: 2; background: var(--panel); text-align: left; }
.cetvel thead .sabit { z-index: 4; background: var(--head); }
.cetvel .s1 { left: 0; width: 30px; min-width: 30px; text-align: right; }
.cetvel .s2 { left: 30px; min-width: 175px; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cetvel .s3 { left: 205px; min-width: 70px; border-right: 2px solid var(--muted); }
.cetvel tbody tr:hover td.sabit { background: var(--info-bg); }
.c { text-align: center; white-space: pre-line; line-height: 1.05; height: 26px; cursor: default; position: relative; }
.edit .c { cursor: cell; }
.edit .c:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.c.hs, th.hs { background: var(--weekend); color: var(--weekend-ink); }
.c.ub, th.ub { background: var(--holiday); color: var(--holiday-ink); }
.c.izin { color: var(--ok); font-weight: bold; }
.c.rpr { color: var(--warn); font-weight: bold; }
.c.gc { font-weight: bold; }
.c.blr { color: var(--err); font-weight: bold; }
.c.bulgu::after { content: ""; position: absolute; top: 0; right: 0; border: 4px solid transparent; border-top-color: var(--err); border-right-color: var(--err); }
td.nz { text-align: right; font-variant-numeric: tabular-nums; padding-right: 3px; background: var(--panel); }
td.nz.neg { color: var(--err); }
td.nz.fm { font-weight: bold; }
.palet { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.palet button { border: 1px solid var(--line); background: var(--panel); padding: 2px 7px; min-height: 26px; min-width: 34px; cursor: pointer; border-radius: 2px; }
.palet button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: bold; }
.ayrac { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }

/* Sekmeler */
.sekme { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: var(--head); overflow-x: auto; }
.sekme button { border: 0; border-right: 1px solid var(--line); background: transparent; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.sekme button.on { background: var(--panel); font-weight: bold; box-shadow: inset 0 2px 0 var(--accent); }

/* Akış çubuğu */
.akis { display: flex; flex-wrap: wrap; gap: 0; }
.akis span { padding: 3px 12px 3px 16px; background: var(--line2); position: relative; font-size: 13px; margin-right: 2px; }
.akis span.on { background: var(--accent); color: var(--accent-ink); font-weight: bold; }
.akis span.ok { background: var(--ok-bg); color: var(--ok); }

/* Kartlar */
.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.kart { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 7px 10px; }
.kart b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kart span { font-size: 13px; color: var(--muted); }
.kart.err { border-top-color: var(--err); }
.kart.warn { border-top-color: var(--warn); }
.kart.ok { border-top-color: var(--ok); }
.iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; }

/* Mesaj, form, diyalog */
.not { padding: 7px 10px; border-left: 3px solid var(--accent); background: var(--info-bg); margin-bottom: 8px; }
.not.warn { border-color: var(--warn); background: var(--warn-bg); }
.not.err { border-color: var(--err); background: var(--err-bg); }
.not.ok { border-color: var(--ok); background: var(--ok-bg); }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.form .gen { grid-column: 1 / -1; }
.form .check { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; }
.form input[type=checkbox] { min-height: 0; }
dialog { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: 88vh; }
dialog::backdrop { background: #0006; }
dialog > header { padding: 7px 11px; background: var(--top); color: #fff; font-weight: bold; display: flex; justify-content: space-between; }
dialog > header button { background: none; border: 0; color: #fff; cursor: pointer; font-size: 17.5px; }
dialog > .body { padding: 11px; overflow: auto; }
dialog > footer { padding: 8px 11px; border-top: 1px solid var(--line); display: flex; gap: 6px; justify-content: flex-end; }
dialog.gen { width: min(920px, calc(100vw - 32px)); }
dialog.gen > .body { padding: 0; }
.belge-gorunum { max-height: 74vh; overflow: auto; user-select: none; -webkit-user-select: none; background: #4a4f55; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; }
.belge-gorunum canvas { box-shadow: 0 1px 5px #0007; max-width: 100%; height: auto; }
.belge-html { background: #fff; color: #111; padding: 18px; max-width: 100%; overflow: auto; }
.belge-not { font-size: 12px; color: var(--muted); padding: 7px 11px; border-top: 1px solid var(--line); }
@media print { .belge-gorunum, .belge-html { display: none !important; } }
.gb-yapistir { border: 1px dashed var(--line); border-radius: 3px; padding: 18px 10px; text-align: center; color: var(--muted); cursor: text; }
.gb-yapistir:focus { outline: 2px solid var(--top); }
.gb-img { max-width: 100%; border: 1px solid var(--line); margin-top: 8px; }
#toast { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: flex; flex-direction: column; gap: 6px; max-width: min(420px, calc(100vw - 28px)); }
#toast div { padding: 8px 12px; background: var(--top2); color: #fff; border-left: 4px solid #5cc58a; box-shadow: 0 2px 8px #0005; }
#toast div.err { border-left-color: #ff7b72; }

tr.toplam td { font-weight: bold; background: var(--head); border-top: 2px solid var(--line); }
.sekme { flex-wrap: wrap; }
/* Teşkilat ağacı */
table.agac-t td.ad { min-width: 260px; }
table.agac-t td.ad .tag { margin-left: 6px; font-size: 11px; color: var(--muted); }
table.agac-t .ac { display: inline-block; width: 20px; min-height: 0; padding: 0; margin-right: 4px; border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 13px; text-align: center; }
tr.agac.d0 td { font-weight: bold; background: var(--head); }
tr.agac.grup td.ad { font-style: italic; }
table.agac-t tfoot td { font-weight: bold; background: var(--head); border-top: 2px solid var(--line); }
td.neg { color: var(--err); }
.araclar input[type=search] { min-width: 240px; }
/* 3B Türkiye */
.uc3b-w { width: 100%; margin: 8px 0 4px; border: 1px solid var(--line2); background: var(--panel); }
canvas.uc3b { display: block; width: 100%; cursor: grab; touch-action: none; }
canvas.uc3b:active { cursor: grabbing; }
i.kare { display: inline-block; width: 10px; height: 10px; margin: 0 2px 0 4px; vertical-align: middle; }
.kirinti { margin-bottom: 8px; font-size: 14px; }
/* Türkiye haritası */
.harita-w { width: 100%; overflow: hidden; margin: 8px 0 4px; }
svg.harita { width: 100%; height: auto; display: block; }
svg.harita .il { stroke: var(--panel); stroke-width: .8; stroke-linejoin: round; transition: opacity .1s; }
svg.harita .il.bos { fill: var(--line2); }
svg.harita .il:hover { opacity: .75; stroke: var(--ink); stroke-width: 1.2; }
.harita-bilgi { min-height: 22px; }
.lejant { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 12px; font-size: 13px; color: var(--muted); }
.lejant span { display: inline-flex; align-items: center; gap: 5px; }
.lejant i { width: 16px; height: 12px; display: inline-block; border: 1px solid var(--line); }
.lejant i.bos { background: var(--line2); }

/* Giriş */
.giris { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--top2); }
.giris form { width: min(600px, 100%); background: var(--panel); border-top: 4px solid #ffc94d; padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.giris h1 { font-size: 18.5px; margin: 0; color: var(--ink); }
.giris label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.giris input { min-height: 32px; }
.giris .btn { min-height: 34px; }
.demo { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line2); padding-top: 8px; }
.demo div { margin-top: 6px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; }
.demo button { --c: #1b6db3; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; background: color-mix(in srgb, var(--c) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--panel)); border-left: 4px solid var(--c); border-radius: 2px; color: var(--ink); cursor: pointer; text-align: left; font-size: 14px; font-weight: bold; }
.demo button small { font-weight: normal; font-size: 12px; color: var(--muted); }
.demo button:hover, .demo button:focus-visible { background: var(--c); border-color: var(--c); color: #fff; }
.demo button:nth-child(1) { --c: #b3261e; }
.demo button:nth-child(2) { --c: #1b6db3; }
.demo button:nth-child(3) { --c: #c25e00; }
.demo button:nth-child(4) { --c: #1e7e46; }
.demo button:nth-child(5) { --c: #7b3fa8; }
.demo button:nth-child(6) { --c: #0f7c86; }
.demo button:hover small, .demo button:focus-visible small { color: inherit; opacity: .85; }

@media (max-width: 800px) {
  .menu-btn { display: inline-block; }
  .side { position: fixed; top: 42px; bottom: 0; left: 0; z-index: 20; transform: translateX(-100%); transition: transform .15s; }
  .side.ac { transform: none; }
  .main { padding: 8px; }
  .top .kim { display: none; }
  .top .opt { display: none; }
  .cetvel-w { max-height: none; }
  .cetvel .s3, .cetvel thead .s3 { display: none; }
  .cetvel .s2 { min-width: 96px; max-width: 96px; }
}
@media print {
  .top, .side, .filtre, .palet, .sekme, .araclar { display: none !important; }
  .shell { height: auto; }
  .cetvel-w { max-height: none; overflow: visible; }
}