/* ==== styles/app.css ==== */
/* PPDS — Pharma Production Planning System
   Aesthetic: precise, dense, regulated-industry. Cool slate neutrals,
   indigo brand, medical-data feel. Inspired by SAP-style enterprise
   planners and lab UIs.

   LEGACY FILE SIZE NOTE (meet-12-05-2026): this file is 1342 LOC and
   exceeds the project-wide 400-LOC budget. It is a legacy aggregate of
   ~80 distinct UI component selectors; splitting it per-component is
   queued for a future refactoring pass. All new meet-12-05-2026 rules
   (D10 / B3 / A6 / D11 / A11 / D8 / D4 / A7 / B6) were moved out to
   styles/app-meet.css (loaded after this file in app/index.html). Do
   not add new rules here — use styles/app-meet.css or a new
   per-component CSS file.

   Pre-existing line-width violations (~19 lines >120 chars) are out of
   scope for the meeting effort.
*/

:root {
  /* Surfaces */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --surface-3: #f0f2f7;
  --surface-4: #e7eaf2;

  /* Text */
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;

  /* Borders */
  --border: #e2e6ee;
  --border-2: #d6dce6;
  --border-strong: #c2c9d6;

  /* Brand: deep indigo (medical authority) */
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-400: #6e85e8;
  --brand-500: #3461db;
  --brand-600: #2a4fb8;
  --brand-700: #1f3f9c;
  --brand-900: #131f55;

  /* Status colors */
  --ok: #1f8a5b;
  --ok-bg: #e6f5ee;
  --ok-border: #b9e1cd;

  --warn: #b6630a;
  --warn-bg: #fdf2e2;
  --warn-border: #f0d9a9;

  --danger: #b3261e;
  --danger-bg: #fde8e6;
  --danger-border: #f0bdb8;

  --info: #0b6b8a;
  --info-bg: #e3f3f8;
  --info-border: #b3dde7;

  --purple: #6b3fa0;
  --purple-bg: #f1ebf8;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-2: 0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  --shadow-3: 0 10px 30px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
  --shadow-pop: 0 18px 50px rgba(15,23,42,0.18), 0 6px 16px rgba(15,23,42,0.10);

  /* Type */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
/* Search/filter fields use type="search" so Chrome's password manager never
   offers the saved login on them — render them identical to text inputs. */
input[type="search"] { -webkit-appearance: textfield; appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ===================== Layout ===================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "topbar topbar" "sidebar main";
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 180ms cubic-bezier(0.2, 0, 0, 1);
}

.app[data-sidebar="collapsed"] { --sidebar-w: 56px; }

.topbar {
  grid-area: topbar;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  z-index: 10;
}
.topbar .brand {
  display: flex; align-items: center; gap: 10px;
  width: auto;
  min-width: 220px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.18);
}
.brand-sub {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topbar-search {
  flex: 1;
  min-width: 120px;
  max-width: 360px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 0 12px 0 32px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.topbar-search input:focus { border-color: var(--brand-400); background: white; }
.topbar-search .icon { position: absolute; left: 9px; top: 8px; color: var(--text-3); }

.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2);
  cursor: pointer;
  position: relative;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn .badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--danger);
  color: white;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px;
  border-radius: 8px;
  border: 2px solid var(--surface);
}

.lang-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
}
.lang-switch button {
  padding: 6px 9px;
  background: var(--surface);
  color: var(--text-2);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
}
.lang-switch button:last-child { border-right: none; }
.lang-switch button.active { background: var(--brand-50); color: var(--brand-700); }
/* Locale file downloading (dist lazy locales): the clicked button swaps its
   label for a small spinner — instant feedback while the dictionary loads.
   pointer-events off only on the loading button (re-clicking it is a no-op);
   the sibling buttons stay live so the last click wins. */
.lang-switch button.loading { position: relative; color: transparent; pointer-events: none; }
.lang-switch button.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--brand-200);
  border-top-color: var(--brand-600);
  animation: lang-switch-spin .6s linear infinite;
}
@keyframes lang-switch-spin { to { transform: rotate(360deg); } }

.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.user-chip .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3a05c, #d97a36);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
}
.user-chip .name { font-weight: 600; font-size: 12px; line-height: 1.1; }
.user-chip .role { font-size: 10px; color: var(--text-3); line-height: 1.1; }

/* ===================== Sidebar ===================== */
.sidebar {
  grid-area: sidebar;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px 16px;
  transition: width 180ms cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  flex-direction: column;
}
.sidebar-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 600;
  transition: background 0.12s;
}
.sidebar-toggle:hover { background: var(--surface-3); }
.app[data-sidebar="collapsed"] .nav-label { display: none; }
.app[data-sidebar="collapsed"] .nav-text { display: none; }
.app[data-sidebar="collapsed"] .nav-item {
  justify-content: center;
  padding: 8px;
}
.app[data-sidebar="collapsed"] .nav-pill {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 8px;
  padding: 1px 4px;
  min-width: 14px;
}
.app[data-sidebar="collapsed"] .nav-item { position: relative; }
.app[data-sidebar="collapsed"] .nav-item.active {
  box-shadow: inset 3px 0 0 var(--brand-600);
}
.app[data-sidebar="collapsed"] .nav-section { margin-bottom: 8px; }
.app[data-sidebar="collapsed"] .env-label { display: none; }
.app[data-sidebar="collapsed"] .env-chip {
  padding: 4px;
  align-self: center;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app[data-sidebar="collapsed"] .audit-id { display: none; }
.nav-text { transition: opacity 120ms; }
.nav-section { margin-bottom: 16px; }
.nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 700;
  padding: 6px 10px;
}
.nav-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius);
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
.nav-item.active .nav-icon { color: var(--brand-600); }
.nav-icon { color: var(--text-3); flex-shrink: 0; }
.nav-pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-2);
}
.nav-item.active .nav-pill { background: var(--brand-100); color: var(--brand-700); }
/* D10 (meet-12-05-2026) .nav-item.is-disabled lives in styles/app-meet.css. */

.sidebar-footer {
  margin-top: auto;
  padding: 12px 8px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.env-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--ok-bg);
  color: var(--ok);
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  align-self: flex-start;
}
.env-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(31,138,91,0.20);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ===================== Main / Page ===================== */
.main { grid-area: main; overflow: auto; position: relative; }
.page { padding: 18px 22px 60px; max-width: 1500px; }
.page.full { max-width: none; padding: 14px 18px 60px; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 24px; }
.title-block .crumbs { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text-2); }
.crumbs .sep { margin: 0 6px; }
.title-block h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.012em; }
.title-block .subtitle { color: var(--text-2); margin-top: 4px; font-size: 13px; }

/* Compact scheduler header: single-line title + action buttons. Originally
   carried inline KPI pills (task_enes_19_05 items 2-4); the rich
   Kapasite / Doluluk / Seri sayı tile strip is now rendered as a separate
   row below the header (.kpi-row.scheduler-kpi-row), so the header keeps
   only title + crumbs + actions and stays tidy. */
.sched-compact-header {
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sched-compact-header .title-block { flex-shrink: 0; }
.sched-compact-header .title-block h1 {
  font-size: 17px;
  white-space: nowrap;
}
.sched-compact-header .title-block .crumbs { margin-bottom: 2px; }
/* .sched-kpi-pill[*] — retained for any future inline-mode caller; the
   container rule .sched-kpi-pills was removed when the inline pill mode
   was dropped from the scheduler header. */
.sched-kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
}
.sched-kpi-pill.brand { border-color: var(--brand-600); background: rgba(59, 130, 246, 0.06); }
.sched-kpi-pill .lbl { color: var(--text-3); }
.sched-kpi-pill .val { font-weight: 700; color: var(--text); font-size: 12px; }
.sched-kpi-pill .val .suf { font-size: 10px; color: var(--text-3); margin-left: 1px; font-weight: 600; }

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn.primary { background: var(--brand-600); color: white; border-color: var(--brand-700); }
.btn.primary:hover { background: var(--brand-700); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.danger { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }
.btn.sm { height: 26px; font-size: 11px; padding: 0 9px; }

/* ===================== Cards ===================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card-h {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-h h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.005em; }
.card-h .sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.card-b { padding: 14px 16px; }
.card-tight .card-b { padding: 0; }

/* ===================== Stats ===================== */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* Orders-page KPI row: 2 single tiles + 2 "dual" tiles (each holding two
   metrics in one rectangle — Malzeme/Kapasite riski and İç/Dış piyasa). A
   6-track grid lets singles take 1 track and duals span 2, so all four boxes
   sit on one row at the design viewport; below 900px it collapses to 2 tracks
   (singles pair up, each dual takes a full row). */
.orders-kpi-row { grid-template-columns: repeat(6, 1fr); }
.orders-kpi-row .kpi.kpi-dual { grid-column: span 2; display: flex; align-items: stretch; padding: 0; }
.orders-kpi-row .kpi.kpi-dual .kpi-dual-cell { flex: 1 1 0; min-width: 0; padding: 14px 16px; }
.orders-kpi-row .kpi.kpi-dual .kpi-dual-cell + .kpi-dual-cell { border-left: 1px solid var(--border); }
@media (max-width: 900px) {
  .orders-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .orders-kpi-row .kpi.kpi-dual { grid-column: span 2; }
}
/* Production Mgr top: featured Aktif batch tile on the left (with the live
   on-now-line ops list) + the remaining 4 KPIs in a responsive grid on the
   right. The left tile spans the full height so the list has room to grow;
   the right grid auto-fits so on narrow widths it wraps to 1 column. */
.pm-top-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) 2.4fr;
  gap: 12px;
  margin-bottom: 16px;
  align-items: stretch;
}
.pm-top-grid .pm-kpi-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.pm-active-batch { display: flex; flex-direction: column; min-height: 0; }
.pm-active-batch .delta { margin-bottom: 8px; }
.pm-active-batch-list {
  flex: 1;
  min-height: 0;
  margin-top: 4px;
  border-top: 1px solid var(--brand-200);
  padding-top: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
}
.pm-active-batch-empty {
  font-size: 11px;
  color: var(--text-3);
  padding: 6px 0;
}
.pm-active-batch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pm-active-batch-info { flex: 1; min-width: 0; }
.pm-active-batch-product {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-active-batch-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-2);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-active-batch-meta-sep { color: var(--text-3); }
.pm-active-batch-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
@media (max-width: 880px) {
  .pm-top-grid { grid-template-columns: 1fr; }
}
.pm-oee-today { display: flex; flex-direction: column; }
.pm-oee-breakdown {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-oee-row {
  display: grid;
  grid-template-columns: minmax(64px, auto) 1fr 40px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.pm-oee-area { color: var(--text-1); font-weight: 600; }
.pm-oee-bar {
  display: block;
  height: 9px;
  background: var(--surface-3);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.pm-oee-bar > span {
  display: block;
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) inset;
}
.pm-oee-val {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pm-kutu { display: flex; flex-direction: column; }
.pm-kutu-rows {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pm-kutu-row { display: flex; flex-direction: column; gap: 3px; }
.pm-kutu-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.pm-kutu-row-label { color: var(--text-2); font-weight: 600; }
.pm-kutu-row-vals { font-variant-numeric: tabular-nums; }
.pm-kutu-row-vals strong { color: var(--text-1); font-weight: 700; }
.pm-kutu-row-sep { color: var(--text-3); margin: 0 1px; }
.pm-kutu-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.pm-kutu-bar > span {
  display: block;
  height: 100%;
  background: var(--brand-500);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.pm-kutu-row.is-empty .pm-kutu-row-label,
.pm-kutu-row.is-empty .pm-kutu-empty {
  color: var(--text-3);
}
.pm-kutu-empty {
  font-style: italic;
  font-weight: 600;
}
.pm-kutu-row.is-empty .pm-kutu-bar {
  background: repeating-linear-gradient(
    45deg, var(--surface-3), var(--surface-3) 4px, var(--surface-2) 4px, var(--surface-2) 8px
  );
}
.pm-kutu-row.is-empty .pm-kutu-bar > span { display: none; }
.pm-campaign { display: flex; flex-direction: column; }
.pm-campaign-range {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
}
.pm-campaign-breakdown {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-campaign-row {
  display: grid;
  grid-template-columns: minmax(64px, auto) 1fr 78px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.pm-campaign-area { color: var(--text-2); font-weight: 600; }
.pm-campaign-bar {
  display: block;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.pm-campaign-bar > span {
  display: block;
  height: 100%;
  background: var(--brand-500);
  border-radius: 3px;
}
.pm-campaign-val {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pm-campaign-frac {
  color: var(--text-3);
  font-weight: 500;
  margin-left: 2px;
}
/* Daily-boxes chart on the Üretim Müdürü dashboard. */
.pm-daily-boxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pm-daily-boxes-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pm-daily-boxes-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
}
.pm-daily-boxes-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-2);
}
.pm-dbl-item { display: inline-flex; align-items: center; gap: 6px; }
.pm-dbl-item strong {
  color: var(--text-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.pm-dbl-swatch {
  display: inline-block;
  width: 16px;
  height: 8px;
  border-radius: 2px;
}
.pm-dbl-swatch.is-actual { background: var(--brand-500); }
.pm-dbl-swatch.is-planned {
  background: transparent;
  border-top: 2px dashed var(--text-2);
  border-radius: 0;
  height: 0;
  align-self: center;
}
.pm-daily-boxes-svg { width: 100%; height: auto; display: block; }
.pm-dbg-grid { stroke: var(--border); stroke-width: 1; }
.pm-dbg-yaxis,
.pm-dbg-xaxis {
  fill: var(--text-3);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.pm-dbg-today-col {
  fill: var(--brand-50, #eef2ff);
  opacity: 0.85;
  stroke: var(--brand-400, #818cf8);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.pm-dbg-bar { fill: var(--brand-500); }
.pm-dbg-bar.is-today { fill: var(--brand-400); }
/* Recorded (manually entered / imported) actual — visually distinct from the
   plan-projection bar so a real record never reads as a projection. */
.pm-dbg-bar.is-recorded { fill: var(--ok); }
.pm-dbl-swatch.is-recorded { background: var(--ok); }
.pm-daily-empty { font-size: 12px; padding: 18px 2px; }
.pm-dbg-planned-line {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pm-dbg-planned-dot { fill: var(--text-2); }

/* ===== PM bottom row (Vardiya / Pareto / Bugün biten batchler).
   22-05-2026: extracted from inline styles in pm-status-cards.jsx so the
   shift rows can carry a coloured left accent per shift and the pareto +
   today-batches rows align consistently with the rest of the dashboard. */
.pm-shift-card .card-b.pm-shift-rows { padding: 6px 12px; }
.pm-shift-row {
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  margin-left: -10px;
  padding-left: 10px;
  transition: background 0.15s;
}
.pm-shift-row:last-child { border-bottom: none; }
.pm-shift-row.shift-a { border-left-color: #38bdf8; }   /* gece-sabah, sky */
.pm-shift-row.shift-b { border-left-color: #f59e0b; }   /* gündüz, amber */
.pm-shift-row.shift-c { border-left-color: #8b5cf6; }   /* akşam-gece, violet */
.pm-shift-row.is-active { background: linear-gradient(90deg, rgba(124,95,255,0.04), transparent 50%); }
.pm-shift-label { font-weight: 600; font-size: 12px; color: var(--text-1); margin-bottom: 6px; }
.pm-shift-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-2); align-items: center; }
.pm-shift-meta .sep { color: var(--text-3); }
.pm-shift-progress {
  margin-top: 8px;
  height: 4px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.pm-shift-progress > div {
  height: 100%;
  background: var(--brand-500);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.pm-shift-row.shift-a .pm-shift-progress > div { background: #38bdf8; }
.pm-shift-row.shift-b .pm-shift-progress > div { background: #f59e0b; }
.pm-shift-row.shift-c .pm-shift-progress > div { background: #8b5cf6; }

.pm-pareto-card .card-b.pm-pareto-rows { padding: 8px 12px; }
.pm-pareto-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr 40px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
}
.pm-pareto-label { color: var(--text-1); font-weight: 600; }
.pm-pareto-bar {
  height: 9px;
  background: var(--surface-3);
  border-radius: 5px;
  overflow: hidden;
}
.pm-pareto-bar > div {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) inset;
}
.pm-pareto-val {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}

.pm-today-batches-card .card-b { padding: 4px 12px; }
.pm-today-batches-empty {
  padding: 18px 12px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}
.pm-today-batch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.pm-today-batch-row:last-child { border-bottom: none; }
.pm-today-batch-info { flex: 1; min-width: 0; }
.pm-today-batch-code {
  font-size: 10px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pm-today-batch-product {
  font-weight: 600;
  margin-top: 2px;
  color: var(--text-1);
  font-size: 13px;
}
.pm-today-batch-qty { text-align: right; }
.pm-today-batch-qty-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
}
.pm-today-batch-qty-unit {
  font-size: 10px;
  color: var(--text-3);
  text-transform: lowercase;
}

/* Scheduler KPI strip: three tiles (Kapasite / Doluluk / Seri sayı) split
   the full content width equally. minmax(0, 1fr) lets the inner grid rows
   shrink properly on narrow viewports without overflowing. On widths
   below ~960px the auto-fit minmax(280px,…) falls back to 2 then 1
   column so the tiles stay readable when the page is squeezed. */
.kpi-row.scheduler-kpi-row {
  display: grid;
  /* Lowered from 320px → 230px so the 4 tiles
     (Kapasite / Doluluk / Seri sayı / Kampanya) fit on a single row at the
     1440px design viewport (~1004px main column after sidebar). Below
     ~960px auto-fit falls back to 3 then 2. The inner kpi-fill-main /
     kpi-line-row widths below are tightened to match. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.kpi-row.scheduler-kpi-row .kpi { min-width: 0; width: 100%; }
.kpi-row.scheduler-kpi-row .kpi.brand .label { color: var(--text-3); }
.kpi.kpi-fill-split { display: flex; gap: 10px; align-items: stretch; }
.kpi.kpi-fill-split .kpi-fill-main {
  display: flex; flex-direction: column;
  flex: 0 0 auto; min-width: 78px;
}
.kpi.kpi-fill-split .kpi-fill-lines {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding-left: 8px; border-left: 1px solid var(--border);
  flex: 1 1 0; min-width: 0;
}
.kpi-line-row {
  /* Tight column widths so the 1fr bar gets meaningful pixels even when
     four tiles share the row. "Granülasyon" — the longest line label —
     renders ~68px at 11px/600 (Inter), so the label column is 70px: wide
     enough that its trailing "n" no longer spills into the bar, with the
     4px grid gap kept clear. Value column fits "1164sa" or "10/41" (≈44-48px). */
  display: grid; grid-template-columns: 70px 1fr 48px; gap: 4px; align-items: center;
}
.kpi-line-label { font-size: 11px; font-weight: 600; color: var(--text-2); letter-spacing: 0.01em;
  line-height: 16px; }
/* The bar's height matches the value text's line-height (16px) so the
   left label, the bar, and the right "Xsa · Y%" all sit on one optical
   line of the same vertical weight — no more thin 5px sliver next to
   a tall text column. */
.kpi-line-bar { height: 16px; background: var(--brand-50); border-radius: 4px; overflow: hidden; }
.kpi-line-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transition: width 240ms ease;
}
/* Stacked bar (Kapasite tile). The track stays light blue (brand-50);
   `--prefix` is the cumulative gray shading of earlier rows in the
   stack, `--fill` is this row's own blue segment positioned right
   after the prefix. Reading top→bottom traces a compound progress
   bar across the four capacity categories. */
.kpi-line-bar--stacked { position: relative; background: var(--brand-50); }
.kpi-line-bar--stacked .kpi-line-bar-prefix {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: #cbd5e1;
  border-radius: 4px 0 0 4px;
  transition: width 240ms ease;
}
.kpi-line-bar--stacked .kpi-line-bar-fill {
  position: absolute; top: 0; bottom: 0;
  border-radius: 0; /* squared edges so prefix + fill read as one stripe */
  transition: left 240ms ease, width 240ms ease;
}
.kpi-line-pct {
  font-size: 12px; font-weight: 700; color: var(--text); text-align: right;
  white-space: nowrap; line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.kpi-line-pct-suffix { font-size: 10px; color: var(--text-3); margin-left: 1px; font-weight: 600; }
.kpi-line-pct-sep { color: var(--text-3); margin: 0 5px; font-weight: 400; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
}
.kpi .label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.kpi .value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.kpi .delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kpi .delta.up { color: var(--ok); }
.kpi .delta.down { color: var(--danger); }
.kpi .delta.flat { color: var(--text-3); }
.kpi .spark { position: absolute; right: 16px; top: 16px; opacity: 0.85; }
.kpi.brand {
  border-color: var(--brand-200);
  background: linear-gradient(180deg, var(--brand-50), var(--surface));
}
.kpi.brand .label { color: var(--brand-700); }
.kpi.danger {
  border-color: var(--danger-border);
  background: linear-gradient(180deg, var(--danger-bg), var(--surface));
}
.kpi.warn {
  border-color: var(--warn-border);
  background: linear-gradient(180deg, var(--warn-bg), var(--surface));
}

/* ===================== Pills / Status ===================== */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.st-missing {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}
.pill.st-quality {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn-border);
}
.pill.st-ready {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok-border);
}
.pill.st-open {
  background: var(--info-bg);
  color: var(--info);
  border-color: var(--info-border);
}
.pill.st-done {
  background: var(--surface-3);
  color: var(--text-2);
  border-color: var(--border);
}
.pill.st-cleanup { background: #faf3e6; color: #946100; border-color: #ecdab0; }
.pill.st-maint { background: #f1ebf8; color: var(--purple); border-color: #d9c8ed; }
.pill.brand {
  background: var(--brand-50);
  color: var(--brand-700);
  border-color: var(--brand-200);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* ===================== Tables ===================== */
/* border-collapse: separate (NOT collapse) — with a sticky <th> header,
   `collapse` makes the shared header/first-row border belong to the table
   layer (which scrolls), so Chromium reveals a sub-pixel background sliver
   ("gap") between the pinned header and the body while scrolling. In separate
   mode each cell owns + paints its border in its own layer, so the sticky th
   carries its bottom border with it and no gap appears. border-spacing:0 keeps
   the layout identical to collapse. Internal borders are one-sided here
   (border-bottom on cells; pivot uses border-left only), so no double borders. */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.table th, .table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table th {
  background: var(--surface-2);
  color: var(--text-3);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  vertical-align: middle;
  position: sticky; top: 0;
  z-index: 1;
}
.table tbody tr:hover { background: var(--surface-2); }
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 11px;
}
/* Opt-in left alignment for numeric columns that should read left (Siparişler
   Miktar / İlerleme) — keeps the tabular/mono styling, only flips alignment. */
.table .num.col-left { text-align: left; }
.table .code { font-family: var(--mono); font-size: 11px; color: var(--text-2); }

/* Sticky header robustness: keep a visible bottom separator under the pinned
   header row (border-collapse drops the th border-bottom while scrolling). */
.table thead th { box-shadow: inset 0 -1px 0 var(--border); }

/* Two-row table header (label row + ColumnFilterRow): stack the filter row
   directly beneath the pinned label row instead of overlapping it at top:0.
   The offset MUST equal the label row's LIVE rendered height — that height
   varies with viewport width / header wrapping (~29px single-line, ~42px when
   labels wrap), so ColumnFilterRow measures the label row and publishes it as
   --filter-row-top (29px fallback = single-line height). A fixed magic number
   left a gap below the pinned label row whenever the labels didn't wrap. */
.table thead tr.table-filter-row th { top: var(--filter-row-top, 29px); z-index: 1; }

/* Keep the filter inputs flush under the column labels (no whitespace band):
   trim the label row's bottom padding in two-row headers. The filter row's own
   top padding is dropped inline in ColumnFilterRow. */
.table thead:has(tr.table-filter-row) tr:first-child th { padding-bottom: 3px; }

/* Dip toplam (footer grand-total) row — opt-in via .table-total-row. Sticks to
   the bottom of the scroll container so the totals stay visible while a long
   list scrolls, mirroring the sticky header. */
.table tfoot tr.table-total-row td {
  position: sticky; bottom: 0; z-index: 1;
  background: var(--surface-2);
  border-top: 2px solid var(--border);
  box-shadow: inset 0 1px 0 var(--border);
  font-weight: 700;
  padding-top: 8px; padding-bottom: 8px;
}

/* Scrollable table wrapper: preserves horizontal scroll for wide tables while
   capping the height so the sticky <th> header pins as the body scrolls. The
   height cap is REQUIRED — overflow-x:auto silently forces overflow-y to compute
   as auto, and without a cap that vertical scroll container grows to fit content
   and never scrolls, which traps (and disables) the sticky header. */
.tbl-scroll { padding: 0; overflow: auto; max-height: calc(100vh - 180px); }

/* Malzeme Düşüm Raporu: long running-balance list inside its own .tbl-scroll
   viewport. The table is border-collapse: separate (.table default), and in that
   mode Chromium pins a sticky <thead> but NOT a sticky <th> — so the global
   `.table th { position: sticky }` does not hold here and the column headers
   scroll away. Pin the <thead> itself (scoped to this panel) so the headers stay
   frozen while the body scrolls. z-index keeps them above the body cells. */
[data-testid="material-depletion-panel"] .tbl-scroll .table thead {
  position: sticky; top: 0; z-index: 2;
}
[data-testid="material-depletion-panel"] .tbl-scroll .table thead th { z-index: 2; }

/* Temizlik/Kalıp matrix has a frozen first column AND (now) a sticky header row.
   Layer the four regions so the right one stays on top while scrolling either
   axis: corner (row∩col) > header row > frozen-left column > body. */
.cleaning-matrix thead th { z-index: 2; }
.cleaning-matrix thead th:first-child { z-index: 3; }
.cleaning-matrix tbody td:first-child { z-index: 1; }

/* İşlem Süreleri — pivot (ürün × makine-kodu) with per-line header boxes. */
.optimes-pivot thead tr:first-child th { top: 0; z-index: 3; }
.optimes-pivot thead tr:nth-child(2) th { top: 29px; z-index: 2; }
.optimes-pivot th.optg-stage {
  text-align: center;
  background: var(--surface-3);
  color: var(--text-2);
  border-left: 2px solid var(--border-strong);
}
.optimes-pivot th.optg-mc { text-align: right; }
.optimes-pivot th.optg-sep,
.optimes-pivot td.optg-sep { border-left: 2px solid var(--border-strong); }
.optimes-pivot th.optg-sepend,
.optimes-pivot td.optg-sepend { border-right: 2px solid var(--border-strong); }
.optimes-pivot td.optg-blank { color: var(--text-3); }
/* Tam-alternatif makineden AYNALANAN süre (backend cell.mirrored): kendi
   değeri olmayan hücre — soluk + italik, tooltip kaynağını açıklar. */
.optimes-pivot td.optg-mirror { opacity: 0.62; font-style: italic; }

/* Op drawer — Rota sekmesi: çizelgede yerleşik makine satırını vurgula. */
.op-drawer-card tr.optime-placed > td {
  background: var(--ok-bg, rgba(34,197,94,0.10));
  font-weight: 600;
}
.op-drawer-card tr.optime-placed > td:first-child {
  box-shadow: inset 3px 0 0 var(--ok, #22c55e);
}

/* Satır içi düzenlenebilir süre hücreleri: tıklayınca input açılır. */
.optimes-pivot td.optimes-editable { cursor: pointer; position: relative; }
.optimes-pivot td.optimes-editable:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--surface-2);
}
.optimes-pivot td.optimes-editable.optg-blank:hover::after {
  content: '+'; color: var(--text-3); font-weight: 700;
}
.optimes-cell-input {
  width: 100%; box-sizing: border-box; text-align: right;
  font: inherit; padding: 1px 2px; margin: 0;
  border: 1px solid var(--accent); border-radius: 3px;
  background: var(--surface); color: var(--text-1);
  -moz-appearance: textfield;
}
.optimes-cell-input::-webkit-outer-spin-button,
.optimes-cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Temizlik & Kalıp Matrisi: tıklanınca input açılan düzenlenebilir hücreler. */
.cleaning-matrix td.cleaning-editable { cursor: pointer; }
.cleaning-matrix td.cleaning-editable:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--surface-2);
}
.cleaning-cell-input {
  /* FIXED compact width: a type=number input with width:100% inside an
     auto-sized matrix cell falls back to its large intrinsic width and blows
     the column out (worst on the right-edge columns → horizontal overflow).
     A small fixed width keeps the editor the same size as the value tag. */
  width: 46px; max-width: 46px; box-sizing: border-box; text-align: right;
  font: inherit; font-size: 12px; padding: 1px 3px; margin: 0;
  border: 1px solid var(--accent); border-radius: 3px;
  background: var(--surface); color: var(--text-1);
  -moz-appearance: textfield;
}
.cleaning-cell-input::-webkit-outer-spin-button,
.cleaning-cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Temizlik & Kalıp Matrisi: floating onay (confirm) paneli. Sayfa altında sabit
   durur, yalnızca bekleyen (kaydedilmemiş) override varken görünür. Hangi hatta
   hangi geçişin eski→yeni süresinin değişeceğini özetler; "Onayla ve Kaydet"
   denmeden değişiklikler ana veriye işlenmez. */
.cleaning-confirm-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 120;
  width: min(680px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15, 32, 39, 0.24), 0 2px 8px rgba(15, 32, 39, 0.12);
  animation: cleaning-confirm-in 0.18s ease-out;
}
@keyframes cleaning-confirm-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.cleaning-confirm-head { display: flex; flex-direction: column; gap: 2px; }
.cleaning-confirm-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--text-1);
}
.cleaning-confirm-title svg { color: var(--warn); flex: none; }
.cleaning-confirm-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--warn-bg); color: var(--warn);
  border-radius: 999px; font-size: 11px; font-weight: 800;
}
.cleaning-confirm-sub { font-size: 11px; color: var(--text-3); }
.cleaning-confirm-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
  padding-right: 2px;
}
.cleaning-confirm-row {
  display: grid;
  grid-template-columns: minmax(80px, 1.1fr) minmax(120px, 1.7fr) auto;
  align-items: center; gap: 10px;
  padding: 5px 9px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 12px;
}
.cleaning-confirm-mac {
  font-weight: 600; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cleaning-confirm-trans {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; color: var(--text-1);
}
.cleaning-confirm-trans .arr { color: var(--text-3); }
.cleaning-confirm-kind {
  font-size: 10px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.4px; margin-left: 2px;
}
.cleaning-confirm-vals {
  display: flex; align-items: center; gap: 8px; justify-self: end;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cleaning-confirm-vals .old { color: var(--text-3); text-decoration: line-through; }
.cleaning-confirm-vals .arr { color: var(--text-3); }
.cleaning-confirm-vals .new { color: var(--brand-700); font-weight: 800; }
.cleaning-confirm-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
@media (max-width: 640px) {
  .cleaning-confirm-bar { width: calc(100vw - 24px); bottom: 12px; }
  .cleaning-confirm-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .cleaning-confirm-trans { grid-column: 1 / -1; }
}

/* ------ Temizlik & Kalıp içe aktarma önizleme modalı (cleaning-import.jsx) --- */
.cleaning-io-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(15, 32, 39, 0.42);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cleaning-io-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  margin: 0;
}
.cleaning-io-body {
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.cleaning-io-group { display: flex; flex-direction: column; gap: 4px; }
.cleaning-io-group-title { font-size: 12px; font-weight: 700; color: var(--text-2); }
.cleaning-io-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 9px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 12px;
}
.cleaning-io-vals {
  margin-left: auto; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.cleaning-io-warn .cleaning-io-group-title { color: var(--warn); }
.cleaning-io-warn .cleaning-io-row { background: var(--warn-bg); color: var(--warn); }
.cleaning-io-err .cleaning-io-group-title { color: var(--danger); }
.cleaning-io-err .cleaning-io-row { background: var(--danger-bg); color: var(--danger); }

/* ===================== Inputs ===================== */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.input, .select, .textarea {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(52,97,219,0.10);
}
.textarea { padding: 8px 10px; min-height: 64px; resize: vertical; }
.checkbox-row { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ===================== Login ===================== */
.login-bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(52,97,219,0.18), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(107,63,160,0.10), transparent),
    linear-gradient(180deg, #0b1330 0%, #1c2a5a 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 380px;
  background: var(--surface);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}

/* ===================== Tabs ===================== */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab {
  padding: 9px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

/* ===================== Scheduler / Gantt ===================== */
.scheduler-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
}
.toolbar-divider { width: 1px; height: 22px; background: var(--border); }

/* Time-range zoom (hour/shift/day/week) and APS scale (50%–250%) share button styling. */
.zoom-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.aps-scale-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.zoom-group button, .aps-scale-group button {
  padding: 5px 9px; border: none; background: var(--surface);
  font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text-2);
  border-right: 1px solid var(--border);
}
.zoom-group button:last-child, .aps-scale-group button:last-child { border-right: none; }
.zoom-group button.active { background: var(--brand-600); color: white; }
.aps-scale-group button:hover:not(:disabled) { background: var(--surface-3); }
.aps-scale-group button:disabled { opacity: 0.4; cursor: not-allowed; }
.aps-scale-group .aps-scale-display {
  padding: 5px 10px; font-size: 11px; font-weight: 600;
  color: var(--text-2); background: var(--surface-2);
  border-right: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  min-width: 44px; text-align: center;
}

/* APS fullscreen overlay. */
.aps-fullscreen {
  position: fixed; inset: 0;
  z-index: 9000;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 14px 18px;
  overflow: hidden;
}
.aps-fullscreen .gantt {
  max-height: none;
  flex: 1;
  min-height: 0;
}
.aps-fullscreen .scheduler-toolbar { margin-bottom: 12px; }

/* APS Zoom — width-based scaling (no CSS transform).
   The grid stretches horizontally so the parent .gantt gets a horizontal
   scrollbar at zoom>1. No transform is used: this keeps position:sticky on
   .gantt-row-l (the machine-name column) working correctly, and keeps
   getBoundingClientRect() returning consistent client pixels for drag math. */
.gantt {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: auto;
  box-shadow: var(--shadow-1);
  max-height: calc(100vh - 380px);
  min-height: 400px;
}
.gantt-grid {
  display: grid;
  /* --gantt-l-w: scheduler.jsx GANTT_LABEL_W ile birebir aynı tutulmalı.
     En uzun makine adı + %util çipi tek satırda tam sığacak genişlik. */
  --gantt-l-w: 160px;
  grid-template-columns: var(--gantt-l-w) 1fr;
  width: calc(100% * var(--aps-zoom, 1));
  min-width: 0; /* was: 100% — clamped zoom<1 to render same as zoom=1, breaking zoom-out */
  position: relative;
}
/* At zoom > 1 the grid is wider than .gantt → horizontal scroll appears, and
   .gantt-row-l stays sticky against the .gantt scroll container.
   At zoom < 1 the grid shrinks below 100% so bars/labels visibly compress;
   whitespace on the right of .gantt is expected and acceptable cost. */
.gantt-header-l, .gantt-header-r {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 4;
}
.gantt-header-l {
  padding: 4px 10px 6px;
  border-right: 1px solid var(--border);
  font-size: 13px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: flex-end;
  height: 40px;
  box-sizing: border-box;
  /* Sol-üst köşe: hem dikey (top:0, shared rule) hem yatay (left:0) sabit
     kalsın; row-l (z7), header-r (z4), now-line (z5) ve ilişki-okları (z6)
     üstünde dursun (köşe her zaman en üstte). */
  left: 0;
  z-index: 8;
}
.gantt-header-r {
  position: relative;
  display: flex;
  height: 40px;
  overflow: hidden;
}
.gantt-tick {
  flex: 1;
  border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--text-2);
  position: relative;
}
.gantt-tick.weekend { background: rgba(255,235,200,0.30); }
.gantt-tick .day-num { display: block; font-size: 13px; color: var(--text); }
.gantt-tick .day-name { display: block; font-size: 9px; color: var(--text-3); }

.gantt-row { display: contents; }
.gantt-row-l {
  padding: 0 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  height: 44px;
  background: var(--surface);
  /* z-index 7: frozen machine column must occlude the now-line overlay (z5) and
     the dependency-arrow overlay (z6) that scroll under it — they share this
     element's stacking context (.gantt / .gantt-grid / .gantt-wrap create none).
     Mirrored in app-scheduler-features.css (which wins by load order); keep both
     in sync. */
  position: sticky; left: 0; z-index: 7;
}
.gantt-row-r {
  border-bottom: 1px solid var(--border);
  position: relative;
  height: 44px;
  /* Day-boundary verticals. Percent stops in a tiled linear-gradient are
     resolved against the gradient box (= the tile, which is 1/14 of the
     row = one day). Stops therefore use tile-relative coords: the 1px
     line sits at the right edge of each day tile, landing exactly on
     Istanbul midnight (rangeStart is anchored there). The earlier
     `100%/14` stops collapsed to 1/14 of the tile (~1.7h into each day),
     so dividers drifted to ~01:43. */
  background:
    linear-gradient(
      90deg,
      transparent calc(100% - 1px),
      var(--border) calc(100% - 1px),
      var(--border) 100%,
      transparent 100%
    );
  background-size: calc(100%/14) 100%;
}
.machine-name {
  font-weight: 600; font-size: 12px; color: var(--text);
  display: flex; align-items: center; gap: 4px;
}
/* Uzun makine adları dar sütunda tek satırda kesilir (… ile); %util çipi
   her zaman görünür kalır (shrink etmez). Tam ad title ile hover'da görünür. */
.machine-name-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.machine-name .machine-util-chip { flex: 0 0 auto; }
.machine-meta { font-size: 10px; color: var(--text-3); margin-top: 1px; white-space: nowrap; }
.machine-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.gantt-bar {
  position: absolute;
  top: 6px; bottom: 6px;
  border-radius: 5px;
  /* Padding lives on .bar-label (below) so narrow bars can render at their
     true sub-padding width — otherwise box-sizing: border-box + horizontal
     padding forces a 16px minimum visible width, which made tightly-spaced
     bars bleed past their logical right edge into adjacent closed-shift
     slots. */
  padding: 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: white;
  box-shadow: 0 1px 2px rgba(15,23,42,0.20);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  /* overflow:visible so the short label (PRODUCT4-BATCH3, e.g. "ENTO-41")
     always renders fully even when the bar itself is too narrow — task
     enes-19/05 follow-up. bar-progress + bar-deviation children are
     absolutely positioned with implicit-width constraints (% width or
     left:N% + right:0) so they don't visually overflow the bar; only the
     label spills to the right when the bar gets narrower than the text. */
  overflow: visible;
  white-space: nowrap;
  z-index: 1;
}
.gantt-bar .bar-label {
  padding: 0 6px;
  /* Always show min "first 4 of product + last 3 of batch" — no clipping. */
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4);
  pointer-events: none;
  letter-spacing: 0.01em;
}
/* Closed-shift split: an op may render as multiple segments that visually
   wrap around the closed-shift slot. Rounded corners only on the outer
   ends so the pieces read as one continuous operation. */
.gantt-bar.split-first { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gantt-bar.split-mid { border-radius: 0; }
.gantt-bar.split-last { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gantt-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.25);
  z-index: 3;
}
.gantt-bar.kind-prod { background: linear-gradient(180deg, #4570e0, #2a4fb8); }
.gantt-bar.kind-cleanup,
.gantt-bar.kind-changeover {
  background: repeating-linear-gradient(
    45deg, #1f6b3a, #1f6b3a 6px, #175432 6px, #175432 12px
  );
}
.gantt-bar.kind-maint {
  background: repeating-linear-gradient(
    45deg, #d6443c, #d6443c 6px, #b3261e 6px, #b3261e 12px
  );
}
.gantt-bar.kind-qa { background: linear-gradient(180deg, #0a8da8, #0b6b8a); }
/* P2/B3 .gantt-bar.kind-qa-yarimamul lives in styles/app-meet.css. */
.gantt-bar.kind-blocked {
  background: linear-gradient(180deg, #d6443c, #b3261e);
}
.gantt-bar.selected {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
  z-index: 4;
  box-shadow: 0 6px 18px rgba(245,158,11,0.40);
}
.gantt-bar.dragging {
  z-index: 6;
  box-shadow: 0 8px 24px rgba(124,95,255,0.5);
  transform: translateY(-2px);
  opacity: 0.95;
  outline: 2px dashed #a78bfa;
}
.gantt-bar.ai-optimized { outline: 3px solid #a78bfa; outline-offset: 1px;
  box-shadow: 0 0 0 6px rgba(167,139,250,0.18), 0 4px 14px rgba(124,95,255,0.40); }
.gantt-bar.ai-optimized:after { content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; background: linear-gradient(135deg, rgba(167,139,250,0.22), transparent 40%); }
.gantt-bar.pulse-ai { animation: pulse-ai 1.6s ease-in-out 3; }
/* ai-focused was sharing #f59e0b with .selected, so a rail-click landing
   on the already-selected bar made the focus pulse invisible. Switch to
   cyan so user-driven (orange) and system-driven (cyan) focus signals
   stay distinguishable. */
.gantt-bar.ai-focused { outline: 3px solid #22d3ee; outline-offset: 2px;
  box-shadow: 0 0 0 8px rgba(34,211,238,0.30); z-index: 5; }
/* Pinned: drop the heavy outline + inset duo — the pin-badge icon at the
   top-right already carries the signal. A subtle dashed ring keeps the
   bar legible when stacked under selected / ai outlines. */
.gantt-bar.pinned {
  outline: 1.5px dashed rgba(30,41,59,0.55);
  outline-offset: 1px;
  cursor: not-allowed;
}
.gantt-bar .pin-badge {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: white; color: #1e293b;
  border: 1px solid #1e293b;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; box-shadow: 0 1px 3px rgba(15,23,42,0.25);
}
.gantt-bar.tasfiye-shifted {
  outline: 2px solid #10b981;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.18), 0 4px 12px rgba(16,185,129,0.30);
}
.gantt-bar .tasfiye-badge {
  position: absolute; top: -3px; left: -3px;
  background: linear-gradient(135deg,#34d399,#10b981); color: white;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(16,185,129,0.55); z-index: 2;
  letter-spacing: 0.02em;
}
.tag.pin-pill {
  background: #1e293b; color: white; border-color: #1e293b;
  display: inline-flex; align-items: center; gap: 4px;
}
.tasfiye-applied-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin: 12px 0 0;
  font-size: 11px; font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: 999px;
}
.tasfiye-applied-chip button {
  background: transparent; border: 1px solid #6ee7b7;
  color: #047857; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.tasfiye-applied-chip button:hover { background: #d1fae5; }
.tasfiye-modal {
  width: 720px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  margin: auto;
  animation: zoomIn 0.18s;
}
.tasfiye-modal-h {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.tasfiye-modal-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.tasfiye-modal-b { flex: 1; overflow-y: auto; padding: 16px 20px; }
.tasfiye-modal-b .tasfiye-modal-intro { margin: 0 0 12px; color: var(--text-2); }
.tasfiye-modal-b table.table { font-size: 11px; }
.tasfiye-modal-b table.table th { font-size: 10px; }
.tasfiye-modal-skipped {
  margin-top: 14px; padding: 10px 12px;
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: 6px;
}
.tasfiye-modal-skipped-h {
  font-size: 11px; font-weight: 700; color: var(--text-2);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.tasfiye-modal-skipped-row { font-size: 11px; color: var(--text-2); padding: 2px 0; }
.tasfiye-modal-f {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
  background: var(--surface-2);
}
/* BHT Aşanlar — bulk-wait report modal (master-bulkwait.jsx) */
.bht-modal {
  width: 1180px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  margin: auto;
  animation: zoomIn 0.18s;
}
.bht-modal-h {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.bht-modal-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.bht-modal-b { flex: 1; overflow: auto; padding: 12px 20px; }
.bht-modal-b .bht-table { font-size: 11px; }
.bht-modal-b .bht-table th { font-size: 10px; white-space: nowrap; }
.bht-modal-b .bht-table td { vertical-align: top; }
.bht-modal-f {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center;
  background: var(--surface-2);
}
.gantt-context-menu button[disabled] {
  color: var(--text-3); cursor: not-allowed; opacity: 0.6;
}
.gantt-context-menu button[disabled]:hover { background: transparent; }
tr.row-pinned { background: var(--brand-50); }
@keyframes pulse-ai {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0.0), 0 4px 14px rgba(124,95,255,0.40); }
  50% { box-shadow: 0 0 0 10px rgba(167,139,250,0.45), 0 4px 14px rgba(124,95,255,0.50); }
}
.gantt-bar .bar-deviation {
  position: absolute; top: 0; bottom: 0; right: 0;
  background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 6px, #d97706 6px, #d97706 12px);
  border-left: 1px dashed rgba(255,255,255,0.6);
  pointer-events: none;
  border-radius: 0 5px 5px 0;
}
.gantt-tick.shift-start { border-left: 1px solid rgba(124,95,255,0.4); }
.gantt-tick.midnight { border-left: 1px solid var(--border); }
/* A6 (meet-12-05-2026) .gantt-tick-hour.midnight / .shift-start live in
   styles/app-meet.css. */
@keyframes slideUp {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
/* .gantt-bar .bar-label rules live with the .gantt-bar block above —
   overflow:visible + text-shadow so the short label always renders. */
.gantt-bar .bar-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: rgba(255,255,255,0.5);
}

/* Malzeme durum şeridi (müşteri talebi) — şu-an çizgisinin SAĞINDA kalan PLANLI
   üretim op'larının ALT kenarında, bileşik malzeme hesabı sonucu: en az 1
   malzeme eksikse kırmızı, (eksik yok) en az 1 malzeme kalitede ise beyaz,
   hepsi yeterliyse yeşil. Bar DOLGU rengine dokunmaz; yalnızca alt kenardır.
   Planlı/gelecek op'larda ilerleme çubuğu (bar-progress) 0 olduğundan çakışmaz. */
.gantt-bar .bar-mat-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  pointer-events: none;
  border-radius: 0 0 5px 5px;
  z-index: 3;
}
.gantt-bar .bar-mat-strip.mat-eksik { background: #ef4444; }
.gantt-bar .bar-mat-strip.mat-kalitede {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
}
.gantt-bar .bar-mat-strip.mat-ok { background: #22c55e; }

/* closed-shift hatch — drawn behind ops in machine rows */
.gantt-closed-shift {
  position: absolute;
  top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg,
    #f1f5f9, #f1f5f9 4px, #e2e8f0 4px, #e2e8f0 8px);
  z-index: 0;
  pointer-events: none;
}

/* D11 (meet-12-05-2026) .mrp-auto-chip + .mrp-auto-chip-label / -sub live
   in styles/app-meet.css. */

/* now line — full-grid overlay spans every machine row */
.gantt-now-overlay {
  position: absolute;
  top: var(--gantt-header-h, 40px);
  bottom: 0;
  left: var(--now-left, var(--gantt-l-w, 160px));
  width: 2px;
  background: #ef4444;
  z-index: 5;
  pointer-events: none;
}
/* A11 (meet-12-05-2026) + D8 .gantt-bar.over-plan / .under-plan live in
   styles/app-meet.css.
   D4 (meet-12-05-2026): the .gantt-bar.state-* per-op stripe was removed
   (16-06-2026, user request); only the OrdersPage tr[data-state] row
   tinting survives, in styles/app-meet-orders.css. */

/* right-click context menu + relations overlay */
.gantt-context-menu {
  position: fixed;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-2);
  padding: 4px 0;
  min-width: 160px;
}
.gantt-context-menu button {
  display: block;
  width: 100%;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  color: var(--text);
}
.gantt-context-menu button:hover { background: var(--surface-3); }
.gantt-relations-overlay {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 6;
}
/* Dependency-arrow visual = Claude Design connectors.js (rounded elbow, #2f6df0). */
.gantt-relations-arrow {
  stroke: #2f6df0;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.gantt-relations-arrow.overlap { stroke: var(--danger); }
/* Off-screen edge stub — the related step is scrolled past the visible range;
   dashed = "this relation continues off-page, follow the arrow". */
.gantt-relations-arrow.offscreen {
  stroke-dasharray: 7 5;
  opacity: 0.92;
}
/* White "14sa" hap on the channel. */
.gantt-relations-wait-badge {
  fill: #ffffff;
  stroke: #cfd6e0;
  stroke-width: 1;
}
.gantt-relations-wait-badge.exceeded {
  stroke: var(--danger);
  stroke-width: 1.5;
}
.gantt-relations-wait-text {
  fill: #3a4252;
  font-size: 10px;
  font-weight: 800;
  font-family: ui-monospace, Menlo, monospace;
}
.gantt-relations-wait-text.exceeded { fill: var(--danger); }
/* Blue "×N" rozeti — collapsed multi-target fan-out (zoom-out). */
.gantt-relations-count-badge {
  fill: #2f6df0;
  stroke: #ffffff;
  stroke-width: 2;
}
.gantt-relations-count-text {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 800;
  font-family: ui-monospace, Menlo, monospace;
}
/* Relations close pill — at the timeline top-right. The overlay ignores toolbar
   interactions (zoom ± / time-mode tabs) but dismisses on Escape, on a press
   inside the plan grid, or via this pill — a discoverable always-available way out.
   `right` is set inline to the .gantt (timeline) right edge so it never lands over
   the AIChangesRail; the 14px here is just a fallback. */
.gantt-relations-close {
  position: absolute;
  top: 8px;
  right: 14px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 11px;
  border: 1px solid #2f6df0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #2f6df0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 30, 60, 0.16);
  pointer-events: auto;
}
.gantt-relations-close:hover { background: #2f6df0; color: #ffffff; }
.gantt-relations-close-label::before { content: '🔗'; margin-right: 5px; }
.gantt-relations-close-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(47, 109, 240, 0.14);
  font-size: 10px;
  font-weight: 800;
}
.gantt-relations-close:hover .gantt-relations-close-x { background: rgba(255, 255, 255, 0.28); }

/* ===================== Drawer / Modal ===================== */
.overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.30);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex; justify-content: flex-end;
  animation: fadeIn 0.18s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  width: 540px;
  height: 100vh;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  animation: slideIn 0.22s ease-out;
}
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-h {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.drawer-h h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.drawer-b { flex: 1; overflow-y: auto; padding: 16px 20px; }
.drawer-f {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: var(--surface-2);
}

.modal-card {
  width: 720px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  margin: auto;
  overflow: hidden;
  animation: zoomIn 0.18s;
}
@keyframes zoomIn {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.overlay.center { align-items: center; justify-content: center; }

/* ===================== Donut / Charts ===================== */
.donut { position: relative; display: inline-block; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.donut-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.donut-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }

.spark-bar { display: flex; gap: 2px; align-items: flex-end; }
.spark-bar > div { flex: 1; min-width: 3px; border-radius: 1px; }

/* ===================== Heatmap ===================== */
.heat-low { background: #e6f5ee; color: #1f6043; }
.heat-mid { background: #fdf2e2; color: #7d4407; }
.heat-high { background: #fde8e6; color: #851c16; }
.heat-over { background: #b3261e; color: white; }
.heat-vover { background: #5e0e09; color: white; }

/* ===================== AI panel ===================== */
.ai-panel {
  position: fixed;
  right: 14px; bottom: 14px;
  width: 420px;
  height: 600px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  z-index: 90;
  display: flex; flex-direction: column;
  animation: slideUp 0.2s;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ai-h {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--brand-50), #fff);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ai-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-500), var(--purple));
  color: white;
  display: flex; align-items: center; justify-content: center;
}
.ai-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-msg { max-width: 85%; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.5; }
.ai-msg.user { align-self: flex-end; background: var(--brand-600); color: white; border-bottom-right-radius: 4px; }
.ai-msg.bot {
  align-self: flex-start;
  background: var(--surface-3);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.ai-msg .insights { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ai-insight {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
  font-size: 11px;
  display: flex; align-items: flex-start; gap: 8px;
}
.ai-input-row {
  padding: 10px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}
.ai-input-row .input { flex: 1; }
.ai-suggestions { display: flex; gap: 6px; padding: 0 10px 10px; flex-wrap: wrap; }
.ai-sug {
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  color: var(--text-2);
}
.ai-sug:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }

/* ===================== Toasts ===================== */
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  margin-bottom: 8px;
}
.toast.success { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.toast.warning { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.toast.danger { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }

/* ===================== Misc ===================== */
.divider { height: 1px; background: var(--border); margin: 12px 0; }
.row { display: flex; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.muted { color: var(--text-3); }
.mono { font-family: var(--mono); }
.strong { font-weight: 700; }

/* Layout grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }

/* Select / dropdown extras */
select.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' \
viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' \
stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 28px;
}

/* Progress bars */
.progress { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--brand-500); border-radius: 999px; transition: width 0.3s; }
.progress.ok > div { background: var(--ok); }
.progress.warn > div { background: var(--warn); }
.progress.danger > div { background: var(--danger); }

/* Avatars row */
.avatar-row { display: flex; }
.avatar-row .avatar { margin-left: -6px; border: 2px solid var(--surface); width: 24px; height: 24px; font-size: 9px; }
.avatar-row .avatar:first-child { margin-left: 0; }

/* Empty state */
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

/* Activity feed */
.activity-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-500);
  margin-top: 4px;
  flex-shrink: 0;
}
.activity-time { color: var(--text-3); font-size: 10px; margin-top: 2px; }

/* Heat heatmap cells */
.heat-cell {
  padding: 6px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

/* Kapasite KPI strip + heatmap polish (Kapasite page) */
.capacity-kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.capacity-kpi-row .kpi { padding: 12px 14px; }
.capacity-kpi-row .kpi .value { font-size: 22px; }
.capacity-kpi-row .kpi .value { display: flex; align-items: baseline; gap: 4px; }
.capacity-kpi-row .kpi-unit {
  font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0;
}
.capacity-heat-legend {
  display: flex; gap: 8px; font-size: 11px; color: var(--text-2); align-items: center;
}
.capacity-heat-legend-cell { padding: 2px 6px; }
.capacity-heat-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.capacity-heat-th { text-align: center; }
.capacity-heat-th--peak {
  color: var(--brand-700);
  position: relative;
}
.capacity-heat-th--peak::after {
  content: '▼';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 100%;
  font-size: 9px; color: var(--brand-600);
}
.capacity-bottleneck-pill {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger-border);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle;
}
.capacity-area-hint { color: var(--text-3); font-size: 11px; }
.capacity-area-bar {
  position: relative;
  height: 16px;
  width: 100%;
  background: var(--surface-3);
  border-radius: 6px;
  overflow: hidden;
  display: flex; align-items: center;
  min-width: 120px;
}
.capacity-area-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 6px;
  transition: width .2s ease;
}
.capacity-area-bar-label {
  position: relative;
  z-index: 1;
  font-size: 10px; font-weight: 700;
  color: var(--text);
  padding-left: 8px;
  mix-blend-mode: difference;
  filter: invert(1) grayscale(1) contrast(2);
}

/* Kapasite — backend-report states + manual capacity plan card */
.capacity-stale-banner {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 8px 12px;
  border: 1px solid var(--warn-border, #f0c674); border-radius: 8px;
  background: var(--warn-bg, rgba(240, 198, 116, 0.12));
  color: var(--text-2); font-size: 12px;
}
.capacity-load-error { font-size: 13px; color: var(--text-2); }
.capacity-plan-actions { display: flex; gap: 8px; align-items: center; }
.capacity-plan-hint { padding: 8px 14px; }
.capacity-plan-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
.capacity-plan-cell {
  width: 100%; min-width: 52px;
  border: 1px dashed transparent; border-radius: 6px;
  background: none; cursor: pointer;
  padding: 4px 6px; font: inherit; font-size: 12px;
  color: var(--text-2); text-align: right;
  display: inline-flex; justify-content: flex-end; align-items: center; gap: 4px;
}
.capacity-plan-cell:hover { border-color: var(--brand-400, #8ab4f8); color: var(--text); }
.capacity-plan-cell--set { color: var(--text); font-weight: 600; }
.capacity-plan-badge {
  font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0 4px; border-radius: 999px;
  background: var(--brand-100, rgba(66, 133, 244, 0.14)); color: var(--brand-700, #1a56db);
}
.capacity-plan-input {
  width: 64px; padding: 3px 6px; font-size: 12px; text-align: right;
  border: 1px solid var(--brand-500, #4285f4); border-radius: 6px;
  background: var(--surface-1, #fff); color: var(--text);
}
.capacity-plan-preview {
  margin: 10px 14px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2);
}
.capacity-plan-preview-chips { display: flex; gap: 6px; margin: 8px 0; }
.capacity-plan-preview-rows { max-height: 180px; overflow-y: auto; margin-bottom: 8px; }
.capacity-plan-preview-actions { display: flex; gap: 8px; }
.capacity-plan-skipped { margin-top: 4px; }

/* Dashboard hero variants */
.hero {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
  color: white;
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  display: flex; gap: 24px; align-items: center;
  margin-bottom: 16px;
  box-shadow: var(--shadow-2);
  position: relative; overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent);
}
.hero h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.hero .hero-sub { color: rgba(255,255,255,0.8); font-size: 13px; margin-top: 4px; }

.toast-stack { position: fixed; right: 16px; top: 70px; z-index: 200; width: 320px; }

/* Compact extractions to keep JSX under 120-char limit (single-line where possible). */
.gantt-legend { padding: 10px 14px; border-top: 1px solid var(--border); display: flex;
  gap: 14px; font-size: 11px; color: var(--text-2); flex-wrap: wrap; background: var(--surface-2);
  /* Çizelge kaysa da (dikey + yatay) renk açıklaması ekranda kalsın:
     scroll viewport'unun sol-alt köşesine sabitlenir. Solid arka plan ile
     altındaki barların üstünü kapatır. */
  position: sticky; left: 0; bottom: 0; z-index: 5; }
.gantt-legend-now { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.gantt-legend-now-line { width: 14px; height: 2px; background: #ef4444; }
.gantt-tick-hour { padding: 4px 2px; font-size: 9px; }
.gantt-tick-hour-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gantt-tick-hour-num { font-size: 9px; font-weight: 600; color: var(--text-3); }
.gantt-tick-hour-num.shift { color: var(--purple); }
.gantt-tick-hour-date { font-size: 8px; color: var(--text-3); white-space: nowrap; }
.bell-wrap { position: relative; }
.bell-popover { position: absolute; top: calc(100% + 6px); right: 0; width: 320px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16); z-index: 200; padding: 6px 0;
  animation: slideUp .2s ease; }
.bell-popover-h { padding: 8px 14px; font-size: 11px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border); }
.bell-popover-empty { padding: 18px 14px; font-size: 12px; color: var(--text-3);
  text-align: center; }
.bell-popover-item { display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; width: 100%; background: transparent; border: 0;
  cursor: pointer; text-align: left; border-bottom: 1px solid var(--border); }
.bell-popover-item:last-child { border-bottom: none; }
.bell-popover-item:hover { background: var(--surface-2); }
.bell-popover-item.unread { background: var(--brand-50); }
.bell-popover-item.unread:hover { background: var(--brand-100); }
.bell-popover-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  margin-top: 4px; }
.bell-popover-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bell-popover-title { font-size: 12px; font-weight: 600; color: var(--text); }
.bell-popover-when { font-size: 10px; color: var(--text-3); }
.toast-host { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9500; display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none; align-items: center; max-width: 90vw; }
.toast-host-item { background: #0d1530; color: white; padding: 10px 16px;
  border-radius: 8px; font-size: 13px; font-weight: 500; display: flex;
  align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border: 1px solid rgba(124,95,255,0.4); animation: slideUp .25s ease;
  pointer-events: auto; max-width: 520px; }
.toast-host-item.kind-ai { border-color: rgba(167,139,250,0.55);
  background: linear-gradient(135deg,#0d1530,#1a1140); }
.toast-host-item.kind-warn { border-color: rgba(245,158,11,0.55); }
.alert-row { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; }
.alert-row-icon { width: 30px; height: 30px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.alert-row-body { flex: 1; min-width: 0; }
.alert-row-title { font-weight: 600; font-size: 12px; }
.alert-row-detail { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.alert-row-actions { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.alert-row-area { font-size: 10px; color: var(--text-3); padding: 2px 6px;
  background: var(--surface-2); border-radius: 4px; }
.alert-row-btn { height: 22px; font-size: 10px; padding: 0 8px; }
.alert-row-time { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.ai-opt-banner { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px;
  background: linear-gradient(90deg,rgba(124,95,255,0.12),rgba(91,141,239,0.08));
  border: 1px solid rgba(124,95,255,0.35);
  display: flex; align-items: center; gap: 12px; font-size: 12px; }
.ai-opt-banner-icon { width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#7c5fff,#5b8def);
  display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0; }
.ai-opt-banner-body { flex: 1; }
.ai-opt-banner-title { font-weight: 700; color: var(--purple); }
.ai-opt-banner-detail { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.ai-opt-banner-badge { color: var(--purple); font-weight: 600; }
.ai-opt-banner-cta { background: linear-gradient(135deg,#7c5fff,#5b8def); border: none; color: white; }
.ai-opt-banner-oplist {
  list-style: none;
  padding: 6px 0 0;
  margin: 6px 0 0;
  border-top: 1px solid rgba(124, 95, 255, 0.18);
  font-size: 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.ai-opt-banner-oplist li {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1.35;
}
.ai-opt-banner-oplist li:hover { background: rgba(124, 95, 255, 0.08); }
.ai-opt-banner-oplabel { font-weight: 700; color: var(--text); }
.ai-opt-banner-opmeta { color: var(--text-3); }
.ai-opt-banner-opchange { color: var(--purple); font-weight: 600; }
.ai-opt-banner-opmore { color: var(--text-3); font-style: italic; cursor: default; }
.toolbar-cluster { display: flex; align-items: center; gap: 6px; }
.toolbar-range { font-size: 12px; font-weight: 600; margin-left: 6px; color: var(--text-2); }
.toolbar-field { flex-direction: row; align-items: center; gap: 6px; }
.toolbar-label { margin: 0; }
.toolbar-select { height: 28px; font-size: 11px; }
.toolbar-checkbox-label { font-size: 11px; font-weight: 600; color: var(--text-2); }
.toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.toolbar-hint { display: flex; gap: 6px; font-size: 10px; color: var(--text-3); align-items: center; }
.toolbar-fs-actions { display: flex; gap: 6px; }
.aps-scale-reset { padding: 5px 9px; }
.gantt-bar-ai-badge { position: absolute; top: -3px; left: -3px;
  background: linear-gradient(135deg,#a78bfa,#7c5fff); color: white;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(124,95,255,0.55); z-index: 2;
  letter-spacing: 0.02em; }
.gantt-header-r.stack { height: auto; flex-direction: column; align-items: stretch; }
.gantt-header-stack { display: flex; flex-direction: column; }
.gantt-header-row { display: grid; min-height: 22px; }
.gantt-header-row.top { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.gantt-header-row.bottom { min-height: 22px; }
.gantt-header-row.top .gantt-tick-day-over { font-size: 10px; padding: 4px 6px;
  border-right: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; gap: 6px; }
.gantt-header-row.top .gantt-tick-day-over .day-num { display: inline; font-size: 11px; }
.gantt-header-row.top .gantt-tick-day-over .day-name {
  display: inline; font-size: 9px; color: var(--text-3); margin-left: 4px;
}
.gantt-wrap { position: relative; display: flex; gap: 12px; align-items: stretch; }
.gantt-wrap > .gantt { flex: 1; min-width: 0; }
.ai-changes-rail { width: 240px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: 440px; }
.ai-changes-rail-h { padding: 10px 12px; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(124,95,255,0.10), rgba(91,141,239,0.05)); }
.ai-changes-rail-title { font-size: 11px; font-weight: 700;
  color: var(--purple); display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.04em; }
.ai-changes-rail-b { flex: 1; overflow-y: auto; padding: 4px 0; }
.ai-changes-rail-row { display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 12px; background: transparent; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--border); text-align: left; }
.ai-changes-rail-row:last-child { border-bottom: none; }
.ai-changes-rail-row:hover { background: var(--surface-2); }
.ai-changes-rail-row-l { display: flex; flex-direction: column; gap: 2px; }
.ai-changes-rail-op { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.ai-changes-rail-product { font-size: 12px; font-weight: 700; line-height: 1.3; }
.ai-changes-rail-meta { font-size: 10px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.ai-changes-rail-detail { font-size: 11px; font-weight: 700; color: var(--purple); flex-shrink: 0; }
.ai-changes-rail-f { padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--surface-2); display: flex; justify-content: flex-end; }
.ai-changes-rail-pill { position: fixed; right: 16px; bottom: 80px; z-index: 90;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  background: linear-gradient(135deg,#7c5fff,#5b8def); color: white; border: 0;
  border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(124,95,255,0.40); }
@media (max-width: 1280px) {
  .gantt-wrap { flex-direction: column; }
  .ai-changes-rail { width: 100%; max-height: 220px; }
}
.ai-opt-published { display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin: 12px 0 0; font-size: 11px; font-weight: 700;
  color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border);
  border-radius: 999px; }
.ai-plan-mode-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; background: white; border: 1px solid #e2eef2; border-radius: 8px;
  margin-bottom: 10px; }
.ai-plan-mode-field { display: flex; flex-direction: column; gap: 4px; }
.ai-plan-mode-field label { font-size: 10px; color: #5b7280; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; }
.ai-plan-mode-field input { padding: 6px 8px; border: 1px solid #d5dde0;
  border-radius: 6px; font-size: 12px; }
.ai-plan-mode-toggle { display: flex; gap: 4px; padding: 2px;
  background: #f5f7f8; border-radius: 6px; border: 1px solid #e2eef2; }
.ai-plan-mode-toggle button { padding: 6px 10px; background: transparent; border: 0;
  font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 4px; color: #5b7280; }
.ai-plan-mode-toggle button.active { background: white; color: #0a8da8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.ai-proposals-list { display: flex; flex-direction: column; gap: 6px;
  max-height: 300px; overflow: auto; padding-right: 2px; }
.ai-proposals-empty { padding: 16px; color: #94a3b8; font-size: 12px; text-align: center; }
.ai-proposal-row { display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: white; border: 1px solid #e2eef2;
  border-radius: 8px; transition: opacity .2s, border-color .2s; }
.ai-proposal-row.status-approved { border-color: #3aa66f; background: #f0faf3; }
.ai-proposal-row.status-rejected { opacity: 0.55; }
.ai-proposal-row.status-rejected .ai-proposal-title,
.ai-proposal-row.status-rejected .ai-proposal-detail { text-decoration: line-through; }
.ai-proposal-body { flex: 1; min-width: 0; }
.ai-proposal-title { font-size: 12px; font-weight: 700; color: #0c2730; }
.ai-proposal-meta {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.ai-proposal-chip {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  background: rgba(10, 141, 168, 0.08);
  color: #0a5a6c;
  border: 1px solid rgba(10, 141, 168, 0.18);
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  white-space: nowrap;
}
.ai-proposal-detail { font-size: 11px; color: #5b7280; margin-top: 4px; font-weight: 600; }
.ai-proposal-reasoning { font-size: 11px; color: #4a5b66; margin-top: 4px;
  padding: 6px 8px; background: #f3fbfd; border-left: 2px solid #5fb8c9;
  border-radius: 0 4px 4px 0; line-height: 1.4; }
.ai-proposal-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ai-proposal-actions .btn.sm.active { box-shadow: 0 0 0 2px rgba(58,166,111,0.45); }
.deviation-card { border-color: rgba(245,158,11,0.45); }
.deviation-card .field label { font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.icon-btn-sm { width: 24px; height: 24px; }
.batch-yield-row { display: flex; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 12px; align-items: center; }
.oee-bar-cell { width: 120px; }
.urg-badge { margin-left: 6px; }
.qa-btn { height: 22px; padding: 0 6px; font-size: 10px; }
.drawer-h-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; padding-right: 72px; }
.drawer-h-id { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.drawer-h-meta { font-size: 12px; color: var(--text-2); margin-top: 4px; }
/* Sipariş durumu rozeti — başlığın sağ üst köşesinde PLANLI / PROSES. */
.drawer-h-ordertype {
  position: absolute;
  top: 16px;
  right: 20px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.drawer-h-ordertype.durum-planli { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.drawer-h-ordertype.durum-proses { background: var(--ok-bg, #e6f5ee); color: var(--ok); border-color: var(--ok); }
.drawer-tabs-wrap { padding: 0 20px; border-bottom: 1px solid var(--border); }
.drawer-tabs { border-bottom: none; margin-bottom: 0; }
.op-drawer-card { margin-bottom: 14px; }
.op-drawer-card-flat { padding: 0; }
.op-drawer-progress-pct { font-size: 11px; }
.op-drawer-progress { height: 10px; }
.op-drawer-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin-top: 14px; }
.op-drawer-step { text-align: center; }
.op-drawer-step-bar { width: 100%; height: 6px; border-radius: 3px; margin-bottom: 6px; }
.op-drawer-step-label { font-size: 10px; font-weight: 600; }
.op-drawer-step-active { font-size: 9px; color: var(--text-3); }
/* Bağımlılıklar: full production-chain stage table (op-drawer). Each row = one
   stage with its route number, name, op id, effective start→end date/time, live
   status, and a focus button that scrolls the Gantt + opens relations. */
.op-dep-table td { vertical-align: middle; }
.op-dep-row.active { background: var(--brand-50, #eef2ff); }
.op-dep-row.active td { font-weight: 600; }
.op-dep-step { white-space: nowrap; }
.op-dep-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 7px;
  border-radius: 50%; font-size: 10px; font-weight: 700;
  background: var(--surface-3, #e8edf5); color: var(--text-2);
}
.op-dep-row.active .op-dep-step-no { background: var(--brand-500); color: #fff; }
.op-dep-step-name { font-size: 12.5px; }
.op-dep-code { font-size: 11px; color: var(--text-2); }
.op-dep-when { font-size: 11.5px; line-height: 1.35; white-space: nowrap; }
.op-dep-when-end { font-size: 10.5px; }
.op-dep-action { text-align: right; width: 34px; }
.op-dep-focus-btn { width: 24px; height: 24px; }
.material-name { font-weight: 600; }
.material-lot { font-size: 10px; color: var(--text-3); }
.op-staff-row { display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); }
.op-staff-avatar { width: 32px; height: 32px; font-size: 12px;
  background: linear-gradient(135deg,#5b8def,#3461db); }
.op-staff-name { font-weight: 600; font-size: 13px; }
.op-staff-role { font-size: 11px; color: var(--text-3); }
.op-audit-banner { display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--info-bg); border-radius: 8px;
  margin-bottom: 14px; font-size: 11px; color: var(--info); }
.kv-label { font-size: 10px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600; margin-bottom: 2px; }
.kv-value { font-size: 13px; font-weight: 600; }
.flow-step-num { width: 22px; height: 22px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* short-batch warning + decision modal */
.batch-warn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-border, var(--warn));
  cursor: pointer;
  vertical-align: middle;
  padding: 0;
}
.batch-warn-badge:hover { background: var(--warn); color: white; }

/* Orders page: per-row "show relations in the Çizelge" deeplink button. */
.order-id-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-relations-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  color: var(--brand-600, var(--brand-500));
  background: var(--brand-50, var(--surface-2));
  border: 1px solid var(--brand-200, var(--border));
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  flex: 0 0 auto;
}
.order-relations-btn:hover {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.order-decision-modal {
  width: 480px;
  max-width: 92vw;
  margin: auto;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  animation: fadeIn 0.18s;
}
.order-decision-modal-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.order-decision-modal-h h2 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--text);
}
.order-decision-modal-b { padding: 14px 18px; }
.order-decision-summary { font-size: 13px; color: var(--text); margin: 0 0 14px; }
.order-decision-actions { display: flex; flex-direction: column; gap: 8px; }
.order-decision-action { width: 100%; justify-content: flex-start; text-align: left; }
.order-decision-candidates {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  max-height: 220px;
  overflow: auto;
}
.order-decision-candidate {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.order-decision-candidate:last-child { border-bottom: 0; }
.order-decision-candidate-id { font-family: var(--mono); font-size: 11px; color: var(--text); font-weight: 600; }
.order-decision-candidate-info { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.order-decision-empty { font-size: 12px; color: var(--text-3); text-align: center; padding: 12px 0; }

/* Plan Dondur — date-range freeze popover */
.freeze-popover {
  position: fixed; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); width: 360px; padding: 12px; z-index: 50;
}
.freeze-popover-h { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.freeze-chip-row { display: flex; gap: 6px; margin-bottom: 10px; }
.freeze-date-row { display: flex; gap: 8px; margin-bottom: 10px; }
.freeze-counter { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.freeze-help { font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
.freeze-clear-all {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
}
.freeze-clear-all-count { font-size: 12px; font-weight: 600; color: #b91c1c; }
.freeze-popover-f { display: flex; gap: 6px; justify-content: flex-end; }

/* Çizelge — clickable toolbar date range + view-range picker popover */
.toolbar-range-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); cursor: pointer;
  padding: 4px 9px; margin-left: 6px;
  color: var(--text-2); line-height: 1;
  transition: background .12s ease, border-color .12s ease;
}
.toolbar-range-btn:hover { background: var(--surface-2, #f6f7f9); border-color: var(--brand-300, #93c5fd); }
.toolbar-range-btn svg { color: var(--text-3); }
.toolbar-range-btn:hover svg { color: var(--brand-600, #2563eb); }

.range-popover {
  position: fixed; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); width: 340px; padding: 12px; z-index: 50;
}
.range-popover-h { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.range-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.range-date-row { display: flex; gap: 8px; margin-bottom: 10px; }
.range-summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.range-summary-days { font-size: 13px; font-weight: 700; color: var(--brand-700, #1d4ed8); }
.range-summary-span { font-size: 11px; color: var(--text-3); }
.range-invalid { font-size: 12px; color: #b91c1c; margin-bottom: 10px; }
.range-note { font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
.range-popover-f { display: flex; align-items: center; gap: 6px; }

/* P2/B6 .matsim-* (Material stock-reduction simulation panel) lives in
   styles/app-meet.css. */

/* ===================== Shifts (Vardiyalar) page ===================== */
.page-shifts { padding: 4px 4px 24px; }
.page-shifts .title-block {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 18px;
}
.page-shifts .title-block h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.page-shifts .title-block .subtitle { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.shifts-summary { display: flex; gap: 14px; align-items: center; }
.shifts-summary-tile {
  background: linear-gradient(180deg, var(--brand-50), var(--surface));
  border: 1px solid var(--brand-200);
  border-radius: 12px; padding: 10px 16px; min-width: 200px;
}
.shifts-summary-label {
  font-size: 10px; color: var(--brand-700); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.shifts-summary-value { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }
.shifts-summary-suffix { font-size: 13px; color: var(--text-3); margin-left: 3px; font-weight: 600; }
.shifts-summary-delta { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.shifts-week-picker {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-1);
}
.shifts-week-picker .btn-icon {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: all 120ms;
}
.shifts-week-picker .btn-icon:hover {
  border-color: var(--brand-400); color: var(--brand-600); background: var(--brand-50);
}
.shifts-week-label { display: flex; flex-direction: column; min-width: 200px; }
.shifts-week-range { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.shifts-week-sub {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  display: flex; align-items: center; gap: 8px;
}
.shifts-week-badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-700);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; border: 1px solid var(--brand-200);
}
.shifts-week-actions {
  margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.btn-ghost {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-2); padding: 7px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all 120ms;
}
.btn-ghost:hover { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); }
.btn-secondary[disabled] { opacity: 0.45; cursor: not-allowed; }

.shifts-card { padding: 0; overflow: hidden; }
.shifts-legend {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--text-3); background: var(--surface-2);
}
.shifts-legend-dots { display: flex; gap: 14px; align-items: center; }
.shifts-collapse-all {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 1px solid var(--border-2); border-radius: 6px;
  padding: 4px 9px; font-size: 11px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: all 120ms;
}
.shifts-collapse-all:hover { border-color: var(--brand-400); color: var(--brand-600); }
.shifts-collapse-all .icon { color: var(--text-3); }
.shifts-collapse-all:hover .icon { color: var(--brand-600); }

/* Hat (area) group header — collapsible, with per-hat roll-up stats */
.shifts-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  cursor: pointer; user-select: none; transition: background 120ms;
}
.shifts-group:first-child .shifts-group-head { border-top: 0; }
.shifts-group-head:hover { background: var(--surface-3, var(--surface-2)); }
.shifts-group-head:focus-visible { outline: 2px solid var(--brand-400); outline-offset: -2px; }
.shifts-group-head.is-collapsed { background: var(--surface); }
.shifts-group-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.shifts-group-title > .icon { color: var(--text-3); flex-shrink: 0; }
.shifts-group-count { font-size: 11px; color: var(--text-3); font-weight: 600; }
.shifts-group-warn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-radius: 5px; padding: 2px 6px;
}
.shifts-group-stats { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.shifts-group-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.shifts-group-stat-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); font-weight: 600;
}
.shifts-group-stat strong { font-size: 14px; font-weight: 700; color: var(--text); }
.shifts-group-stat .muted { font-size: 10px; color: var(--text-3); margin-left: 1px; font-weight: 600; }
.shifts-legend-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}
.shifts-legend-dot.active { background: var(--brand-600); }
.shifts-legend-dot.inactive { background: var(--surface-4); border: 1px solid var(--border-2); }

.shifts-list { width: 100%; }
.shifts-list-head, .shifts-row {
  display: grid;
  grid-template-columns: 130px 120px 100px 105px 270px 70px;
  gap: 10px; align-items: center; padding: 12px 16px;
}
.shifts-cell-occupancy {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.shifts-occ-bar {
  height: 6px; background: var(--brand-50); border-radius: 4px; overflow: hidden;
  width: 100%;
}
.shifts-occ-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transition: width 240ms ease;
}
.shifts-occ-bar.is-overload .shifts-occ-bar-fill {
  background: linear-gradient(90deg, var(--warn), var(--danger));
}
/* Backend capacity refresh in flight — last-known value shown dimmed. */
.shifts-occ-bar.is-stale .shifts-occ-bar-fill { opacity: 0.45; }
.shifts-cap-warn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--warn); font-weight: 600;
}
/* İçe Aktar panel (shifts-import.jsx) */
.shifts-io-panel { margin-bottom: 14px; }
.shifts-io-errors {
  border: 1px solid var(--warn); border-radius: 8px;
  background: var(--warn-bg, rgba(217, 119, 6, 0.08));
  padding: 8px 10px; margin-bottom: 8px; font-size: 12.5px;
}
.shifts-io-group-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  margin-top: 4px;
}
.shifts-occ-pct { font-size: 12px; font-weight: 700; color: var(--text); }
.shifts-occ-pct-suffix { font-size: 10px; color: var(--text-3); margin-left: 1px; font-weight: 600; }
.shifts-list-head > div:last-child { padding-left: 2px; }
.shifts-list-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.shifts-list-head .right, .shifts-row .right { text-align: right; }
.shifts-row { border-bottom: 1px solid var(--border); transition: background 120ms; }
.shifts-row:last-child { border-bottom: 0; }
.shifts-row:hover { background: var(--surface-2); }
.shifts-row.is-partial { background: rgba(253, 242, 226, 0.25); }
.shifts-row.is-partial:hover { background: rgba(253, 242, 226, 0.55); }

.shifts-cell-machine { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.shifts-cell-machine .icon { color: var(--brand-600); flex-shrink: 0; }
.shifts-cell-window {
  font-family: var(--mono, monospace); font-size: 12px; color: var(--text-2);
  letter-spacing: -0.01em;
}
.shifts-cell-weekly strong { font-size: 16px; font-weight: 700; }
.shifts-cell-weekly .muted { font-size: 11px; color: var(--text-3); margin-left: 3px; }

.area-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--surface-3); color: var(--text-2);
}
.area-pill.area-gran { background: #e0f2fe; color: #075985; }
.area-pill.area-tab { background: #fef3c7; color: #92400e; }
.area-pill.area-coat { background: #ede9fe; color: #5b21b6; }
.area-pill.area-pack { background: #dcfce7; color: #166534; }
.area-pill.area-tartim { background: #fee2e2; color: #991b1b; }

.shift-count-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-3); border-radius: 8px;
}
.shift-count-pill {
  width: 30px; height: 28px; border: 0; background: transparent;
  color: var(--text-2); font-weight: 700; font-size: 13px;
  border-radius: 6px; cursor: pointer; transition: all 120ms;
}
.shift-count-pill:hover { background: var(--surface); color: var(--text); }
.shift-count-pill.active {
  background: var(--brand-600); color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.day-toggles { display: inline-flex; gap: 4px; }
.day-pill {
  min-width: 34px; height: 30px; padding: 0 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-3); font-size: 11px; font-weight: 700;
  border-radius: 6px; cursor: pointer; transition: all 120ms;
}
.day-pill:hover { border-color: var(--brand-400); color: var(--text-2); }
.day-pill.active {
  background: var(--brand-50); border-color: var(--brand-400);
  color: var(--brand-700);
}

.btn-link {
  background: transparent; border: 0; color: var(--text-3);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
}
.btn-link:hover { color: var(--brand-600); background: var(--brand-50); }

.shifts-hint {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-2); font-size: 12px;
}
.shifts-hint .icon { color: var(--brand-600); margin-top: 2px; flex-shrink: 0; }

/* ===================== Saha / Operatör (tablet-optimized) =====================
   D7 follow-up: operator panel is run on shop-floor tablets, so the active
   batch info + action buttons are sized for finger taps (≥44px hit area),
   and the next-orders list shows ALL upcoming ops in a scrollable column. */
.operator-tablet {
  max-width: 1600px;
}
.operator-fallback-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
}
.operator-fallback-notice svg { flex: 0 0 auto; }
.operator-tablet-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) {
  .operator-tablet-grid { grid-template-columns: 1fr; }
}
.operator-active-card .card-h h3,
.operator-sonraki-card .card-h h3 { font-size: 16px; }
.operator-active-card .card-b { padding: 20px 22px 22px; }
.operator-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 700px) {
  .operator-pickers { grid-template-columns: 1fr; }
}
.operator-field label {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-bottom: 6px;
}
.operator-select.select {
  height: 52px;
  font-size: 16px;
  font-weight: 600;
  padding: 0 14px;
}
.operator-active-info {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.operator-active-product {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 8px;
}
.operator-active-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--text-2);
  font-weight: 600;
}
.operator-meta-sep { color: var(--text-3); }
.operator-batch-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}
.operator-batch-pill-sm {
  padding: 2px 8px;
  font-size: 11px;
}
.operator-active-step {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-3);
  font-weight: 500;
}
.operator-active-running {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.32);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.operator-running-dot {
  width: 8px; height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse-ok 1.4s ease-in-out infinite;
}
@keyframes pulse-ok {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}
.operator-active-empty {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}
.operator-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.operator-btn {
  height: 60px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  padding: 0 20px;
  gap: 10px;
}
.operator-btn-start {
  font-size: 16px;
}
.operator-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.operator-sonraki-card .card-h {
  display: flex; align-items: center; justify-content: space-between;
}
.operator-sonraki-count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 28px; height: 22px;
  padding: 0 8px;
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.operator-sonraki-body {
  padding: 0;
  max-height: 720px;
  overflow-y: auto;
}
.operator-sonraki-empty {
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}
.operator-sonraki-row {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.operator-sonraki-row:last-child { border-bottom: none; }
.operator-sonraki-row:hover { background: var(--surface-2); }
.operator-sonraki-idx {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.operator-sonraki-body-col { flex: 1; min-width: 0; }
.operator-sonraki-product {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.25;
}
.operator-sonraki-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
}
.operator-sonraki-step {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.35;
}

/* -- Saha manual data management: toolbar, event-log edit, import modal ---- */
.operator-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.operator-active-paused {
  color: #92400e;
  background: #fffbeb;
  border-color: #fcd34d;
}
.operator-paused-dot { background: #d97706; animation: none; }
.operator-btn-resume { border-color: var(--brand-200); color: var(--brand-700); }
.operator-event-log {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.operator-event-log-h {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.operator-event-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border);
}
.operator-event-row:last-child { border-bottom: none; }
.operator-event-time { font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 44px; }
.operator-event-kind { font-weight: 700; }
.operator-event-pause { color: #d97706; }
.operator-event-resume { color: var(--brand-700); }
.operator-event-finish { color: #15803d; }
.operator-event-late { color: #b91c1c; }
.operator-event-start { color: var(--brand-700); }
.operator-event-reason { color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operator-event-who { color: var(--text-3); font-size: 12px; margin-left: auto; white-space: nowrap; }
.operator-event-actions { display: flex; gap: 6px; }
/* Correction affordances keep the panel's ≥44px finger-tap standard (the small
   glyph sits centered in a full-size hit area; adjacent edit/delete stay 6px
   apart so a destructive delete is not easily mis-tapped on a tablet). */
.operator-event-btn { padding: 8px; min-height: 44px; min-width: 44px; justify-content: center; }
.operator-import-modal { width: min(860px, 94vw); max-height: 88vh; overflow-y: auto; }
.operator-edit-modal { width: min(480px, 94vw); }
.operator-import-sources { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.operator-import-paste { font-family: var(--mono, monospace); font-size: 12px; resize: vertical; }
.operator-import-error {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.25);
}
.operator-import-preview { margin-top: 12px; }
.operator-import-counts { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.operator-import-tbl { max-height: 300px; overflow-y: auto; margin-top: 8px; }
.operator-import-warn { color: #b45309; font-size: 12px; }
.operator-import-reanchor {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}

/* ===================== Makineler page — bigger tiles =====================
   Cards grow to fill screen on wide viewports with rich OEE breakdown. */
.machines-page { max-width: 1700px; }
.machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.machine-tile {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 3px solid var(--border);
  transition: box-shadow 0.15s, transform 0.15s;
}
.machine-tile:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}
.machine-tile--ok { border-top-color: #10b981; }
.machine-tile--warn { border-top-color: #f59e0b; }
.machine-tile--danger { border-top-color: #ef4444; }
.machine-tile-h {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.machine-tile-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.machine-tile-title { flex: 1; min-width: 0; }
.machine-tile-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 4px;
}
.machine-tile-id {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.machine-tile-id .code { color: var(--text-2); font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.machine-tile-id .sep { color: var(--text-3); }
.machine-tile-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.machine-tile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
}
.machine-tile-stat-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 4px;
}
.machine-tile-stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.machine-tile-stat-value .suf {
  font-size: 14px;
  color: var(--text-3);
  font-weight: 600;
  margin-left: 2px;
}
.machine-tile-stat-value--ok { color: #059669; }
.machine-tile-stat-value--warn { color: #d97706; }
.machine-tile-stat-value--danger { color: #dc2626; }
.machine-tile-stat-sub {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 4px;
  font-weight: 600;
}
.machine-tile-stat--lg { display: flex; flex-direction: column; }
.machine-tile-stat--lg svg { margin-top: 6px; }
.machine-tile-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.machine-tile-bd-row {
  display: grid;
  grid-template-columns: 110px 1fr 38px;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}
.machine-tile-bd-row .lbl {
  color: var(--text-3);
  font-weight: 600;
}
.machine-tile-bd-row .val {
  color: var(--text-2);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.machine-tile-bd-bar {
  height: 5px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.machine-tile-bd-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  border-radius: 999px;
}
/* ── Manual Kalite (quality) editor on the breakdown row ──────────────────── */
.machine-tile-bd-row--quality .lbl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.machine-tile-bd-row--quality.is-editing {
  grid-template-columns: 110px 1fr;   /* editor spans the bar + value columns */
}
.machine-tile-q-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  line-height: 14px;
}
.machine-tile-q-tag.is-set {
  color: var(--brand-600);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand-500) 35%, transparent);
}
.machine-tile-q-val {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--text-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 1px 3px;
  border-radius: 5px;
}
.machine-tile-q-val:hover { background: var(--surface-2); color: var(--brand-600); }
.machine-tile-q-val .icon { opacity: 0.45; }
.machine-tile-q-val:hover .icon { opacity: 0.9; }
.machine-tile-q-edit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  justify-content: flex-end;
}
.machine-tile-q-input {
  width: 48px;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 2px 4px;
  border: 1px solid var(--brand-500);
  border-radius: 5px;
  background: var(--surface-1);
  color: var(--text-1);
  -moz-appearance: textfield;
}
.machine-tile-q-input::-webkit-outer-spin-button,
.machine-tile-q-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.machine-tile-q-suf { font-size: 11px; color: var(--text-3); font-weight: 700; }
.machine-tile-q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
}
.machine-tile-q-btn:hover { background: var(--surface-2); }
.machine-tile-q-btn.ok { border-color: color-mix(in srgb, #10b981 50%, transparent); color: #059669; }
.machine-tile-q-btn.ok:hover { background: color-mix(in srgb, #10b981 14%, transparent); }
/* ── Per-machine Doluluk threshold editor (gauge button + popover) ────────── */
.machine-tile-stat-label--doluluk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.machine-doluluk-settings { position: relative; display: inline-flex; }
.machine-doluluk-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.machine-doluluk-gear:hover { background: var(--surface-2); color: var(--brand-600); }
.machine-doluluk-gear.is-open { background: var(--surface-2); color: var(--brand-600); border-color: var(--border); }
.machine-doluluk-gear.is-set { color: var(--brand-600); }
.machine-doluluk-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 232px;
  padding: 10px 11px 11px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  cursor: default;
}
.machine-doluluk-pop-h {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-1);
}
.machine-doluluk-pop-sub {
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-3);
  margin: 2px 0 9px;
}
.machine-doluluk-field {
  display: grid;
  grid-template-columns: 1fr 74px;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.machine-doluluk-field-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}
.machine-doluluk-field-in {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.machine-doluluk-input {
  width: 50px;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-1);
  color: var(--text-1);
  -moz-appearance: textfield;
}
.machine-doluluk-input:focus { border-color: var(--brand-500); outline: none; }
.machine-doluluk-input::-webkit-outer-spin-button,
.machine-doluluk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.machine-doluluk-field-suf { font-size: 11px; color: var(--text-3); font-weight: 700; }
.machine-doluluk-pop-foot {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
/* idle (no planned work in window) pill */
.pill.st-idle {
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.machine-tile-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
}
.machine-tile-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.machine-tile-foot-item .icon { opacity: 0.7; }

/* ===================== Material reports (Eksik / Kalite) ===================== */
.rptmat-kpis { margin-bottom: 14px; }
.kpi.rptmat-kpi-click { cursor: pointer; transition: box-shadow 120ms ease, transform 120ms ease; }
.kpi.rptmat-kpi-click:hover { box-shadow: var(--shadow-2, 0 2px 10px rgba(0,0,0,0.08)); transform: translateY(-1px); }
.kpi.rptmat-kpi--active { box-shadow: inset 0 0 0 2px var(--brand-500); }
.kpi.danger.rptmat-kpi--active { box-shadow: inset 0 0 0 2px var(--danger); }
.kpi.warn.rptmat-kpi--active { box-shadow: inset 0 0 0 2px var(--warn); }

.rptmat-toolbar { align-items: center; }
.rptmat-seg { display: inline-flex; gap: 4px; padding: 2px; background: var(--surface-2, #f1f5f9); border-radius: 8px; }
.rptmat-seg .btn { border: none; }

.rptmat-link { cursor: pointer; color: var(--brand-600); text-decoration: none; }
.rptmat-link:hover { text-decoration: underline; }

.rptmat-caret { display: inline-block; width: 12px; color: var(--text-3); font-size: 10px; }
tr.rptmat-group { cursor: pointer; }
tr.rptmat-group:hover { background: var(--surface-3, #f8fafc); }
tr.rptmat-group-detail > td { background: var(--surface-2, #f8fafc); padding: 0 12px 8px; }
.rptmat-subtable .table { font-size: 11.5px; }
.rptmat-subtable .table th { font-size: 10px; }

.rptmat-cov { height: 6px; width: 100%; background: var(--brand-50); border-radius: 3px; overflow: hidden; margin-bottom: 2px; }
.rptmat-cov-fill { height: 100%; border-radius: 3px; }

.rptmat-spark { display: block; overflow: visible; }

/* ===================== BHT Aşanlar report ===================== */
.rptbht-kpis { margin-bottom: 14px; }
.rptbht-toolbar { align-items: center; }
.rptbht-gauge { display: block; }
.rptbht-link { cursor: pointer; color: var(--brand-600); display: inline-flex; align-items: center; }
.rptbht-link:hover { color: var(--brand-700); }
.rptbht-pareto { height: 8px; width: 100%; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin-bottom: 2px; }
.rptbht-pareto-fill { height: 100%; background: var(--danger); border-radius: 4px; }
/* Limitler paneli: düzenlenebilir matris hücreleri + override işareti */
.rptbht-limit-cell:hover { background: var(--surface-2); }
.rptbht-limit-cell--editing { background: var(--surface-2); }
.rptbht-limit-dot { color: var(--brand-700); font-size: 8px; margin-left: 4px; vertical-align: middle; }
.rptbht-limit-editlink { cursor: pointer; color: var(--brand-600); font-size: 10px; white-space: nowrap; }
.rptbht-limit-editlink:hover { color: var(--brand-700); text-decoration: underline; }

/* "Fresh data is ready" auto-refresh banner — entrance + re-pulse on each new
   build (the React key={bump} remounts the node so this animation replays). */
.ppds-update-banner { animation: ppdsUpdBannerIn .42s cubic-bezier(.2,.8,.2,1); }
@keyframes ppdsUpdBannerIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.96); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.015); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ===== Üretim Müdürü — Üretim Hedefi / ay sonu tahmini paneli (E1) ===== */
.pm-tgt-card { margin-top: 14px; }
.pm-tgt-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pm-tgt-title h3 { margin: 0; }
.pm-tgt-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.pm-tgt-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-tgt-month { min-width: 128px; }
.pm-tgt-body { display: flex; flex-direction: column; gap: 16px; }
.pm-tgt-none { padding: 18px 4px; font-size: 13px; text-align: center; }
.pm-tgt-level-h {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.pm-tgt-level-name { font-weight: 700; font-size: 13px; }
.pm-tgt-level-unit { font-size: 11px; color: var(--text-3); }
.pm-tgt-tablewrap { overflow-x: auto; }
.pm-tgt-table { width: 100%; min-width: 640px; }
.pm-tgt-table th { white-space: nowrap; }
.pm-tgt-machine { font-weight: 600; }
.pm-tgt-input { width: 84px; text-align: right; padding: 2px 6px; }
.pm-tgt-empty { font-size: 11.5px; font-style: italic; }
.pm-tgt-att-wrap { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.pm-tgt-att-bar {
  display: inline-block; width: 54px; height: 6px; border-radius: 3px;
  background: var(--border); overflow: hidden;
}
.pm-tgt-att-bar > span { display: block; height: 100%; border-radius: 3px; }
.pm-tgt-att-val { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.pm-tgt-confirmed { font-weight: 600; color: var(--ok); }
.pm-tgt-total td { border-top: 2px solid var(--border-2); font-weight: 600; }
.pm-tgt-footnote { font-size: 11px; color: var(--text-3); line-height: 1.5; margin-top: 2px; }
.pm-tgt-recorded { font-weight: 600; color: var(--ok); }
.pm-tgt-blend { margin-left: 5px; font-size: 9.5px; text-transform: none; }

/* ===== Backend production-summary state banner (#/production). */
.pm-sum-state {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
  border: 1px solid var(--border);
  color: var(--text-2); background: var(--surface-2, var(--surface));
}
.pm-sum-state.is-stale { border-color: var(--warn); color: var(--warn); }
.pm-sum-state.is-down { border-color: var(--danger); color: var(--danger); }
.pm-sum-err { font-size: 10.5px; opacity: 0.8; }

/* ===== Gerçekleşen Üretim manual entry + import (#/production). */
.pm-act-card { margin-top: 14px; }
.pm-act-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pm-act-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; max-width: 560px; }
.pm-act-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-act-machine { min-width: 170px; }
.pm-act-month { width: 110px; }
.pm-act-tablewrap { max-height: 380px; overflow: auto; }
.pm-act-table th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.pm-act-input { width: 100px; padding: 3px 6px; font-size: 12px; }
.pm-act-note-input { width: 100%; min-width: 140px; }
.pm-act-row.has-rec .pm-act-date { font-weight: 600; }
.pm-act-meta { font-size: 11px; white-space: nowrap; }
.pm-act-total td { border-top: 2px solid var(--border-2); font-weight: 600; }
.pm-act-none { font-size: 12px; padding: 10px 2px; }
.pm-kutu-rec-pill { margin-left: 6px; font-size: 9px; }
.pm-kutu-bar > span.is-recorded { background: var(--ok); }

.pm-act-import { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.pm-act-import-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-act-import-hint { font-size: 11px; }
.pm-act-import-preview { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.pm-act-import-sum { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.pm-act-imp-group { margin: 4px 0; }
.pm-act-imp-group.is-issue .pm-act-imp-group-h { color: var(--warn); }
.pm-act-imp-group-h {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  background: none; border: none; cursor: pointer; color: var(--text-1); padding: 3px 0;
}
.pm-act-imp-group-b { padding: 2px 0 4px 20px; max-height: 200px; overflow: auto; }
.pm-act-imp-row { font-size: 11.5px; color: var(--text-2); padding: 1px 0; font-variant-numeric: tabular-nums; }
.pm-act-import-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ===================== Makineler — edit modal delete bar + import panel ===== */
/* The delete action rides ABOVE the EntityFormModal overlay (z100) as a fixed
   bottom-center bar, so the reusable modal stays generic. Inline two-step
   confirm — never window.confirm (blocks browser automation). */
.machines-edit-delete {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 120;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 8px 30px rgba(15,23,42,0.18);
  font-size: 13px;
}
.machines-edit-delete .btn.danger { color: var(--danger); border-color: var(--danger); }

/* ==== styles/app-meet-shell.css ==== */
/* PPDS — meet-12-05-2026 shell stylesheet. Split from app-meet.css so
   each file stays under the 400-LOC budget. Owns sidebar/topbar/login
   + page placeholders (D9 exec deferred, D10 nav-disabled) + machine
   cards + dashboards-content + settings + integrations. AI drawer/chat
   + audit rows moved out to app-meet-ai.css. */

/* ===== D10 (meet-12-05-2026): Kalite stub — dimmed nav slot, hover muted. */
.nav-item.is-disabled { color: var(--text-3); opacity: 0.6; cursor: not-allowed; }
.nav-item.is-disabled:hover { background: transparent; color: var(--text-3); }
.nav-item.is-disabled .nav-icon { color: var(--text-3); }

/* ===== D9 (meet-12-05-2026): ExecutiveDashboard deferred placeholder.
   Replaces the old FPY/OTIF/Stok değeri widget grid with a clean
   centred message — the Yönetim ekibi ile görüşülecek phrasing comes
   from i18n (`t.nav.executiveDeferred`). */
.executive-deferred {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 32px;
  min-height: 60vh;
  gap: 14px;
}
.executive-deferred-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.executive-deferred-title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.executive-deferred-msg {
  max-width: 480px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

/* ===== Login/topbar inline-style extractions — keep JSX lines short. */
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.login-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, #3461db, #1f3f9c);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
}
.login-brand-title { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.login-brand-sub {
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.login-submit { width: 100%; justify-content: center; }
.topbar-ai-btn {
  background: linear-gradient(135deg, var(--brand-50), #f5e8ff);
  border-color: var(--brand-200);
  color: var(--brand-700);
}
.topbar-logout-btn { width: 24px; height: 24px; border: none; }
.sidebar-audit-id { font-size: 10px; color: var(--text-3); padding: 4px 10px; }
.toast-close-btn { width: 24px; height: 24px; border: none; }
.cell-sub { font-size: 10px; color: var(--text-3); }
.progress-pct { font-size: 9px; margin-top: 2px; }
.avatar-mg {
  width: 24px;
  height: 24px;
  font-size: 10px;
  background: linear-gradient(135deg, #5b8def, #3461db);
}
.order-drawer-tip {
  border-color: var(--info-border);
  background: var(--info-bg);
}
.order-drawer-tip-icon { color: var(--info); flex-shrink: 0; }
.campaign-rules-body { font-size: 12px; }
.campaign-rule { padding: 8px 0; border-bottom: 1px solid var(--border); }
.campaign-rule--last { border-bottom: 0; }
.machine-icon--sm { width: 24px; height: 24px; }
.machine-name { font-weight: 600; font-size: 12px; }
.heat-cell--inline { margin: 2px; border-radius: 4px; }
.icon-btn--sq24 { width: 24px; height: 24px; }

/* ===== Machine cards — capacity / utilization tiles. */
.machine-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.machine-card-id-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 2px;
}
.machine-card-id { font-size: 10px; }
.machine-card-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.machine-card-area { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.machine-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 10px;
}
.machine-card-util-label { font-size: 10px; color: var(--text-3); }
.machine-card-util-value { font-weight: 700; font-size: 18px; }

/* ===== User listing, settings, integrations, notif-rules. */
.user-cell { display: flex; align-items: center; gap: 8px; }
.user-avatar { width: 26px; height: 26px; font-size: 10px; }
.settings-lang-intro { font-size: 12px; margin-bottom: 10px; }
.settings-lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.settings-lang-name { font-weight: 600; font-size: 13px; }
.settings-lang-desc { font-size: 11px; color: var(--text-3); }
.integration-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.integration-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
}
.integration-name { font-weight: 600; font-size: 12px; }
.integration-protocol { font-size: 10px; color: var(--text-3); }
.notif-rule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.notif-rule-name { font-weight: 600; font-size: 12px; }
.notif-rule-meta { font-size: 10px; color: var(--text-3); }
.setting-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.setting-row-label { color: var(--text-3); }
.setting-row-value { font-weight: 500; }

/* ===== Dashboard-page heroes, chart bars, risk bubbles, panels. */
.hero-eyebrow {
  font-size: 11px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.hero-h2-sub { font-size: 14px; opacity: 0.7; font-weight: 500; }
.card-h-meta { font-size: 11px; }
.td-bar-cell { padding: 4px 10px; }
.quality-events-list { flex: 1; font-size: 12px; }
.quality-events-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.quality-events-row--last { border-bottom: 0; }
.chartbars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  padding-top: 10px;
}
.chartbars-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
}
.chartbars-bars {
  flex: 1;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  width: 100%;
  justify-content: center;
}
.chartbars-bar { width: 14px; border-radius: 2px 2px 0 0; }
.chartbars-bar--plan { background: var(--brand-200); }
.chartbars-bar--actual { background: var(--brand-600); }
.chartbars-label { font-size: 10px; color: var(--text-3); }
.risk-bubble-bg {
  position: relative;
  height: 180px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(220,252,231,0.4),
    rgba(254,226,226,0.4)
  );
}
.risk-bubble-axis {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  color: var(--text-3);
}
.risk-bubble-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9px;
  font-weight: 700;
}
.pending-actions-count { background: var(--danger-bg); color: var(--danger); }
.pending-action-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.pending-action-row.is-acted { opacity: 0.5; }
.pending-action-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.pending-action-f {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pending-action-sub { font-size: 10px; color: var(--text-3); }
.qa-action-cell { display: flex; gap: 4px; }
.deviation-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.deviation-row-h {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 3px;
}
.deviation-title { font-size: 12px; font-weight: 600; }
.deviation-sub { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.deviation-date { font-size: 10px; color: var(--text-3); margin-top: 4px; }
.qc-queue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.qc-queue-name { flex: 1; font-size: 12px; }
.qc-queue-track {
  flex: 2;
  height: 8px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.qc-queue-fill { height: 100%; }
.qc-queue-val { width: 24px; text-align: right; }
.training-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.training-row--last { border-bottom: 0; }
.training-icon-ok { color: var(--ok); }
.training-icon-warn { color: var(--warn); }
.training-icon-danger { color: var(--danger); }
/* The Depo "Hammadde stok durumu" card sits in a 2fr/1fr grid next to the
   Karantina feed; grid stretch makes both cards the row's (tallest) height.
   Make the stock card a flex column and let the table body grow to fill that
   height instead of a hard 380px cap — otherwise the table is clipped to
   380px while ~200px of the stretched card sits empty below it. The body
   still scrolls (overflow:auto) when the table out-grows the available space. */
.wh-stock-card { display: flex; flex-direction: column; }
.wh-stock-card .card-b.wh-stock-body { flex: 1 1 auto; min-height: 0; }
.wh-stock-body { padding: 0; overflow: auto; }
.wh-mat-code { font-size: 10px; }
.qua-row { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.qua-row-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 3px;
}
.qua-row-name { font-size: 12px; font-weight: 600; }
.qua-row-desc { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.wh-heat-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  font-size: 10px;
  font-weight: 600;
  color: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.wh-heat-caption { font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* ==== styles/app-meet-scheduler.css ==== */
/* PPDS — meet-12-05-2026 scheduler stylesheet (split from app-meet.css to
   keep each file under the 400-LOC project budget). Owns every Gantt-
   related rule introduced or rewritten as part of the meeting follow-up:
   the day/shift dividers (A6), the MRP-auto chip (D11), actual-vs-plan
   tinting (D8), the qa-yarimamul waiting block (B3), the inline Sipariş
   No popover (A7), and the A8 drag-block visual feedback (cursor +
   tooltip). Loaded AFTER app.css so these higher-specificity rules win. */

/* ===== P2/B3: yarımamul analiz waiting block — yellow-tinted dashed
   pattern so it reads visually as "non-machine gating" between bulk end
   and packaging. */
.gantt-bar.kind-qa-yarimamul {
  background: repeating-linear-gradient(45deg, #d4a72c, #d4a72c 6px, #ad861f 6px, #ad861f 12px);
  color: #1a1a0d;
}
.gantt-bar.kind-qa-yarimamul .bar-label { color: #1a1a0d; font-weight: 700; }

/* ===== A6 (meet-12-05-2026): day-divider at 00:00 is stronger than the
   shift dividers at 08:00 / 16:00. Both render in every zoom level on
   the hour-tick header AND inside machine rows so the planner sees the
   boundaries without scrolling up to the header. Meeting quote:
   "normalde bunlar 0 0'da, 8'de, 16'da olur". */
.gantt-tick-hour.midnight {
  border-left: 2px solid var(--brand-700);
}
.gantt-tick-hour.shift-start:not(.midnight) {
  border-left: 1px solid rgba(124,95,255,0.55);
}

/* ===== D11 (meet-12-05-2026): ambient "MRP otomatik" chip replaces the
   old "MRP Çalıştır" button. Stays inline in the toolbar actions cluster. */
.mrp-auto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.mrp-auto-chip-label { font-weight: 600; color: var(--text); }
.mrp-auto-chip-sub { color: var(--text-3); }

/* ===== A11 (meet-12-05-2026): the round red dot on top of the now-line
   was removed — Hasan asked for a clean vertical line instead. The line
   itself stays via the .gantt-now-overlay base rule (in app.css). D8
   (P3) actual-vs-plan tinting: a late-finished op carries .over-plan; an
   early-finished op carries .under-plan. Base layout (.gantt-bar.kind-
   prod) is untouched — we only stripe the bar so the overrun/under-run
   band is visually distinct. */
.gantt-bar.over-plan {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.22) 0,
    rgba(239, 68, 68, 0.22) 6px,
    transparent 6px,
    transparent 12px
  );
  outline: 1px solid rgba(239, 68, 68, 0.45);
}
.gantt-bar.under-plan {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.18) 0,
    rgba(16, 185, 129, 0.18) 6px,
    transparent 6px,
    transparent 12px
  );
  outline: 1px solid rgba(16, 185, 129, 0.45);
}

/* ===== Production-area palette (22-05-2026): kind-prod bars carry an
   area-* class derived from machineById.get(displayedMachineId).area so
   the four production lines read at a glance instead of all-blue. Base
   `.gantt-bar.kind-prod` gradient stays in app.css and acts as the
   fallback when an op has no area or the machine lookup misses. Non-prod
   ops (cleanup / changeover / qa / maint / blocked / qa-yarimamul) keep
   their kind-* patterns since those carry orthogonal meaning. */
.gantt-bar.kind-prod.area-tartim { background: linear-gradient(180deg, #64748b, #475569); }
.gantt-bar.kind-prod.area-gran   { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
.gantt-bar.kind-prod.area-tab    { background: linear-gradient(180deg, #4570e0, #2a4fb8); }
.gantt-bar.kind-prod.area-coat   { background: linear-gradient(180deg, #0ea5e9, #0369a1); }
.gantt-bar.kind-prod.area-pack   { background: linear-gradient(180deg, #10b981, #047857); }

/* ===== A8 (meet-12-05-2026): drag-time visual feedback. When the user
   is mid-drag and hovering an invalid slot, body.gantt-dragging-blocked
   flips the cursor to not-allowed, and a small tooltip surfaces the
   localized reason near the cursor. Both signals clear on mouseup. */
body.gantt-dragging-blocked,
body.gantt-dragging-blocked * { cursor: not-allowed !important; }
.gantt-drag-block-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--danger-bg, #fee2e2);
  color: var(--danger, #b91c1c);
  border: 1px solid var(--danger, #b91c1c);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,0.15));
  /* Wrap long reasons so the red frame fully encloses the text instead of
     the message overflowing past the border (white-space:nowrap did that). */
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
  pointer-events: none;
  max-width: 280px;
}

/* ===== Resmi tatil günü vurgu — Türkiye resmi tatil tarihlerine düşen
   gantt header gün hücreleri kırmızı tonda gösterilir. .holiday hem
   .gantt-tick (Gün/Hafta görünümü) hem .gantt-tick-day-over (Saatlik
   görünümün üst günler şeridi) üzerinde aynı kuralı kullanır. Tooltip
   tatilin adını içerir (title attribute). */
.gantt-tick.holiday {
  background: rgba(179, 38, 30, 0.14);
}
.gantt-tick.weekend.holiday {
  background: rgba(179, 38, 30, 0.20);
}
.gantt-tick.holiday .day-num {
  color: var(--danger);
  font-weight: 700;
}
.gantt-tick.holiday .day-name {
  color: var(--danger);
}

/* ==== styles/app-meet-orders.css ==== */
/* PPDS — meet-12-05-2026 orders + order-tile colour stylesheet. Split
   from app-meet.css so each file stays under the 400-LOC budget. Owns
   D4's order-tile colour legend (production-bar and order-table row
   variants) introduced by the planning meeting. */

/* ===== D4 (meet-12-05-2026): order-tile colour legend.
   16-06-2026: the Çizelge (Gantt) operation bars no longer carry the
   per-op state colour — the 3px left-accent stripe (+ faint full-bar
   wash) was removed at user request, so bars now read by their area/kind
   gradient alone. The OrdersPage table keeps the same data-state legend
   below, where a thin coloured left accent on the first cell still reads
   cleanly. */
/* Order-table rows in OrdersPage carry the same data-state attribute;
   tint the row with a thin coloured left accent so the legend stays
   consistent. */
tr[data-state="validation"]       td:first-child { box-shadow: inset 3px 0 0 #facc15; }
tr[data-state="iemri-open"]       td:first-child { box-shadow: inset 3px 0 0 #86efac; }
tr[data-state="awaiting-qa"]      td:first-child { box-shadow: inset 3px 0 0 #d4d4d8; }
tr[data-state="material-missing"] td:first-child { box-shadow: inset 3px 0 0 #f87171; }


/* Machines page zoom controls */
.machines-zoom-group {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  background: var(--surface);
}
.machines-zoom-btn {
  height: 26px;
  min-width: 26px;
  padding: 0 6px;
  font-size: 11px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.machines-zoom-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.machines-zoom-btn:disabled { opacity: 0.35; cursor: default; }
.machines-zoom-reset { font-variant-numeric: tabular-nums; min-width: 38px; }

/* Machines page date range bar */
.machines-date-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 4px;
  flex-wrap: wrap;
}
.machines-date-presets {
  display: flex;
  gap: 4px;
}
.machines-date-preset {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.machines-date-preset:hover { background: var(--surface-3); color: var(--text); }
.machines-date-preset.active {
  background: var(--brand-50);
  border-color: var(--brand-400);
  color: var(--brand-700);
  font-weight: 600;
}
.machines-date-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.machines-date-sep { color: var(--text-3); font-size: 13px; }
.machines-date-input {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  outline: none;
}
.machines-date-input:focus { border-color: var(--brand-400); }

/* ==== styles/app-meet-stock-sim.css ==== */
/* PPDS — meet-12-05-2026 stock-sim panel stylesheet (B6). Split from
   app-meet.css so each file stays under the 400-LOC budget. Owns the
   master-stock-sim.jsx panel layout introduced by the planning meeting
   (P2/B6 material stock reduction simulation). */

/* ===== P2/B6 — Material stock-reduction simulation panel (master-stock-sim.jsx). */
.matsim-card { margin-top: 14px; }
.matsim-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 14px 16px;
}
.matsim-form { display: flex; flex-direction: column; gap: 10px; }
.matsim-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-2); }
.matsim-label span { font-weight: 600; }
.matsim-actions { display: flex; gap: 8px; margin-top: 4px; }
.matsim-active { font-size: 12px; }
.matsim-active-title { font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.matsim-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 11px;
}
.matsim-row:last-child { border-bottom: 0; }
.matsim-mat { font-weight: 600; color: var(--text); }
.matsim-arrow { color: var(--text-3); }
.matsim-qty { color: var(--orange); font-family: var(--mono); font-weight: 600; }
.matsim-orig { color: var(--text-3); font-family: var(--mono); font-size: 10px; }

/* ==== styles/app-meet-ai.css ==== */
/* PPDS — meet-12-05-2026 AI + audit stylesheet. Split from
   app-meet-shell.css so each file stays under the 400-LOC budget. Owns
   the AI drawer, AI chat page, AI agents sidebar, and audit-trail row
   styles. */

/* ===== AI quick-panel container. Docks under the topbar on the right and
   hosts the same offline answer engine as the full AI page. */
.ai-drawer {
  position: fixed;
  top: var(--topbar-h, 56px);
  right: 0;
  width: 388px;
  max-width: 94vw;
  height: calc(100vh - var(--topbar-h, 56px));
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  z-index: 220;
  animation: ai-drawer-in 0.18s ease-out;
}
@keyframes ai-drawer-in {
  from { transform: translateX(26px); opacity: 0.3; }
  to   { transform: none; opacity: 1; }
}
.ai-drawer-msgs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ai-drawer-msg {
  max-width: 92%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}
.ai-drawer-msg.user {
  align-self: flex-end;
  background: var(--brand-600);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-drawer-msg.ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.ai-drawer-msg-time { font-size: 9px; color: var(--text-3); margin-top: 4px; }
.ai-drawer-typing { letter-spacing: 2px; color: var(--text-3); }
.ai-drawer-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 0;
}
.ai-drawer-sug {
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
}
.ai-drawer-sug:hover { border-color: var(--brand-400); color: var(--brand-700); }

/* ===== AI drawer header/body — extracted from inline styles in app.jsx
   to keep JSX lines under the 120-char project budget. */
.ai-drawer-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-drawer-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c5fff, #5b8def);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.ai-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 14px;
  font-size: 12px;
  line-height: 1.55;
  background: var(--surface-2);
}
.ai-drawer-summary {
  background: var(--surface-1);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.ai-drawer-optimize-btn {
  justify-content: flex-start;
  width: 100%;
  background: linear-gradient(135deg, #7c5fff, #5b8def);
  border: none;
}

/* ===== AI page — sidebar + chat card + agents column. */
.ai-page {
  display: flex;
  gap: 14px;
  height: calc(100vh - 88px);
  padding: 14px;
}
.ai-sidebar {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-new-chat-btn { width: 100%; }
.ai-chat-history-h { border-bottom: 1px solid var(--border); }
.ai-chat-history-list { padding: 8px; overflow: auto; }
.ai-chat-history-item {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  margin-bottom: 2px;
  color: var(--text-1);
}
.ai-chat-history-item.is-active {
  background: var(--brand-50);
  color: var(--brand-700);
}
.ai-chat-history-when { font-size: 10px; color: var(--text-3); margin-top: 1px; }
.ai-systems-body { padding: 10px; font-size: 11px; }
.ai-system-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.ai-system-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.ai-chat-card { flex: 1; display: flex; flex-direction: column; }
.ai-chat-header { border-bottom: 1px solid var(--border); }
.ai-chat-title-row { display: flex; align-items: center; gap: 10px; }
.ai-chat-avatar-lg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c5fff, #5b8def);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.ai-chat-subtitle { font-size: 10px; color: var(--text-3); }
.ai-chat-stream {
  flex: 1;
  overflow: auto;
  padding: 18px 24px;
  background: var(--surface-2);
}
.ai-chat-row { display: flex; gap: 10px; margin-bottom: 18px; }
.ai-chat-row--user { flex-direction: row-reverse; }
.ai-chat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.ai-chat-avatar--user {
  background: linear-gradient(135deg, #5b8def, #3461db);
}
.ai-chat-avatar--ai {
  background: linear-gradient(135deg, #7c5fff, #5b8def);
}
.ai-chat-bubble-wrap { max-width: 78%; }
.ai-chat-bubble {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
  box-shadow: var(--shadow-sm);
}
.ai-chat-bubble--user { background: var(--brand-600); color: white; }
.ai-chat-bubble--ai { background: var(--surface-1); color: var(--text-1); }
.ai-chat-loading { font-size: 11px; }
.ai-chat-time {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 4px;
  text-align: left;
}
.ai-chat-time--user { text-align: right; }
.ai-chat-footer { border-top: 1px solid var(--border); padding: 14px; }
.ai-chat-examples {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ai-chat-example-btn { font-size: 11px; }
.ai-chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.ai-chat-input { flex: 1; resize: none; font-family: inherit; }
.ai-chat-footnote {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 6px;
  text-align: center;
}
.ai-agent-row { padding: 8px 0; }
.ai-agent-row--bordered { border-top: 1px solid var(--border); }
.ai-agent-row-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ai-agent-name { font-weight: 600; font-size: 12px; }
.ai-agent-pill { font-size: 9px; }
.ai-agent-desc { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.ai-agents-side {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-kb-body { padding: 10px; font-size: 11px; }
.ai-kb-item { padding: 4px 0; }
.ai-rec-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
}
.ai-rec-icon { color: var(--brand-600); flex-shrink: 0; margin-top: 2px; }
.ai-rec-desc { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.ai-rec-apply-btn { height: 24px; padding: 0 8px; font-size: 10px; }

/* ===== Audit trail rows + cells. */
.audit-filter-tab { padding: 4px 10px; }
.audit-cell-ts { font-size: 10px; white-space: nowrap; }
.audit-user-cell { display: flex; align-items: center; gap: 6px; }
.audit-avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
  background: linear-gradient(135deg, #5b8def, #3461db);
}
.audit-avatar--ai {
  background: linear-gradient(135deg, #7c5fff, #5b8def);
}
.audit-user-name { font-weight: 500; font-size: 11px; }
.audit-cell-role { font-size: 11px; }
.audit-action-pill { font-size: 10px; }
.audit-cell-obj { font-size: 11px; }
.audit-cell-det { font-size: 11px; color: var(--text-2); }
.audit-cell-sig { font-size: 10px; }
.cfr-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.cfr-value { font-size: 11px; color: var(--ok); font-weight: 600; }
.cfr-value-detail { font-weight: 400; }
.cc-tag-major { background: var(--warn-bg); color: var(--warn-text); }

/* ==== styles/app-meet-holding.css ==== */
/* PPDS — Holding / multi-site executive dashboard (Epic E5).
   docs/HOLDING-MULTISITE.md §7. Theme-aware via the app's CSS variables. */

.hd-page { padding: 20px 24px 40px; }

.hd-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.hd-title { font-size: 20px; font-weight: 700; margin: 0; }
.hd-sub { font-size: 13px; margin-top: 2px; }

.hd-group { display: flex; align-items: center; gap: 12px; }
.hd-group-status { font-weight: 700; }
.hd-group-meta { display: flex; flex-direction: column; align-items: flex-end; }
.hd-group-oee { font-size: 20px; font-weight: 800; }
.hd-group-conn { font-size: 12px; }

.hd-scope-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; margin-bottom: 18px;
}
.hd-scope-note svg { color: var(--brand-500); flex: 0 0 auto; }

/* ---- capacity status colour tokens (shared by pills, bars, edges) ---- */
.hd-green   { color: var(--ok); }
.hd-amber   { color: var(--warn); }
.hd-red     { color: var(--danger); }
.hd-unknown, .hd-notconnected { color: var(--text-3); }

.hd-status-pill { font-weight: 700; border: 1px solid currentColor; }
.hd-status-pill.hd-green   { background: var(--ok-bg); }
.hd-status-pill.hd-amber   { background: var(--warn-bg); }
.hd-status-pill.hd-red     { background: var(--danger-bg); }
.hd-status-pill.hd-unknown, .hd-status-pill.hd-notconnected { background: var(--surface-2); }

/* ---- plant cards ---- */
.hd-plant { margin-bottom: 16px; }
.hd-plant-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hd-plant-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hd-plant-id h3 { margin: 0; font-size: 16px; font-weight: 700; }
.hd-live-pill { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.hd-remote-url { font-size: 12px; font-family: var(--mono); }

.hd-local { border-left: 4px solid var(--border); }
.hd-edge-green  { border-left-color: var(--ok); }
.hd-edge-amber  { border-left-color: var(--warn); }
.hd-edge-red    { border-left-color: var(--danger); }
.hd-edge-unknown { border-left-color: var(--text-3); }

.hd-plant-b { padding-top: 4px; }

.hd-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.hd-tile {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.hd-tile-v { font-size: 22px; font-weight: 800; line-height: 1.1; }
.hd-tile-l { font-size: 11px; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }

.hd-areas-h { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.hd-areas { display: flex; flex-direction: column; gap: 8px; }
.hd-area-row { display: grid; grid-template-columns: 130px 1fr 48px 34px; align-items: center; gap: 10px; }
.hd-area-name { font-size: 13px; font-weight: 500; }
.hd-area-bar { height: 8px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.hd-area-fill { display: block; height: 100%; border-radius: 6px; }
.hd-area-fill.hd-green  { background: var(--ok); }
.hd-area-fill.hd-amber  { background: var(--warn); }
.hd-area-fill.hd-red    { background: var(--danger); }
.hd-area-fill.hd-unknown { background: var(--text-3); }
.hd-area-oee { font-size: 13px; font-weight: 700; text-align: right; }
.hd-area-mc { font-size: 12px; text-align: right; }
.hd-area-empty { font-size: 13px; padding: 6px 0; }

/* ---- native group rollup (NOBEL Phase F): group → company → plant → areas ---- */
.hd-rollup { display: flex; flex-direction: column; gap: 14px; }

.hd-company {
  border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: var(--radius); background: var(--surface-1);
  overflow: hidden;
}
.hd-company-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 16px; cursor: pointer;
  background: var(--surface-2); border: 0; text-align: left; color: inherit; font: inherit;
}
.hd-company-h:hover { background: var(--surface-3); }
.hd-company-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-company-id svg { flex: 0 0 auto; }
.hd-company-name { font-size: 15px; font-weight: 700; }
.hd-company-n { font-size: 12px; }
.hd-company-oee { font-size: 18px; font-weight: 800; }
.hd-company-plants { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }

/* drill-down plant card header (a button that toggles the area bars) */
.hd-drill { margin-bottom: 0; }
.hd-drill-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 14px; cursor: pointer;
  background: transparent; border: 0; text-align: left; color: inherit; font: inherit;
}
.hd-drill-h:hover { background: var(--surface-2); }
.hd-drill-h .hd-plant-id svg { flex: 0 0 auto; }
.hd-plant-hmeta { display: flex; align-items: center; gap: 10px; }
.hd-plant-oee { font-size: 16px; font-weight: 800; }
.hd-drill .hd-plant-b { padding: 4px 14px 14px; }

/* unreachable / outage plant (honest — no number) */
.hd-unreachable { opacity: .85; }
.hd-unreachable .hd-plant-h { padding: 10px 14px; }
.hd-unreachable-b { padding: 0 14px 12px; font-size: 12px; line-height: 1.4; }

/* ---- remote sites ---- */
.hd-remotes-h { font-size: 13px; font-weight: 700; color: var(--text-2); margin: 18px 0 10px; }
.hd-remotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.hd-remote { opacity: .92; }
/* denser tiles inside the narrower remote cards */
.hd-remote .hd-tiles { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.hd-remote .hd-tile { padding: 8px 10px; }
.hd-remote .hd-tile-v { font-size: 17px; }
.hd-remote .hd-area-row { grid-template-columns: 96px 1fr 44px 30px; }
.hd-remote-b { display: flex; align-items: center; gap: 12px; color: var(--text-3); }
.hd-remote-b svg { flex: 0 0 auto; }
.hd-remote-msg { font-size: 12px; line-height: 1.4; }

.hd-remote-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 28px 20px; color: var(--text-3);
  border: 1px dashed var(--border-strong); background: var(--surface-2);
}
.hd-remote-empty svg { color: var(--text-3); }
.hd-remote-empty-title { font-size: 14px; font-weight: 700; color: var(--text-2); }
.hd-remote-empty-msg { font-size: 12px; max-width: 520px; line-height: 1.5; }

.hd-footnote { font-size: 11px; margin-top: 20px; line-height: 1.5; }
.hd-unavailable {
  padding: 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hd-unavail-err { font-size: 11px; font-family: var(--mono); }

/* ---- manual entry / edit (§8 Phase 0.5) ---- */
.hd-head-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hd-head-actions .btn { display: inline-flex; align-items: center; gap: 6px; }

.hd-manual-pill { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.hd-plant-actions { display: flex; align-items: center; gap: 6px; }
.hd-card-btns { display: flex; gap: 8px; margin-top: 12px; }
.hd-remote-b { flex-wrap: wrap; }
.hd-remote-b .btn { margin-left: auto; }

.hd-stale-note {
  font-size: 12px; color: var(--warn);
  background: var(--warn-bg); border: 1px solid var(--warn);
  border-radius: var(--radius); padding: 6px 12px; margin-bottom: 12px;
}

.hd-del-confirm {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--danger);
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  border-radius: var(--radius); padding: 6px 10px; margin-bottom: 10px;
}
.hd-del-confirm span { flex: 1 1 auto; }

/* ---- editor modals (reuse entity-form-modal shell) ---- */
.entity-form-modal.hd-modal-wide { width: min(760px, calc(100vw - 48px)); }
.hd-modal-sub { font-size: 12px; margin-top: 2px; }
/* the shell's .entity-form-modal-b is a 2-col grid — our modals lay out their
   own sections, so force a block body (specificity must beat entity-form.css,
   which loads later in index.html) */
.entity-form-modal .entity-form-modal-b.hd-modal-b { display: block; }
.hd-modal-b .entity-form-row { margin-bottom: 10px; }
.hd-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.hd-field-err { font-size: 10.5px; color: var(--danger); }
.hd-footer-err { margin-right: auto; align-self: center; }
.hd-num { max-width: 110px; }

.hd-areas-edit { margin-top: 14px; }
.hd-areas-edit-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.hd-areas-table th { font-size: 10.5px; }
.hd-areas-table td { padding: 3px 6px; }
.hd-areas-table .input { height: 28px; font-size: 12.5px; }
.hd-areas-none { font-size: 12px; padding: 8px 0; }

.hd-paste { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.hd-paste-ta { flex: 1 1 auto; font-family: var(--mono); font-size: 11.5px; resize: vertical; }

@media (max-width: 640px) {
  .hd-area-row { grid-template-columns: 100px 1fr 44px; }
  .hd-area-mc { display: none; }
  .hd-form-grid { grid-template-columns: 1fr; }
}

/* ==== styles/app-scheduler-features.css ==== */
/* PPDS — Yeni çizelge özellikleri (F1-F9):
   Undo/Redo, multi-select, drag tooltip, doluluk heatmap, freeze band,
   kritik yol, klavye nav, senaryolar, AI gerekçe rail satırı.
   Loaded after app-meet-scheduler.css. */


/* ===== F8: AI değişiklikleri rail — Neden? toggle */
.ai-changes-rail-row-wrap {
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ai-changes-rail-row-wrap:last-child { border-bottom: none; }
.ai-changes-rail-row-wrap .ai-changes-rail-row { border-bottom: none; }
.ai-changes-rail-why {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: var(--purple);
  text-align: left;
}
.ai-changes-rail-why:hover { color: var(--brand-700, var(--purple)); }
.ai-changes-rail-row-wrap.open { background: var(--surface-2); }
.ai-changes-rail-reason {
  padding: 0 12px 10px 24px;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.45;
  border-left: 2px solid var(--purple);
  margin: 0 8px 8px 14px;
}

/* ===== F5: Satır doluluk ısı haritası
   Sol etiket hücresine bir renk şeridi (::before) basılır. Renk artık
   ayrık eşiklerle değil, makine başına SÜREKLİ gradyanla (PPDSDoluluk.grade)
   gelir: hat ne kadar DOLU ise o kadar YEŞİL (verimli), ne kadar BOŞ ise o
   kadar KIRMIZI (atıl). Renk inline --util-bar değişkeninden okunur. */
.gantt-row-l.util-graded::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--util-bar, #94a3b8);
  pointer-events: none;
}
/* `position: sticky` (not `relative`): keeps the machine-name column pinned to
   the left while the gantt scrolls horizontally (zoom > 1 / Gün view overflow).
   sticky is still a positioned ancestor, so the util ::before bar above
   stays anchored. NOTE: this rule loads after app.css — a bare `relative` here
   silently overrode app.css's sticky and broke the frozen-left column.
   z-index 7: the frozen machine column must OCCLUDE the timeline overlays that
   scroll under it — the red now-line (.gantt-now-overlay, z5) and the
   dependency arrows (.gantt-relations-overlay, z6). Those overlays share this
   element's stacking context (.gantt / .gantt-grid / .gantt-wrap create none),
   so a column z below their z made the line + arrows bleed over the column when
   you scrolled their grid x under the pinned column. Keep this in sync with the
   .gantt-row-l rule in app.css (this one wins by load order). */
.gantt-row-l { position: sticky; left: 0; z-index: 7; }
.gantt-row-l .machine-util-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
  /* bg/color set inline per-machine from the gradient grade */
  background: var(--surface-2);
  color: var(--text-2);
}

/* ===== D: Mini overview strip (kuş bakışı 14-gün) */
.sched-overview-strip {
  position: relative;
  margin: 0 0 8px 0;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 52px;
}
.sched-overview-strip-grid {
  display: grid;
  gap: 3px;
  height: 100%;
}
.sched-overview-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 2px 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms;
}
.sched-overview-cell:hover {
  background: rgba(124, 95, 255, 0.10);
  border-color: rgba(124, 95, 255, 0.3);
}
.sched-overview-bar {
  width: 70%;
  border-radius: 2px 2px 0 0;
  min-height: 3px;
  /* Günlük tesis doluluğu rengini PPDSDoluluk.gradeFacility inline basar:
     dolu gün = yeşil (verimli), atıl gün = kırmızı. */
  background: #94a3b8;
}
.sched-overview-lbl {
  font-size: 9px;
  color: var(--text-3);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sched-overview-now {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 1.5px;
  background: var(--danger, #b91c1c);
  pointer-events: none;
}

/* ===== A: Cross-machine drag preview ghost */
.gantt-drag-ghost {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: rgba(124, 95, 255, 0.20);
  border: 1.5px dashed rgba(124, 95, 255, 0.7);
  border-radius: 4px;
  pointer-events: none;
  z-index: 4;
}

/* ===== F3: Drag canlı zaman etiketi */
.sched-drag-tip {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  background: var(--purple, #7c5fff);
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  white-space: nowrap;
  transform: translate(8px, 14px);
  font-variant-numeric: tabular-nums;
}
.sched-drag-tip .delta {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
}

/* ===== F7: Freeze görsel bandı */
.gantt-freeze-band {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(124, 95, 255, 0.18) 0,
    rgba(124, 95, 255, 0.18) 8px,
    transparent 8px,
    transparent 16px
  );
  border-left: 1.5px dashed rgba(124, 95, 255, 0.6);
  border-right: 1.5px dashed rgba(124, 95, 255, 0.6);
}
.gantt-freeze-band-label {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(124, 95, 255, 0.9);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ===== F4: Kritik yol + slack uyarısı */
.gantt-bar.critical-path {
  box-shadow: 0 0 0 1.5px rgba(180, 83, 9, 0.85) inset, 0 2px 5px rgba(0,0,0,0.2);
}
.gantt-bar.slack-low {
  outline: 1.5px solid #dc2626;
  outline-offset: 1px;
  animation: slack-low-pulse 2.2s ease-in-out infinite;
}
@keyframes slack-low-pulse {
  0%, 100% { outline-color: #dc2626; }
  50%      { outline-color: #fbbf24; }
}
.gantt-bar.critical-path::after {
  content: '⚡';
  position: absolute;
  top: 1px;
  right: 4px;
  font-size: 10px;
  color: rgba(180, 83, 9, 0.95);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .gantt-bar.slack-low { animation: none; }
}

/* ===== F: Drawer Audit Tab — section başlığı + canlı dot */
.op-audit-section-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
  margin: 14px 0 4px 0;
}
.activity-dot.live {
  background: var(--purple, #7c5fff) !important;
  box-shadow: 0 0 0 2px rgba(124, 95, 255, 0.25);
}

/* ===== G: Hızlı arama */
.sched-search-field {
  position: relative;
}
.sched-search-input {
  min-width: 200px;
  padding: 4px 28px 4px 8px;
  font-size: 11px;
}
.sched-search-count {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--purple, #7c5fff);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 6px;
  pointer-events: none;
}
.gantt-bar.search-match {
  outline: 2px solid #fbbf24;
  outline-offset: 1px;
  z-index: 3;
  box-shadow: 0 0 12px 1px rgba(251, 191, 36, 0.65);
}

/* ===== E: Çakışma kırmızı tinte */
.gantt-bar.has-overlap {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(239, 68, 68, 0.40) 0,
    rgba(239, 68, 68, 0.40) 5px,
    transparent 5px,
    transparent 10px
  );
  box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.7) inset;
}
.gantt-bar.has-overlap::after {
  content: '⚠';
  position: absolute;
  top: 1px;
  right: 14px;
  font-size: 11px;
  color: #b91c1c;
  text-shadow: 0 0 2px rgba(255,255,255,0.6);
  pointer-events: none;
}

/* ===== F9: Klavye fokus halkası */
.gantt-bar.kb-focus {
  outline: 2px solid var(--purple, #7c5fff);
  outline-offset: 2px;
  z-index: 5;
}
.gantt-bar:focus { outline: none; }

/* ===== Bağlı işlemler çerçevesi: tıklanan op'un batch zincirindeki diğer
   op'ları (Tartım → Granülasyon → … → Ambalaj) outline ile çerçeveler.
   Seçili op'un kendi turuncu 'selected' outline'ı korunur. */
.gantt-bar.linked-framed {
  outline: 2px dashed #0ea5e9;
  outline-offset: 1px;
  z-index: 3;
}

/* ===== Geçmiş Proses gri (16-06-2026): Durum'u Proses olan siparişlerin,
   canlı şu-an çizgisinin SOLUNDA kalan (efektif bitişi geçmişte olan) işlem
   kutucukları gri render edilir — "tamamlanmış / geçmiş" sinyali. .kind-prod
   variant'ı 3-class specificity'de yazıldı ve app-meet-scheduler.css'teki
   .gantt-bar.kind-prod.area-* gradyanlarından SONRA yüklendiği için onları
   kaynak sırasıyla ezer (!important gerekmez). over-/under-plan'ın ince
   outline'ı (background değil) korunur. orderId taşımayan non-prod op'lar
   (cleanup / changeover) bu class'ı zaten almaz. */
.gantt-bar.past-proses,
.gantt-bar.kind-prod.past-proses {
  background: linear-gradient(180deg, #9ca3af, #6b7280);
}

/* ===== Geçmiş temizlik sage (gri-yeşil) (17-06-2026): canlı şu-an çizgisinin
   SOLUNDA (gerisinde) tamamen kalan temizlik / kalıp-değişim (changeover)
   kutucukları, app.css'teki canlı yeşil çizgili `.gantt-bar.kind-cleanup`
   gradyanı yerine soluk gri-yeşil (sage #74867b) + aynı diyagonal hatch ile
   render edilir — "geçmiş temizlik" sinyali. Sage, "Bitmiş Üretim" grisinin
   (#a8aeb8) "Üretim" mavisine olan ilişkisi gibi, "Temizlik" koyu yeşilinin
   (#1c6236) soluk/tamamlanmış halidir. 3-class specificity + app.css'ten SONRA
   yüklenme ile canlı yeşil stripe'ı ezer. */
.gantt-bar.kind-cleanup.past-cleanup,
.gantt-bar.kind-changeover.past-cleanup {
  background: repeating-linear-gradient(
    45deg, rgba(255,255,255,0.13) 0 9px, rgba(0,0,0,0.16) 9px 18px
  ), #74867b;
}

/* ===== Yaklaşan Tartım petrol/teal (16-06-2026, renk güncellemesi: tasarım
   "Tartim Renk Secenekleri"): canlı şu-an çizgisinin henüz ulaşmadığı (efektif
   başlangıcı now'dan ileride olan) Tartım işlemleri petrol (teal) render edilir
   — "yaklaşan tartım" sinyali. Petrol; üretim-mavi / temizlik-yeşil /
   bakım-kırmızı renkleriyle çakışmadığından Tartım satırında belirgin durur
   (önceki turuncu, bakım-kırmızısına ve üretim tonlarına yakın kalıyordu).
   .kind-prod ile 3-class specificity'de yazıldı ve app-meet-scheduler.css'teki
   .gantt-bar.kind-prod.area-tartim slate gradyanından SONRA yüklendiği için
   kaynak sırasıyla onu ezer (!important gerekmez). Başlamış / geçmiş Tartım'lar
   bu class'ı almaz, slate kalır. */
.gantt-bar.kind-prod.future-tartim {
  background: linear-gradient(180deg, #14b8a6, #0d9488);
}

/* ===== Sipariş Durum'una göre bar rengi (18-06-2026, kullanıcı isteği):
   bir sipariş işlem bar'ı, ait olduğu siparişin Durum'una göre tek renge
   boyanır — uzun parti no'lu (örn. 2026FED001A) PROSES siparişlerinin henüz
   tamamlanmamış işlemleri AMBALAJ YEŞİLİ (#10b981→#047857, area-pack ile aynı);
   kısa parti no'lu (1/2/3…) PLANLI siparişlerin işlemleri TABLET-BASKI KOYU
   MAVİSİ (#4570e0→#2a4fb8, area-tab ile aynı). JSX tarafında bu bar'larda
   area-* ve future-tartim class'ları bastırılır; 3-class specificity + app-meet
   sonrası yüklenme ile temel/alan gradyanlarını ezer. Tamamlanan Proses
   işlemleri yukarıdaki past-proses griliğini korur (order-proses-active sadece
   bitişi now'dan ileride olan işlemlere uygulanır). */
.gantt-bar.kind-prod.order-proses-active {
  background: linear-gradient(180deg, #10b981, #047857);
}
.gantt-bar.kind-prod.order-planli {
  background: linear-gradient(180deg, #4570e0, #2a4fb8);
}

/* ===== F2: Çoklu seçim */
.gantt-bar.multi-selected {
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.85) inset;
}
.gantt-bar.multi-selected::before {
  content: '✓';
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #0284c7;
  pointer-events: none;
}
.sched-batch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid #0284c7;
  border-radius: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}
.sched-batch-bar-count {
  font-weight: 700;
  color: #0284c7;
  margin-right: 4px;
}
.sched-batch-bar-summary {
  color: var(--text-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.sched-batch-bar-risk {
  color: #b91c1c;
  font-weight: 700;
}
.sched-batch-bar .btn { padding: 4px 9px; font-size: 11px; }
.sched-batch-bar select { padding: 3px 6px; font-size: 11px; }
.sched-batch-bar .sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

/* ===== F1: Undo/Redo toolbar */
.sched-history-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
}
.sched-history-group .icon-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ===== F6: Senaryo modal */
.scenario-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scenario-modal {
  background: var(--surface, #fff);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  width: 520px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.scenario-modal-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scenario-modal-h h3 { margin: 0; font-size: 14px; }
.scenario-modal-b {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
}
.scenario-modal-f {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
}
.scenario-modal-f input { flex: 1; }
.scenario-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 6px 0;
  background: var(--surface);
}
.scenario-row-l { flex: 1; min-width: 0; }
.scenario-row-title { font-size: 13px; font-weight: 700; }
.scenario-row-meta { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.scenario-row-kpis { font-size: 10px; color: var(--text-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.scenario-row .btn.sm { font-size: 11px; padding: 4px 9px; }
.scenario-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
}

/* ===== F9: Klavye kısayolları popover'ı (toolbar yardım butonu) */
.sched-shortcuts-popover {
  position: fixed;
  z-index: 9050;
  width: 340px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
}
.sched-shortcuts-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
}
.sched-shortcuts-h span { display: inline-flex; align-items: center; gap: 6px; }
.sched-shortcuts-b {
  padding: 6px 4px;
  max-height: 60vh;
  overflow-y: auto;
}
.sched-shortcuts-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  font-size: 11.5px;
}
.sched-shortcuts-row:nth-child(odd) { background: var(--surface-2); }
.sched-shortcuts-keys {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.sched-shortcuts-keys .sep { color: var(--text-3); font-size: 10px; }
.sched-shortcuts-keys kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
}
.sched-shortcuts-label { color: var(--text-2); }

/* ==== styles/app-scheduler-vms.css ==== */
/* PPDS — Çizelge "Sürümler · Modelle · Strateji" surfaces.
   Self-contained, fully `vms-`-prefixed so nothing collides with the production
   scheduler styles or the locked Playwright `.gantt*` test locators. Reuses the
   app's design tokens (var(--brand-600) etc., identical to styles/app.css). */

:root { --vms-ai: #7c5fff; }

/* ===================== Overlays + slide-over ===================== */
.vms-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.42); z-index: 1200; display: flex; align-items: stretch; justify-content: center; padding: 26px; animation: vms-fade .15s ease; font-family: var(--font); color: var(--text); }
.vms-backdrop.right { justify-content: flex-end; align-items: stretch; padding: 0; background: rgba(15,23,42,.18); }
@keyframes vms-fade { from { opacity: 0; } to { opacity: 1; } }
.vms-overlay { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); width: 100%; max-width: 1280px; display: flex; flex-direction: column; overflow: hidden; animation: vms-pop .2s cubic-bezier(.2,0,0,1); }
/* "Optimizasyon Stratejisi" opens near-fullscreen — the select → compare →
   approve workspace needs the room for side-by-side strategy columns and the
   detailed per-line Çizelge. Scoped to the strategy overlay only, so the
   Sürümler / Modelle overlays keep their default centered max-width. */
.vms-backdrop--full { padding: 14px; }
.vms-overlay--full { max-width: none; height: 100%; }
@keyframes vms-pop { from { transform: scale(.985) translateY(8px); } to { transform: none; } }
.vms-overlay-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.vms-overlay-h-ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.vms-overlay-h h2 { margin: 0; font-size: 16px; font-weight: 800; }
.vms-overlay-h .sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.vms-overlay-h-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.vms-overlay-b { flex: 1; overflow: auto; padding: 16px 18px; }
.vms-overlay-f { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); border-top: 1px solid var(--border); }
/* Left = scenario inputs (sliders / kutu entry / capacity levers), right = live
   preview. The left column was a cramped fixed 320px (slider squeezed to ~78px,
   product labels wrapped to 2 lines, the kutu value box overflowed its cell);
   widen it to a clamped 380–440px so the controls breathe, and make the preview
   column minmax(0,1fr) so the sandbox Gantt scrolls internally instead of forcing
   horizontal page overflow on narrow viewports. */
.vms-split { display: grid; grid-template-columns: minmax(380px, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }

/* Modelle as a standalone sidebar route (Çizelge › Modelle): the modeling
   surface renders inside the normal .page flow, so strip the modal-only chrome
   (fixed height, max-width cap, pop animation, inner scroll) and let the page
   scroll naturally. The header bar + body keep the card look. */
.vms-modelle-page .vms-overlay--page { max-width: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: visible; animation: none; }
.vms-modelle-page .vms-overlay--page .vms-overlay-b { overflow: visible; }

/* Plan Optimizasyonu (#/opt2) — the new standalone optimization page reuses the
   same .vms-* card but renders inline in the normal .page flow (same treatment
   as Modelle above). */
.opt2-page .vms-overlay--page { max-width: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: visible; animation: none; margin-top: 12px; }
.opt2-page .vms-overlay--page .vms-overlay-b { overflow: visible; }

.vms-slideover { width: 440px; max-width: 96vw; height: 100vh; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: vms-slide .2s cubic-bezier(.2,0,0,1); }
@keyframes vms-slide { from { transform: translateX(34px); } to { transform: none; } }
.vms-slideover-h { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.vms-slideover-h h3 { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.vms-slideover-h .sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.vms-slideover-b { flex: 1; overflow-y: auto; padding: 12px 14px; }

/* ===================== Buttons / inputs (scoped) ===================== */
.vms-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); border-radius: var(--radius); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; white-space: nowrap; font-family: inherit; }
.vms-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.vms-btn.primary { background: var(--brand-600); color: #fff; border-color: var(--brand-700); }
.vms-btn.primary:hover { background: var(--brand-700); }
.vms-btn.sm { height: 26px; font-size: 11px; padding: 0 9px; gap: 5px; }
.vms-btn.lg { height: 38px; padding: 0 18px; font-size: 13px; }
.vms-btn:disabled { opacity: .45; cursor: not-allowed; }
.vms-iconbtn { width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vms-iconbtn:hover { background: var(--surface-3); color: var(--text); }
.vms-select { height: 30px; padding: 0 8px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); font-size: 12px; color: var(--text); font-family: inherit; }
.vms-input { height: 30px; padding: 0 10px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); font-size: 12px; color: var(--text); outline: none; font-family: inherit; }
.vms-input:focus, .vms-select:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(52,97,219,.10); }
.vms-hint { font-size: 11px; color: var(--text-3); line-height: 1.5; }

.vms-seg { display: inline-flex; background: var(--surface-3); border-radius: var(--radius); padding: 3px; gap: 2px; flex-wrap: wrap; }
.vms-seg button { border: none; background: transparent; padding: 6px 12px; font-size: 11.5px; font-weight: 600; color: var(--text-2); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
.vms-seg button.active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-1); }

.vms-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.vms-panel-h { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.vms-panel-b { padding: 14px; }
.vms-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

/* ===================== Strategy cards + compare table ===================== */
.vms-strat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; }
.vms-strat-card { border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 13px; background: var(--surface); cursor: pointer; transition: border-color .12s, box-shadow .12s; position: relative; }
.vms-strat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.vms-strat-card.selected { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(52,97,219,.12); }
.vms-strat-card.active { border-color: var(--ok); }
.vms-strat-h { display: flex; align-items: center; gap: 10px; }
.vms-strat-ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.vms-strat-name { font-size: 13px; font-weight: 800; }
.vms-strat-tag { font-size: 10px; color: var(--text-3); font-weight: 600; }
.vms-strat-desc { font-size: 11.5px; color: var(--text-2); line-height: 1.45; margin-top: 9px; }
.vms-strat-check { position: absolute; top: 11px; right: 11px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; }
.vms-strat-card.selected .vms-strat-check { background: var(--brand-600); border-color: var(--brand-600); }
.vms-strat-pill { position: absolute; top: 11px; right: 11px; font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--ok); background: var(--ok-bg); padding: 2px 7px; border-radius: 999px; }
/* "Çalışıyor" badge on the active strategy's card — a static green pill above the
   header (the absolute top-right check is the selection marker, so they coexist). */
.vms-strat-active { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--ok); padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
/* Çizelge toolbar active-strategy button (next to the zoom controls). */
.aps-strategy-btn { white-space: nowrap; }

/* No overflow:hidden — it would make the <table> its own scroll container and
   trap the sticky header (header could not pin against the scrolling panel). */
/* separate (not collapse): keeps the sticky <th> header's bottom border in the
   header's own paint layer so no sub-pixel background gap shows under the pinned
   header while scrolling. border-spacing:0 preserves the collapsed layout. */
.vms-cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.vms-cmp-table th, .vms-cmp-table td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--border); }
.vms-cmp-table th { background: var(--surface-2); font-size: 11px; font-weight: 800; position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--border); }
.vms-cmp-table th:first-child, .vms-cmp-table td:first-child { text-align: left; }
.vms-cmp-table tr:last-child td { border-bottom: none; }
.vms-cmp-table .metric { font-weight: 600; color: var(--text-2); }
.vms-cmp-table .metric small { display: block; color: var(--text-3); font-weight: 400; font-size: 10px; }
.vms-cmp-table td.best { background: var(--ok-bg); font-weight: 800; }
.vms-cmp-table .cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.vms-colh { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.vms-colh .dot { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; }
/* per-strategy column header: name + its own Önizle & Uygula action */
.vms-cmp-colhead { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vms-cmp-review { width: 100%; justify-content: center; white-space: nowrap; }
/* "Mevcut Durum" baseline column — the LIVE plan's KPIs shown BEFORE any
   strategy, so the planner always sees the current situation next to every
   proposal. Tinted + right-bordered to read as the reference, separated from
   the proposed-strategy columns; never carries a "best" highlight. */
.vms-cmp-table th.vms-cur-col, .vms-cmp-table td.vms-cmp-current { background: var(--surface-2); border-right: 2px solid var(--border); }
.vms-cmp-table td.vms-cmp-current { font-weight: 700; color: var(--text-2); }
.vms-colh .dot.cur { background: var(--text-3); }
.vms-cur-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
/* "No gain" strategy column — applying it would do nothing over the live plan
   (the same guard the Apply step shows as "Çizelge zaten optimize"). Its cells
   read identically to "Mevcut Durum" and are muted so the planner immediately
   sees the strategy brings no improvement — never a fabricated regression. */
.vms-nogain-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ok, #1f8a5b); background: color-mix(in srgb, var(--ok, #1f8a5b) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok, #1f8a5b) 35%, transparent); border-radius: 999px; padding: 2px 7px; }
.vms-cmp-table td.vms-cmp-nogain { color: var(--text-3); font-weight: 500; opacity: .8; }
.vms-cmp-table th.vms-nogain-col .vms-strat-name, .vms-cmp-table th.vms-nogain-col .vms-colh { color: var(--text-3); }

/* Compare KPI table viewport — full height (NO vertical scroll cap): every
   metric row is visible at once; only the column axis scrolls horizontally
   when many strategies are compared. (overflow-y:visible is coerced to auto by
   the spec when overflow-x is auto, but max-height:none keeps it content-sized
   so no vertical scrollbar ever appears.) */
.vms-cmp-scroll { padding: 0; max-height: none; overflow-x: auto; overflow-y: visible; }

/* Always-on quick-exit (✕) in the overlay header — closes the whole overlay
   from any phase (select / compare / approve). Square icon button, muted until
   hovered so it reads as secondary next to İptal/Geri. */
.vms-overlay-x { width: 32px; padding: 0; justify-content: center; color: var(--text-3); }
.vms-overlay-x:hover { color: var(--text); }

/* compare strip (modeling) */
.vms-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-bottom: 14px; }
.vms-cmp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; min-width: 0; overflow: hidden; }
.vms-cmp .l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 700; }
/* Wrap (never spill) on narrow cards / large 4-digit values like cleanup hours:
   min-width:0 + flex-wrap keep the base→new numbers inside the card border. */
.vms-cmp-vals { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; row-gap: 0; margin-top: 6px; min-width: 0; }
.vms-cmp-base { font-size: 13px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.vms-cmp-new { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vms-d { font-size: 11px; font-weight: 800; margin-top: 3px; overflow-wrap: anywhere; }
.vms-d.up { color: var(--ok); } .vms-d.down { color: var(--danger); } .vms-d.flat { color: var(--text-3); }

/* ===================== Weights / capacity / risk ===================== */
.vms-weights { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px; }
.vms-weights-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 4px; }
.vms-weight-row { display: grid; grid-template-columns: 110px 1fr 38px; align-items: center; gap: 12px; padding: 6px 0; }
.vms-weight-row .wl { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.vms-weight-row input[type=range] { width: 100%; accent-color: var(--brand-600); }
.vms-weight-row .wv { font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--brand-700); }
.vms-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

.vms-cap { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; }
.vms-cap:hover { border-color: var(--border-strong); }
.vms-cap.on { border-color: var(--brand-400); background: var(--brand-50); }
.vms-cap-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vms-cap.on .vms-cap-ic { background: var(--brand-100); color: var(--brand-700); }
.vms-cap-title { font-size: 12.5px; font-weight: 700; }
.vms-cap-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.vms-cap-tog { margin-left: auto; width: 38px; height: 22px; border-radius: 999px; background: var(--surface-4); position: relative; transition: background .15s; flex-shrink: 0; }
.vms-cap.on .vms-cap-tog { background: var(--brand-600); }
.vms-cap-tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: var(--shadow-1); }
.vms-cap.on .vms-cap-tog::after { left: 18px; }
.vms-ot { display: flex; align-items: center; gap: 10px; padding: 4px 2px 2px; }
.vms-ot input { flex: 1; accent-color: var(--brand-600); }

.vms-risk { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.vms-risk-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; }
.vms-risk-ok { color: var(--ok); } .vms-risk-bad { color: var(--danger); }
.vms-risk-list { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow: auto; }
.vms-risk-item { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 4px 8px; background: var(--danger-bg); border-radius: 5px; }
.vms-risk-item .rp { font-weight: 700; }
.vms-risk-item .rd { margin-left: auto; font-weight: 800; color: var(--danger); font-variant-numeric: tabular-nums; }

/* product qty table + scale sliders + dropzone */
.vms-qty { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } /* separate: sticky-header gap fix (see .vms-cmp-table) */
.vms-qty th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border); }
.vms-qty td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.vms-qty .p { font-weight: 600; }
.vms-qty .p small { display: block; color: var(--text-3); font-weight: 400; font-size: 10px; }
.vms-step { display: inline-flex; align-items: center; border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; }
.vms-step button { width: 24px; height: 28px; border: none; background: var(--surface-2); cursor: pointer; color: var(--text-2); font-size: 14px; font-weight: 700; }
.vms-step input { width: 42px; height: 28px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.vms-preset { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.vms-chip { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); cursor: pointer; color: var(--text-2); }
.vms-chip:hover { border-color: var(--brand-400); color: var(--brand-700); }
.vms-chip.active { background: var(--brand-600); color: #fff; border-color: var(--brand-700); }
/* label | slider | value(kutu box + parti). The value column must be ≥ the
   ~119px value box (vms-num.wide input + " kutu") or it overflows into the
   slider; the 132px label fits every product name on one line while still
   leaving the slider a usable width. */
.vms-scale { display: grid; grid-template-columns: 132px 1fr 124px; align-items: center; gap: 10px; padding: 7px 0; }
.vms-scale .l { font-size: 12px; font-weight: 600; }
.vms-scale input[type=range] { width: 100%; accent-color: var(--brand-600); }
.vms-scale .v { font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--brand-700); display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; }
/* editable number — click & type any value */
.vms-num { width: 48px; height: 26px; border: 1px solid var(--border-2); border-radius: var(--radius); text-align: center; font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--brand-700); background: var(--surface); font-family: inherit; padding: 0 2px; }
.vms-num:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(52,97,219,.10); }
.vms-num::-webkit-outer-spin-button, .vms-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* extra-parallel-line steppers + maintenance grid */
.vms-line-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.vms-line-row .l { font-size: 12px; font-weight: 600; flex: 1; }
.vms-maint-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.vms-maint-grid label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.vms-maint-grid input { width: 80px; height: 28px; border: 1px solid var(--border-2); border-radius: var(--radius); text-align: center; font-weight: 700; font-family: inherit; background: var(--surface); }
.vms-maint-grid .vms-select { flex: 1; max-width: 200px; }
/* recompute pill + small spinner + scenario badge */
.vms-recompute { position: absolute; top: 6px; right: 8px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200, var(--border)); border-radius: 999px; padding: 3px 9px; box-shadow: var(--shadow-1); }
.vms-spin.sm { width: 12px; height: 12px; border-width: 2px; margin: 0; }
.vms-badge { font-size: 11px; font-weight: 800; color: var(--brand-700); background: var(--brand-50); border-radius: 999px; padding: 2px 9px; letter-spacing: 0; text-transform: none; }
/* Engine-source badge: which engine produced the modeled schedule (server vs in-browser fallback). */
.vms-engine-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.vms-engine-badge.is-server { color: #0c5a3a; background: var(--ok-bg, rgba(16,185,129,.12)); border: 1px solid var(--ok-border, rgba(16,185,129,.28)); }
.vms-engine-badge.is-local { color: var(--warn-700, #b6630a); background: var(--warn-bg, rgba(217,119,6,.12)); border: 1px solid var(--warn-border, rgba(217,119,6,.28)); }
.vms-drop { display: block; box-sizing: border-box; width: 100%; border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 22px 14px; text-align: center; background: var(--surface-2); cursor: pointer; }
.vms-drop:hover, .vms-drop.over { border-color: var(--brand-400); background: var(--brand-50); }
.vms-drop-t { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.vms-drop-s { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.vms-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: var(--radius); font-size: 12px; font-weight: 600; color: #0c5a3a; margin-top: 10px; }

/* per-line utilisation bars + approve table */
.vms-mutil { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.vms-mutil-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 7px; }
.vms-mutil-row { display: grid; grid-template-columns: 110px 1fr 38px; align-items: center; gap: 8px; padding: 3px 0; }
.vms-mutil-name { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.vms-mutil-track { height: 8px; background: var(--surface-4); border-radius: 4px; overflow: hidden; }
.vms-mutil-fill { display: block; height: 100%; border-radius: 4px; }
.vms-mutil-fill.util-low { background: #10b981; } .vms-mutil-fill.util-mid { background: #f59e0b; } .vms-mutil-fill.util-hot { background: #ef4444; } .vms-mutil-fill.util-bn { background: linear-gradient(90deg,#b91c1c,#7f1d1d); }
.vms-mutil-val { font-size: 11px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.vms-dl { font-weight: 800; font-variant-numeric: tabular-nums; }
.vms-dl.up { color: var(--ok); } .vms-dl.down { color: var(--danger); } .vms-dl.flat { color: var(--text-3); }
.vms-detail-split { display: grid; grid-template-columns: 1fr 290px; }
.vms-detail-side { padding: 10px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vms-autopilot { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.vms-autopilot input { width: 15px; height: 15px; accent-color: var(--brand-600); }

/* ===================== Version timeline ===================== */
.vms-vfilter { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 0 10px; }
.vms-vfilter-chip { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.vms-vfilter-chip.active { background: var(--text); color: #fff; border-color: var(--text); }
.vms-vtl { position: relative; padding-left: 26px; }
.vms-vtl::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border-2); }
.vms-vrow { position: relative; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.vms-vrow:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.vms-vrow.active { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(52,97,219,.10); }
.vms-vrow.cur { background: linear-gradient(180deg, var(--ok-bg), var(--surface)); border-color: var(--ok-border); }
.vms-vrow.cmp-a { border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(52,97,219,.18); }
.vms-vrow.cmp-b { border-color: var(--vms-ai); box-shadow: 0 0 0 2px rgba(124,95,255,.18); }
.vms-vnode { position: absolute; left: -22px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--border-strong); }
.vms-vrow.cur .vms-vnode { border-color: var(--ok); background: var(--ok); }
.vms-vnode.src-ai { border-color: var(--vms-ai); } .vms-vnode.src-strategy { border-color: var(--brand-500); }
.vms-vnode.src-model { border-color: var(--info); } .vms-vnode.src-drag { border-color: var(--warn); }
.vms-vtop { display: flex; align-items: center; gap: 8px; }
.vms-vno { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--text); }
.vms-vbadge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; }
.vms-vbadge.ai { background: rgba(124,95,255,.14); color: var(--purple); }
.vms-vbadge.strategy { background: var(--brand-50); color: var(--brand-700); }
.vms-vbadge.model { background: var(--info-bg); color: var(--info); }
.vms-vbadge.drag { background: var(--warn-bg); color: var(--warn); }
.vms-vbadge.manual { background: var(--surface-3); color: var(--text-2); }
.vms-vcur { margin-left: auto; font-size: 9px; font-weight: 800; color: var(--ok); text-transform: uppercase; letter-spacing: .05em; }
.vms-vpin { margin-left: 4px; color: var(--text-3); cursor: pointer; display: inline-flex; }
/* Flagged/pinned: paint the flag SOLID red (filled inside, not just the outline).
   CSS `fill` overrides the icon's fill="none" presentation attribute. */
.vms-vpin.on { color: var(--danger); }
.vms-vpin.on svg { fill: currentColor; }
.vms-vbadge.milestone { background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; gap: 3px; }
.vms-vlabel { font-size: 12.5px; font-weight: 600; margin-top: 5px; color: var(--text); }
/* Named milestones (git "tags") read as the headline; auto-snapshots are quieter. */
.vms-vlabel.manual { font-weight: 800; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.vms-vrow.kind-manual { border-left: 3px solid var(--brand-500); }
.vms-vrow.kind-manual .vms-vno { color: var(--brand-700); }
.vms-vrow.kind-auto .vms-vlabel { font-weight: 500; color: var(--text-2); }
/* Inline "create named version" form in the slide-over header. */
.vms-create-form { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; color: var(--brand-600); }
.vms-create-form .vms-input { flex: 1; }
.vms-vmeta { font-size: 10.5px; color: var(--text-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.vms-vkpis { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.vms-vkpi { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); font-variant-numeric: tabular-nums; }
.vms-vactions { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.vms-vrename { width: 100%; margin-top: 5px; }
/* The A/B compare badges on timeline rows set margin-left:auto inline; the base
   class must NOT, or the compare-panel title chips get shoved apart. */
.vms-cmp-tag { font-size: 9px; font-weight: 900; padding: 1px 6px; border-radius: 4px; color: #fff; }
.vms-cmp-tag.a { background: var(--brand-600); } .vms-cmp-tag.b { background: var(--vms-ai); }
/* Version comparison = ONE grid so every column lines up across all metric rows
   (label | A | B | Δ). Cells are direct children: title (spans all) + 4-col
   header + N×4 metric cells. Per-row grids never align — this does. */
.vms-vcmp { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; column-gap: 14px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.vms-vcmp-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.vms-vcmp-title .sub { color: var(--text-3); font-weight: 500; }
.vms-vcmp > .vms-vcmp-ch { font-size: 9.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; text-align: right; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.vms-vcmp > .vms-vcmp-ch.lab { text-align: left; }
.vms-vcmp > .vms-vcmp-ch.ca { color: var(--brand-700); }
.vms-vcmp > .vms-vcmp-ch.cb { color: var(--purple); }
.vms-vcmp > .m, .vms-vcmp > .a, .vms-vcmp > .b, .vms-vcmp > .dl { font-size: 11.5px; padding: 5px 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.vms-vcmp > .m { color: var(--text-2); font-weight: 600; }
.vms-vcmp > .a { color: var(--brand-700); font-weight: 700; text-align: right; }
.vms-vcmp > .b { color: var(--purple); font-weight: 700; text-align: right; }
.vms-vcmp > .dl { font-weight: 800; text-align: right; min-width: 48px; }
.vms-vcmp > .dl.up { color: var(--ok); } .vms-vcmp > .dl.down { color: var(--danger); } .vms-vcmp > .dl.flat { color: var(--text-3); }
.vms-vcmp > :nth-last-child(-n+4) { border-bottom: none; }
.vms-preview-bar { padding: 10px 14px; background: rgba(124,95,255,.08); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.vms-preview-bar .t { font-size: 12px; font-weight: 700; color: var(--purple); }

/* ===================== VMS Gantt ===================== */
.vms-timenav { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vms-tn-cluster { display: inline-flex; align-items: center; gap: 4px; }
.vms-tn-range { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; padding: 0 4px; }
.vms-zoomgroup { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.vms-zoomgroup button { padding: 6px 11px; border: none; background: var(--surface); font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text-2); border-right: 1px solid var(--border); font-family: inherit; }
.vms-zoomgroup button:last-child { border-right: none; }
.vms-zoomgroup button.active { background: var(--brand-600); color: #fff; }

.vms-gantt { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: auto; box-shadow: var(--shadow-1); --vms-lw: 150px; }
.vms-gantt-grid { display: grid; grid-template-columns: var(--vms-lw) 1fr; position: relative; }
.vms-gantt-headl, .vms-gantt-headr { background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 4; height: 36px; }
.vms-gantt-headl { left: 0; z-index: 5; border-right: 1px solid var(--border); display: flex; align-items: flex-end; padding: 4px 10px 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.vms-gantt-headr { display: flex; }
.vms-tick { flex: 1 0 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; }
.vms-tick-num { font-size: 13px; font-weight: 700; color: var(--text); }
.vms-tick-name { font-size: 9px; color: var(--text-3); text-transform: uppercase; }
.vms-tick.weekend { background: rgba(255,235,200,0.32); }
.vms-tick.today .vms-tick-num { color: var(--brand-600); }
.vms-rowl { padding: 0 10px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; height: 42px; background: var(--surface); position: sticky; left: 0; z-index: 2; }
.vms-rowr { border-bottom: 1px solid var(--border); position: relative; height: 42px; overflow: hidden; }
.vms-lane-tint { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.vms-lane-tint.util-low { background: #10b981; } .vms-lane-tint.util-mid { background: #f59e0b; } .vms-lane-tint.util-hot { background: #ef4444; } .vms-lane-tint.util-bn { background: linear-gradient(180deg,#b91c1c,#7f1d1d); }
.vms-mname { font-weight: 600; font-size: 11.5px; color: var(--text); display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vms-util { margin-left: auto; display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vms-util.util-low { background: rgba(16,185,129,.15); color: #047857; }
.vms-util.util-mid { background: rgba(245,158,11,.20); color: #b45309; }
.vms-util.util-hot { background: rgba(239,68,68,.20); color: #b91c1c; }
.vms-util.util-bn { background: rgba(127,29,29,.22); color: #7f1d1d; }
.vms-sep { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); pointer-events: none; }
.vms-sep.midnight { background: var(--brand-700); width: 1.5px; opacity: .45; }
.vms-sep.shift { background: rgba(124,95,255,.16); }
.vms-bar { position: absolute; top: 6px; bottom: 6px; border-radius: 5px; display: flex; align-items: center; font-size: 11px; font-weight: 600; color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.2); white-space: nowrap; overflow: hidden; z-index: 1; }
.vms-bar .vms-bar-lbl { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
.vms-bar.area-tartim { background: linear-gradient(180deg, #64748b, #475569); }
.vms-bar.area-gran { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
.vms-bar.area-tab { background: linear-gradient(180deg, #4570e0, #2a4fb8); }
.vms-bar.area-coat { background: linear-gradient(180deg, #0ea5e9, #0369a1); }
.vms-bar.area-pack { background: linear-gradient(180deg, #10b981, #047857); }
.vms-bar.kind-cleanup { background: repeating-linear-gradient(45deg,#1f6b3a,#1f6b3a 6px,#175432 6px,#175432 12px); }
.vms-bar.kind-maint { background: repeating-linear-gradient(45deg,#d6443c,#d6443c 6px,#b3261e 6px,#b3261e 12px); }
.vms-bar.dim { opacity: .3; filter: grayscale(.4); }
.vms-bar.moved { outline: 2px solid var(--vms-ai); outline-offset: 1px; }
.vms-bar.ghost { background: transparent !important; border: 1.5px dashed var(--text-3); box-shadow: none; }
.vms-arrow { position: absolute; height: 2px; background: var(--vms-ai); top: 50%; z-index: 2; pointer-events: none; }
.vms-arrow::after { content: ''; position: absolute; right: -1px; top: -3px; border-left: 6px solid var(--vms-ai); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.vms-now { position: absolute; top: 36px; bottom: 0; width: 1.5px; background: var(--danger); z-index: 6; pointer-events: none; }
.vms-now-lbl { position: absolute; top: 2px; transform: translateX(-50%); background: var(--danger); color: #fff; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 3px; }
.vms-mini { display: flex; flex-direction: column; gap: 3px; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.vms-mini-lane { position: relative; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.vms-mini-bar { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; }

/* spinner */
.vms-spin { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--brand-600); border-radius: 50%; margin: 0 auto 12px; animation: vms-rot .8s linear infinite; }
@keyframes vms-rot { to { transform: rotate(360deg); } }
.vms-loading { padding: 40px 24px; text-align: center; }

/* ===================== Production start date + material forecast ============ */
.vms-startdate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vms-startdate .vms-label { display: inline-flex; align-items: center; gap: 4px; }
.vms-date { height: 30px; padding: 0 8px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); font-size: 12px; color: var(--text); font-family: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.vms-date:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(52,97,219,.10); }
.vms-startdate .vms-chip { margin-left: auto; }

/* wider numeric inputs for box (kutu) entry — up to 6 digits */
.vms-step.wide { min-width: 0; }
.vms-step.wide input { width: 92px; }
.vms-num.wide { width: 88px; }

/* badge tone variants */
.vms-badge.ok { color: #0c5a3a; background: var(--ok-bg, rgba(16,185,129,.12)); }
.vms-badge.bad { color: var(--danger); background: var(--danger-bg, rgba(239,68,68,.10)); }

/* forecast table */
.vms-fc-loading { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 8px 0; }
.vms-fc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } /* separate: sticky-header gap fix (see .vms-cmp-table) */
.vms-fc-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border); }
.vms-fc-table th.num, .vms-fc-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vms-fc-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.vms-fc-table td.m { font-weight: 600; }
.vms-fc-table td.m small { display: block; color: var(--text-3); font-weight: 400; font-size: 10px; }
.vms-fc-table tr.short { background: var(--danger-bg, rgba(239,68,68,.06)); }
.vms-fc-table td.num.sh { color: var(--danger); font-weight: 800; }
.vms-cov { display: inline-block; min-width: 42px; text-align: center; font-weight: 800; border-radius: 999px; padding: 1px 7px; font-size: 11px; }
.vms-cov.ok { color: #0c5a3a; background: var(--ok-bg, rgba(16,185,129,.12)); }
.vms-cov.warn { color: var(--warn-700, #b6630a); background: rgba(245,158,11,.14); }
.vms-cov.bad { color: var(--danger); background: var(--danger-bg, rgba(239,68,68,.12)); }

/* === Modelle "Senaryo Girişi" qty tab → 3rd column: live-computed PARTİ (batch) count ===
   The planner types KUTU (boxes); the PARTİ pill shows the batch count computed live from
   the recipe batch size (boxesPerBatch). KUTU → PARTİ reads left-to-right as input → output. */
.vms-qty.vms-qty-3col th.parti-h,
.vms-qty.vms-qty-3col td.parti-c { text-align: right; width: 1%; white-space: nowrap; padding-left: 6px; }
.vms-qty.vms-qty-3col th.parti-h { color: var(--brand-700); }
.vms-conv-arrow { display: inline-block; margin-right: 4px; color: var(--text-3); font-weight: 700; }
/* Tighten the KUTU stepper + cell padding so the 3rd column doesn't squeeze the
   product-name column (names should mostly stay on one line in a ~290px table). */
.vms-qty.vms-qty-3col th, .vms-qty.vms-qty-3col td { padding-left: 6px; padding-right: 6px; }
.vms-qty.vms-qty-3col .vms-step.wide { width: 100%; }
.vms-qty.vms-qty-3col .vms-step.wide input { width: 100%; min-width: 50px; font-size: 11.5px; letter-spacing: -.1px; padding: 0 1px; -moz-appearance: textfield; appearance: textfield; }
/* the −/+ stepper already increments — drop the redundant native spin buttons so the
   full box value (up to the 7-digit max) stays readable, focused or not. */
.vms-qty.vms-qty-3col .vms-step.wide input::-webkit-outer-spin-button,
.vms-qty.vms-qty-3col .vms-step.wide input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vms-qty.vms-qty-3col .vms-step.wide button { width: 20px; }
.vms-qty.vms-qty-3col td:nth-child(2) { width: 120px; }

/* the LIVE computed PARTİ result — the hero of the row, distinct from the neutral stepper */
.vms-parti { display: inline-block; min-width: 30px; padding: 3px 9px; border-radius: 999px;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15;
  color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200, var(--border-2));
  text-align: center; transition: background-color .12s, color .12s, border-color .12s; }
.vms-parti.zero { color: var(--text-3); background: var(--surface-3); border-color: var(--border-2); font-weight: 700; }
.vms-parti.on { border-color: var(--brand-400); }

/* TOPLAM summary footer: total kutu → total parti, mirrors the header box badge */
.vms-qty.vms-qty-3col tfoot .vms-qty-foot td { border-top: 2px solid var(--brand-600); border-bottom: none;
  padding-top: 9px; padding-bottom: 2px; font-variant-numeric: tabular-nums; vertical-align: middle; }
.vms-qty-foot .f-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.vms-qty-foot .f-box { font-size: 11px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.vms-qty-foot .f-res { text-align: right; padding-left: 8px; }

/* "Ölçekle" (scale) tab value cell → stack the box input over the live computed parti count */
.vms-scale .v { flex-direction: column; align-items: flex-end; gap: 2px; }
.vms-scale .v .v-box { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.vms-scale .v .v-parti { font-size: 10.5px; font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vms-scale .v .v-parti.zero { color: var(--text-3); font-weight: 700; }

/* Malzeme İhtiyaç Forecast'i — Dışa Aktar (Excel / CSV / SAP) dropdown */
.vms-fc-export { display: inline-flex; }
.vms-fc-export-backdrop { position: fixed; inset: 0; z-index: 40; }
.vms-fc-export-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 41; min-width: 190px; max-width: 320px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 5px; display: flex; flex-direction: column; gap: 2px; }
.vms-fc-export-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: calc(var(--radius) - 2px); padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; text-transform: none; letter-spacing: 0; }
.vms-fc-export-menu button:hover { background: var(--surface-3); }
.vms-fc-export-note { margin: 4px 6px 2px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 10.5px; font-weight: 400; line-height: 1.4; color: var(--text-3); text-transform: none; letter-spacing: 0; }

/* ==== styles/agent-widget.css ==== */
/* ============================================================
   PIP — AI Agent surface (floating widget · launcher icon · "AI Asistan" page).
   Redesign ported from the design handoff "Pharma Planning Intelligence
   Agent — AI Asistan · Tasarım Yönleri": violet/indigo light surface, the
   animated node-network brand mark, refined panel + full-page conversation with
   a chat-history rail.

   EVERYTHING is scoped under .ppds-agent-root so the design tokens, the generic
   svg sizing, and the brand-mark / widget classes never leak into or clobber the
   rest of the app. The bespoke widget classes (launcher, widget, .ag-mark, the
   w- / t- / fp- prefixes) are unique to the agent and inherit the tokens via the
   .ppds-agent-root ancestor.

   Legacy CSS variable names (--blue, --violet, --ai-grad, --green …) are kept and
   REMAPPED onto the new violet palette so the many existing class rules recolour
   for free; only shape/gradient/layout refinements are spelled out per element.
   ============================================================ */

.ppds-agent-root{
  /* ---- new design tokens ------------------------------------------------ */
  --ag-violet:#6d5efc; --ag-violet-600:#5a47e8; --ag-violet-700:#4a39cf;
  --ag-violet-50:#f3f1fe; --ag-violet-100:#e8e4fd; --ag-violet-200:#d6cffb;
  --ag-grad:linear-gradient(150deg,#8e7dff 0%,#6d5efc 46%,#5942e6 100%);
  --ag-grad-soft:linear-gradient(150deg,#f6f4ff 0%,#efecff 100%);
  --ag-ink:#1b1c2e; --ag-ink-2:#383a52; --ag-muted:#7a7c92; --ag-faint:#a8aabb;
  --ag-line:#ececf2; --ag-line-2:#f3f3f8; --ag-bg:#ffffff; --ag-bg-soft:#f7f7fb; --ag-bg-tint:#faf9ff;
  --ag-ok:#18a86b; --ag-ok-bg:#e6f6ee; --ag-warn:#e29a2e; --ag-warn-bg:#fbf1de;
  --ag-danger:#e0584d; --ag-danger-bg:#fcecea; --ag-blue:#3b82d9;
  --ag-r-lg:24px; --ag-r-md:16px; --ag-r-sm:11px;
  --ag-shadow-panel:0 30px 70px -28px rgba(46,38,98,.40), 0 8px 22px -10px rgba(46,38,98,.20);
  --ag-shadow-card:0 1px 0 rgba(20,20,40,.02), 0 4px 16px -10px rgba(46,38,98,.18);
  --ag-shadow-mark:0 10px 24px -10px rgba(93,74,230,.65);
  --ag-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* ---- legacy names remapped onto the violet palette -------------------- */
  --blue:#5a47e8; --blue-d:#4a39cf; --blue-700:#4a39cf;
  --blue-soft:#f3f1fe; --blue-line:#ddd5fb;
  --bg:#faf9ff; --card:#ffffff; --line:#ececf2; --line-2:#f3f3f8; --hover:#f5f4fc;
  --txt:#1b1c2e; --txt-2:#5b5d72; --txt-3:#9a9cb0;
  --violet:#6d5efc; --violet-2:#8a5cf6; --ai-grad:linear-gradient(150deg,#8e7dff 0%,#6d5efc 46%,#5942e6 100%);
  --green:#18a86b; --green-bg:#e6f6ee; --green-tx:#138a58;
  --amber:#e29a2e; --amber-bg:#fbf1de; --amber-tx:#c98318;
  --red:#e0584d; --red-bg:#fcecea; --red-tx:#c0473d;
  --radius:14px; --radius-lg:18px;
  --shadow-card:0 1px 0 rgba(20,20,40,.02), 0 4px 16px -10px rgba(46,38,98,.18);
  --shadow-pop:0 30px 70px -28px rgba(46,38,98,.42), 0 10px 26px -12px rgba(46,38,98,.24);
  --shadow-bubble:0 12px 26px -10px rgba(93,74,230,.62), 0 4px 12px -6px rgba(46,38,98,.30);
  --font:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-family:var(--font);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Neutralize native button chrome WITHOUT a `background` declaration — a
   `background:none` here (specificity .ppds-agent-root button = 0,1,1) would
   override .launcher / .w-send (0,1,0) and make them transparent. appearance:none
   removes the native grey fill without competing on the background property. */
.ppds-agent-root button{font-family:inherit;cursor:pointer;border:none;-webkit-appearance:none;appearance:none;}
.ppds-agent-root svg{width:18px;height:18px;flex:none;}

/* Legacy avatar tile (kept for back-compat; the brand mark below supersedes it) */
.ppds-agent-root .ai-av{
  display:grid;place-items:center;border-radius:11px;background:var(--ag-grad);color:#fff;flex:none;
  box-shadow:var(--ag-shadow-mark);
}
.ppds-agent-root .ai-av svg{width:58%;height:58%;}

/* ============================================================
   The brand mark — animated node network
   (central core node coordinating three pulsing satellites)
   ============================================================ */
.ag-mark{
  position:relative;display:grid;place-items:center;flex:none;
  background:var(--ag-grad);
  box-shadow:var(--ag-shadow-mark), inset 0 1px 0 rgba(255,255,255,.45);
  overflow:hidden;color:#fff;
}
.ag-mark::before{                 /* glossy top sheen */
  content:"";position:absolute;inset:0;
  background:radial-gradient(130% 80% at 28% -10%, rgba(255,255,255,.45), transparent 58%);
  pointer-events:none;
}
.ag-mark .ag-net-svg{position:relative;z-index:1;width:76%;height:76%;overflow:visible;}
.ag-net{transform-origin:24px 24px;animation:ag-spin 26s linear infinite;}
.ag-link{
  stroke:rgba(255,255,255,.58);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:2.6 5.2;animation:ag-flow 2.6s linear infinite;
}
.ag-node{fill:#fff;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 2.5px rgba(255,255,255,.85));}
.ag-s1{animation:ag-pulse 2.8s ease-in-out infinite;}
.ag-s2{animation:ag-pulse 2.8s ease-in-out .55s infinite;}
.ag-s3{animation:ag-pulse 2.8s ease-in-out 1.1s infinite;}
.ag-core{fill:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.95));}
.ag-core-ring{
  fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.2;
  transform-box:fill-box;transform-origin:center;animation:ag-ring 2.8s ease-out infinite;
}
/* thinking / working state — faster, brighter, with a sweeping highlight */
.ag-mark.is-thinking .ag-net{animation-duration:7s;}
.ag-mark.is-thinking .ag-link{animation-duration:1s;stroke:rgba(255,255,255,.85);}
.ag-mark.is-thinking .ag-s1,
.ag-mark.is-thinking .ag-s2,
.ag-mark.is-thinking .ag-s3{animation-duration:1.1s;}
.ag-mark.is-thinking .ag-core-ring{animation-duration:1.1s;}
.ag-mark.is-thinking::after{
  content:"";position:absolute;inset:-45%;
  background:conic-gradient(from 0deg, transparent 0 68%, rgba(255,255,255,.55) 84%, transparent 100%);
  animation:ag-sweep 1.7s linear infinite;pointer-events:none;
}
@keyframes ag-spin{to{transform:rotate(360deg);}}
@keyframes ag-sweep{to{transform:rotate(360deg);}}
@keyframes ag-flow{to{stroke-dashoffset:-15.6;}}
@keyframes ag-pulse{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.4);opacity:1;}}
@keyframes ag-ring{0%{transform:scale(.55);opacity:.9;}100%{transform:scale(1.45);opacity:0;}}

/* ============================================================
   Launcher bubble (the floating icon)
   ============================================================ */
.launcher{
  position:fixed;right:26px;bottom:26px;z-index:60;width:62px;height:62px;border-radius:20px;
  background:var(--ag-grad);box-shadow:var(--ag-shadow-mark), inset 0 1px 0 rgba(255,255,255,.4);
  display:grid;place-items:center;color:#fff;padding:0;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.2), box-shadow .18s;
}
.launcher:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 16px 34px -12px rgba(93,74,230,.7), inset 0 1px 0 rgba(255,255,255,.45);}
.launcher.hide{transform:scale(0);opacity:0;pointer-events:none;}
.launcher .ag-mark{width:100%;height:100%;border-radius:20px;box-shadow:none;background:transparent;}
.launcher .ag-mark::before{display:none;}
.launcher .ldot{position:absolute;inset:0;border-radius:20px;border:2px solid rgba(255,255,255,.6);
  animation:ppdsw-pulse 1.8s ease-out infinite;pointer-events:none;}
@keyframes ppdsw-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}

/* ============================================================
   Widget shell
   ============================================================ */
.widget{
  position:fixed;right:26px;bottom:26px;z-index:61;width:524px;max-width:calc(100vw - 36px);height:680px;max-height:calc(100vh - 40px);
  background:var(--card);border:1px solid rgba(255,255,255,.7);border-radius:var(--ag-r-lg);box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;
  animation:ppdsw-popin .26s cubic-bezier(.2,.85,.3,1.1);color:var(--txt);
}
@keyframes ppdsw-popin{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:scale(1);opacity:1}}

/* Header */
.w-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 15px;border-bottom:1px solid var(--ag-line);
  background:linear-gradient(180deg,#fff,#fcfcfe);}
.w-head .ag-mark{border-radius:13px;}
.w-head .htxt{flex:1;min-width:0;}
.w-head .ttl{font-weight:700;font-size:16px;line-height:1.1;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;}
.w-head .ttl .w-en{font-size:11px;font-weight:600;color:var(--ag-faint);letter-spacing:.01em;flex:none;}
.w-head .sub{font-size:12.5px;color:var(--ag-muted);margin-top:4px;display:flex;align-items:center;gap:6px;font-weight:500;}
.w-head .sub b{color:var(--ag-ink-2);font-weight:600;}
.w-head .sub .d{width:7px;height:7px;border-radius:50%;background:var(--ag-ok);flex:none;
  box-shadow:0 0 0 0 rgba(24,168,107,.5);animation:ag-beacon 2.4s ease-out infinite;}
.w-head .sub .d.busy{background:var(--ag-warn);box-shadow:0 0 0 0 rgba(226,154,46,.5);animation:ag-beacon-busy 2.4s ease-out infinite;}
@keyframes ag-beacon{0%{box-shadow:0 0 0 0 rgba(24,168,107,.45);}70%,100%{box-shadow:0 0 0 6px rgba(24,168,107,0);}}
@keyframes ag-beacon-busy{0%{box-shadow:0 0 0 0 rgba(226,154,46,.5);}70%,100%{box-shadow:0 0 0 6px rgba(226,154,46,0);}}
.w-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ag-muted);flex:none;
  background:transparent;transition:background .15s, color .15s;}
.w-ic:hover{background:var(--ag-bg-soft);color:var(--ag-ink);}
.w-ic.back{margin-right:-2px;}
.w-ic.active{background:var(--ag-violet-50);color:var(--ag-violet-700);}
.w-ic.active:hover{background:var(--ag-violet-50);color:var(--ag-violet-700);}
.w-ic svg{width:18px;height:18px;}

/* Scroll body */
.w-body{flex:1;overflow:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px;position:relative;background:var(--ag-bg-tint);}
.w-body > *{flex:0 0 auto;}
.w-body::-webkit-scrollbar{width:7px;}
.w-body::-webkit-scrollbar-thumb{background:#d7d4ea;border-radius:8px;border:2px solid transparent;background-clip:content-box;}

/* ---- user message bubble ---- */
.t-user{align-self:flex-end;max-width:82%;background:var(--ag-grad);color:#fff;border-radius:16px 16px 6px 16px;
  padding:11px 15px;font-size:14px;line-height:1.45;font-weight:500;box-shadow:var(--ag-shadow-mark);
  white-space:pre-wrap;overflow-wrap:anywhere;}  /* user text is NEVER clipped */
.t-user .files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.t-user .fc{background:rgba(255,255,255,.18);border-radius:7px;padding:4px 9px;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:6px;}
.t-user .fc svg{width:12px;height:12px;}

/* ---- AI prose bubble ---- */
.t-text{display:flex;gap:11px;align-items:flex-start;}
.t-text .ag-mark{margin-top:2px;border-radius:9px;}
.t-text .bd-wrap{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.t-text .bd{background:#fff;border:1px solid var(--ag-line);border-radius:6px 16px 16px 16px;padding:13px 16px;
  font-size:14.5px;line-height:1.5;color:var(--ag-ink-2);box-shadow:var(--ag-shadow-card);max-width:100%;}
/* LONG agent message: cosmetic collapse only — full HTML stays in the DOM. */
.t-text .bd.clamped{max-height:360px;overflow:hidden;position:relative;}
.t-text .bd.clamped::after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none;border-radius:0 0 16px 16px;}
.t-text .bd-more{align-self:flex-start;background:none;border:none;cursor:pointer;color:var(--ag-violet-700);
  font-weight:700;font-size:12.5px;padding:2px;}
.t-text .bd-more:hover{text-decoration:underline;}
.t-text .bd b,.t-text .bd strong{color:var(--ag-ink);font-weight:700;}
.t-text .bd p{margin:0 0 7px;} .t-text .bd > *:last-child{margin-bottom:0;}
.t-text .bd h1,.t-text .bd h2,.t-text .bd h3,.t-text .bd h4{margin:10px 0 6px;line-height:1.25;font-weight:800;color:var(--ag-ink);letter-spacing:-.01em;}
.t-text .bd h1{font-size:16px;} .t-text .bd h2{font-size:15px;} .t-text .bd h3{font-size:14px;} .t-text .bd h4{font-size:13px;color:var(--ag-muted);}
.t-text .bd ul,.t-text .bd ol{margin:6px 0 8px;padding-left:20px;}
.t-text .bd li{margin:3px 0;}
.t-text .bd a{color:var(--ag-violet-700);font-weight:650;text-decoration:none;}
.t-text .bd a:hover{text-decoration:underline;}
.t-text .bd code{background:var(--ag-bg-soft);border:1px solid var(--ag-line);border-radius:5px;padding:1px 5px;font-family:var(--ag-mono);font-size:12px;}
.t-text .bd pre{background:#14152a;color:#e6e9f2;border-radius:9px;padding:11px 13px;overflow:auto;margin:8px 0;}
.t-text .bd pre code{background:none;border:none;color:inherit;padding:0;font-size:12px;}
.t-text .bd blockquote{margin:8px 0;padding:4px 12px;border-left:3px solid var(--ag-violet-100);color:var(--ag-muted);}
.t-text .bd hr{border:none;border-top:1px solid var(--ag-line);margin:10px 0;}
/* Wide markdown tables become a horizontally-scrollable block. */
.t-text .bd table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:8px 0;font-size:12.5px;}
.t-text .bd table::-webkit-scrollbar{height:7px;}
.t-text .bd table::-webkit-scrollbar-thumb{background:#d7d4ea;border-radius:8px;}
.t-text .bd th,.t-text .bd td{border:1px solid var(--ag-line);padding:6px 9px;text-align:left;}
.t-text .bd th{background:var(--ag-violet-50);color:var(--ag-violet-700);font-weight:750;}

/* transient "ongoing operation" line (think/tool collapsed into one updating row) */
.t-activity{display:flex;align-items:center;gap:10px;color:var(--ag-ink-2);font-size:13px;font-weight:600;padding:6px 4px 2px;}
.t-activity .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.spin{width:15px;height:15px;border:2px solid var(--ag-violet-100);border-top-color:var(--ag-violet);border-radius:50%;animation:ag-spin .8s linear infinite;flex:none;}

/* think (reasoning) rows — kept for any persisted think block */
.t-think{display:flex;align-items:center;gap:9px;color:var(--ag-muted);font-size:13px;font-weight:500;padding:3px 2px;}
.t-think .dots{display:flex;gap:4px;}
.t-think .dots i{width:6px;height:6px;border-radius:50%;background:var(--ag-violet);animation:ppdsw-bb 1.1s infinite;}
.t-think .dots i:nth-child(2){animation-delay:.16s} .t-think .dots i:nth-child(3){animation-delay:.32s}
@keyframes ppdsw-bb{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* plan card */
.t-plan{background:#fff;border:1px solid var(--ag-line);border-radius:13px;padding:13px 15px;box-shadow:var(--ag-shadow-card);}
.t-plan .h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ag-faint);margin-bottom:9px;}
.t-plan .step{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;padding:5px 0;color:var(--ag-ink-2);}
.t-plan .n{width:20px;height:20px;border-radius:6px;background:var(--ag-violet-50);color:var(--ag-violet-600);font-size:11px;font-weight:800;display:grid;place-items:center;flex:none;margin-top:1px;}

/* tool card (persisted) */
.t-tool{display:flex;align-items:flex-start;gap:10px;padding:9px 13px;border-radius:13px;background:#fff;border:1px solid var(--ag-line);box-shadow:var(--ag-shadow-card);}
.t-tool .ico{width:26px;height:26px;border-radius:8px;background:var(--ag-violet-50);color:var(--ag-violet-600);display:grid;place-items:center;flex:none;}
.t-tool .ico svg{width:16px;height:16px;}
.t-tool.warn .ico{background:var(--ag-warn-bg);color:var(--amber-tx);}
.t-tool .bd{flex:1;min-width:0;}
.t-tool .ti{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;color:var(--ag-ink);}
.t-tool .me{font-size:11.5px;color:var(--ag-faint);margin-top:2px;}
.t-tool .ck{width:18px;height:18px;border-radius:50%;background:var(--ag-ok-bg);color:var(--ag-ok);display:grid;place-items:center;flex:none;margin-top:2px;}
.t-tool .ck svg{width:13px;height:13px;}
@keyframes ppdsw-sp{to{transform:rotate(360deg)}}

/* ============================================================
   Approval card (echoes the design's plan-diff proposal)
   ============================================================ */
.t-appr{border:1px solid var(--ag-violet-100);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--ag-shadow-card);}
.t-appr.done{border-color:var(--ag-ok-bg);background:#f6fcf9;box-shadow:none;}
.t-appr.rej{border-color:var(--ag-line);background:#fff;box-shadow:none;}
.t-appr.closed{border-color:var(--ag-line);background:#fff;box-shadow:none;opacity:.9;}
.t-appr.closed .resolved{color:var(--ag-faint);}
.t-appr .ah{display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--ag-grad-soft);border-bottom:1px solid var(--ag-violet-100);}
.t-appr .ah .ag-mark{border-radius:7px;}
.t-appr .ah .tag{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;background:#fff;color:var(--ag-violet-700);border:1px solid var(--ag-violet-100);
  padding:3px 9px;border-radius:999px;display:flex;align-items:center;gap:5px;}
.t-appr .ah .tag svg{width:12px;height:12px;}
.t-appr .at{font-weight:700;font-size:14px;letter-spacing:-.01em;padding:12px 15px 4px;color:var(--ag-ink);}
.t-appr .ad{padding:0 15px 12px;font-size:12.5px;color:var(--ag-muted);line-height:1.5;}
.t-appr .diff{margin:0 15px 13px;background:var(--ag-bg-tint);border:1px solid var(--ag-line);border-radius:11px;padding:4px 13px;}
.t-appr .diff .row{display:flex;align-items:center;justify-content:space-between;gap:11px;font-size:13px;padding:9px 0;}
.t-appr .diff .row + .row{border-top:1px solid var(--ag-line-2);}
.t-appr .diff .row > span:last-child{white-space:nowrap;flex:none;display:flex;align-items:center;gap:5px;}
.t-appr .diff .row .a{font-family:var(--ag-mono);font-size:11px;color:var(--ag-faint);text-decoration:line-through;}
.t-appr .diff .row .b{font-family:var(--ag-mono);font-size:11px;font-weight:700;color:var(--ag-violet-700);background:var(--ag-violet-50);border:1px solid var(--ag-violet-100);border-radius:6px;padding:1px 6px;}
.t-appr .acts{display:flex;gap:8px;padding:0 15px 14px;}
.t-appr .acts button{height:42px;border-radius:11px;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .14s, filter .14s, background .15s;}
.t-appr .acts button:hover{transform:translateY(-1px);}
.t-appr .acts button svg{width:16px;height:16px;}
.t-appr .ok{flex:1;background:var(--ag-grad);color:#fff;box-shadow:var(--ag-shadow-mark);}
.t-appr .ok:hover{filter:brightness(1.06);}
.t-appr .no{flex:0 0 auto;padding:0 16px;background:#fff;border:1px solid var(--ag-line);color:var(--ag-ink-2);}
.t-appr .no:hover{background:var(--ag-bg-soft);}
.t-appr .resolved{padding:13px 15px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;}
.t-appr .resolved svg{width:14px;height:14px;}
.t-appr.done .resolved{color:var(--ag-ok);}
.t-appr.rej .resolved{color:var(--ag-muted);}

/* result line */
.t-result{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:650;color:var(--ag-ok);padding:2px 4px;}
.t-result .ck{width:20px;height:20px;border-radius:50%;background:var(--ag-ok-bg);display:grid;place-items:center;flex:none;}
.t-result .ck svg{width:13px;height:13px;}

/* generated files */
.t-files{display:flex;flex-direction:column;gap:8px;}
.gfile{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--ag-line);border-radius:13px;padding:10px 12px;box-shadow:var(--ag-shadow-card);}
.gfile .ft{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex:none;}
.gfile .ft.pdf{background:#e0533b;} .gfile .ft.xls,.gfile .ft.xlsx{background:#18a86b;} .gfile .ft.csv{background:#0f9d8c;} .gfile .ft.doc,.gfile .ft.docx{background:#2b579a;} .gfile .ft.ppt,.gfile .ft.pptx{background:#d24726;}
.gfile .nm{font-size:13px;font-weight:700;color:var(--ag-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gfile .me{font-size:11px;color:var(--ag-faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gfile .dl{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--ag-line);display:grid;place-items:center;color:var(--ag-violet-600);flex:none;transition:background .15s, border-color .15s;}
.gfile .dl svg{width:18px;height:18px;}
.gfile .dl:hover{background:var(--ag-violet-50);border-color:var(--ag-violet-100);}

/* data table */
.t-table{background:#fff;border:1px solid var(--ag-line);border-radius:14px;overflow:hidden;box-shadow:var(--ag-shadow-card);}
.t-table .t-table-scroll{overflow-x:auto;}
.t-table .t-table-scroll::-webkit-scrollbar{height:7px;}
.t-table .t-table-scroll::-webkit-scrollbar-thumb{background:#d7d4ea;border-radius:8px;}
.t-table .th{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ag-faint);padding:11px 14px 6px;}
.t-table table{width:100%;border-collapse:collapse;font-size:12.5px;}
.t-table td,.t-table th{padding:9px 14px;text-align:left;border-top:1px solid var(--ag-line-2);}
.t-table th{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--ag-faint);text-transform:uppercase;}
.t-table td.was{color:var(--ag-faint);}
.t-table td.now{font-weight:750;color:var(--ag-ok);text-align:right;}
.t-table td.val{font-weight:650;color:var(--ag-ink);}
.t-table td.met{font-weight:600;color:var(--ag-ink-2);}
.t-table tr.tot td{background:var(--ag-violet-50);font-weight:800;color:var(--ag-violet-700);border-top:1px solid var(--ag-violet-100);}

/* stop pill */
.t-stop{align-self:center;font-size:12px;font-weight:650;color:var(--ag-muted);background:#fff;border:1px solid var(--ag-line);border-radius:20px;padding:6px 14px;display:flex;align-items:center;gap:7px;}

/* ============================================================
   Footer / composer
   ============================================================ */
.w-foot{flex:none;border-top:1px solid var(--ag-line);background:linear-gradient(180deg,#fcfcfe,#fff);padding:12px 14px 11px;}

/* attachments */
.w-att{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px;}
.attc{display:flex;align-items:center;gap:7px;background:var(--ag-violet-50);border:1px solid var(--ag-violet-100);border-radius:9px;padding:6px 8px 6px 9px;font-size:12px;font-weight:600;color:var(--ag-violet-700);}
.attc svg{width:13px;height:13px;}
.attc .x{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;color:var(--ag-violet-700);}
.attc .x svg{width:12px;height:12px;}
.attc .x:hover{background:#fff;}

/* input bar */
.w-input{display:flex;align-items:flex-end;gap:8px;border:1.5px solid var(--ag-line);border-radius:16px;padding:7px 7px 7px 9px;background:#fff;transition:border-color .15s, box-shadow .15s;}
.w-input:focus-within{border-color:var(--ag-violet-200);box-shadow:0 0 0 4px rgba(109,94,252,.1);}
.w-input .att{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ag-muted);flex:none;background:transparent;transition:background .15s, color .15s;}
.w-input .att svg{width:19px;height:19px;}
.w-input .att:hover{background:var(--ag-bg-soft);color:var(--ag-ink);}
.w-input textarea{flex:1;border:none;outline:none;resize:none;font-family:inherit;font-size:14px;line-height:1.45;padding:8px 2px;max-height:96px;color:var(--ag-ink);background:transparent;}
.w-input textarea::placeholder{color:var(--ag-faint);}
.w-send{width:38px;height:38px;border-radius:11px;background:var(--ag-grad);color:#fff;display:grid;place-items:center;flex:none;box-shadow:var(--ag-shadow-mark);transition:transform .14s, filter .14s, background .15s;}
.w-send svg{width:18px;height:18px;}
.w-send:hover{transform:translateY(-1px);filter:brightness(1.06);}
.w-send.stop{background:var(--ag-danger);box-shadow:0 8px 18px -8px rgba(224,88,77,.7);}
.w-send.stop:hover{filter:brightness(1.04);}
.w-send:disabled{background:var(--ag-bg-soft);color:var(--ag-faint);box-shadow:none;cursor:default;transform:none;filter:none;}

/* composer hint (full page) */
.w-hint{margin-top:9px;font-size:11.5px;color:var(--ag-faint);text-align:center;}
.w-hint kbd{font-family:var(--ag-mono);font-size:10.5px;background:var(--ag-bg-soft);border:1px solid var(--ag-line);border-radius:5px;padding:1px 5px;color:var(--ag-muted);}

/* ============================================================
   Microphone / voice input
   ============================================================ */
.w-mic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ag-muted);flex:none;background:transparent;transition:background .15s,color .15s;}
.w-mic svg{width:20px;height:20px;}
.w-mic:hover{background:var(--ag-violet-50);color:var(--ag-violet-600);}
.w-mic:disabled{cursor:default;color:var(--ag-faint);background:transparent;}
.w-mic.busy{color:var(--ag-violet);}
.w-mic-spin{width:18px;height:18px;border:2px solid var(--ag-violet-100);border-top-color:var(--ag-violet);border-radius:50%;animation:ag-spin .7s linear infinite;}

/* recording bar — replaces the input row while capturing audio */
.w-rec{align-items:center;gap:9px;padding:6px 7px 6px 8px;border-color:var(--ag-violet-200);box-shadow:0 0 0 4px rgba(109,94,252,.1);}
.w-rec-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:38px;padding:0 4px;background:var(--ag-violet-50);border-radius:11px;overflow:hidden;}
.w-rec-dot{width:9px;height:9px;border-radius:50%;background:var(--ag-danger);flex:none;box-shadow:0 0 0 0 rgba(224,88,77,.5);animation:ppdsw-recpulse 1.4s ease-out infinite;}
@keyframes ppdsw-recpulse{0%{box-shadow:0 0 0 0 rgba(224,88,77,.45)}70%{box-shadow:0 0 0 7px rgba(224,88,77,0)}100%{box-shadow:0 0 0 0 rgba(224,88,77,0)}}
.w-wave{flex:1;min-width:0;height:30px;display:block;}
.w-rec-time{flex:none;font-size:12.5px;font-weight:700;color:var(--ag-violet-700);font-variant-numeric:tabular-nums;letter-spacing:.02em;padding-right:4px;}
.w-rec-cancel{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ag-muted);flex:none;background:transparent;transition:background .15s,color .15s;}
.w-rec-cancel svg{width:18px;height:18px;}
.w-rec-cancel:hover{background:var(--ag-danger-bg);color:var(--ag-danger);}
.w-rec-stop{background:var(--ag-ok);box-shadow:0 8px 18px -8px rgba(24,168,107,.7);}
.w-rec-stop:hover{filter:brightness(1.04);}
.w-rec-stop svg{width:20px;height:20px;}

/* inline mic error */
.w-mic-err{display:flex;align-items:center;gap:8px;background:var(--ag-danger-bg);border:1px solid #f3cfcb;border-radius:11px;padding:7px 9px;margin-bottom:9px;font-size:12px;font-weight:600;color:var(--ag-danger);line-height:1.35;}
.w-mic-err .ic{display:grid;place-items:center;flex:none;}
.w-mic-err .ic svg{width:15px;height:15px;}
.w-mic-err .tx{flex:1;min-width:0;}
.w-mic-err .x{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;color:var(--ag-danger);flex:none;}
.w-mic-err .x svg{width:12px;height:12px;}
.w-mic-err .x:hover{background:#fff;}

/* drag-drop overlay */
.drop{position:absolute;inset:0;z-index:5;background:rgba(243,241,254,.92);border:2.5px dashed var(--ag-violet);border-radius:18px;margin:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ag-violet-700);font-weight:750;font-size:15px;backdrop-filter:blur(2px);}
.drop svg{width:40px;height:40px;}

/* ============================================================
   History (full-screen list view, used by the float "Geçmiş")
   ============================================================ */
.w-histwrap{flex:1;overflow:auto;padding:16px 14px 18px;background:var(--ag-bg-tint);}
.w-histwrap .newtask{width:100%;height:44px;border-radius:12px;background:var(--ag-grad);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px;box-shadow:var(--ag-shadow-mark);transition:filter .14s;}
.w-histwrap .newtask svg{width:18px;height:18px;}
.w-histwrap .newtask:hover{filter:brightness(1.06);}
.h-group{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ag-faint);margin:14px 2px 8px;}
.h-group:first-child{margin-top:0;}
.taskc{background:#fff;border:1px solid var(--ag-line);border-radius:13px;padding:12px 13px;margin-bottom:9px;box-shadow:var(--ag-shadow-card);cursor:pointer;transition:border-color .14s, transform .14s, box-shadow .14s;}
.taskc:hover{border-color:var(--ag-violet-200);transform:translateY(-1px);box-shadow:0 12px 26px -18px rgba(93,74,230,.5);}
.taskc .top{display:flex;align-items:flex-start;gap:9px;}
.taskc .tt{font-weight:700;font-size:13.5px;line-height:1.35;color:var(--ag-ink);flex:1;min-width:0;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere;}
.taskc .me{font-size:11.5px;color:var(--ag-faint);margin-top:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.taskc .me .o{color:var(--ag-ok);font-weight:700;}
.tstat{font-size:10px;font-weight:800;letter-spacing:.03em;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none;}
.tstat .d{width:6px;height:6px;border-radius:50%;}
.tstat.run{background:var(--ag-violet-50);color:var(--ag-violet-700);} .tstat.run .d{background:var(--ag-violet);animation:ppdsw-blink 1s infinite;}
.tstat.done{background:var(--ag-ok-bg);color:var(--ag-ok);} .tstat.done .d{background:var(--ag-ok);}
.tstat.fail{background:var(--ag-danger-bg);color:var(--ag-danger);} .tstat.fail .d{background:var(--ag-danger);}
@keyframes ppdsw-blink{50%{opacity:.3}}
.taskc .files{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;}
.taskc .files .mf{font-size:10.5px;font-weight:650;color:var(--ag-muted);background:var(--ag-bg-soft);border:1px solid var(--ag-line);border-radius:7px;padding:3px 7px;display:flex;align-items:center;gap:5px;}
.taskc .files .mf svg{width:13px;height:13px;}
.taskc.live{border-color:var(--ag-violet-200);}
.taskc .me .o.live{color:var(--ag-violet);}

/* ---- spectator (watching another user's live run, read-only) ---- */
.t-spectate{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650;color:var(--ag-violet-700);background:var(--ag-violet-50);border:1px solid var(--ag-violet-100);border-radius:11px;padding:8px 11px;margin-bottom:10px;line-height:1.4;}
.t-spectate .dot,.w-ro .dot{width:7px;height:7px;border-radius:50%;background:var(--ag-violet);flex:none;animation:ppdsw-blink 1s infinite;}
.w-foot-ro{display:flex;align-items:center;gap:10px;}
.w-ro{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--ag-violet-700);min-width:0;}
.w-ro-new{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ag-violet-700);background:var(--ag-violet-50);border:1px solid var(--ag-violet-100);border-radius:10px;padding:8px 12px;cursor:pointer;transition:.14s;}
.w-ro-new:hover{background:var(--ag-grad);color:#fff;border-color:transparent;}
.w-ro-new svg{width:15px;height:15px;}

/* ============================================================
   Full-page view ("AI Asistan" page = page-view of the same widget)
   Renders inside the app shell's <main>: a centered conversation column +
   a persistent chat-history rail on the right.
   ============================================================ */
.ppds-agent-root.as-page{height:100%;min-height:0;background:#f3f4f9;}
.fp-shell{display:grid;grid-template-columns:1fr 320px;height:100%;min-height:0;}
.widget.as-page{
  position:static;width:100%;height:100%;max-width:none;max-height:none;
  border:none;border-radius:0;box-shadow:none;animation:none;background:#fff;min-width:0;
}
/* hero header on the page */
.widget.as-page .w-head{
  background:radial-gradient(120% 140% at 12% -40%, #efeaff 0%, rgba(245,243,255,0) 60%), #fff;
  border-bottom:1px solid var(--ag-line-2);
  padding:20px max(20px, calc((100% - 880px)/2));
}
.widget.as-page .w-head .ttl{font-size:22px;letter-spacing:-.025em;}
.widget.as-page .w-head .ttl .w-en{font-size:12px;}
.widget.as-page .w-head .sub{font-size:13px;}
.widget.as-page .w-body{padding-left:max(20px, calc((100% - 880px)/2));padding-right:max(20px, calc((100% - 880px)/2));padding-top:22px;background:#fff;}
.widget.as-page .w-foot{padding-left:max(20px, calc((100% - 880px)/2));padding-right:max(20px, calc((100% - 880px)/2));}
.widget.as-page .drop{margin:16px;}
/* the greeting reads as a large welcome bubble on the page */
.widget.as-page .t-text.greet .bd{font-size:16px;line-height:1.55;border-radius:8px 18px 18px 18px;padding:16px 19px;}

/* right rail — chat history */
.fp-rail{background:#fafafd;border-left:1px solid var(--ag-line);padding:18px 14px;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden;}
.fp-rail-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.fp-rail-title{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap;color:var(--ag-ink);}
.fp-rail-title svg{width:16px;height:16px;color:var(--ag-violet);}
.fp-rail-title .en{font-size:10.5px;font-weight:600;color:var(--ag-faint);}
.fp-newchat{display:flex;align-items:center;gap:6px;flex:none;border:1px solid var(--ag-line);background:#fff;border-radius:9px;padding:6px 10px;font-family:inherit;font-size:12px;font-weight:700;color:var(--ag-violet-700);cursor:pointer;transition:background .14s, border-color .14s;}
.fp-newchat svg{width:14px;height:14px;}
.fp-newchat:hover{background:var(--ag-violet-50);border-color:var(--ag-violet-100);}
.fp-rail-search{display:flex;align-items:center;gap:8px;background:var(--ag-bg-soft);border:1px solid var(--ag-line);border-radius:10px;padding:8px 11px;color:var(--ag-faint);}
.fp-rail-search svg{width:15px;height:15px;flex:none;}
.fp-rail-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:13px;color:var(--ag-ink);}
.fp-rail-search input::placeholder{color:var(--ag-faint);}
.fp-hist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;margin:0 -4px;padding:0 4px;}
.fp-hist::-webkit-scrollbar{width:7px;}
.fp-hist::-webkit-scrollbar-thumb{background:#d7d4ea;border-radius:8px;border:2px solid transparent;background-clip:content-box;}
.fp-hist-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ag-faint);padding:13px 8px 5px;}
.fp-hist-empty{font-size:12px;color:var(--ag-faint);text-align:center;padding:24px 8px;}
.fp-hist-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;cursor:pointer;transition:background .14s, box-shadow .14s;}
.fp-hist-item:hover{background:#fff;box-shadow:var(--ag-shadow-card);}
.fp-hist-item.active{background:var(--ag-violet-50);}
.fp-hist-item .ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fff;border:1px solid var(--ag-line);color:var(--ag-muted);}
.fp-hist-item .ic svg{width:15px;height:15px;}
.fp-hist-item.active .ic{background:transparent;border:none;padding:0;}
.fp-hist-item:hover .ic{border-color:var(--ag-violet-100);color:var(--ag-violet-600);}
.fp-hist-item .bd{min-width:0;flex:1;}
.fp-hist-item .bd .t{font-size:13px;font-weight:600;color:var(--ag-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-hist-item.active .bd .t{color:var(--ag-violet-700);font-weight:700;}
.fp-hist-item .bd .m{font-size:11px;color:var(--ag-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;display:flex;align-items:center;gap:5px;}
.fp-hist-item .bd .m .o{color:var(--ag-ok);font-weight:700;} .fp-hist-item .bd .m .o.live{color:var(--ag-violet);}
.fp-hist-item .tm{flex:none;font-family:var(--ag-mono);font-size:10px;color:var(--ag-faint);align-self:flex-start;margin-top:3px;}

/* ============================================================
   Reduced motion + small screens
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ppds-agent-root *, .ppds-agent-root *::before, .ppds-agent-root *::after{animation:none !important;}
}
@media (max-width:980px){
  .fp-shell{grid-template-columns:1fr;}
  .fp-rail{display:none;}
}
@media (max-width:480px){
  .widget{right:8px;bottom:8px;width:calc(100vw - 16px);max-height:calc(100vh - 16px);}
  .launcher{right:16px;bottom:16px;}
}

/* ==== styles/entity-form.css ==== */
/* Reusable entity form modal (window.EntityFormModal) + column-picker popover. */
.entity-form-modal {
  background: var(--surface, #fff);
  border-radius: 14px;
  width: min(620px, calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .26);
  overflow: hidden;
}
.entity-form-modal-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.entity-form-modal-h h2 { margin: 0; font-size: 16px; }
.entity-form-modal-b {
  padding: 16px 20px; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.entity-form-row { display: flex; flex-direction: column; gap: 4px; }
.entity-form-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.entity-form-help { font-size: 10.5px; color: var(--text-3); }
.entity-form-modal .input.is-error { border-color: var(--danger); }
.entity-form-modal-f {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2, #f8fafc);
}

/* Column-picker popover (Orders/table column visibility) */
.col-pick-pop {
  position: absolute; right: 0; top: 32px; z-index: 50;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18); padding: 8px; min-width: 200px;
}
.col-pick-pop label {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  font-size: 12.5px; border-radius: 6px; cursor: pointer;
}
.col-pick-pop label:hover { background: var(--surface-2); }

/* ==== styles/app-cizelge.css ==== */
/* PPDS — Çizelge v2 styles. Built from 0 for the lightweight v2 Gantt.
   The toolbar / overview strip / gantt grid are NEW (cz-* classes); the reused
   pieces (KPI strip, Strateji button, op drawer) keep their existing classes. */

.cz-page { display: flex; flex-direction: column; }

/* ── Toolbar ──────────────────────────────────────────────────────────── */
.cz-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin: 10px 0;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
}
.cz-toolbar .cz-tb-group { display: flex; align-items: center; gap: 4px; }
.cz-toolbar .cz-sep { width: 1px; height: 22px; background: var(--border, #e5e7eb); margin: 0 4px; }
.cz-toolbar .cz-spacer { flex: 1; }
.cz-range-label { font-size: 12px; font-weight: 600; color: var(--text-2, #475569); white-space: nowrap; padding: 0 4px; }
.cz-toggle { display: inline-flex; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; overflow: hidden; }
.cz-toggle button { border: 0; background: transparent; padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--text-2, #475569); }
.cz-toggle button.active { background: var(--brand-500, #2563eb); color: #fff; }
.cz-toolbar select.input { height: 30px; font-size: 12px; }
/* A3 — freeze-mode toggle ("Sadece manuel harekete izin ver") shown next to
   the Plan Dondur button while a freeze horizon is set. */
.cz-freeze-mode { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2, #475569); white-space: nowrap; cursor: pointer; }
.cz-freeze-mode input { margin: 0; cursor: pointer; }

/* ── Overview strip (bird's-eye day fill) ─────────────────────────────── */
.cz-overview { position: relative; margin: 4px 0 8px; padding: 6px 8px;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; }
.cz-overview-grid { display: grid; gap: 2px; align-items: end; height: 46px; }
.cz-ov-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; background: transparent; border: 0; cursor: pointer; padding: 0; }
.cz-ov-bar { width: 70%; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-400, #60a5fa); transition: height .2s ease; }
.cz-ov-lbl { font-size: 9px; color: var(--text-3, #94a3b8); margin-top: 2px; white-space: nowrap; }

/* ── Gantt ───────────────────────────────────────────────────────────── */
.cz-wrap { position: relative; }
.cz-scroll { overflow: auto; max-height: calc(100vh - 360px); min-height: 300px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--surface, #fff); }
.cz-grid {
  position: relative; display: grid;
  grid-template-columns: var(--cz-label-w, 174px) 1fr;
  width: calc(100% * var(--cz-zoom, 1)); min-width: 100%;
  --cz-header-h: 40px;
}
/* sticky machine column + header sit ABOVE ALL scrolled content — bars (z:1),
   warn-marked bars, search-match rings (z:12), the now-line + arrows — so every
   bar slides UNDER them on scroll, never over the machine names (#3 layering).
   Only an actively-dragged bar (z:30) floats above, which is intended feedback. */
.cz-corner { position: sticky; top: 0; left: 0; z-index: 22; height: var(--cz-header-h);
  background: var(--surface-2, #f8fafc); border-right: 1px solid var(--border, #e5e7eb);
  border-bottom: 1px solid var(--border, #e5e7eb); display: flex; align-items: center; padding: 0 10px;
  font-size: 11px; font-weight: 700; color: var(--text-3, #94a3b8); }
.cz-header { position: sticky; top: 0; z-index: 21; height: var(--cz-header-h);
  background: var(--surface-2, #f8fafc); border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex; flex-direction: column; }
.cz-hdr-days { display: grid; flex: 1; min-height: 0; }
.cz-tick { border-left: 1px solid var(--border, #eef2f7); display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; padding: 0 6px; overflow: hidden; }
.cz-tick .d-num { font-size: 12px; font-weight: 700; color: var(--text-1, #1e293b); line-height: 1.1; }
.cz-tick .d-name { font-size: 9px; color: var(--text-3, #94a3b8); }
.cz-tick.is-weekend { background: rgba(148,163,184,.07); }
/* Hourly header (#9): 24 hour cells per day, aligned to the widened grid. */
.cz-hdr-hours { display: grid; height: 22px; border-top: 1px solid var(--border, #eef2f7); }
.cz-hcell { display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 600;
  color: var(--text-3, #94a3b8); border-left: 1px solid rgba(148,163,184,.12); overflow: hidden; }
.cz-hcell.is-mid { border-left: 1px solid var(--border, #cbd5e1); color: var(--text-2, #475569); font-weight: 700; }
.cz-hcell.is-shift { color: var(--text-2, #64748b); }

.cz-row-l { position: sticky; left: 0; z-index: 20; height: 40px; display: flex; align-items: center; gap: 6px;
  padding: 0 8px 0 12px; background: var(--surface, #fff);
  border-right: 1px solid var(--border, #e5e7eb); border-bottom: 1px solid var(--border, #f1f5f9); }
.cz-row-l .m-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cz-row-l .m-name { font-size: 12px; font-weight: 600; color: var(--text-1, #1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-row-l .m-area { font-size: 9px; color: var(--text-3, #94a3b8); text-transform: uppercase; letter-spacing: .4px; }
/* per-machine doluluk: 4px left colour bar (#4) + % chip, both red→green */
.cz-row-l.util-graded::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cz-util-bar, #94a3b8); }
.cz-util-chip { flex: none; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-2, #eef2f7); color: var(--text-2, #475569); }
.cz-row-r { position: relative; height: 40px; border-bottom: 1px solid var(--border, #f1f5f9);
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), var(--border, #eef2f7) 100%);
  background-repeat: repeat-x; }

/* Closed-shift hatch (Vardiyalar non-working windows). Backend-computed slices
   (clipped + merged); the frontend only paints them. Rendered FIRST in the row so
   it sits BEHIND the op bars (z-index:0 + tree order). Mirrors v1 .gantt-closed-shift. */
.cz-closed { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  background: var(--st-closed-bg, repeating-linear-gradient(135deg, #f1f5f9, #f1f5f9 4px, #e2e8f0 4px, #e2e8f0 8px)); }

/* z-index:1 traps the bar's children (warn icons, pin badge, matline) inside the
   bar's own stacking context so they slide UNDER the sticky machine column on
   scroll, never over it (#3). overflow:visible lets the short label spill (below). */
.cz-bar { position: absolute; top: 6px; bottom: 6px; min-width: 2px; border-radius: 5px; z-index: 1;
  background: var(--brand-500, #2563eb); color: #fff; font-size: 10px; line-height: 1; cursor: grab;
  display: flex; align-items: center; padding: 0 6px; overflow: visible; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: left .14s ease, width .14s ease; }
/* The short label (e.g. "DASK3") always renders in full — when the bar is
   narrower than the text it spills to the right (v1 parity); a text-shadow keeps
   it legible over a neighbour. Never clipped/ellipsised (#1). */
.cz-bar .bl { overflow: visible; text-overflow: clip; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.4); }
/* Status fill colours (#6) — same palette as v1 Çizelge. Backend DECIDES the
   status key (display.bar_status); CSS holds the theme palette. The colour of
   each category is customer-configurable (A2): every rule reads
   var(--st-<key>-bg, <default>) — the default IS the original value, so with no
   override the look is byte-identical; window.PPDSStatusColors injects the var
   only for a category the customer actually recoloured. Solid categories also
   read var(--st-<key>-fg, #fff) so the bar text stays legible on a custom fill. */
.cz-bar.st-planli,    .cz-legend-sw.st-planli    { background: var(--st-planli-bg, linear-gradient(180deg, #4570e0, #2a4fb8)); color: var(--st-planli-fg, #fff); }   /* Planlı */
.cz-bar.st-proses,    .cz-legend-sw.st-proses    { background: var(--st-proses-bg, linear-gradient(180deg, #10b981, #047857)); color: var(--st-proses-fg, #fff); }   /* Proses (aktif) */
.cz-bar.st-done-prod, .cz-legend-sw.st-done-prod { background: var(--st-done-prod-bg, linear-gradient(180deg, #9ca3af, #6b7280)); color: var(--st-done-prod-fg, #fff); }   /* Bitmiş Üretim */
/* Validasyon (A2) — SAP PV-stat validation orders, Nobel's yellow convention.
   Dark text by default (yellow fill); a custom fill gets a luminance-picked fg. */
.cz-bar.st-validasyon, .cz-legend-sw.st-validasyon { background: var(--st-validasyon-bg, linear-gradient(180deg, #f5c518, #d99e00)); color: var(--st-validasyon-fg, #3a2e00); }
.cz-bar.is-dragging { transition: none !important; z-index: 30; opacity: .92; box-shadow: 0 6px 18px rgba(0,0,0,.28); cursor: grabbing; }
.cz-bar.is-dim { opacity: .28; }
.cz-bar.is-framed { box-shadow: 0 0 0 2px var(--brand-600, #1d4ed8), 0 4px 10px rgba(0,0,0,.18); }
.cz-bar.is-frozen { outline: 2px dashed rgba(15,23,42,.45); outline-offset: -2px; cursor: default; }
.cz-bar.is-pinned { cursor: default; }
.cz-pin-badge { position: absolute; top: -2px; right: 1px; font-size: 9px; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
/* Per-op validation warnings (mostly after a manual move): RED route-broken,
   YELLOW bulk-bekletme exceeded. Top-left so they never collide with the pin
   badge (top-right). pointer-events:auto so the planner can hover for the cause. */
.cz-warn { position: absolute; top: -3px; font-size: 10px; line-height: 1; pointer-events: auto;
  cursor: help; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); z-index: 2; }
.cz-warn-route { left: 1px; }
.cz-warn-bek   { left: 14px; }
.cz-warn-split { left: 27px; }
.cz-bar:has(.cz-warn-route) { outline: 2px solid #dc2626; outline-offset: -2px; }
.cz-bar:has(.cz-warn-bek):not(:has(.cz-warn-route)) { outline: 2px solid #f59e0b; outline-offset: -2px; }
.cz-bar:has(.cz-warn-split):not(:has(.cz-warn-route)):not(:has(.cz-warn-bek)) { outline: 2px dashed #f59e0b; outline-offset: -2px; }
body.cz-dragging { cursor: grabbing !important; user-select: none; }
body.cz-drag-blocked, body.cz-drag-blocked .cz-bar { cursor: not-allowed !important; }

/* Bottom material strip (#6) — Planlı future prod ops only. */
.cz-matline { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0 0 5px 5px; z-index: 3; pointer-events: none; }
.cz-matline.mat-eksik    { background: #ef4444; }
.cz-matline.mat-kalitede { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
.cz-matline.mat-ok       { background: #22c55e; }

/* Cleaning blocks (#8) — synthesized on the backend. Temizlik (production) /
   Kalıp changeover (packaging); striped like v1, greyed when done. */
/* Same height as a normal op bar (top/bottom 6px) and NO label — cleaning is
   read purely by its striped colour (hover title still gives Temizlik/Kalıp + sa). */
.cz-clean { position: absolute; top: 6px; bottom: 6px; min-width: 2px; border-radius: 5px;
  overflow: hidden; pointer-events: none; opacity: .96; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.cz-clean.st-temizlik,      .cz-legend-sw.st-temizlik      { background: var(--st-temizlik-bg, repeating-linear-gradient(45deg, #1f6b3a 0 6px, #175432 6px 12px)); }
.cz-clean.st-done-temizlik, .cz-legend-sw.st-done-temizlik { background: var(--st-done-temizlik-bg, repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 9px, rgba(0,0,0,.16) 9px 18px) , #74867b); }
/* changeover (Kalıp) reuses the same green stripe; future vs done by status */

/* ── A1 ad-hoc capacity blocks (downtime / trial / maintenance) ─────────── */
/* Immovable walls the planner drops on a machine row — hatched, one colour per
   type, each re-skinnable via the A2 colour panel (var(--st-<key>-bg, <default>)).
   They carry a free-text label; a double-click / right-click edits or deletes. */
.cz-block { position: absolute; top: 6px; bottom: 6px; min-width: 2px; border-radius: 5px; z-index: 2;
  display: flex; align-items: center; padding: 0 6px; overflow: visible; white-space: nowrap;
  color: #fff; font-size: 10px; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.cz-block .bl { pointer-events: none; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.5); }
.cz-block.st-bakim,        .cz-legend-sw.bakim        { background: var(--st-bakim-bg, repeating-linear-gradient(45deg, #d6443c 0 5px, #b3261e 5px 10px)); }
.cz-block.st-blk-deneme,   .cz-legend-sw.blk-deneme   { background: var(--st-blk-deneme-bg, repeating-linear-gradient(45deg, #7c3aed 0 6px, #5b21b6 6px 12px)); }
.cz-block.st-blk-elektrik, .cz-legend-sw.blk-elektrik { background: var(--st-blk-elektrik-bg, repeating-linear-gradient(45deg, #d97706 0 6px, #92400e 6px 12px)); }
.cz-block.st-blk-sistem,   .cz-legend-sw.blk-sistem   { background: var(--st-blk-sistem-bg, repeating-linear-gradient(45deg, #0e7490 0 6px, #0c4a5e 6px 12px)); }
.cz-block.st-blk-diger,    .cz-legend-sw.blk-diger    { background: var(--st-blk-diger-bg, repeating-linear-gradient(45deg, #64748b 0 6px, #475569 6px 12px)); }

/* Bottom legend (color-scheme key, like v1). Bakım swatch = red stripes (maint). */
.cz-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; padding: 8px 12px;
  font-size: 11px; color: var(--text-2, #475569); background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px; }
.cz-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cz-legend-sw { width: 18px; height: 12px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.cz-legend-sw.cz-closed-sw { background: var(--st-closed-bg, repeating-linear-gradient(135deg, #f1f5f9 0 4px, #e2e8f0 4px 8px)); }
/* blocked-drop reason tip (#3) — red so the planner reads WHY, not just a cursor. */
.cz-drag-tip.blocked { background: #b3261e; max-width: 260px; white-space: normal; }

/* ── Context menu (#4) ────────────────────────────────────────────────── */
.cz-ctx { position: fixed; z-index: 9998; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.18); padding: 4px; min-width: 168px; }
.cz-ctx button { display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 7px 10px; font-size: 12px; color: var(--text-1, #1e293b); cursor: pointer; border-radius: 6px; }
.cz-ctx button:hover { background: var(--surface-2, #f1f5f9); }

/* ── Move error hint (#4) ─────────────────────────────────────────────── */
.cz-move-hint { position: fixed; z-index: 9999; pointer-events: none; max-width: 280px; background: #b3261e;
  color: #fff; font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,.32); }

.cz-nowline { position: absolute; top: var(--cz-header-h); bottom: 0; width: 2px; z-index: 5;
  background: var(--danger, #ef4444);
  left: calc(var(--cz-label-w, 174px) + (100% - var(--cz-label-w, 174px)) * var(--cz-now-frac, 0)); }
.cz-nowline::before { content: ''; position: absolute; top: 0; left: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger, #ef4444); }

/* ── Dependency-arrow overlay (reuses GanttConnectors geometry) ───────── */
.cz-arrows { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 6; }
.cz-arrows path { stroke: #2f6df0; stroke-width: 2.4; fill: none; }
.cz-arrows path.offscreen { stroke-dasharray: 5 4; }
.cz-arrows .wait-badge { fill: #fff; stroke: #cbd5e1; stroke-width: 1; }
.cz-arrows .wait-text { fill: #475569; font-size: 10px; font-weight: 600; }
.cz-arrows .count-badge { fill: #2f6df0; }
.cz-arrows .count-text { fill: #fff; font-size: 10px; font-weight: 700; }

/* ── Drag tooltip ─────────────────────────────────────────────────────── */
.cz-drag-tip { position: fixed; z-index: 9999; pointer-events: none; background: #0f172a; color: #fff;
  font-size: 11px; padding: 4px 8px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.3); white-space: nowrap; }

/* ── Üretim Live (reused section, v2 standalone) ─────────────────────── */
.cz-live { margin-top: 14px; }
.cz-live .empty { padding: 18px; text-align: center; color: var(--text-3, #94a3b8); font-size: 13px; }

.cz-loading, .cz-error { padding: 28px; text-align: center; color: var(--text-2, #475569); font-size: 13px; }
.cz-error { color: var(--danger, #ef4444); }

/* ── Toolbar Vurgula + search (reuse global .toolbar-field/.sched-search-*) ── */
.cz-toolbar .toolbar-field { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.cz-toolbar .toolbar-label { margin: 0; font-size: 11px; font-weight: 600; color: var(--text-2, #475569); white-space: nowrap; }
.cz-toolbar .toolbar-select { height: 30px; font-size: 12px; }
.cz-toolbar .sched-search-input { height: 30px; font-size: 12px; }
/* A6 — weighing (tartım) lead-time input (compact numeric + unit suffix). */
.cz-toolbar .toolbar-num { height: 30px; width: 56px; font-size: 12px; text-align: right; }
.cz-toolbar .toolbar-suffix { font-size: 11px; color: var(--text-2, #475569); }

/* Search match — always visible (overrides the Vurgula dim) with an amber ring. */
.cz-bar.is-search-match { opacity: 1 !important; box-shadow: 0 0 0 2px #f59e0b, 0 2px 8px rgba(0,0,0,.25); z-index: 12; }

/* ── Status-colour settings panel (A2) ────────────────────────────────── */
.cz-colors-backdrop { position: fixed; inset: 0; z-index: 9997; background: rgba(15,23,42,.34);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.cz-colors-panel { width: min(420px, 100%); max-height: 88vh; overflow: auto;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28); padding: 16px 18px; }
.cz-colors-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cz-colors-title { flex: 1; font-size: 15px; font-weight: 700; color: var(--text-1, #1e293b); }
.cz-colors-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--text-3, #94a3b8); }
.cz-colors-grid { display: flex; flex-direction: column; gap: 8px; }
.cz-colors-row { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.cz-colors-row:hover { background: var(--surface-2, #f1f5f9); }
.cz-colors-row .cz-legend-sw { width: 24px; height: 15px; }
.cz-colors-name { flex: 1; font-size: 13px; color: var(--text-1, #1e293b); }
.cz-colors-input { width: 40px; height: 28px; padding: 0; border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; background: transparent; cursor: pointer; }
/* A4 — configurable bar serial-length input (same panel as the colours) */
.cz-colors-serial { cursor: default; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border, #eef2f7); }
.cz-colors-num { width: 64px; height: 28px; padding: 0 8px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; background: var(--surface-1, #fff); color: var(--text-1, #1e293b); font-size: 13px; }
.cz-colors-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--border, #eef2f7); }
.cz-colors-spacer { flex: 1; }
.cz-colors-actions .btn.danger { color: var(--danger, #dc2626); border-color: rgba(220,38,38,.4); }

/* ── A1 block editor (reuses the colours-panel shell) ─────────────────── */
.cz-block-panel { width: min(480px, 100%); }
.cz-block-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.cz-block-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cz-block-field-wide { grid-column: 1 / -1; }
.cz-block-lbl { font-size: 12px; font-weight: 600; color: var(--text-2, #475569); }
.cz-block-field .input { width: 100%; }
.cz-block-err { margin-top: 10px; padding: 7px 10px; border-radius: 7px; font-size: 12px;
  background: rgba(220,38,38,.1); color: var(--danger, #dc2626); }
.cz-ctx button.cz-ctx-danger { color: var(--danger, #dc2626); }

/* ── F1 re-anchor ("Güncelle") preview (reuses the colours-panel shell) ── */
.cz-reanchor-panel { width: min(680px, 100%); }
.cz-reanchor-summary { display: flex; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.cz-reanchor-stat { flex: 1; min-width: 90px; text-align: center; padding: 8px 6px;
  background: var(--surface-2, #f1f5f9); border-radius: 8px; }
.cz-reanchor-stat b { display: block; font-size: 20px; font-weight: 700; color: var(--text-1, #1e293b); }
.cz-reanchor-stat span { font-size: 11px; color: var(--text-3, #94a3b8); }
.cz-reanchor-empty { padding: 14px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: var(--surface-2, #f1f5f9); color: var(--text-2, #475569); }
.cz-reanchor-table-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--border, #eef2f7); border-radius: 8px; }
.cz-reanchor-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cz-reanchor-table th { position: sticky; top: 0; background: var(--surface-2, #f1f5f9);
  text-align: left; padding: 7px 10px; font-weight: 600; color: var(--text-2, #475569); }
.cz-reanchor-table td { padding: 6px 10px; border-top: 1px solid var(--border, #eef2f7); color: var(--text-1, #1e293b); }
.cz-reanchor-mid { color: var(--text-3, #94a3b8); font-size: 11px; }
.cz-reanchor-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.cz-reanchor-tag-completed { background: rgba(34,197,94,.16); color: #16a34a; }
.cz-reanchor-tag-in_progress { background: rgba(59,130,246,.16); color: #2563eb; }
.cz-reanchor-tag-queued { background: rgba(148,163,184,.2); color: #64748b; }
.cz-reanchor-late { color: var(--danger, #dc2626); font-weight: 600; }
.cz-reanchor-early { color: #16a34a; font-weight: 600; }
.cz-reanchor-more { padding: 6px 10px; font-size: 12px; color: var(--text-3, #94a3b8); }
.cz-reanchor-warn { margin-top: 10px; padding: 8px 10px; border-radius: 7px; font-size: 12px;
  background: rgba(234,179,8,.12); color: #a16207; }
.cz-reanchor-warn ul { margin: 4px 0 0; padding-left: 18px; }

/* F3 — planner bulk manual-marking panel (scheduler-bulk-mark.jsx). Reuses the
   cz-colors-* modal shell; adds the filter row + the marking grid. */
.cz-bulkmark-panel { width: min(760px, 100%); }
.cz-bulkmark-filters { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; }
.cz-bulkmark-fl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2, #475569); }
.cz-bulkmark-day { display: flex; align-items: center; gap: 4px; }
.cz-bulkmark-table-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--border, #eef2f7); border-radius: 8px; }
.cz-bulkmark-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cz-bulkmark-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2, #f1f5f9);
  text-align: left; padding: 7px 10px; font-weight: 600; color: var(--text-2, #475569); }
.cz-bulkmark-table td { padding: 6px 10px; border-top: 1px solid var(--border, #eef2f7); vertical-align: middle; }
.cz-bulkmark-row-active { background: rgba(59,130,246,.06); }
.cz-bulkmark-op { font-weight: 600; color: var(--text-1, #1e293b); }
.cz-bulkmark-op-sub { font-size: 11px; color: var(--text-3, #94a3b8); }
.cz-bulkmark-status { min-width: 96px; }
.cz-bulkmark-time { min-width: 170px; }
.cz-bulkmark-reason { min-width: 150px; width: 100%; }
.cz-bulkmark-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; font-size: 12.5px; color: var(--text-2, #475569); }
.cz-bulkmark-reanchor { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cz-bulkmark-count { color: var(--text-3, #94a3b8); }

/* ==== styles/app-modelle.css ==== */
/* PPDS — Modelle v2 (Talep Senaryosu) page. Implements PIP - Modelleme.dc.html
   using the app's design tokens (on-brand + themeable) rather than the mockup's
   raw hex. Scoped under .m2-page. */

.m2-page { padding: 22px 20px 90px; }

.m2-grid { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.m2-input { flex: 1 1 380px; max-width: 580px; min-width: 330px; }
.m2-results { flex: 1.7 1 520px; min-width: 360px; display: flex; flex-direction: column; gap: 16px; }

.m2-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); padding: 18px; }
.m2-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.m2-card-title { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14.5px; letter-spacing: .03em; color: var(--text); }
.m2-card-title.sm { font-size: 14px; }
.m2-ic { display: flex; color: var(--brand-600); flex: none; }
.m2-ic.ok { color: var(--ok); }
.m2-ic.brand { color: var(--brand-600); }
.m2-sub { font-size: 12px; color: var(--text-3); }

/* ---- scenario input ---- */
.m2-input-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.m2-total { text-align: right; }
.m2-total-v { font-weight: 800; font-size: 16px; color: var(--text); }
.m2-total-v span { font-weight: 600; color: var(--text-3); font-size: 13px; }
.m2-total-d { font-size: 11.5px; font-weight: 700; margin-top: 1px; }

.m2-date-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.m2-date-ic { display: flex; color: var(--text-3); }
.m2-date-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-3); flex: 1; }
.m2-date { border: 1px solid var(--border-2, var(--border)); border-radius: 9px; padding: 7px 10px; font-size: 13.5px; font-weight: 600; color: var(--text); font-family: inherit; background: var(--surface); }
.m2-note { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 0 0 16px; }
.m2-subnote { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin: 0 0 6px; }

.m2-tabs { display: flex; gap: 4px; background: var(--surface-2, var(--surface-3)); border-radius: 10px; padding: 4px; margin-bottom: 12px; }
.m2-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; background: transparent; border-radius: 7px; padding: 8px 6px; font-size: 13px; font-weight: 600; color: var(--text-3); cursor: pointer; }
.m2-tab.active { background: var(--surface); color: var(--brand-700); font-weight: 700; box-shadow: var(--shadow-1, 0 1px 2px rgba(20,30,60,.12)); }

.m2-presets { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.m2-chip { border-radius: 9px; padding: 8px 15px; font-size: 13.5px; font-weight: 700; cursor: pointer; background: var(--surface); color: var(--text-2); border: 1px solid var(--border-2, var(--border)); }
.m2-chip.active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

.m2-prodlist { margin-top: 6px; }
.m2-prow { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); }
.m2-pname { width: 158px; flex: none; font-weight: 700; color: var(--text); font-size: 13.5px; }
.m2-pslider { flex: 1; min-width: 80px; display: flex; align-items: center; }
.m2-pslider input[type=range] { width: 100%; accent-color: var(--brand-600); cursor: pointer; }
.m2-pqty { width: 152px; flex: none; }
.m2-pqty-in { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.m2-pqty-in input { width: 92px; text-align: right; border: 1px solid var(--border-2, var(--border)); border-radius: 8px; padding: 7px 9px; font-size: 13.5px; font-weight: 700; color: var(--text); font-family: inherit; background: var(--surface); }
.m2-pqty-u { color: var(--text-3); font-size: 12px; width: 26px; flex: none; }
.m2-pmeta { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 5px; font-size: 11px; }
.m2-dot { color: var(--border-strong, var(--text-3)); }
.m2-pparti { color: var(--text-3); }

.m2-calc-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.m2-stale { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--warn); }

/* ---- buttons ---- */
.m2-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-2, var(--border)); background: var(--surface); border-radius: 9px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; font-family: inherit; }
.m2-btn.sm { padding: 7px 11px; font-size: 13px; }
.m2-btn.lg { padding: 11px 20px; font-size: 14.5px; }
.m2-btn.primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(58,86,214,.22); }
.m2-btn.primary:hover { background: var(--brand-700); }
.m2-btn.ghost { background: var(--surface); }
.m2-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---- model tabs ---- */
.m2-models { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px; display: flex; gap: 2px; }
.m2-model { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px 7px; border: 1px solid transparent; background: transparent; border-radius: 10px; cursor: pointer; }
.m2-model.active { background: var(--surface-2, var(--brand-50)); }
.m2-model-ic { width: 34px; height: 34px; border-radius: 9px; color: #fff; display: flex; align-items: center; justify-content: center; }
.m2-model-nm { font-size: 11.5px; text-align: center; line-height: 1.2; }
.m2-model-bar { height: 3px; width: 64%; border-radius: 2px; }

/* ---- results body ---- */
.m2-results-body { display: flex; flex-direction: column; gap: 16px; }

/* feasibility */
.m2-feas-b { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.m2-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.m2-gauge { width: 112px; height: 112px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.m2-gauge-in { width: 86px; height: 86px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.m2-gauge-v { font-size: 31px; font-weight: 800; line-height: 1; }
.m2-gauge-s { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.m2-verdict { font-size: 13px; font-weight: 800; border-radius: 8px; padding: 5px 14px; }
.m2-dims { flex: 1; min-width: 230px; display: flex; flex-direction: column; gap: 13px; }
.m2-dim-h { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.m2-dim-h > span:first-child { font-weight: 600; color: var(--text-2); }
.m2-dim-v { color: var(--text-3); }
.m2-bar { height: 8px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.m2-bar-f { height: 100%; border-radius: 5px; transition: width .25s ease; }
.m2-limiting { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.m2-limiting b { color: var(--text); }

/* KPI grid */
.m2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.m2-kpi { padding: 14px 15px; }
.m2-kpi-l { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-3); text-transform: uppercase; line-height: 1.3; min-height: 26px; }
.m2-kpi-v { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.m2-kpi-b { font-size: 13px; color: var(--text-3); font-weight: 600; }
.m2-arrow { color: var(--border-strong, var(--text-3)); font-size: 13px; }
.m2-kpi-n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text); }
.m2-kpi-d { font-size: 12px; font-weight: 600; margin-top: 6px; }

/* two-up: line load + service */
.m2-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.m2-bn { font-size: 11px; font-weight: 700; border-radius: 7px; padding: 4px 9px; white-space: nowrap; }
.m2-stage { margin-top: 12px; }
.m2-stage-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 5px; color: var(--text); }
.m2-stage-m { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.m2-mstage-toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
.m2-mstage-toggle:hover { background: var(--surface-3); color: var(--text); }
.m2-mstage-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.m2-mstage-toggle svg { transition: transform .2s ease; }
.m2-mstage-list { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.m2-mstage-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 4px; color: var(--text-2); }
.m2-mstage-nm { font-weight: 600; color: var(--text); }
.m2-otif { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 4px; }
.m2-otif-v { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.m2-otif-l { font-size: 13px; color: var(--text-2); }
.m2-risk-h { font-size: 12px; color: var(--text-3); margin: 8px 0 2px; }
.m2-risk-row { display: flex; justify-content: space-between; align-items: center; background: var(--danger-bg); border-radius: 8px; padding: 7px 11px; margin-top: 6px; font-size: 12.5px; }
.m2-risk-row > span:first-child { font-weight: 700; color: var(--text); }
.m2-risk-d { color: var(--danger); font-weight: 800; white-space: nowrap; }
.m2-allok { background: var(--ok-bg); color: var(--ok); font-weight: 700; border-radius: 8px; padding: 11px; margin-top: 8px; font-size: 13px; }

/* material forecast */
.m2-mat-actions { display: flex; align-items: center; gap: 12px; }
.m2-short-badge { background: var(--danger-bg); color: var(--danger); font-weight: 800; font-size: 12.5px; border-radius: 7px; padding: 5px 10px; }
.m2-xport { position: relative; }
.m2-xport-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop, 0 10px 30px rgba(20,30,60,.18)); padding: 4px; min-width: 120px; }
.m2-xport-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 12px; font-size: 13px; color: var(--text-2); border-radius: 7px; cursor: pointer; font-family: inherit; }
.m2-xport-menu button:hover { background: var(--surface-2, var(--surface-3)); color: var(--text); }
.m2-mat-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--text-3); line-height: 1.45; margin-bottom: 10px; }
.m2-tedarik { display: flex; align-items: center; gap: 8px; border-radius: 9px; padding: 9px 12px; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; }
.m2-mat-head, .m2-mat-row { display: grid; grid-template-columns: minmax(130px, 1.6fr) repeat(3, minmax(80px, 1fr)) 50px; gap: 10px; align-items: center; }
.m2-mat-head { padding: 0 12px 8px; border-bottom: 1px solid var(--border); }
.m2-mat-head > span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
.m2-mat-head > span.r, .m2-mat-row > .r { text-align: right; white-space: nowrap; }
.m2-mat-row { padding: 11px 12px; border-radius: 9px; margin-top: 5px; font-size: 12.5px; color: var(--text); }
.m2-mat-row.short { background: var(--danger-bg); }
.m2-mat-row.ok { background: var(--ok-bg); }
.m2-mat-row .muted { color: var(--text-2); }
.m2-mat-name { min-width: 0; }
.m2-mat-name .nm { font-weight: 700; color: var(--text); font-size: 13.5px; }
.m2-mat-name .sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.m2-mat-foot { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); margin-top: 12px; }

/* empty / error */
.m2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); text-align: center; }
.m2-empty-ic { color: var(--text-3); display: flex; }
.m2-empty-t { font-weight: 700; color: var(--text-2); font-size: 14px; }

@media (max-width: 980px) {
  .m2-input { max-width: none; }
}

/* manual data entry: import + saved scenarios (no SAP/1C feed) */
.m2-actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.m2-btn.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.m2-scn { position: relative; display: flex; gap: 8px; }
.m2-scn-n { background: var(--surface-3); color: var(--text-2); border-radius: 8px; font-size: 11px; font-weight: 700; padding: 1px 6px; }
.m2-scn-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop, 0 10px 30px rgba(20,30,60,.18)); padding: 6px; min-width: 300px; max-height: 320px; overflow-y: auto; }
.m2-scn-empty { padding: 10px 8px; }
.m2-scn-row { display: flex; align-items: center; gap: 6px; border-radius: 8px; padding: 2px; }
.m2-scn-row:hover, .m2-scn-row.active { background: var(--surface-2, var(--surface-3)); }
.m2-scn-load { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: none; background: transparent; padding: 7px 8px; cursor: pointer; text-align: left; font-family: inherit; }
.m2-scn-name { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.m2-scn-meta { font-size: 11px; color: var(--text-3); }
.m2-scn-savebox { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.m2-scn-savebox input { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); }
.m2-scn-savebtns { display: flex; gap: 8px; flex-wrap: wrap; }
.m2-scn-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-50, var(--surface-3)); color: var(--brand-700); font-size: 12px; font-weight: 700; border-radius: 8px; padding: 4px 8px; max-width: 180px; }
.m2-scn-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-scn-chip button { border: none; background: transparent; color: inherit; cursor: pointer; display: flex; padding: 0; }

/* import modal */
.m2-imp-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; }
.m2-imp { width: min(680px, 100%); max-height: 86vh; overflow-y: auto; }
.m2-imp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.m2-imp-paste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.m2-imp-paste textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-family: ui-monospace, monospace; background: var(--surface); color: var(--text); resize: vertical; }
.m2-imp-paste button { align-self: flex-start; }
.m2-imp-format { margin-bottom: 10px; }
.m2-imp-format table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12.5px; }
.m2-imp-format th, .m2-imp-format td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.m2-imp-format th { font-size: 11px; letter-spacing: .04em; color: var(--text-3); }
.m2-imp-format .mono { font-family: ui-monospace, monospace; }
.m2-imp-summary { background: var(--surface-3); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.m2-imp-table { border: 1px solid var(--border); border-radius: 10px; padding: 4px 0; margin-bottom: 8px; max-height: 240px; overflow-y: auto; }
.m2-imp-tr { display: grid; grid-template-columns: minmax(140px, 2fr) repeat(3, minmax(70px, 1fr)); gap: 8px; padding: 6px 12px; font-size: 12.5px; align-items: center; color: var(--text); }
.m2-imp-tr.h { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); border-bottom: 1px solid var(--border); }
.m2-imp-tr .r { text-align: right; white-space: nowrap; }
.m2-imp-tr .muted { color: var(--text-3); }
.m2-imp-count { background: var(--surface-3); color: var(--text-3); border-radius: 8px; font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: 6px; }
.m2-imp-group-b { padding: 4px 4px 6px 28px; font-size: 12px; line-height: 1.6; color: var(--text-2); }
.m2-imp-line { font-family: ui-monospace, monospace; }
.m2-imp-opt { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); margin-top: 8px; cursor: pointer; }
.m2-imp-name { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; margin-top: 8px; background: var(--surface); color: var(--text); }
.m2-imp-foot { display: flex; gap: 10px; margin-top: 14px; }

/* ==== styles/opt2-data.css ==== */
/* PPDS — Plan Optimizasyonu "Veriler" panel (#/opt2, opt2-data.jsx).
   Dedicated stylesheet: the .vms-* chrome is shared with the Çizelge Strateji
   overlay, so opt2-only rules live here instead of enlarging it. */

.opt2-data-summary { margin-bottom: 14px; }
.opt2-data-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opt2-data-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border);
}
.opt2-data-chip b { color: var(--text-1); font-weight: 700; }
.opt2-data-chip.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.opt2-data-chip.warn { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.opt2-data-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.opt2-data-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 4px 10px; border-radius: 8px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.opt2-data-flag.ok { color: var(--ok); }
.opt2-data-flag.warn { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface-2)); }
.opt2-data-flag em { font-style: normal; font-weight: 600; }

.opt2-data-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 8px; padding-top: 10px; border-top: 1px solid var(--border);
}
.opt2-data-th { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.opt2-data-search {
  flex: 1 1 180px; min-width: 140px; max-width: 320px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-1); font-size: 12.5px;
}

.opt2-data-scroll { overflow: auto; max-height: 480px; border: 1px solid var(--border); border-radius: 10px; }
.opt2-data-table { width: 100%; }
.opt2-data-table td.mono { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; }
.opt2-data-table td { padding: 4px 8px; white-space: nowrap; }
.opt2-data-prod { max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.opt2-data-row.edited { background: color-mix(in srgb, var(--brand-500, #0b6b8a) 7%, transparent); }
.opt2-data-in {
  padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-1); font-size: 12px;
}
.opt2-data-in.num { width: 84px; text-align: right; }
.opt2-data-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand-500, #0b6b8a) 14%, transparent);
  color: var(--brand-700, #0b6b8a); margin-right: 6px;
}
.opt2-data-actions { min-width: 120px; }

.opt2-data-modal {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 16, 22, .45);
}
.opt2-data-modal-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; width: min(720px, calc(100vw - 32px)); max-height: 84vh; display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.opt2-data-modal-scroll { overflow: auto; flex: 1 1 auto; border: 1px solid var(--border); border-radius: 8px; }

/* ==== styles/app-mrp.css ==== */
/* ============================================================================
   MRP WHY panels (docs/MRP.md §6.2/§6.4) — scoped `.mrpw-` styles.
   ----------------------------------------------------------------------------
   Chart colors are the dataviz-validated categorical slots (fixed order —
   the order IS the CVD-safety mechanism; validated with the skill's
   six-checks script, light surface #ffffff AND the dark set below):
     stock=blue, qa=green, sas=magenta, po=yellow, ikame=aqua,
     retest=violet (provisional coverage), short=--danger (status, reserved).
   Light-mode magenta/yellow/aqua sit <3:1 on white → relief rule: the legend
   ALWAYS shows per-slice quantity labels and the panel ships a raw-numbers
   table. Segment separation additionally rides the 2px surface gaps.
   The app ships light-only today; the [data-theme="dark"] block below is the
   validated dark step set, gated ONLY on an explicit app theme stamp (never
   the OS media query — the app shell itself does not flip).
   ========================================================================== */
.mrpw {
  --mrpw-stock: #2a78d6;
  --mrpw-qa: #008300;
  --mrpw-sas: #e87ba4;
  --mrpw-po: #eda100;
  --mrpw-ikame: #1baf7a;
  --mrpw-retest: #4a3aa7;
  /* rollback = a STATE (short demand's released draws — nothing consumed),
     not a series identity: neutral gray, separation vs violet/red validated */
  --mrpw-rollback: #64748b;
  --mrpw-short: var(--danger, #b3261e);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}
:root[data-theme="dark"] .mrpw {
  --mrpw-stock: #3987e5;
  --mrpw-qa: #008300;
  --mrpw-sas: #d55181;
  --mrpw-po: #c98500;
  --mrpw-ikame: #199e70;
  --mrpw-retest: #9085e9;
  --mrpw-rollback: #5b6470;
  --mrpw-short: #e66767;
}

/* ---- expandable row (chevron + smooth height) ---------------------------- */
.mrpw-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm, 6px);
  background: transparent; color: var(--text-3); cursor: pointer;
}
.mrpw-toggle:hover { background: var(--surface-3); color: var(--text); }
.mrpw-toggle:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.mrpw-toggle svg { transition: transform 180ms ease; }
.mrpw-toggle.is-open svg { transform: rotate(90deg); }

.mrpw-expand {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}
.mrpw-expand.is-open { grid-template-rows: 1fr; }
.mrpw-expand > .mrpw-expand-inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .mrpw-expand { transition: none; }
  .mrpw-toggle svg { transition: none; }
}
.mrpw-detail-cell { padding: 0 !important; border-top: 0 !important; }
.mrpw-panel {
  margin: 0 10px 10px 34px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
}
.mrpw-lead { font-size: 13px; color: var(--text); margin: 0 0 10px; max-width: 72ch; }
.mrpw-lead strong { font-weight: 700; }
.mrpw-lead .late { color: var(--danger); font-weight: 700; }
.mrpw-sect {
  margin-top: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-3);
}

/* ---- waterfall bar -------------------------------------------------------- */
.mrpw-wf-bar {
  display: flex; align-items: stretch; height: 20px; margin-top: 6px;
  border-radius: 4px;
}
.mrpw-wf-seg { min-width: 4px; }
.mrpw-wf-seg + .mrpw-wf-seg { margin-left: 2px; /* surface gap */ }
.mrpw-wf-seg:first-child { border-radius: 4px 0 0 4px; }
.mrpw-wf-seg:last-child { border-radius: 0 4px 4px 0; }
.mrpw-wf-seg.src-stock { background: var(--mrpw-stock); }
.mrpw-wf-seg.src-qa { background: var(--mrpw-qa); }
.mrpw-wf-seg.src-sas { background: var(--mrpw-sas); }
.mrpw-wf-seg.src-po { background: var(--mrpw-po); }
.mrpw-wf-seg.src-ikame { background: var(--mrpw-ikame); }
.mrpw-wf-seg.src-retest { background: var(--mrpw-retest); }
.mrpw-wf-seg.src-rollback { background: var(--mrpw-rollback); }
.mrpw-wf-seg.src-short { background: var(--mrpw-short); }
/* MOQ top-up: NOT demand — a neutral hatched extension past the gross span. */
.mrpw-wf-seg.src-topup {
  background: repeating-linear-gradient(45deg,
    var(--border-strong) 0 3px, var(--surface) 3px 6px);
}
/* order-quantity bracket under the bar: spans net + MOQ top-up (right-aligned) */
.mrpw-wf-bracket-row { position: relative; height: 14px; margin-top: 3px; }
.mrpw-wf-bracket {
  position: absolute; right: 0; top: 0; height: 6px;
  border: 2px solid var(--text-2); border-top: 0;
  border-radius: 0 0 4px 4px;
}
.mrpw-wf-bracket-label {
  position: absolute; right: 0; top: 7px; font-size: 10.5px;
  color: var(--text-2); white-space: nowrap;
}
.mrpw-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px;
  font-size: 11px; color: var(--text-2);
}
.mrpw-legend .it { display: inline-flex; align-items: center; gap: 5px; }
.mrpw-legend .sw {
  width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto;
}
.mrpw-legend .qty { font-weight: 600; color: var(--text); }

/* ---- timeline strip ------------------------------------------------------- */
.mrpw-tl { position: relative; height: 58px; margin-top: 8px; }
.mrpw-tl-axis {
  position: absolute; left: 0; right: 0; top: 26px; height: 1px;
  background: var(--border-2);
}
.mrpw-tl-span { position: absolute; top: 24px; height: 5px; border-radius: 3px; }
.mrpw-tl-span.lead { background: var(--brand-200); }
.mrpw-tl-span.late { background: var(--danger); }
.mrpw-tl-dot {
  position: absolute; top: 22px; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface-2); /* surface ring */
  transform: translateX(-50%);
}
.mrpw-tl-dot.today { background: var(--text-2); }
.mrpw-tl-dot.orderby { background: var(--brand-500); }
.mrpw-tl-dot.need { background: var(--text); }
.mrpw-tl-lab {
  position: absolute; font-size: 10px; color: var(--text-2); white-space: nowrap;
  transform: translateX(-50%);
}
.mrpw-tl-lab.above { top: 2px; }
.mrpw-tl-lab.below { top: 36px; }
.mrpw-tl-lab strong { color: var(--text); font-weight: 600; }
.mrpw-tl-lab.late-lab { color: var(--danger); font-weight: 700; }

/* ---- chips ---------------------------------------------------------------- */
.mrpw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mrpw-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px; font-size: 11px; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 999px; color: var(--text); text-align: left;
}
button.mrpw-chip { cursor: pointer; }
button.mrpw-chip:hover { border-color: var(--brand-400); background: var(--brand-50); }
button.mrpw-chip:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.mrpw-chip .id { font-family: var(--mono); font-weight: 600; }
.mrpw-chip .sub { color: var(--text-2); font-size: 10.5px; }
.mrpw-chip .go { color: var(--brand-600); font-size: 10px; }
.mrpw-chip.tone-ok { border-color: var(--ok-border); background: var(--ok-bg); }
.mrpw-chip.tone-warn { border-color: var(--warn-border); background: var(--warn-bg); }
.mrpw-chip.tone-danger { border-color: var(--danger-border); background: var(--danger-bg); }
.mrpw-badge {
  display: inline-block; padding: 0 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 16px;
}
.mrpw-badge.neutral { background: var(--surface-3); color: var(--text-2); }
.mrpw-badge.ok { background: var(--ok-bg); color: var(--ok); }
.mrpw-badge.warn { background: var(--warn-bg); color: var(--warn); }
.mrpw-badge.danger { background: var(--danger-bg); color: var(--danger); }

/* ---- group blocks (version WHY) ------------------------------------------- */
.mrpw-group { margin-top: 8px; }
.mrpw-group .g-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
}
.mrpw-group .g-title.ok { color: var(--ok); }
.mrpw-group .g-title.warn { color: var(--warn); }
.mrpw-group .g-title.danger { color: var(--danger); }

/* ---- facts / raw numbers -------------------------------------------------- */
.mrpw-fact { font-size: 11px; color: var(--text-2); margin-top: 8px; }
.mrpw-fact strong { color: var(--text); font-weight: 600; }
.mrpw-nums { margin-top: 6px; }
.mrpw-nums summary {
  cursor: pointer; font-size: 11px; color: var(--brand-600);
  user-select: none; list-style: none; display: inline-flex; gap: 4px; align-items: center;
}
.mrpw-nums summary::-webkit-details-marker { display: none; }
.mrpw-nums summary:hover { text-decoration: underline; }
.mrpw-nums table { margin-top: 6px; font-size: 11px; border-collapse: collapse; }
.mrpw-nums td {
  padding: 2px 14px 2px 0; color: var(--text-2); border: 0;
  font-variant-numeric: tabular-nums;
}
.mrpw-nums td.v { color: var(--text); font-weight: 600; }

/* ---- designed missing-details state --------------------------------------- */
.mrpw-missing {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius, 8px); background: var(--surface-2);
  color: var(--text-2); font-size: 12px;
}
.mrpw-missing .ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-3);
}

/* ==== styles/app-ibp.css ==== */
/* IBP workbench (#/ibp) — docs/IBP.md §6.1. Card language + micro-interactions
   for the data-health strip. Bundled into the hashed styles asset at build. */

.ibp-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}

/* Strip cards: a deliberate hover lift so each reads as an actionable link to
   the screen that fixes it (the guided setup path). */
.ibp-card {
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ibp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}
.ibp-card:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
/* Footer arrow nudges toward its destination on hover. */
.ibp-card svg { transition: transform .16s ease; }
.ibp-card:hover .ibp-card-foot svg { transform: translateX(3px); }

.ibp-anchor-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
}
.ibp-anchor-pill b { color: var(--text); font-weight: 800; }
.ibp-anchor-pill .sep { color: var(--border-strong); }

/* Loading skeleton — reuses the global `pulse` keyframe (app.css). */
.ibp-skel {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  animation: pulse 1.4s ease-in-out infinite;
}

/* =========================================================================
   Talep Kitabı (#/ibp-demand) — the S&OP demand grid (docs/IBP.md §6.2).
   ========================================================================= */
.ibp-demand-page { padding-bottom: 84px; } /* room for the sticky save bar */
.tnum { font-variant-numeric: tabular-nums; }

/* ---- coverage header ---------------------------------------------------- */
.ibp-coverage {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 13px 18px;
}
.ibp-cov-stat { display: flex; align-items: baseline; gap: 8px; }
.ibp-cov-ic { color: var(--brand-500); display: inline-flex; align-self: center; }
.ibp-cov-v { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1; }
.ibp-cov-l { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.ibp-cov-window { margin-left: auto; font-size: 12px; font-weight: 600; }

/* ---- filter bar --------------------------------------------------------- */
.ibp-filterbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 16px; margin-top: 12px;
}
.ibp-filter-countries { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.ibp-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; gap: 5px; align-items: center; transition: all .13s ease;
}
.ibp-chip .muted { font-weight: 500; font-size: 11px; }
.ibp-chip:hover { border-color: var(--border-strong); }
.ibp-chip.is-on { background: var(--brand-50); border-color: var(--brand-400, var(--brand-500)); color: var(--brand-700); }
.ibp-filter-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ibp-firm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ibp-seg-btn {
  border: 0; background: var(--surface); color: var(--text-2); padding: 5px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; border-right: 1px solid var(--border);
}
.ibp-seg-btn:last-child { border-right: 0; }
.ibp-seg-btn.is-on { background: var(--brand-500); color: #fff; }
.ibp-seg-btn { transition: background .13s ease, color .13s ease; }
.ibp-sku-filter { max-width: 200px; height: 32px; }

/* ---- the grid ----------------------------------------------------------- */
.ibp-grid-wrap { margin-top: 12px; padding: 0; overflow: hidden; }
.ibp-grid-scroll { overflow: auto; max-height: calc(100vh - 340px); position: relative; }
table.ibp-grid { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: max-content; min-width: 100%; }
.ibp-grid th, .ibp-grid td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }

/* header row (sticky top) */
.ibp-grid thead th {
  position: sticky; top: 0; z-index: 3; background: var(--surface-2);
  font-weight: 700; color: var(--text-2); padding: 7px 8px; white-space: nowrap;
}
.ibp-mhead { text-align: right; min-width: 66px; }
.ibp-mhead.is-firmzone { background: var(--brand-50); }
.ibp-mhead-lbl { display: block; font-size: 12px; font-weight: 800; color: var(--text); }
.ibp-mhead-tag { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-top: 1px; }
.ibp-mhead.is-firmzone .ibp-mhead-tag { color: var(--brand-600); }

/* first column (sticky left) + corner (sticky both) */
.ibp-corner { position: sticky; left: 0; z-index: 5 !important; min-width: 214px; text-align: left;
  box-shadow: 2px 0 0 var(--border); }
.ibp-rowhead {
  position: sticky; left: 0; z-index: 2; background: inherit; text-align: left;
  padding: 6px 10px; min-width: 214px; box-shadow: 2px 0 0 var(--border);
}
.ibp-rowhead-in { display: flex; align-items: center; gap: 9px; }
.ibp-country {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--brand-700);
  background: var(--brand-50); border: 1px solid var(--brand-100, var(--border)); border-radius: 6px; padding: 2px 6px;
}
.ibp-rowhead-txt { display: flex; flex-direction: column; min-width: 0; }
.ibp-sku { font-weight: 700; color: var(--text); font-size: 12px; }
.ibp-rowhead-name { font-size: 10.5px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibp-row-x { margin-left: auto; border: 0; background: transparent; color: var(--text-3); cursor: pointer; display: inline-flex; padding: 2px; border-radius: 5px; }
.ibp-row-x:hover { background: var(--danger-bg); color: var(--danger); }

/* zebra rows (opaque, so sticky columns cover scrolled content) */
.ibp-grid tbody tr { background: var(--surface); }
.ibp-grid tbody tr:nth-child(even) { background: var(--surface-2); }

/* editable cells */
.ibp-cell {
  background: inherit; text-align: right; padding: 5px 9px; min-width: 66px; height: 32px;
  cursor: cell; position: relative; color: var(--text); outline: none;
}
.ibp-cell-val { font-variant-numeric: tabular-nums; }
.ibp-cell.is-focus { outline: 2px solid var(--brand-500); outline-offset: -2px; z-index: 1; }
.ibp-cell.is-edited::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--brand-500);
}
.ibp-cell-input {
  width: 100%; border: 0; background: transparent; text-align: right; font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--text); outline: none; padding: 0; -moz-appearance: textfield;
}
.ibp-cell-input::-webkit-outer-spin-button, .ibp-cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ibp-ghost { color: var(--text-3); text-decoration: line-through; cursor: pointer; font-variant-numeric: tabular-nums; }
.ibp-firm-chip {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 4px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  font-size: 9px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.ibp-firm-chip[data-firm="firm"] { background: var(--brand-500); border-color: var(--brand-600); color: #fff; }

/* totals */
.ibp-total-head, .ibp-rowtotal, .ibp-grandtotal { position: sticky; right: 0; z-index: 2; min-width: 74px; text-align: right; box-shadow: -2px 0 0 var(--border); }
.ibp-total-head { z-index: 4 !important; }
.ibp-rowtotal { background: inherit; padding: 5px 10px; font-weight: 700; color: var(--text); }
.ibp-grid tfoot th, .ibp-grid tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--surface-3); font-weight: 800; padding: 7px 9px; text-align: right; border-top: 2px solid var(--border-strong); }
.ibp-grid tfoot .ibp-corner { z-index: 6 !important; text-align: left; }
.ibp-grandtotal { z-index: 4 !important; color: var(--brand-700); }

/* ---- sticky save bar ---------------------------------------------------- */
.ibp-savebar {
  position: sticky; bottom: 0; z-index: 20; margin: 14px -2px -2px; padding: 12px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--brand-200, var(--border)); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.ibp-savebar-txt { font-size: 13px; color: var(--text-2); }
.ibp-savebar-txt b { color: var(--brand-700); }
.ibp-savebar-actions { margin-left: auto; display: flex; gap: 8px; }

/* ---- misc panels -------------------------------------------------------- */
.ibp-empty { text-align: center; padding: 34px 20px; color: var(--text-3); margin-top: 12px; }
.ibp-empty .ibp-empty-t { margin-top: 10px; font-weight: 700; color: var(--text-2); font-size: 14px; }
.ibp-empty p { font-size: 12.5px; margin: 8px auto 14px; max-width: 520px; line-height: 1.6; }
.ibp-empty-cta { display: flex; gap: 8px; justify-content: center; }
.ibp-save-errors { margin-top: 12px; border-top: 3px solid var(--warn); padding: 12px 16px; }
.ibp-save-errors-h { display: flex; align-items: center; gap: 7px; color: var(--warn); font-weight: 700; font-size: 12.5px; margin-bottom: 8px; }
.ibp-field-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin-bottom: 4px; }
.ibp-add-name { font-size: 11px; margin-top: 3px; }
.ibp-add-menu { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-2); z-index: 30; overflow: hidden; }
.ibp-add-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; border: 0; background: transparent; padding: 7px 11px; cursor: pointer; text-align: left; }
.ibp-add-opt:hover { background: var(--brand-50); }
.ibp-add-opt-code { font-weight: 700; font-size: 12.5px; color: var(--text); }
.ibp-add-opt-name { font-size: 11px; }
.ibp-add-exists { color: var(--warn); font-size: 12px; font-weight: 600; }
.ibp-import-window { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; margin-bottom: 10px; }
.ibp-archived-note { color: var(--warn); font-weight: 700; }
.ibp-import-errline { color: var(--danger); font-size: 12px; margin-bottom: 8px; }
.ibp-import-warnline { color: var(--warn); font-size: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }

/* =========================================================================
   Kapasite Projeksiyonu (#/ibp-capacity) — the per-area × 18-month timeline
   (docs/IBP.md §6.3). Column width is shared with the JS drag math (COL_W=66).
   ========================================================================= */
.ibp-capacity-page { padding-bottom: 40px; }

/* ---- coverage / readiness header --------------------------------------- */
.ibp-cap-cover { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 13px 18px; }
.ibp-cap-cover-main { display: flex; align-items: baseline; gap: 9px; }
.ibp-cap-cover-v { font-size: 20px; font-weight: 800; line-height: 1; }
.ibp-cap-cover-l { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.ibp-cap-cover-areas { display: flex; gap: 6px; flex-wrap: wrap; }
.ibp-cap-cover-badge { font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; }
.ibp-cap-cover-badge b { margin-left: 3px; }
.ibp-cap-cover-badge.is-full { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.ibp-cap-cover-badge.is-part { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.ibp-cap-cover-badge.is-none { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.ibp-cap-cover-win { margin-left: auto; font-size: 12px; font-weight: 600; }

.ibp-cap-firstrun { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px 16px;
  font-size: 12.5px; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100, var(--border)); }
.ibp-cap-firstrun svg { color: var(--brand-500); flex-shrink: 0; }

/* ---- the timeline hero -------------------------------------------------- */
.ibp-cap-timeline { margin-top: 12px; padding: 0; overflow: hidden; }
.ibp-cap-scroll { overflow-x: auto; overflow-y: hidden; }

/* month scale (sticky top) */
.ibp-cap-scale { display: flex; position: sticky; top: 0; z-index: 6; background: var(--surface-2);
  border-bottom: 1px solid var(--border); }
.ibp-cap-scale-corner { position: sticky; left: 0; z-index: 2; flex-shrink: 0; width: 186px; padding: 9px 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3);
  background: var(--surface-2); box-shadow: 2px 0 0 var(--border); display: flex; align-items: center; }
.ibp-cap-scale-months { display: flex; }
.ibp-cap-scale-m { flex-shrink: 0; padding: 7px 4px 6px; text-align: center; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ibp-cap-scale-m.is-now { background: var(--brand-50); }
.ibp-cap-scale-lbl { font-size: 11px; font-weight: 800; color: var(--text); white-space: nowrap; }
.ibp-cap-scale-now { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--brand-600); }

/* an area lane */
.ibp-cap-lane { display: flex; border-bottom: 1px solid var(--border); }
.ibp-cap-lane:nth-child(even) { background: var(--surface); }
.ibp-cap-lane-head { position: sticky; left: 0; z-index: 2; flex-shrink: 0; width: 186px; padding: 8px 12px 8px 14px;
  display: flex; align-items: center; gap: 8px; background: var(--surface); border-left: 3px solid transparent;
  box-shadow: 2px 0 0 var(--border); }
.ibp-cap-lane:nth-child(even) .ibp-cap-lane-head { background: var(--surface); }
.ibp-cap-lane-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.ibp-cap-lane-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.ibp-cap-lane-mach { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 11px;
  font-weight: 600; color: var(--text-3); cursor: help; }
.ibp-cap-lane-mach svg { color: var(--text-3); }

.ibp-cap-track { position: relative; }

/* the bars row (draggable spans) */
.ibp-cap-bars { position: relative; height: 34px; cursor: crosshair; }
.ibp-cap-bars-empty {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11px;
  appearance: none; background: transparent; border: 1px dashed transparent; border-radius: 6px;
  padding: 2px 8px; cursor: pointer; transition: border-color .13s ease, color .13s ease;
}
.ibp-cap-bars-empty:hover { border-color: var(--border-strong); color: var(--text-2); }
.ibp-cap-bars-empty:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.ibp-cap-bar { position: absolute; top: 5px; height: 24px; border-radius: 7px; border: 1.5px solid; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden; user-select: none;
  transition: box-shadow .13s ease, transform .05s ease; }
.ibp-cap-bar:hover { box-shadow: var(--shadow-1); }
.ibp-cap-bar:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.ibp-cap-bar.is-dragging { box-shadow: var(--shadow-2); z-index: 3; opacity: .95; }
.ibp-cap-bar.is-pending { animation: pulse 1s ease-in-out infinite; }
.ibp-cap-bar-lbl { font-size: 10.5px; font-weight: 700; white-space: nowrap; padding: 0 4px; pointer-events: none; }
.ibp-cap-bar-handle { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.ibp-cap-bar-handle.l { left: 0; border-radius: 7px 0 0 7px; }
.ibp-cap-bar-handle.r { right: 0; border-radius: 0 7px 7px 0; }
.ibp-cap-bar-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 11px; border-radius: 2px; background: currentColor; opacity: .45; }
.ibp-cap-bar:hover .ibp-cap-bar-handle::after { opacity: .8; }

/* the per-month served-hour cells */
.ibp-cap-cells { display: flex; border-top: 1px dashed var(--border); }
.ibp-cap-cell { flex-shrink: 0; width: 66px; height: 30px; border: 0; border-left: 1px solid var(--border);
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; position: relative; transition: background .1s ease; }
.ibp-cap-cell:hover:not(:disabled) { background: var(--surface-2); }
.ibp-cap-cell.is-now { background: color-mix(in srgb, var(--brand-50) 60%, transparent); }
.ibp-cap-cell:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.ibp-cap-hours { font-size: 12px; font-weight: 600; color: var(--text); position: relative; padding-right: 2px; }
.ibp-cap-srcdot { position: absolute; top: -3px; right: -7px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-500); }
.ibp-cap-cell.is-gap { cursor: pointer; }
.ibp-cap-hatch { width: 100%; height: 100%;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px,
    color-mix(in srgb, var(--text-3) 22%, transparent) 4px, color-mix(in srgb, var(--text-3) 22%, transparent) 5px); }

/* ---- Vardiyalar (near-term) comparison strip --------------------------- */
.ibp-cap-vc { display: flex; align-items: stretch; border-top: 2px solid var(--border-strong);
  background: var(--surface-2); }
.ibp-cap-vc-head { position: sticky; left: 0; z-index: 2; flex-shrink: 0; width: 186px; padding: 9px 12px 9px 14px;
  display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); box-shadow: 2px 0 0 var(--border); }
.ibp-cap-vc-head svg { color: var(--text-3); }
.ibp-cap-vc-title { font-size: 11px; font-weight: 700; color: var(--text-2); }
.ibp-cap-vc-sub { font-size: 10px; }
.ibp-cap-vc-areas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; }
.ibp-cap-vc-area { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; }
.ibp-cap-vc-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.ibp-cap-vc-name { font-weight: 600; color: var(--text-2); }
.ibp-cap-vc-pair { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.ibp-cap-vc-pair svg { color: var(--text-3); }
.ibp-cap-vc-proj { color: var(--text-3); }
.ibp-cap-vc-val { font-weight: 700; }
.ibp-cap-vc-delta { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 5px; }
.ibp-cap-vc-delta.up { color: var(--ok); background: var(--ok-bg); }
.ibp-cap-vc-delta.down { color: var(--danger); background: var(--danger-bg); }

/* ---- legend ------------------------------------------------------------- */
.ibp-cap-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 4px 2px;
  font-size: 11.5px; color: var(--text-2); }
.ibp-cap-leg { display: inline-flex; align-items: center; gap: 6px; }
.ibp-cap-leg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); }
.ibp-cap-leg-plain { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-3); }
.ibp-cap-leg-hatch { width: 15px; height: 12px; border: 1px solid var(--border); border-radius: 3px;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 3px,
    color-mix(in srgb, var(--text-3) 22%, transparent) 3px, color-mix(in srgb, var(--text-3) 22%, transparent) 4px); }

/* ---- editor modals (span add/edit + month override) -------------------- */
.ibp-cap-modal-back { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .42);
  display: flex; align-items: center; justify-content: center; padding: 18px; animation: ibpFade .12s ease; }
@keyframes ibpFade { from { opacity: 0; } to { opacity: 1; } }
.ibp-cap-modal { width: 100%; max-width: 420px; padding: 0; box-shadow: var(--shadow-3, var(--shadow-2));
  animation: ibpPop .14s cubic-bezier(.2, .8, .3, 1); }
@keyframes ibpPop { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.ibp-cap-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--border); }
.ibp-cap-modal-t { font-size: 14px; font-weight: 800; color: var(--text); }
.ibp-cap-modal-b { padding: 15px; display: flex; flex-direction: column; gap: 13px; }
.ibp-cap-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.ibp-cap-modal-foot-r { display: flex; gap: 8px; margin-left: auto; }
.ibp-cap-span-months, .ibp-cap-span-steppers { display: flex; gap: 12px; }
.ibp-cap-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ibp-cap-step { flex: 1; }
.ibp-cap-step-row { display: flex; align-items: stretch; gap: 0; }
.ibp-cap-step-btn { width: 32px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ibp-cap-step-btn:first-child { border-radius: 8px 0 0 8px; }
.ibp-cap-step-btn:last-child { border-radius: 0 8px 8px 0; }
.ibp-cap-step-btn:hover:not(:disabled) { background: var(--brand-50); color: var(--brand-700); }
.ibp-cap-step-btn:disabled { opacity: .4; cursor: default; }
.ibp-cap-step-in { width: 54px; text-align: center; border-radius: 0; border-left: 0; border-right: 0;
  -moz-appearance: textfield; }
.ibp-cap-step-in::-webkit-outer-spin-button, .ibp-cap-step-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ibp-cap-span-preview { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.ibp-cap-span-preview svg { color: var(--brand-500); }
.ibp-cap-span-err, .ibp-cap-override-note, .ibp-cap-override-ctx { font-size: 11.5px; }
.ibp-cap-span-err { color: var(--danger); font-weight: 600; }
.ibp-cap-override-note { color: var(--text-2); margin: 0; line-height: 1.55; }
.ibp-cap-override-ctx { color: var(--text-3); }

/* =========================================================================
   Parti Boyutları (#/products drawer batch-sizes tab, docs/IBP.md §4.3) — the
   explicit batch-size sub-editor. Rendered inside the product drawer body, so
   it inherits the drawer's padding; it reuses .ibp-empty / .ibp-save-errors /
   .ibp-field-lbl for a single visual language with the IBP planning inputs.
   ========================================================================= */
.pbs { display: block; }
.pbs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; }
.pbs-head-t { font-size: 14px; font-weight: 800; color: var(--text); }
.pbs-head-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.pbs-head-actions { display: flex; gap: 6px; flex-shrink: 0; }

.pbs-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pbs-table thead th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-3); text-align: left; padding: 0 8px 7px; }
.pbs-table thead th.num { text-align: right; }
.pbs-table tbody td { padding: 4px 6px 4px 0; vertical-align: middle; }
.pbs-table tbody td:first-child { padding-left: 0; }
.pbs-td-active { width: 62px; text-align: center; }
.pbs-td-rm { width: 34px; text-align: right; }

.pbs-inp { width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 12.5px;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 7px); transition: border-color .12s, box-shadow .12s; }
.pbs-inp:focus { outline: none; border-color: var(--brand-400, var(--brand-500));
  box-shadow: 0 0 0 3px var(--brand-50); }
.pbs-inp:disabled { background: var(--surface-2); color: var(--text-3); }
.pbs-inp.num { text-align: right; -moz-appearance: textfield; }
.pbs-inp.num::-webkit-outer-spin-button, .pbs-inp.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* active switch — deliberate, not a checkbox */
.pbs-toggle { position: relative; width: 40px; height: 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--surface-3); transition: background .16s ease; padding: 0; flex-shrink: 0; }
.pbs-toggle:disabled { cursor: default; opacity: .55; }
.pbs-toggle .pbs-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-1); transition: transform .16s ease; }
.pbs-toggle.is-on { background: var(--brand-500); }
.pbs-toggle.is-on .pbs-toggle-knob { transform: translateX(18px); }

.pbs-addrow { margin: 8px 0 4px; }

.pbs-over { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.pbs-over-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.pbs-over-hint { font-size: 11px; }
.pbs-over-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.pbs-over-cell { display: flex; flex-direction: column; gap: 4px; }
.pbs-over-lbl { font-size: 11px; font-weight: 600; color: var(--text-2); }

.pbs-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--border); }
.pbs-del { color: var(--danger); }
.pbs-del-confirm { display: flex; align-items: center; gap: 7px; }
.pbs-del-q { font-size: 12px; color: var(--danger); font-weight: 600; }

.pbs-import-modal { max-width: 560px; }

@media (max-width: 640px) {
  .pbs-over-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---- Phase-7 polish: keyboard + motion honesty ---------------------------- */
/* one consistent, visible focus ring for every IBP control — the browser
   default is inconsistent on tinted/custom buttons */
.ibp-page button:focus-visible, .ibp-page [tabindex]:focus-visible,
.ibp-run button:focus-visible, .ibp-run [tabindex]:focus-visible,
.ibp-seg-btn:focus-visible, .ibp-chip:focus-visible {
  outline: 2px solid var(--brand-500); outline-offset: 1px; border-radius: 6px;
}
/* the savebar is a strong 'unsaved edits' signal — let it announce itself */
@keyframes ibp-savebar-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ibp-savebar { animation: ibp-savebar-in .22s ease both; }
/* a vestibular-safe page: the two infinite loops stop under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ibp-skel { animation: none; opacity: .55; }
  .ibp-cap-bar.is-pending { animation: none; }
  .ibp-savebar { animation: none; }
}

/* ---- Phase-7 polish: Ülkeler / Reçete Versiyonları -----------------------
   These pages are NOT wrapped in .ibp-page, so these utilities are deliberately
   unscoped (the whole app ships as one bundled stylesheet). `zoomIn` (app.css)
   and `ibp-spin` (app-ibp-run.css) already exist — reuse, don't redefine. */
.ppds-pop-in { animation: zoomIn .18s ease both; }        /* modal content entrance */
.ppds-spin { animation: ibp-spin 1.1s linear infinite; transform-origin: center; }
/* the approval-matrix paint cell IS the toggle in paint mode — give it a
   visible keyboard focus ring (the browser default is invisible on a <td>). */
.rv-paint-cell:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .ppds-pop-in, .ppds-spin { animation: none; }
}

.ibp-skel-grid { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ibp-skel-row { height: 34px; border-radius: 6px; }

/* ==== styles/app-ibp-run.css ==== */
/* ============================================================================
   IBP workbench run experience (docs/IBP.md §6.1, Phase 3) — scoped `.ibp-*`.
   ----------------------------------------------------------------------------
   Light-only app (canonical --ok/--warn/--danger/--info + -bg/-border tokens).
   Country categorical colours are the dataviz-validated mrpw slots, assigned in
   JS; here we only style structure/motion. Reduced-motion honoured throughout.
   ========================================================================== */
.ibp-workbench { display: flex; flex-direction: column; gap: 14px; }

/* ---- run panel ------------------------------------------------------------ */
.ibp-run-panel { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ibp-run-panel-main {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; justify-content: space-between;
}
.ibp-run-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ibp-run-field { display: flex; flex-direction: column; gap: 4px; }
.ibp-run-field-lbl {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-2);
}
.ibp-run-horizon { width: 92px; }
.ibp-run-go { height: 34px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ibp-run-go svg { transition: transform 240ms ease; }
.ibp-run-go:disabled svg { animation: ibp-spin 1.1s linear infinite; }
.ibp-run-history { max-width: 260px; }
.ibp-run-history-field { min-width: 200px; }

@keyframes ibp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ibp-run-go:disabled svg { animation: none; } }

/* progress */
.ibp-run-progress { display: flex; flex-direction: column; gap: 7px; }
.ibp-run-progress-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ibp-run-spin { color: var(--brand-600); display: inline-flex; }
.ibp-run-spin svg { animation: ibp-spin 1.1s linear infinite; }
.ibp-run-progress-lbl { color: var(--text-2); font-weight: 600; }
.ibp-run-progress-pct { margin-left: auto; color: var(--brand-700); font-weight: 800; }
.ibp-run-progress-track {
  height: 7px; border-radius: 5px; background: var(--surface-3, rgba(0,0,0,.06)); overflow: hidden;
}
.ibp-run-progress-fill {
  height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  transition: width 400ms cubic-bezier(.4,0,.2,1);
}
.ibp-run-progress-track.is-indeterminate .ibp-run-progress-fill {
  width: 40%; animation: ibp-indet 1.3s ease-in-out infinite;
}
@keyframes ibp-indet { 0% { margin-left: -42%; } 100% { margin-left: 102%; } }
@media (prefers-reduced-motion: reduce) {
  .ibp-run-spin svg { animation: none; }
  .ibp-run-progress-track.is-indeterminate .ibp-run-progress-fill { animation: none; width: 100%; opacity: .5; }
}

.ibp-run-failed {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: var(--radius, 8px);
  font-size: 12.5px;
}
.ibp-run-failed { background: var(--danger-bg); border: 1px solid var(--danger-border); }
.ibp-run-failed .ic { color: var(--danger); display: inline-flex; }
.ibp-run-failed-body { flex: 1; }
.ibp-run-failed-title { font-weight: 700; color: var(--text); }
.ibp-run-failed-detail { color: var(--text-2); font-size: 11.5px; margin-top: 2px; }
.ibp-run-meta {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ok); font-weight: 600;
}
.ibp-run-meta-actor { margin-left: auto; font-weight: 500; }

/* run empty */
.ibp-run-empty { padding: 34px 24px; text-align: center; }
.ibp-run-empty-ic { color: var(--brand-500); display: inline-flex; }
.ibp-run-empty-title { font-size: 15px; font-weight: 800; margin-top: 10px; color: var(--text); }
.ibp-run-empty-body { font-size: 12.5px; line-height: 1.65; margin: 8px auto 0; max-width: 620px; }

/* ---- shared kit ----------------------------------------------------------- */
.ibp-split-bar { display: flex; align-items: stretch; border-radius: 4px; overflow: hidden; }
.ibp-split-seg { min-width: 3px; }
.ibp-split-seg + .ibp-split-seg { margin-left: 2px; }
.ibp-split-seg.is-other { background-image: repeating-linear-gradient(45deg,
  rgba(255,255,255,.35) 0 2px, transparent 2px 4px); }
.ibp-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.ibp-legend-it { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); }
.ibp-legend-sw { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.ibp-legend-lbl { font-weight: 700; color: var(--text); }
.ibp-legend-q { color: var(--text-3); }
.ibp-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 2px 8px; line-height: 1.5; white-space: nowrap;
}

/* ---- hero ----------------------------------------------------------------- */
.ibp-hero { display: grid; grid-template-columns: minmax(240px, 1.1fr) 3fr; gap: 12px; }
@media (max-width: 900px) { .ibp-hero { grid-template-columns: 1fr; } }
.ibp-hero-lead {
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(135deg, var(--danger-bg), var(--surface)); border-top: 3px solid var(--danger);
}
.ibp-hero-lead.is-empty { background: linear-gradient(135deg, var(--surface-2), var(--surface)); border-top-color: var(--border-strong); }
.ibp-hero-lead-head { display: flex; align-items: center; gap: 8px; }
.ibp-hero-lead-head .ic { color: var(--danger); display: inline-flex; }
.ibp-hero-lead.is-empty .ibp-hero-lead-head .ic { color: var(--text-3); }
.ibp-hero-lead-lbl {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-2);
}
.ibp-hero-lead-val { font-size: 30px; font-weight: 800; line-height: 1.05; color: var(--danger); }
.ibp-hero-lead.is-empty .ibp-hero-lead-val { color: var(--text-3); }
.ibp-hero-lead-sub { font-size: 11.5px; line-height: 1.5; }
.ibp-hero-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.ibp-hero-tile { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.ibp-hero-tile-head { display: flex; align-items: center; gap: 7px; }
.ibp-hero-tile-head .ic { display: inline-flex; }
.ibp-hero-tile-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-2);
}
.ibp-hero-tile-val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.ibp-hero-tile-sub { font-size: 11px; line-height: 1.4; }
.ibp-hero-firmbar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; margin-top: 3px; }
.ibp-hero-firmbar .seg.firm { background: var(--brand-600); }
.ibp-hero-firmbar .seg.fcst { background: var(--brand-200, #cdd8f5); margin-left: 2px; }
.ibp-hero-solver { margin-top: 3px; }

/* ---- program grid --------------------------------------------------------- */
.ibp-pg-wrap { padding: 0; overflow: hidden; }
.ibp-pg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.ibp-pg-head-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--text); }
.ibp-pg-head-legend, .ibp-cap-strip-legend, .ibp-pg-head-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.ibp-pg-head-legend .lg, .ibp-cap-strip-legend .lg {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2);
}
.ibp-pg-head-legend .sw { width: 10px; height: 4px; border-radius: 2px; }
.ibp-pg-scroll { overflow-x: auto; }
.ibp-pg-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.ibp-pg-corner, .ibp-pg-rowhead {
  position: sticky; left: 0; z-index: 3; background: var(--surface); text-align: left;
  border-right: 1px solid var(--border); min-width: 170px; max-width: 170px;
}
.ibp-pg-corner {
  z-index: 4; top: 0; position: sticky; padding: 9px 14px; font-size: 11px; font-weight: 700;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border);
}
.ibp-pg-mhead {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2); padding: 8px 6px; min-width: 92px;
  font-size: 11px; font-weight: 700; color: var(--text-2); text-align: center;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
}
.ibp-pg-fam-head {
  background: var(--surface-2); padding: 7px 14px; text-align: left;
  border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
}
.ibp-pg-fam-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ibp-pg-fam-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12.5px; color: var(--text); }
.ibp-pg-fam-sub { font-size: 11px; }
.ibp-pg-rowhead { padding: 8px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ibp-pg-bulk { display: block; font-weight: 700; font-size: 12.5px; color: var(--text); }
.ibp-pg-bulk-name {
  display: block; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.ibp-pg-cell {
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  vertical-align: top; padding: 0; transition: opacity 160ms ease, background 160ms ease;
}
.ibp-pg-cell.is-empty { background: repeating-linear-gradient(45deg,
  transparent 0 6px, rgba(0,0,0,.015) 6px 12px); }
.ibp-pg-cell.is-dim { opacity: .34; }
.ibp-pg-cell.is-focus { background: var(--brand-50); }
.ibp-pg-cell-btn {
  display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 92px; padding: 8px 8px 9px;
  background: none; border: 0; text-align: left; cursor: pointer; color: inherit;
}
.ibp-pg-cell-btn:hover { background: var(--surface-2); }
.ibp-pg-cell-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.ibp-pg-cell-top { display: flex; align-items: center; gap: 5px; }
.ibp-pg-size { font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; }
.ibp-pg-flag { display: inline-flex; }
.ibp-pg-flag.pin { color: var(--brand-600); }
.ibp-pg-flag.lvl { color: var(--warn); }
.ibp-pg-versions { display: flex; flex-wrap: wrap; gap: 3px; }
.ibp-pg-ver {
  font-size: 9.5px; font-weight: 600; color: var(--text-2); background: var(--surface-3, rgba(0,0,0,.05));
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.ibp-pg-ver .at { opacity: .5; margin: 0 1px; }
.ibp-pg-ver.more { color: var(--text-3); }
.ibp-pg-over { font-size: 9.5px; }
.ibp-pg-empty { padding: 40px 24px; text-align: center; color: var(--text-3); }
.ibp-pg-empty-title { font-size: 14px; font-weight: 800; margin-top: 8px; color: var(--text-2); }
.ibp-pg-empty p { font-size: 12px; margin: 6px auto 0; max-width: 520px; }

/* ---- WHY panels (drawer) -------------------------------------------------- */
.ibp-why-panel { padding: 14px 0; border-top: 1px solid var(--border); }
.ibp-why-panel:first-child { border-top: 0; padding-top: 4px; }
.ibp-why-h {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 12.5px; font-weight: 800;
  color: var(--text); text-transform: uppercase; letter-spacing: 0.4px;
}
.ibp-why-h svg { color: var(--brand-600); }
.ibp-why-lead { font-size: 12.5px; line-height: 1.55; color: var(--text); margin: 0 0 10px; }
.ibp-wf-bar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.ibp-wf-seg.demand { background: var(--brand-500); }
.ibp-wf-seg.over {
  margin-left: 2px; background: repeating-linear-gradient(45deg,
    var(--border-strong) 0 3px, var(--surface) 3px 6px);
}
.ibp-why-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ibp-why-steps li { display: flex; gap: 10px; font-size: 12px; }
.ibp-why-step-k {
  flex-shrink: 0; width: 66px; font-weight: 700; color: var(--text-3); text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.4px; padding-top: 2px;
}
.ibp-why-step-v { color: var(--text); }
.ibp-why-sub { margin-top: 4px; }
.ibp-why-sub-h {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-3); margin: 10px 0 5px;
}
.ibp-why-monthchips { display: flex; flex-wrap: wrap; gap: 5px; }
.ibp-why-monthchip {
  font-size: 11px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px;
}
.ibp-why-monthchip b { color: var(--text); margin-left: 3px; }

.ibp-why-elig { display: flex; flex-direction: column; gap: 5px; }
.ibp-elig-chip {
  display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 5px 9px; border-radius: 7px;
  border: 1px solid var(--border);
}
.ibp-elig-chip.is-fed { background: var(--ok-bg); border-color: var(--ok-border); }
.ibp-elig-chip.is-fed svg { color: var(--ok); }
.ibp-elig-chip.is-eligible { background: var(--surface-2); }
.ibp-elig-chip.is-eligible svg { color: var(--text-3); }
.ibp-elig-chip.is-blocked { background: var(--surface); opacity: .8; }
.ibp-elig-chip.is-blocked svg { color: var(--danger); }
.ibp-elig-chip.is-blocked .ibp-elig-c, .ibp-elig-chip.is-blocked .ibp-elig-name { text-decoration: line-through; color: var(--text-3); }
.ibp-elig-c { font-weight: 800; color: var(--text); }
.ibp-elig-name { color: var(--text-2); }
.ibp-elig-reason { margin-left: auto; font-size: 10.5px; color: var(--danger); text-align: right; }

.ibp-why-caprow { display: flex; flex-wrap: wrap; gap: 6px; }
.ibp-why-cap {
  display: flex; flex-direction: column; gap: 1px; align-items: center; padding: 5px 9px; border-radius: 7px;
  border: 1px solid currentColor; min-width: 68px;
}
.ibp-why-cap-a { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.ibp-why-cap-h { font-size: 12px; font-weight: 800; color: var(--text); }
.ibp-why-cap-s { font-size: 9.5px; opacity: .85; }
.ibp-why-moves { margin-top: 8px; }
.ibp-why-move { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); padding: 2px 0; }
.ibp-why-move svg { color: var(--warn); }
.ibp-why-mats { display: flex; flex-direction: column; gap: 7px; }
.ibp-why-mat { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.ibp-why-mat-head { display: flex; align-items: center; gap: 8px; }
.ibp-why-mat-code { font-weight: 700; font-size: 12px; color: var(--text); }
.ibp-why-mat-short { font-size: 11px; color: var(--danger); font-weight: 700; margin-left: auto; }
.ibp-why-draws { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ibp-why-draw {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; padding: 2px 6px;
  border-radius: 5px; background: var(--surface); border: 1px solid var(--border);
}
.ibp-why-draw.is-dmf { border-color: var(--warn-border); background: var(--warn-bg); }
.ibp-why-draw-code { font-weight: 600; color: var(--text-2); }
.ibp-why-draw-q { color: var(--text); font-weight: 700; }
.ibp-why-draw-badge { display: inline-flex; align-items: center; gap: 2px; color: var(--warn); font-weight: 700; }
.ibp-why-shelf {
  display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 11.5px; color: var(--text-2);
  background: var(--surface-2); border-radius: 7px; padding: 6px 9px;
}
.ibp-why-shelf svg { color: var(--brand-600); }

/* ---- drawer --------------------------------------------------------------- */
.ibp-drawer-root { position: fixed; inset: 0; z-index: 60; }
.ibp-drawer-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.32); animation: ibp-fade 180ms ease; }
.ibp-drawer {
  position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 94vw); background: var(--surface);
  box-shadow: -16px 0 44px rgba(15,23,42,.18); display: flex; flex-direction: column;
  animation: ibp-slide 240ms cubic-bezier(.4,0,.2,1);
}
@keyframes ibp-fade { from { opacity: 0; } }
@keyframes ibp-slide { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .ibp-drawer-backdrop, .ibp-drawer { animation: none; }
}
.ibp-drawer-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--border);
}
.ibp-drawer-title { flex: 1; }
.ibp-drawer-bulk { display: flex; align-items: baseline; gap: 8px; }
.ibp-drawer-bulk-code { font-size: 16px; font-weight: 800; color: var(--text); }
.ibp-drawer-bulk-name { font-size: 12px; }
.ibp-drawer-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--text-2); }
.ibp-drawer-month { font-weight: 700; color: var(--text); }
.ibp-drawer-sub .sep { color: var(--border-strong); }
.ibp-drawer-x {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer;
}
.ibp-drawer-x:hover { background: var(--surface-2); color: var(--text); }
.ibp-drawer-tabs { display: flex; gap: 4px; padding: 8px 16px 0; flex-wrap: wrap; }
.ibp-drawer-tab {
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 7px 7px 0 0; border: 1px solid var(--border);
  border-bottom: 0; background: var(--surface-2); color: var(--text-2); cursor: pointer;
}
.ibp-drawer-tab .at { opacity: .5; }
.ibp-drawer-tab.is-active { background: var(--surface); color: var(--brand-700); border-color: var(--brand-200, var(--border)); }
.ibp-drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px 20px; }
.ibp-drawer-empty { padding: 30px 12px; text-align: center; font-size: 12.5px; }
.ibp-drawer-foot {
  display: flex; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--border); background: var(--surface-2);
  flex-wrap: wrap;
}
.ibp-drawer-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--brand-700);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.ibp-drawer-link:hover { border-color: var(--brand-300, var(--brand-200)); background: var(--brand-50); }

/* ---- capacity heat -------------------------------------------------------- */
.ibp-cap-strip { padding: 0; overflow: hidden; }
.ibp-cap-strip-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; border-bottom: 1px solid var(--border);
}
.ibp-cap-strip.is-empty .ibp-cap-strip-head { border-bottom: 0; }
.ibp-cap-strip-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.ibp-cap-strip-legend .sw { width: 11px; height: 11px; border-radius: 3px; }
.ibp-cap-strip-legend .sw.ok { background: var(--ok); }
.ibp-cap-strip-legend .sw.amber { background: var(--warn); }
.ibp-cap-strip-legend .sw.over { background: var(--danger); }
.ibp-cap-strip-legend .sw.hatch { background: repeating-linear-gradient(45deg, var(--border-strong) 0 3px, var(--surface) 3px 6px); }
.ibp-cap-strip-scroll { overflow-x: auto; }
.ibp-cap-heat { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.ibp-cap-heat-corner, .ibp-cap-heat-area {
  position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; padding: 7px 14px;
  font-size: 11px; font-weight: 700; color: var(--text-2); border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border); min-width: 96px;
}
.ibp-cap-heat-mh { padding: 0; min-width: 62px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.ibp-cap-heat-mh.is-focus { background: var(--brand-50); }
.ibp-cap-heat-mbtn {
  width: 100%; padding: 7px 4px; background: none; border: 0; font-size: 10.5px; font-weight: 700;
  color: var(--text-2); cursor: pointer;
}
.ibp-cap-heat-mbtn:hover { color: var(--brand-700); }
.ibp-cap-heat-cell {
  padding: 0; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center;
  transition: opacity 160ms ease;
}
.ibp-cap-heat-cell.state-unprojected { background: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 4px, transparent 4px 8px); }
.ibp-cap-heat-cell.state-idle { background: var(--surface); }
.ibp-cap-heat-cell.is-dim { opacity: .38; }
.ibp-cap-heat-cell.is-focus { outline: 2px solid var(--brand-400, var(--brand-500)); outline-offset: -2px; }
.ibp-cap-heat-cellbtn {
  width: 100%; min-height: 30px; background: none; border: 0; cursor: pointer; color: inherit;
  display: flex; align-items: center; justify-content: center;
}
.ibp-cap-heat-pct { font-size: 10.5px; font-weight: 800; }
.ibp-cap-heat-x { font-size: 12px; font-weight: 800; color: var(--text-3); }
.ibp-cap-strip-filter {
  display: flex; align-items: center; gap: 8px; padding: 8px 15px; font-size: 11.5px; color: var(--brand-700);
  background: var(--brand-50); border-top: 1px solid var(--border);
}
.ibp-cap-strip-clear {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--brand-700); background: none;
  border: 1px solid var(--brand-200, var(--border)); border-radius: 6px; padding: 2px 9px; cursor: pointer;
}

/* ---- procurement ---------------------------------------------------------- */
.ibp-proc { padding: 0; overflow: hidden; }
.ibp-proc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; border-bottom: 1px solid var(--border);
}
.ibp-proc.is-empty .ibp-proc-head { border-bottom: 0; }
.ibp-proc-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.ibp-proc-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.ibp-proc-scroll { overflow-x: auto; }
.ibp-proc-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 620px; }
.ibp-proc-table > thead th {
  position: sticky; top: 0; background: var(--surface-2); font-size: 10.5px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.3px; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.ibp-proc-table th.num, .ibp-proc-table td.num { text-align: right; }
.ibp-proc-cx { width: 30px; }
.ibp-proc-row { cursor: pointer; }
.ibp-proc-row > td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px; vertical-align: middle; }
.ibp-proc-row:hover { background: var(--surface-2); }
.ibp-proc-row.is-open { background: var(--brand-50); }
.ibp-proc-chev svg { transition: transform 180ms ease; color: var(--text-3); }
.ibp-proc-chev.is-open svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .ibp-proc-chev svg { transition: none; } }
.ibp-proc-code { font-weight: 700; color: var(--text); position: relative; }
.ibp-proc-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.ibp-proc-dot.late { background: var(--danger); }
.ibp-proc-dot.now { background: var(--warn); }
.ibp-proc-moq { font-size: 11px; }
.ibp-proc-detail > td { padding: 0 12px 10px 42px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ibp-proc-months { width: 100%; border-collapse: collapse; margin-top: 6px; }
.ibp-proc-months th {
  font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; text-align: left;
  padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.ibp-proc-months th.num, .ibp-proc-months td.num { text-align: right; }
.ibp-proc-months td { font-size: 11.5px; padding: 4px 8px; border-bottom: 1px solid var(--border); color: var(--text); }

/* ---- alert rail ----------------------------------------------------------- */
.ibp-alert-rail { padding: 12px 15px; display: flex; flex-direction: column; gap: 10px; }
.ibp-alert-rail-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: var(--text); }
.ibp-alert-block {
  padding: 9px 12px; border-radius: 8px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px;
}
.ibp-alert-block-head { display: flex; align-items: center; gap: 8px; }
.ibp-alert-block-head .ic { display: inline-flex; }
.ibp-alert-block-title { font-weight: 700; font-size: 12.5px; color: var(--text); }
.ibp-alert-act { margin-left: auto; }
.ibp-alert-block-body { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.ibp-alert-item { display: flex; flex-direction: column; gap: 2px; padding: 3px 0; }
.ibp-alert-item-main { font-weight: 600; color: var(--text); }
.ibp-alert-item-sub { font-size: 11px; color: var(--text-2); }
.ibp-alert-item-sub.danger { color: var(--danger); }
.ibp-alert-famflags { display: flex; flex-wrap: wrap; gap: 4px; }
.ibp-alert-shortgrid { display: flex; flex-wrap: wrap; gap: 5px; }
.ibp-alert-short {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.ibp-alert-short.is-firm { border-color: var(--danger-border); background: var(--danger-bg); }
.ibp-alert-short b { color: var(--text); }
.ibp-alert-firmtag { font-size: 9.5px; font-weight: 700; color: var(--danger); text-transform: uppercase; }
.ibp-alert-unpl-reason { font-size: 10px; color: var(--text-3); }
.ibp-alert-clear {
  padding: 12px 15px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ok);
  font-weight: 600; border-left: 3px solid var(--ok);
}
.ibp-alert-clear-detail { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); margin-top: 2px; }
.ibp-alert-item.is-hard .ibp-alert-item-main { color: var(--danger); }
.ibp-alert-more {
  appearance: none; border: 1px dashed var(--border-strong); background: transparent; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-2); padding: 3px 8px; cursor: pointer;
  transition: color .13s ease, border-color .13s ease, background .13s ease;
}
.ibp-alert-more:hover { color: var(--text); border-color: var(--text-3); background: var(--surface); }
.ibp-alert-more:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
/* the rail is the run's attention surface — blocks rise in with a gentle
   stagger so severity order registers as a sequence, not a wall */
@keyframes ibp-alert-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ibp-alert-rail .ibp-alert-block { animation: ibp-alert-rise .28s ease both; }
.ibp-alert-rail .ibp-alert-block:nth-child(2) { animation-delay: .04s; }
.ibp-alert-rail .ibp-alert-block:nth-child(3) { animation-delay: .08s; }
.ibp-alert-rail .ibp-alert-block:nth-child(4) { animation-delay: .12s; }
.ibp-alert-rail .ibp-alert-block:nth-child(5) { animation-delay: .16s; }
.ibp-alert-rail .ibp-alert-block:nth-child(6) { animation-delay: .20s; }
.ibp-alert-clear { animation: ibp-alert-rise .28s ease both; }
@media (prefers-reduced-motion: reduce) {
  .ibp-alert-rail .ibp-alert-block, .ibp-alert-clear { animation: none; }
}

/* ---- apply panel (§5.9/§5.10 — proposals → Planlı) ------------------------ */
.ibp-apply { display: flex; flex-direction: column; gap: 12px; padding: 14px 15px; }
.ibp-apply .ibp-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ibp-apply .ibp-card-head h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--text); }
.ibp-apply-summary { display: inline-flex; gap: 6px; margin-left: 4px; }
.ibp-apply .ibp-card-head > .btn { margin-left: auto; }
.ibp-apply-window {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2);
  padding: 8px 10px; border-radius: 8px; background: var(--surface-2); width: fit-content;
}
.ibp-apply-window input {
  width: 64px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums;
}
.ibp-apply-window-note { font-size: 11px; }
.ibp-apply-error {
  padding: 9px 12px; border-radius: 8px; background: var(--danger-bg);
  border: 1px solid var(--danger-border); color: var(--danger); font-size: 12.5px; font-weight: 600;
}
.ibp-apply-wos h4, .ibp-apply-pos h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.ibp-apply-card {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  margin-bottom: 8px; overflow: hidden; transition: border-color .15s ease;
}
.ibp-apply-card:hover { border-color: var(--accent-border, var(--border)); }
.ibp-apply-card.pinned { border-left: 3px solid var(--warn); }
.ibp-apply-head {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; flex-wrap: wrap;
}
.ibp-apply-head:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.ibp-apply-title { font-size: 12.5px; color: var(--text); }
.ibp-apply-ref { margin-left: auto; font-size: 11.5px; color: var(--text-2); }
.ibp-apply-body { padding: 0 12px 11px; display: flex; flex-direction: column; gap: 9px; }
.ibp-apply-rows { width: 100%; border-collapse: collapse; font-size: 12px; }
.ibp-apply-rows th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.ibp-apply-rows th.num { text-align: right; }
.ibp-apply-rows td { padding: 5px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); color: var(--text-2); }
.ibp-apply-rows td.num { text-align: right; }
.ibp-apply-rows .ibp-apply-bulk td { font-weight: 700; color: var(--text); background: var(--surface-2); }
.ibp-apply-actions { display: flex; gap: 8px; }
.ibp-apply-links { display: flex; gap: 10px; align-items: center; font-size: 12px; flex-wrap: wrap; }
.ibp-apply-links a { color: var(--brand-600); font-weight: 600; text-decoration: none; }
.ibp-apply-links a:hover { text-decoration: underline; }
.ibp-apply-po-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ibp-apply-po-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.ibp-apply-po-table th.num { text-align: right; }
.ibp-apply-po-table td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); color: var(--text-2); }
.ibp-apply-po-table td.num { text-align: right; }
.ibp-apply-po-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- scenario compare (§6.1) ---------------------------------------------- */
.ibp-cmp { display: flex; flex-direction: column; gap: 12px; padding: 14px 15px; }
.ibp-cmp .ibp-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ibp-cmp .ibp-card-head h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--text); }
.ibp-cmp-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); margin-left: auto; }
.ibp-cmp-pick select { min-width: 220px; }
.ibp-cmp-body { display: flex; flex-direction: column; gap: 10px; }
.ibp-cmp-body h4 { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.ibp-cmp-warn {
  padding: 8px 11px; border-radius: 8px; background: var(--warn-bg); border: 1px solid var(--warn-border);
  color: var(--warn); font-size: 12.5px; font-weight: 600;
}
.ibp-cmp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ibp-cmp-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.ibp-cmp-table th.num { text-align: right; }
.ibp-cmp-table td { padding: 5px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); color: var(--text-2); }
.ibp-cmp-table td.num { text-align: right; }
.ibp-cmp-overs { display: flex; flex-direction: column; gap: 6px; }
.ibp-cmp-over { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }

.ibp-run-nodemand { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; align-self: center; }

/* ---- completion choreography: results rise in as a sequence --------------- */
@keyframes ibp-result-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ibp-workbench > .ibp-hero { animation: ibp-result-rise .3s ease both; }
.ibp-workbench > .ibp-alert-rail, .ibp-workbench > .ibp-alert-clear { animation: ibp-result-rise .3s ease both .05s; }
.ibp-workbench > .ibp-cap-strip { animation: ibp-result-rise .3s ease both .1s; }
.ibp-workbench > .ibp-pg-wrap, .ibp-workbench > .ibp-pg-empty { animation: ibp-result-rise .3s ease both .15s; }
.ibp-workbench > .ibp-apply { animation: ibp-result-rise .3s ease both .2s; }
.ibp-workbench > .ibp-proc { animation: ibp-result-rise .3s ease both .25s; }
.ibp-wb-skel { display: flex; flex-direction: column; gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .ibp-workbench > .ibp-hero, .ibp-workbench > .ibp-alert-rail, .ibp-workbench > .ibp-alert-clear,
  .ibp-workbench > .ibp-cap-strip, .ibp-workbench > .ibp-pg-wrap, .ibp-workbench > .ibp-pg-empty,
  .ibp-workbench > .ibp-apply, .ibp-workbench > .ibp-proc { animation: none; }
}

.ibp-pg-mhead-btn {
  appearance: none; background: transparent; border: 0; font: inherit; color: inherit;
  padding: 0; cursor: pointer; width: 100%;
}
.ibp-pg-mhead-btn:hover { color: var(--brand-600); }
.ibp-pg-mhead.is-focus { background: var(--brand-50); }
.ibp-pg-filterchip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  color: var(--brand-600); background: var(--brand-50); border: 1px solid var(--brand-200);
  border-radius: 999px; padding: 2px 9px; cursor: pointer; margin-left: 10px;
  transition: background .13s ease, border-color .13s ease;
}
.ibp-pg-filterchip:hover { background: var(--brand-100); border-color: var(--brand-400); }

@keyframes ibp-slide-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes ibp-fade-out { from { opacity: 1; } to { opacity: 0; } }
.ibp-drawer-root.is-closing .ibp-drawer { animation: ibp-slide-out .2s ease both; }
.ibp-drawer-root.is-closing .ibp-drawer-backdrop { animation: ibp-fade-out .18s ease both; }
.ibp-drawer-tab:hover { background: var(--surface-2); }
.ibp-drawer-tab { transition: background .13s ease, color .13s ease; }
@media (prefers-reduced-motion: reduce) {
  .ibp-drawer-root.is-closing .ibp-drawer, .ibp-drawer-root.is-closing .ibp-drawer-backdrop { animation-duration: .01s; }
}

/* disclosure bodies match their rotating chevrons: a brief rise, not a pop */
@keyframes ibp-body-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ibp-proc-detail > td > *, .ibp-apply-body { animation: ibp-body-in .16s ease both; }
@media (prefers-reduced-motion: reduce) {
  .ibp-proc-detail > td > *, .ibp-apply-body { animation: none; }
}

.ibp-cmp-onboard { display: flex; align-items: center; gap: 9px; padding: 14px 4px; font-size: 12.5px; }
.ibp-cmp-loading { display: flex; align-items: center; gap: 8px; padding: 10px 4px; font-size: 12.5px; }