/* =====================================================================
   main.css - Roller mill HMI stylesheet

   Visual conventions follow control room practice rather than web fashion:
     - dark background, so the operator's eye is drawn to the lit elements;
     - colour reserved for meaning (blue = level, amber = roller, green =
       feeder, red/pink = load and alarms) and never used decoratively;
     - large, high contrast numerals for the values that matter at a glance;
     - alarm colours strictly by severity, identical everywhere they appear.
   ===================================================================== */

:root {
  --bg:            #0b1119;
  --bg-panel:      #131c27;
  --bg-panel-2:    #18232f;
  --bg-input:      #0d151e;
  --line:          #26374a;
  --text:          #dbe6f2;
  --text-dim:      #8fa6bd;
  --text-faint:    #64798f;

  --accent:        #4ea8ff;   /* hopper level      */
  --roller:        #ffb648;   /* roller speed      */
  --feeder:        #4be3a4;   /* feeder speed      */
  --load:          #ff6b8a;   /* motor load        */
  --prod:          #c792ea;   /* production        */

  --critical:      #ff4d4d;
  --high:          #ff8c42;
  --warning:       #ffd166;
  --info:          #4ea8ff;
  --ok:            #3ddc97;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 13px;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ---------------------------------------------------------------- header */

.topbar {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 8px 14px;
  background: linear-gradient(180deg, #16212e, #101823);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 10px; }
/* Kurumsal RMT logosu.
   - Yükseklik sabitlenir, genişlik `auto` bırakılır: en-boy oranı (524:310)
     tarayıcı tarafından korunur, logo asla esnetilmez veya kırpılmaz.
   - `object-fit: contain` ikinci bir güvencedir; kapsayıcı bir şekilde
     daraltılsa bile görüntü bozulmaz, yalnızca küçülür.
   - Beyaz plaka gereklidir: logonun kurumsal rengi lacivert (#0E4194) ve
     uygulama başlığı koyudur (#16212e); plaka olmadan kontrast yetersiz kalır.
     Plaka logonun kendi saydamlığını bozmaz, yalnızca arkasına konur. */
.brand .logo {
  height: 30px;
  width: auto;
  max-width: 132px;
  display: block;
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
  padding: 4px 8px;
  box-sizing: content-box;
  flex: 0 0 auto;
}

/* Uygulamaya ileride açık tema eklenirse plaka kendiliğinden kalkar; logo
   doğrudan açık zemin üzerinde, saydam hâliyle görünür. */
:root[data-theme="light"] .brand .logo {
  background: transparent;
  padding: 4px 0;
}
.brand .title { font-weight: 700; letter-spacing: 0.6px; font-size: 13px; }
.brand .subtitle { color: var(--text-faint); font-size: 11px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 3px 9px; border-radius: 11px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.4px; white-space: nowrap;
  border: 1px solid transparent;
}
.chip.ok   { background: rgba(61,220,151,0.14); color: var(--ok);       border-color: rgba(61,220,151,0.35); }
.chip.warn { background: rgba(255,209,102,0.14); color: var(--warning); border-color: rgba(255,209,102,0.35); }
.chip.bad  { background: rgba(255,77,77,0.16);  color: var(--critical); border-color: rgba(255,77,77,0.45); }
.chip.idle { background: rgba(143,166,189,0.12); color: var(--text-dim); border-color: rgba(143,166,189,0.25); }

@keyframes flash { 50% { filter: brightness(1.55); } }

/* ================================================================ */
/* BİLDİRİM MERKEZİ                                                 */
/* ================================================================ */
/* Gösterge sabit 32x32'dir ve ASLA büyümez; panel düzen akışının dışında
   konumlanır. Bu ikisi birlikte "başlık çubuğu hiç kaymasın" gereksinimini
   yapısal olarak garanti eder - içeriğe bağlı değildir. */

.notif-center { position: relative; justify-self: end; line-height: 0; }

.notif-btn {
  position: relative;
  width: 32px; height: 32px;
  flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel-2);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.notif-btn:hover { background: #22303f; }
.notif-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notif-ico { width: 18px; height: 18px; display: block; }
.ni-shape { transition: fill 0.2s ease; }
.ni-glyph { fill: #0d1620; }

/* Önem renkleri: şekil DE değiştiği için renk körlüğünde ayırt edilebilir. */
.notif-btn.sev-none     .ni-shape { fill: #6e8398; }
.notif-btn.sev-none     .ni-glyph { fill: none; }
.notif-btn.sev-info     .ni-shape { fill: var(--info); }
.notif-btn.sev-optim    .ni-shape { fill: #7cc6ff; }
.notif-btn.sev-warning  .ni-shape { fill: var(--warning); }
.notif-btn.sev-high     .ni-shape { fill: var(--high); }
.notif-btn.sev-critical .ni-shape { fill: var(--critical); }

.notif-btn.sev-critical { border-color: rgba(255,77,77,0.55); background: rgba(255,77,77,0.12); }
.notif-btn.sev-high     { border-color: rgba(255,140,66,0.5); background: rgba(255,140,66,0.10); }
.notif-btn.sev-warning  { border-color: rgba(255,209,102,0.45); background: rgba(255,209,102,0.08); }

/* Onaylanmamış yüksek öncelikli alarmda YUMUŞAK nabız. Yanıp sönme değil:
   kumanda odasında sert flaş göz yorar ve dikkat körlüğü yaratır. */
.notif-btn.dikkat { animation: notifPulse 2s ease-in-out infinite; }
@keyframes notifPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,77,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,77,77,0.18); }
}

.notif-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--critical); color: #2a0000;
  font-size: 9px; font-weight: 800; line-height: 15px; text-align: center;
  border: 1.5px solid #131c27;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.notif-badge.var { opacity: 1; transform: scale(1); }

/* ---------------------------------------------------------- panel */

.notif-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 330px; max-width: 92vw;
  background: #101a25;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  z-index: 60;
  line-height: 1.45;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.13s ease, transform 0.13s ease, visibility 0.13s;
  overflow: hidden;
}
.notif-pop.acik { opacity: 1; visibility: visible; transform: none; }
.notif-pop.genis { width: 390px; }

.np-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 11px; border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--line);
}
.np-head.sev-none     { border-left-color: #6e8398; background: rgba(110,131,152,0.10); }
.np-head.sev-info     { border-left-color: var(--info); background: rgba(78,168,255,0.10); }
.np-head.sev-optim    { border-left-color: #7cc6ff; background: rgba(124,198,255,0.10); }
.np-head.sev-warning  { border-left-color: var(--warning); background: rgba(255,209,102,0.10); }
.np-head.sev-high     { border-left-color: var(--high); background: rgba(255,140,66,0.12); }
.np-head.sev-critical { border-left-color: var(--critical); background: rgba(255,77,77,0.14); }
.np-sev { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--text); }
.np-time { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.np-body { padding: 9px 11px 10px; }
.np-msg { margin: 0 0 8px; font-size: 12px; color: var(--text); }
.np-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10.5px; padding: 3px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.np-row span { color: var(--text-faint); }
.np-row b { color: var(--text); font-weight: 600; text-align: right; }
.np-tip {
  margin: 6px 0 8px; padding: 6px 8px; border-radius: 4px;
  background: rgba(78,168,255,0.09); border-left: 2px solid var(--accent);
  font-size: 10.5px; color: #cfe6ff;
}
.np-tip-l {
  display: block; font-size: 9px; letter-spacing: 0.7px;
  color: var(--accent); font-weight: 700; margin-bottom: 2px;
}
.np-foot {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 11px; border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  font-size: 10px; color: var(--text-faint);
}
.np-hint { opacity: 0.75; }

/* ------------------------------------------------- genişletilmiş liste */

.np-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 11px; border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--text-dim);
}
.np-ack {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 4px; padding: 4px 8px; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.4px; cursor: pointer;
}
.np-ack:hover { background: #22303f; border-color: #3b5570; }

.np-scroll { max-height: 440px; overflow-y: auto; }
.np-sec {
  padding: 7px 11px 4px; font-size: 9px; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--text-faint);
  background: rgba(255,255,255,0.02);
}
.np-item { padding: 8px 11px; border-bottom: 1px solid rgba(255,255,255,0.05); border-left: 3px solid var(--line); }
.np-item.sev-info     { border-left-color: var(--info); }
.np-item.sev-optim    { border-left-color: #7cc6ff; }
.np-item.sev-warning  { border-left-color: var(--warning); }
.np-item.sev-high     { border-left-color: var(--high); }
.np-item.sev-critical { border-left-color: var(--critical); background: rgba(255,77,77,0.06); }
.np-item-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.np-chip { font-size: 8.5px; font-weight: 800; letter-spacing: 0.8px; color: var(--text-dim); }
.np-item.sev-critical .np-chip { color: var(--critical); }
.np-item.sev-high     .np-chip { color: var(--high); }
.np-item.sev-warning  .np-chip { color: var(--warning); }
.np-item.sev-optim    .np-chip { color: #7cc6ff; }
.np-item-msg { font-size: 11.5px; color: var(--text); }
.np-item-sub { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.np-item-tip { font-size: 10px; color: #cfe6ff; margin-top: 3px; opacity: 0.9; }
.np-hist { padding-bottom: 4px; }
.np-hrow {
  display: flex; gap: 8px; padding: 3px 11px;
  font-size: 10px; color: var(--text-faint);
}
.np-hrow span { font-variant-numeric: tabular-nums; opacity: 0.8; flex: 0 0 52px; }
.np-empty { padding: 12px; text-align: center; font-size: 11px; color: var(--text-faint); }
.np-empty.sm { padding: 6px; font-size: 10px; }

.commands { display: flex; gap: 6px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  background: var(--bg-panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: #22303f; border-color: #3b5570; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.wide { width: 100%; margin-top: 6px; }
.btn.go    { background: rgba(61,220,151,0.16); border-color: rgba(61,220,151,0.5); color: var(--ok); }
.btn.stop  { background: rgba(255,209,102,0.14); border-color: rgba(255,209,102,0.45); color: var(--warning); }
.btn.estop { background: rgba(255,77,77,0.18); border-color: rgba(255,77,77,0.6); color: #ffb3b3; }
.btn.estop.engaged { background: var(--critical); color: #240404; animation: flash 0.8s steps(1) infinite; }

.btn-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.btn-row .btn { flex: 1 1 45%; }

/* ---------------------------------------------------------------- layout */

.layout {
  display: grid;
  grid-template-columns: 320px minmax(420px, 1fr) 330px;
  gap: 10px;
  padding: 10px;
  align-items: start;
  flex: 1;
}
.col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 11px 12px;
  min-width: 0;
}
.panel h2 {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h2-right { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.panel.disabled { opacity: 0.4; pointer-events: none; }

/* ---------------------------------------------------------------- mimic */

.mimic-panel canvas { width: 100%; height: 330px; display: block; }

/* ---------------------------------------------------------------- KPIs */

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 8px 8px;
  min-width: 0;
}
.kpi.wide { grid-column: 1 / -1; }
.kpi-head {
  display: flex; justify-content: space-between;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-faint);
}
.kpi-head .u { color: var(--text-faint); }
.kpi .value {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi.wide .value { font-size: 40px; }
.kpi .value.bad { color: var(--critical); }
.kpi .sub {
  font-size: 10px; color: var(--text-faint); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track {
  height: 5px; background: rgba(255,255,255,0.07);
  border-radius: 3px; overflow: hidden; margin-top: 5px;
}
.fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.35s ease; }

/* ---------------------------------------------------------------- trend */

.trend-panel canvas { width: 100%; height: 300px; display: block; }
/* ---------------------------------------------- eğri süzgeç düğmeleri */
/* Etkin/kapalı ayrımı ÜÇ kanaldan birden verilir: renk, opaklık ve dolu/boş
   kutucuk. Yalnızca opaklığa dayanmak, kumanda odası aydınlatmasında ve renk
   körlüğünde güvenilir değildir. */

.legend { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.pen {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pen-c, var(--line));
  border-radius: 4px; padding: 3px 8px 3px 6px; font-size: 10px;
  color: var(--text); cursor: pointer;
  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  user-select: none;
}
.pen:hover { background: #22303f; }
.pen:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Kutucuk: açıkken kalem rengiyle dolu, kapalıyken içi boş. */
.pen .swatch {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
  background: var(--pc); border: 1.5px solid var(--pc);
  transition: background 0.12s ease;
}
.pen .pen-label { letter-spacing: 0.2px; }
.pen .pen-value {
  font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 30px; text-align: right;
}

.pen.off {
  opacity: 0.45;
  background: transparent;
  border-left-color: var(--line);
}
.pen.off .swatch { background: transparent; }
.pen.off .pen-label { text-decoration: line-through; text-decoration-thickness: 1px; }
.pen.off .pen-value { color: var(--text-faint); }
.pen.off:hover { opacity: 0.75; background: var(--bg-panel-2); }

/* Etkin kalemde sol kenarlık kalemin rengini alır. */
.pen:not(.off) { border-left-color: var(--pc, var(--accent)); }

.pen-count {
  font-size: 9.5px; color: var(--text-faint); font-variant-numeric: tabular-nums;
  padding: 2px 6px; border: 1px solid var(--line); border-radius: 9px;
}
.h2-right .mini {
  background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 3px; padding: 3px 7px; font-size: 9px; font-weight: 700;
  letter-spacing: 0.4px; cursor: pointer;
}
.h2-right .mini:hover { background: #22303f; color: var(--text); border-color: #3b5570; }

/* ------------------------------------------------------- faceplate */

/* Kontrolörün ne yaptığını anlatan satır: panelin ASIL bilgisidir, bu yüzden
   tipografiyle öne çıkarılır (boyut ve kontrast), renkle değil. Normal
   çalışmada nötr okunur; yalnızca kısıt veya koruma durumunda renk alır. */
.reason {
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-faint);
  border-radius: 4px; padding: 7px 10px; font-size: 12.5px;
  color: var(--text); margin-bottom: 9px;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.reason.kisit {
  border-left-color: var(--warning);
  background: rgba(255,209,102,0.07);
  color: #ffeec2;
}
.reason.koruma {
  border-left-color: var(--critical);
  background: rgba(255,77,77,0.09);
  color: #ffdcdc;
}

/* ------------------------------------------------ bölünmüş aralık göstergesi */
/* ISA-101 (Yüksek Başarımlı HMI) yaklaşımı: TABAN NÖTRDÜR.
   Önceki tasarımda dört bölmenin her biri kalıcı olarak farklı bir renkteydi ve
   çubuk dört duraklı bir renk geçişiydi. Bu, ekranın en çok bakılan bölgesinde
   sürekli yanan beş ayrı renk kaynağı demekti. Sonuç iki yönlüdür: göz önce
   dekorasyona gider, ve gerçek bir alarm belirdiğinde zaten renkli olan bir
   yüzeyle yarışmak zorunda kalır (renk duyarsızlaşması).
   Yeni kural: renk YALNIZCA anormal durumu bildirir. Normal çalışmada panel
   gri tonlarındadır; bilgi, konum ve parlaklık farkıyla verilir. */

.split { margin-bottom: 10px; }
.split-scale { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px; font-size: 9px; text-align: center; }
.split-scale .seg {
  padding: 4px 2px; border-radius: 3px 3px 0 0;
  color: var(--text-faint); line-height: 1.25;
  background: rgba(255,255,255,0.022);
  border-top: 2px solid transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.split-scale .seg small { color: var(--text-faint); opacity: 0.7; }

/* Etkin bölme: renk değil, PARLAKLIK ve yükseklik farkıyla ayrılır. */
.split-scale .seg.aktif {
  background: rgba(255,255,255,0.085);
  color: var(--text);
  border-top-color: var(--text-dim);
}
.split-scale .seg.aktif small { color: var(--text-dim); opacity: 1; }

.split-bar {
  position: relative; height: 10px; border-radius: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
}
.split-tick {
  position: absolute; top: 1px; bottom: 1px; width: 1px;
  background: rgba(255,255,255,0.14);
}
.split-tick.t25 { left: 25%; }
.split-tick.t75 { left: 75%; }
/* Denge noktası (bias) daha belirgin: operatörün okuduğu asıl bilgi,
   göstergenin bu çizgiden NE KADAR saptığıdır. */
.split-tick.t50 { left: 50%; width: 1px; background: rgba(255,255,255,0.34); }

.split-marker {
  position: absolute; top: -4px; left: 50%; width: 3px; height: 18px;
  background: var(--text); border-radius: 2px; transform: translateX(-50%);
  transition: left 0.35s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.split-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px;
}
.split-end { font-size: 8.5px; color: var(--text-faint); opacity: 0.65; letter-spacing: 0.3px; }

/* ---- Durum renklendirmesi: yalnızca anormalde devreye girer ---- */

/* Kısıt etkin: üretim sınırlanıyor ama arıza yok -> ölçülü kehribar. */
.split.kisit .split-scale .seg.aktif {
  background: rgba(255,209,102,0.14);
  border-top-color: var(--warning);
  color: #ffeec2;
}
.split.kisit .split-marker { background: var(--warning); }
.split.kisit .split-bar { border-color: rgba(255,209,102,0.32); }

/* Koruma durumu: makine kendini koruyor -> kırmızı, ve YALNIZCA burada. */
.split.koruma .split-scale .seg.aktif {
  background: rgba(255,77,77,0.16);
  border-top-color: var(--critical);
  color: #ffd9d9;
}
.split.koruma .split-marker {
  background: var(--critical);
  box-shadow: 0 0 6px rgba(255,77,77,0.55);
}
.split.koruma .split-bar { border-color: rgba(255,77,77,0.4); }
.split-value {
  font-size: 10px; color: var(--text-faint); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 5px 10px; }
.readouts.truth { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.ro {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  min-width: 0;
}
.ro.wide { grid-column: 1 / -1; }
.ro span { color: var(--text-faint); white-space: nowrap; }
.ro b {
  font-weight: 600; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ro b.val.ok   { color: var(--ok); }
.ro b.val.warn { color: var(--warning); }
.ro b.val.bad  { color: var(--critical); }

/* ---------------------------------------------------------------- tables */

.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tab {
  background: transparent; border: 1px solid var(--line); border-bottom: none;
  color: var(--text-dim); border-radius: 4px 4px 0 0; padding: 5px 12px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.tab.active { background: var(--bg-panel-2); color: var(--text); }
.tabpanel { max-height: 300px; overflow: auto; }
.hidden { display: none; }

.grid-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.grid-table th {
  position: sticky; top: 0; background: var(--bg-panel-2); z-index: 1;
  text-align: left; padding: 5px 7px; color: var(--text-faint);
  font-weight: 600; text-transform: uppercase; font-size: 10px;
  letter-spacing: 0.5px; border-bottom: 1px solid var(--line);
}
.grid-table td {
  padding: 4px 7px; border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
}
.grid-table td.desc { color: var(--text); }
.grid-table td.detail { color: var(--text-faint); }
.grid-table td.empty { text-align: center; color: var(--text-faint); padding: 14px; }
.grid-table tr.sev0 td.sev-cell { color: var(--critical); font-weight: 700; }
.grid-table tr.sev1 td.sev-cell { color: var(--high); font-weight: 700; }
.grid-table tr.sev2 td.sev-cell { color: var(--warning); font-weight: 700; }
.grid-table tr.sev3 td.sev-cell { color: var(--info); font-weight: 700; }
.grid-table tr.sev0 { background: rgba(255,77,77,0.07); }
.grid-table tr.unack { animation: flash 1.3s steps(1) infinite; }
.grid-table tr.cleared { opacity: 0.55; font-style: italic; }
.grid-table tr.cat-operator td { color: #cfe6ff; }
.grid-table tr.cat-alarm td.desc { color: #ffd9d9; }
.grid-table tr.cat-tuning td.desc { color: #e4d3ff; }

/* ---------------------------------------------------------------- forms */

.form { display: flex; flex-direction: column; gap: 2px; }
.field {
  display: grid; grid-template-columns: 1fr 118px; gap: 4px 8px;
  align-items: center; padding: 2px 0;
}
.field label { font-size: 11px; color: var(--text-dim); cursor: help; }
.field-input { display: flex; align-items: center; gap: 4px; }
.field input[type="number"], .field input[type="text"], .field select {
  width: 100%; background: var(--bg-input); color: var(--text);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 4px 6px; font-size: 11px; font-variant-numeric: tabular-nums;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field .unit { font-size: 10px; color: var(--text-faint); min-width: 26px; }
.field-error { grid-column: 1 / -1; font-size: 10px; color: var(--critical); }
.field.invalid input { border-color: var(--critical); background: rgba(255,77,77,0.10); }

.check {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim); margin-top: 7px; cursor: pointer;
}

.slider { display: grid; grid-template-columns: 1fr 130px 62px; gap: 8px; align-items: center; margin-bottom: 7px; }
.slider label { font-size: 11px; color: var(--text-dim); }
.slider input[type="range"] { width: 100%; accent-color: var(--accent); }
.slider span { font-size: 11px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.hint { font-size: 10px; color: var(--text-faint); margin: 4px 0 0; line-height: 1.4; }

/* ---------------------------------------------------------------- footer */

.statusbar {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 14px; font-size: 10px; color: var(--text-faint);
  border-top: 1px solid var(--line); background: #0e1620;
}

/* ================================================================ */
/* SEVİYE 1 / SEVİYE 2 görünüm anahtarlama                          */
/* ================================================================ */
/* Her iki görünüm de DOM'da kalır; geçiş yalnızca display anahtarıdır.
   Böylece geçiş anında hiçbir şey yeniden kurulmaz ve gecikme olmaz. */
.view { display: none; flex-direction: column; flex: 1; }
body.view-overview #view-overview { display: flex; animation: viewIn 0.14s ease-out; }
body.view-detail   #view-detail   { display: flex; animation: viewIn 0.14s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.btn.back { margin-right: 4px; }
.mill-nav { display: flex; gap: 5px; margin-left: 14px; }

/* ---------------------------------------------------------- overview top */

.ov-top { grid-template-columns: auto 1fr auto auto; }
/* DİKKAT: bu grup `1fr` sütunundadır. `flex-wrap: wrap` olsaydı dar ekranda
   sütun daralır ve altı rozet DİKEY olarak yığılırdı - ölçülen sonuç 1280 px
   genişlikte 273 px'lik bir başlık çubuğuydu. Rozetler tek satırda kalmalıdır;
   yer yetmediğinde çözüm yığmak değil, aşağıdaki kırılma noktasında grubun
   tamamını ikinci satıra almaktır. */
.ov-stats { display: flex; gap: 6px; flex-wrap: nowrap; }
.ovs {
  display: flex; flex-direction: column; align-items: center;
  min-width: 52px; padding: 3px 8px; border-radius: 5px;
  background: var(--bg-panel-2); border: 1px solid var(--line);
}
.ovs b { font-size: 16px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ovs i { font-style: normal; font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.ovs.yesil b   { color: var(--ok); }
.ovs.sari b    { color: var(--warning); }
.ovs.kirmizi b { color: var(--critical); }
.ovs.gri b     { color: var(--text-dim); }

.ov-kpi { display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.ov-kpi b { color: var(--text); font-variant-numeric: tabular-nums; }
.ov-filter { font-size: 11px; color: var(--text-faint); align-self: center; }
.ov-top select {
  background: var(--bg-input); color: var(--text); border: 1px solid var(--line);
  border-radius: 3px; padding: 5px 6px; font-size: 11px;
}

/* ================================================================ */
/* TESİS VERİ KAYNAĞI (SİMÜLASYON / GERÇEK G/Ç)                     */
/* ================================================================ */
/* ISA-101: canlı çalışma NORMAL durumdur ve nötr kalır. İşaretlenmesi
   gereken, gerçek bir tesiste tehlikeli olan durumdur: simülasyonda
   olduğunu unutmak. Bu yüzden bant yalnızca simülasyonda görünür. */

/* Sistem / mühendislik menüsü: başlıkta yalnızca 28 px yer kaplar ve komut
   düğmeleriyle aynı görsel ağırlıkta DEĞİLDİR - bilinçli olarak daha sessizdir. */
.sysmenu { position: relative; display: flex; align-items: center; }
.sys-btn {
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 5px;
  color: var(--text-faint); cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.sys-btn svg { width: 15px; height: 15px; display: block; }
.sys-btn:hover { background: var(--bg-panel-2); color: var(--text); border-color: #3b5570; }
.sys-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sys-btn[aria-expanded="true"] { background: var(--bg-panel-2); color: var(--text); }

.sys-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 268px; z-index: 60;
  background: #101a25; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.13s ease, transform 0.13s ease, visibility 0.13s;
}
.sys-pop.acik { opacity: 1; visibility: visible; transform: none; }
.sys-head {
  padding: 8px 11px; border-bottom: 1px solid var(--line);
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: var(--text-dim);
}
.sys-sec { padding: 10px 11px 11px; }
.sys-lbl { font-size: 10px; color: var(--text-dim); margin-bottom: 6px; }
.sys-note {
  margin: 7px 0 0; font-size: 9.5px; line-height: 1.45; color: var(--text-faint);
}
.modesw.bekliyor .ms-opt, .sys-pop.bekliyor .ms-opt { opacity: 0.5; pointer-events: none; }

.modesw-seg {
  display: flex; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; background: var(--bg-input);
}
.ms-opt {
  background: transparent; border: none; color: var(--text-faint);
  padding: 5px 9px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  cursor: pointer; font-family: inherit;
  transition: background 0.14s ease, color 0.14s ease;
}
.ms-opt + .ms-opt { border-left: 1px solid var(--line); }
.ms-opt:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,0.05); color: var(--text); }
.ms-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Etkin seçenek: renkle değil, kontrast ve doluluk farkıyla belirtilir. */
.ms-opt[aria-pressed="true"] {
  background: rgba(255,255,255,0.10);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--text-dim);
}
.modesw.bekliyor .ms-opt { opacity: 0.5; pointer-events: none; }

/* Kalıcı simülasyon bandı: sakin ama kaçırılamaz. Yanıp sönmez - vardiya
   boyunca ekranda duracak bir göstergenin titremesi dikkat körlüğü yaratır. */
.sim-banner {
  display: none;
  align-items: center; gap: 8px;
  margin: 6px 10px 0; padding: 3px 10px;
  background: rgba(78,168,255,0.08);
  border: 1px solid rgba(78,168,255,0.26);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 9.5px; color: #cfe6ff;
}
body.sim-modu .sim-banner { display: flex; }
.sim-banner b { letter-spacing: 1px; font-size: 9px; }
.sb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: 0 0 6px;
}
.sb-txt { color: var(--text-faint); }

/* Onay şeridi: 36 değirmeni birden etkileyen işlem için bilinçli sürtünme. */
.ov-confirm {
  display: none;
  align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 8px 10px 0; padding: 8px 11px;
  background: rgba(255,209,102,0.10);
  border: 1px solid rgba(255,209,102,0.38);
  border-left: 3px solid var(--warning);
  border-radius: 5px; font-size: 11px; color: #fff0cb;
}
.ov-confirm.gorunur { display: flex; }
.ovc-btns { display: flex; gap: 6px; margin-left: auto; }

.ov-flash {
  margin: 8px 10px 0; padding: 0 10px; max-height: 0; overflow: hidden;
  background: rgba(78,168,255,0.12); border-left: 3px solid var(--accent);
  color: #d6ecff; font-size: 11px; border-radius: 4px;
  transition: max-height 0.2s ease, padding 0.2s ease;
}
.ov-flash.gorunur { max-height: 34px; padding: 7px 10px; }

/* ------------------------------------------------------------ mill cards */

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px;
  padding: 10px;
  align-content: start;
}

.mill-card {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 9px 8px;
  border-radius: 7px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  background: var(--bg-panel);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease;
}
.mill-card:hover { transform: translateY(-2px); background: var(--bg-panel-2); }
.mill-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mill-card.gizli { display: none; }
.mill-card.secili { box-shadow: 0 0 0 2px var(--accent) inset; }

.mill-card.yesil   { border-left-color: var(--ok); }
.mill-card.sari    { border-left-color: var(--warning); background: rgba(255,209,102,0.07); }
.mill-card.kirmizi { border-left-color: var(--critical); background: rgba(255,77,77,0.10); }
.mill-card.gri     { border-left-color: #46586c; opacity: 0.62; }

.mc-head { display: flex; justify-content: space-between; align-items: baseline; }
.mc-no { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; }
.mc-mode { font-size: 9px; color: var(--text-faint); letter-spacing: 0.4px; }

.mc-level { display: flex; align-items: baseline; gap: 2px; }
.mc-lv { font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mc-lvu { font-size: 10px; color: var(--text-faint); }

.mc-track {
  position: relative; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.08); overflow: visible;
}
.mc-fill { height: 100%; width: 0%; border-radius: 2px; background: var(--accent); transition: width 0.4s ease; }
.mill-card.sari    .mc-fill { background: var(--warning); }
.mill-card.kirmizi .mc-fill { background: var(--critical); }
.mill-card.gri     .mc-fill { background: #6b7d90; }
.mc-sp {
  position: absolute; top: -2px; width: 2px; height: 8px;
  background: #ffffff; opacity: 0.75; transform: translateX(-50%);
}

.mc-foot { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-dim); }
.mc-foot span { font-variant-numeric: tabular-nums; }

.mc-alarm:empty { display: none; }
.mc-alarm {
  position: absolute; top: 5px; right: 6px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--critical); color: #2a0000;
  font-size: 9px; font-weight: 800; line-height: 15px; text-align: center;
}
.mill-card.sari .mc-alarm { background: var(--warning); color: #3a2b00; }

.ov-legend {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 8px 14px; border-top: 1px solid var(--line);
  font-size: 10px; color: var(--text-faint); background: #0e1620;
}
.ov-legend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.ov-legend .sw.yesil { background: var(--ok); }
.ov-legend .sw.sari { background: var(--warning); }
.ov-legend .sw.kirmizi { background: var(--critical); }
.ov-legend .sw.gri { background: #46586c; }
.ov-hint { margin-left: auto; }

/* Orta genişlikler (tipik 1280x720 kumanda odası ekranı dâhil): başlık ızgara
   yerine esnek düzene geçer. Böylece yer daraldığında TEK bir grup içeride
   yığılmak yerine grubun tamamı ikinci satıra iner; başlık iki kısa satır
   olur, 273 px'lik bir blok değil. Hiçbir işletme bilgisi gizlenmez. */
@media (max-width: 1460px) {
  .ov-top {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px 14px;
  }
  .ov-top .brand { flex: 0 1 auto; }
  .ov-top .ov-stats, .ov-top .ov-kpi { flex: 0 0 auto; }
  .ov-top .commands { margin-left: auto; }
}

@media (max-width: 900px) {
  .overview-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .ov-kpi, .ov-stats { display: none; }
}

/* ================================================================ */
/* SEVİYE 3 - VARDİYA RAPORLARI                                     */
/* ================================================================ */

body.view-reports #view-reports { display: flex; animation: viewIn 0.14s ease-out; }
.btn.nav { background: rgba(78,168,255,0.14); border-color: rgba(78,168,255,0.45); color: #cfe6ff; }
.btn.danger { background: rgba(255,77,77,0.14); border-color: rgba(255,77,77,0.45); color: #ffc4c4; }

.rep-top { grid-template-columns: auto 1fr auto; }
.rep-shift { display: flex; align-items: center; gap: 12px; }
.rep-state {
  padding: 4px 10px; border-radius: 11px; font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
}
.rep-state.etkin  { background: rgba(61,220,151,0.15); color: var(--ok); border: 1px solid rgba(61,220,151,0.4); }
.rep-state.kapali { background: rgba(143,166,189,0.12); color: var(--text-dim); border: 1px solid var(--line); }
.rep-op { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-faint); }
.rep-op input, .rep-filters input, .rep-filters select, .rep-note-l input {
  background: var(--bg-input); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 7px; font-size: 11px;
}

.rep-layout { display: grid; grid-template-columns: 268px 1fr; gap: 10px; padding: 10px; flex: 1; min-height: 0; }
.rep-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.rep-filters {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 7px; padding: 9px;
}
.rep-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rep-arch { font-size: 9.5px; color: var(--text-faint); text-align: right; }

.rep-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.rep-row {
  text-align: left; font: inherit; cursor: pointer;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 6px; padding: 7px 9px; color: var(--text);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rep-row:hover { background: var(--bg-panel-2); border-left-color: var(--accent); }
.rep-row.etkin { border-left-color: var(--ok); background: rgba(61,220,151,0.07); }
.rr-top { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; }
.rr-live { font-size: 8.5px; color: var(--ok); letter-spacing: 0.5px; }
.rr-mid { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rr-sub { font-size: 9px; color: var(--text-faint); margin-top: 2px; }
.rep-empty { padding: 16px; text-align: center; font-size: 11px; color: var(--text-faint); }

.rep-main { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.rep-toolbar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px;
}
.rep-note-l { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-faint); flex: 1; min-width: 200px; }
.rep-note-l input { flex: 1; }
.rep-doc { flex: 1; overflow-y: auto; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 7px; }
.rep-placeholder { padding: 40px 20px; text-align: center; color: var(--text-faint); font-size: 12px; }
.rep-placeholder .sm { font-size: 11px; opacity: 0.8; margin-top: 8px; }

/* ------------------------------------------------------- rapor belgesi */

.doc { padding: 18px 20px 26px; max-width: 1180px; margin: 0 auto; color: var(--text); }
.doc-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding-bottom: 12px; border-bottom: 2px solid var(--accent); margin-bottom: 14px;
}
.doc-logo { height: 40px; width: auto; background: #fff; border-radius: 5px; padding: 5px 9px; }
.doc-title h1 { margin: 0; font-size: 17px; letter-spacing: 1.4px; }
.doc-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.doc-id { text-align: right; }
.di-no { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.di-st { font-size: 8.5px; font-weight: 800; letter-spacing: 1px; padding: 2px 7px; border-radius: 9px; display: inline-block; margin-top: 3px; }
.di-st.kapali { background: rgba(61,220,151,0.16); color: var(--ok); }
.di-st.ara { background: rgba(255,209,102,0.16); color: var(--warning); }

.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; margin-bottom: 16px; }
.dm { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 6px 9px; }
.dm span { display: block; font-size: 8.5px; letter-spacing: 0.7px; color: var(--text-faint); text-transform: uppercase; }
.dm b { font-size: 11.5px; font-weight: 600; }

.doc-h2 {
  font-size: 10px; letter-spacing: 1.3px; color: var(--text-dim); text-transform: uppercase;
  margin: 20px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}

.doc-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.hcard { border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 6px; padding: 9px 10px; background: var(--bg-panel-2); }
.hcard.yesil   { border-top-color: var(--ok); }
.hcard.sari    { border-top-color: var(--warning); }
.hcard.kirmizi { border-top-color: var(--critical); }
.hcard.gri     { border-top-color: #46586c; }
.hc-l { font-size: 8.5px; letter-spacing: 0.8px; color: var(--text-faint); }
.hc-v { font-size: 25px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hc-v small { font-size: 10px; font-weight: 600; color: var(--text-faint); margin-left: 4px; }
.hcard.yesil .hc-v   { color: var(--ok); }
.hcard.sari .hc-v    { color: var(--warning); }
.hcard.kirmizi .hc-v { color: var(--critical); }
.hc-n { font-size: 9px; color: var(--text-faint); margin-top: 3px; line-height: 1.35; }

.doc-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 7px; }
.kbox { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px; }
.kb-l { font-size: 8.5px; letter-spacing: 0.5px; color: var(--text-faint); text-transform: uppercase; }
.kb-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-v small { font-size: 9.5px; color: var(--text-faint); margin-left: 3px; font-weight: 600; }

.doc-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rchart { margin: 0; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.rchart figcaption { font-size: 9.5px; color: var(--text-faint); margin-bottom: 5px; letter-spacing: 0.4px; }
.rchart canvas { width: 100%; height: 108px; display: block; }

.doc-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.doc-tbl.sm { font-size: 10px; }
.doc-tbl th {
  text-align: left; padding: 5px 7px; background: var(--bg-panel-2); color: var(--text-faint);
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--line);
}
.doc-tbl td { padding: 4px 7px; border-bottom: 1px solid rgba(255,255,255,0.05); font-variant-numeric: tabular-nums; }
.doc-tbl td.dim { color: var(--text-faint); }
.doc-tbl tr.sev0 td { background: rgba(255,77,77,0.08); }
.doc-tbl tr.sev1 td { background: rgba(255,140,66,0.06); }
.bar-lite { height: 6px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.bar-lite i { display: block; height: 100%; background: var(--accent); }
.doc-none { font-size: 10.5px; color: var(--text-faint); padding: 6px 0; }

.doc-note {
  background: var(--bg-input); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 5px; padding: 10px 12px; font-size: 11.5px; min-height: 38px;
}
.doc-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.doc-sign div span { font-size: 9px; color: var(--text-faint); letter-spacing: 0.6px; text-transform: uppercase; }
.doc-sign div i { display: block; border-bottom: 1px solid var(--text-faint); margin-top: 30px; }
.doc-foot { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 9px; color: var(--text-faint); text-align: center; }

@media (max-width: 1100px) {
  .rep-layout { grid-template-columns: 1fr; }
  .doc-charts { grid-template-columns: 1fr; }
}

/* ================================================================ */
/* YAZDIRMA / PDF                                                   */
/* ================================================================ */
/* Tarayıcının "PDF olarak kaydet" seçeneği kullanılır: harici bir PDF
   kütüphanesi gerekmez ve çıktı ekrandaki belgeyle birebir aynı olur.
   Yazdırmada koyu tema beyaza çevrilir; kumanda odası teması ekran içindir,
   kâğıda basıldığında toner israfı ve okunmaz çıktı demektir. */
@media print {
  @page { size: A4; margin: 12mm 10mm; }
  body { background: #fff !important; }
  .topbar, .rep-side, .rep-toolbar, .statusbar, .ov-flash, .notif-center { display: none !important; }
  #view-overview, #view-detail { display: none !important; }
  #view-reports { display: block !important; }
  .rep-layout { display: block !important; padding: 0 !important; }
  .rep-doc {
    overflow: visible !important; border: none !important; background: #fff !important;
    color: #111 !important; border-radius: 0 !important;
  }
  .doc { max-width: none; padding: 0; color: #111; }
  .doc-h2 { color: #333; border-bottom-color: #bbb; page-break-after: avoid; }
  .doc-head { border-bottom-color: #0E4194; }
  .doc-title h1 { color: #0E4194; }
  .doc-sub, .dm span, .kb-l, .hc-l, .hc-n, .doc-foot, .rchart figcaption { color: #666 !important; }
  .dm, .kbox, .hcard, .rchart, .doc-note { background: #fff !important; border-color: #ccc !important; }
  .doc-tbl th { background: #eee !important; color: #333 !important; }
  .doc-tbl td { border-bottom-color: #ddd !important; color: #111 !important; }
  .doc-tbl td.dim { color: #666 !important; }
  .kb-v, .di-no, .dm b { color: #111 !important; }
  .hcard.yesil .hc-v { color: #1a7f4b !important; }
  .hcard.sari .hc-v { color: #9a6b00 !important; }
  .hcard.kirmizi .hc-v { color: #b3261e !important; }
  .doc-sign div i { border-bottom-color: #333 !important; }
  .doc-charts, .doc-tbl, .doc-sign { page-break-inside: avoid; }
  .doc-logo { background: #fff !important; padding: 0 !important; }
}

/* ---------------------------------------------------------------- scroll */

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2b3d52; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3b5570; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1400px) {
  .layout { grid-template-columns: 300px minmax(360px, 1fr) 300px; }
}
@media (max-width: 1150px) {
  .layout { grid-template-columns: 1fr 1fr; }
  .col.right { grid-column: 1 / -1; }
  .col.right .panel { }
}
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .topbar { grid-template-columns: 1fr; }
  .commands { flex-wrap: wrap; }
}