/* ═══════════════════════════════════════════════════════
   KARLWOOD HMI — Árpád Pálinka
   Design: Kék-fehér, touchscreen-barát
   ═══════════════════════════════════════════════════════ */

:root {
  --kw-dark:    #0B2D6F;   /* Karlwood sötétkék */
  --kw-mid:     #1a56db;   /* Közepes kék */
  --kw-light:   #3b82f6;   /* Világos kék */
  --kw-pale:    #dbeafe;   /* Halvány kék háttér */
  --kw-white:   #ffffff;
  --kw-gray:    #f1f5f9;
  --kw-border:  #bfdbfe;
  --kw-text:    #0f172a;
  --kw-muted:   #64748b;
  --kw-success: #16a34a;
  --kw-warn:    #d97706;
  --kw-danger:  #dc2626;
  --kw-radius:  12px;
  --kw-shadow:  0 2px 12px rgba(11,45,111,0.12);
  --kw-shadow-lg: 0 6px 24px rgba(11,45,111,0.18);
  --nav-h: 64px;
  --footer-h: 40px;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kw-gray);
  color: var(--kw-text);
  font-family: Arial, 'Helvetica Neue', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ─── NAVBAR ─────────────────────────────────────────── */
.kw-navbar {
  background: var(--kw-dark);
  height: var(--nav-h);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.kw-nav-inner {
  max-width: 1400px; margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px;
}
.kw-logo {
  text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.kw-logo-kw {
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--kw-white);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.kw-logo-divider { color: #4b8ef7; font-size: 1.2rem; }
.kw-logo-arpad { color: #93c5fd; font-size: 0.9rem; white-space: nowrap; }

.kw-nav-status { margin-left: auto; flex-shrink: 0; }
.status-badge {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 1px;
}
.status-running  { background: #16a34a22; color: #4ade80; border: 1px solid #4ade8055; }
.status-changeover { background: #d9770622; color: #fbbf24; border: 1px solid #fbbf2455; animation: pulse-warn 1.5s infinite; }
.status-idle     { background: #1e3a6a; color: #93c5fd; border: 1px solid #3b82f655; }

@keyframes pulse-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.kw-nav-links {
  display: flex; gap: 4px;
}
.kw-navlink {
  display: flex; align-items: center; gap: 6px;
  color: #93c5fd; text-decoration: none;
  padding: 8px 14px; border-radius: 8px;
  font-size: 0.9rem; transition: all 0.15s;
}
.kw-navlink:hover  { background: rgba(255,255,255,0.1); color: #fff; }
.kw-navlink.active { background: rgba(255,255,255,0.15); color: #fff; font-weight: 600; }

.kw-clock {
  color: #93c5fd; font-size: 1.3rem; font-weight: 700;
  font-family: 'Courier New', monospace;
  min-width: 60px; text-align: right;
  flex-shrink: 0;
}

/* ─── FLASH ──────────────────────────────────────────── */
.kw-flash-wrap { padding: 8px 20px 0; max-width: 1400px; margin: 0 auto; width: 100%; }
.kw-alert { border-radius: var(--kw-radius); font-weight: 500; }

/* ─── MAIN ───────────────────────────────────────────── */
.kw-main {
  flex: 1;
  padding: 24px 20px;
  max-width: 1400px; margin: 0 auto; width: 100%;
}

/* ─── FOOTER ─────────────────────────────────────────── */
.kw-footer {
  background: var(--kw-dark);
  color: #4b7bc8;
  text-align: center;
  font-size: 0.78rem;
  padding: 10px;
  height: var(--footer-h);
}

/* ─── CARDS ──────────────────────────────────────────── */
.kw-card {
  background: var(--kw-white);
  border-radius: var(--kw-radius);
  box-shadow: var(--kw-shadow);
  border: 1px solid var(--kw-border);
  overflow: hidden;
}
.kw-card-header {
  background: var(--kw-dark);
  color: var(--kw-white);
  padding: 14px 20px;
  font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; gap: 10px;
}
.kw-card-header .kw-card-icon { font-size: 1.2rem; color: #93c5fd; }
.kw-card-body { padding: 20px; }

/* ─── HERO BADGE (aktív termék) ──────────────────────── */
.kw-hero {
  background: linear-gradient(135deg, var(--kw-dark) 0%, #1a4499 100%);
  border-radius: var(--kw-radius);
  color: var(--kw-white);
  padding: 28px 32px;
  box-shadow: var(--kw-shadow-lg);
  display: flex; align-items: center; gap: 24px;
}
.kw-hero-icon { font-size: 3rem; color: #93c5fd; }
.kw-hero-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #93c5fd; }
.kw-hero-product { font-size: 1.8rem; font-weight: 700; }
.kw-hero-sub { font-size: 0.9rem; color: #bfdbfe; margin-top: 2px; }
.kw-hero-none { color: #93c5fd; font-size: 1.1rem; font-style: italic; }

/* ─── MODULE GRID ────────────────────────────────────── */
.kw-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.kw-module-card {
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius);
  padding: 20px 16px;
  text-align: center;
  cursor: default;
  transition: all 0.2s;
  box-shadow: var(--kw-shadow);
}
.kw-module-card:hover { transform: translateY(-2px); box-shadow: var(--kw-shadow-lg); border-color: var(--kw-light); }
.kw-module-icon { font-size: 2rem; color: var(--kw-mid); margin-bottom: 8px; }
.kw-module-name { font-weight: 700; font-size: 0.95rem; color: var(--kw-dark); }
.kw-module-value {
  font-size: 1.4rem; font-weight: 800;
  color: var(--kw-mid); margin: 6px 0 2px;
}
.kw-module-unit { font-size: 0.75rem; color: var(--kw-muted); }
.kw-module-auto { font-size: 0.7rem; color: var(--kw-success); font-weight: 600; margin-top: 4px; }
.kw-module-manual { font-size: 0.7rem; color: var(--kw-warn); font-weight: 600; margin-top: 4px; }

/* ─── BUTTONS ────────────────────────────────────────── */
.btn-kw {
  background: var(--kw-dark);
  color: var(--kw-white);
  border: none;
  border-radius: var(--kw-radius);
  padding: 12px 24px;
  font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-kw:hover { background: var(--kw-mid); color: #fff; transform: translateY(-1px); }
.btn-kw-blue {
  background: var(--kw-mid); color: #fff;
  border-radius: var(--kw-radius);
  padding: 12px 24px; font-size: 1rem; font-weight: 700;
  border: none; cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-kw-blue:hover { background: var(--kw-light); transform: translateY(-1px); }
.btn-kw-outline {
  background: transparent; color: var(--kw-dark);
  border: 2px solid var(--kw-dark);
  border-radius: var(--kw-radius); padding: 10px 22px;
  font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-kw-outline:hover { background: var(--kw-dark); color: #fff; }

.btn-kw-lg {
  padding: 18px 36px; font-size: 1.2rem; border-radius: 14px;
}
.btn-kw-xl {
  padding: 22px 48px; font-size: 1.4rem; border-radius: 16px; width: 100%;
  justify-content: center;
}

/* ─── CHANGEOVER WIZARD ──────────────────────────────── */
.cw-progress {
  background: var(--kw-pale);
  border-radius: 20px; height: 10px;
  margin-bottom: 24px; overflow: hidden;
}
.cw-progress-bar {
  background: linear-gradient(90deg, var(--kw-dark), var(--kw-light));
  height: 100%; border-radius: 20px;
  transition: width 0.5s ease;
}

.cw-step {
  background: var(--kw-white);
  border: 2px solid var(--kw-border);
  border-radius: var(--kw-radius);
  padding: 18px 20px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 16px;
  transition: all 0.3s;
}
.cw-step.done   { border-color: #4ade80; background: #f0fdf4; }
.cw-step.active { border-color: var(--kw-mid); background: var(--kw-pale); box-shadow: var(--kw-shadow); }
.cw-step.pending { opacity: 0.45; }

.cw-step-icon { font-size: 1.6rem; flex-shrink: 0; width: 36px; text-align: center; }
.cw-step-icon.auto   { color: var(--kw-mid); }
.cw-step-icon.manual { color: var(--kw-warn); }
.cw-step-icon.done-icon { color: var(--kw-success); }

.cw-step-name { font-weight: 700; font-size: 1rem; color: var(--kw-dark); }
.cw-step-target {
  font-size: 1.5rem; font-weight: 800;
  color: var(--kw-mid); margin-left: auto;
}
.cw-step-unit { font-size: 0.85rem; color: var(--kw-muted); margin-left: 4px; }

.cw-confirm-btn {
  background: var(--kw-success);
  color: #fff; border: none;
  border-radius: 10px; padding: 14px 28px;
  font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  margin-left: auto;
}
.cw-confirm-btn:hover { background: #15803d; }

/* Target highlight box */
.cw-manual-target {
  background: linear-gradient(135deg, var(--kw-dark), #1a4499);
  color: #fff; border-radius: 14px;
  padding: 28px 32px; text-align: center;
  margin: 20px 0;
}
.cw-manual-target .target-label { font-size: 0.85rem; color: #93c5fd; letter-spacing: 1px; text-transform: uppercase; }
.cw-manual-target .target-name  { font-size: 1.3rem; font-weight: 700; margin: 8px 0; }
.cw-manual-target .target-value { font-size: 3.5rem; font-weight: 900; color: #fbbf24; line-height: 1; }
.cw-manual-target .target-unit  { font-size: 1rem; color: #bfdbfe; margin-top: 4px; }

/* ─── PRODUCT LIST ───────────────────────────────────── */
.kw-product-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
}
.kw-product-table thead th {
  background: var(--kw-dark); color: #93c5fd;
  padding: 12px 16px; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700;
}
.kw-product-table thead th:first-child { border-radius: 10px 0 0 0; }
.kw-product-table thead th:last-child  { border-radius: 0 10px 0 0; }
.kw-product-table tbody tr {
  background: var(--kw-white);
  transition: background 0.15s;
}
.kw-product-table tbody tr:hover { background: var(--kw-pale); }
.kw-product-table tbody td {
  padding: 14px 16px; font-size: 0.95rem;
  border-bottom: 1px solid var(--kw-border);
}
.kw-product-table tbody tr:last-child td { border-bottom: none; }

/* ─── FORM ───────────────────────────────────────────── */
.kw-form-section {
  background: var(--kw-white);
  border-radius: var(--kw-radius);
  border: 1px solid var(--kw-border);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--kw-shadow);
}
.kw-form-section-header {
  background: var(--kw-pale);
  border-bottom: 1px solid var(--kw-border);
  padding: 12px 20px;
  font-weight: 700; font-size: 0.9rem;
  color: var(--kw-dark);
  display: flex; align-items: center; gap: 8px;
}
.kw-form-section-body { padding: 20px; }

.kw-form-label {
  font-weight: 600; font-size: 0.85rem;
  color: var(--kw-dark); margin-bottom: 6px;
  display: block;
}
.kw-form-input {
  width: 100%;
  border: 2px solid var(--kw-border);
  border-radius: 8px; padding: 10px 14px;
  font-size: 1rem; color: var(--kw-text);
  transition: border-color 0.15s;
  background: var(--kw-white);
}
.kw-form-input:focus {
  outline: none; border-color: var(--kw-mid);
  box-shadow: 0 0 0 3px rgba(26,86,219,0.12);
}
.kw-form-unit {
  font-size: 0.78rem; color: var(--kw-muted);
  margin-top: 4px; display: block;
}

/* ─── PAGE HEADER ────────────────────────────────────── */
.kw-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.kw-page-title {
  font-size: 1.5rem; font-weight: 800;
  color: var(--kw-dark); display: flex; align-items: center; gap: 10px;
}
.kw-page-title i { color: var(--kw-mid); }

/* ─── BADGES ─────────────────────────────────────────── */
.kw-badge-auto   { background: #dbeafe; color: #1e40af; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.kw-badge-manual { background: #fef3c7; color: #92400e; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; }

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 768px) {
  .kw-logo-arpad { display: none; }
  .kw-navlink span { display: none; }
  .kw-module-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── PRODUCTION SCREEN ──────────────────────────────── */
.prod-status-bar {
  border-radius: var(--kw-radius);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
  font-weight: 700; font-size: 1.1rem;
  margin-bottom: 4px;
  transition: background 0.3s;
}
.prod-status-running   { background: linear-gradient(135deg,#052e16,#166534); color:#4ade80; }
.prod-status-paused    { background: linear-gradient(135deg,#451a03,#92400e); color:#fbbf24; }
.prod-status-emergency { background: linear-gradient(135deg,#450a0a,#991b1b); color:#f87171; animation: pulse-emergency 0.8s infinite; }
.prod-status-idle      { background: linear-gradient(135deg,#0f172a,#1e3a6a); color:#93c5fd; }

@keyframes pulse-emergency {
  0%,100% { opacity:1; }
  50%      { opacity:0.75; }
}

.prod-status-indicator { display:flex; align-items:center; gap:10px; }
.prod-status-indicator .bi-circle-fill { animation: blink-green 1.2s infinite; }
@keyframes blink-green {
  0%,100% { opacity:1; }
  50%      { opacity:0.3; }
}
.prod-status-product { margin-left:auto; font-size:1rem; opacity:0.85; }
.prod-status-time    { font-family:'Courier New',monospace; font-size:1.1rem; flex-shrink:0; }

/* Counter card */
.prod-counter-card {
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(135deg, var(--kw-dark) 0%, #1a4499 100%);
  color: #fff;
}
.prod-counter-label {
  font-size: 0.8rem; letter-spacing: 3px;
  text-transform: uppercase; color: #93c5fd;
  margin-bottom: 8px;
}
.prod-counter-value {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900; line-height: 1;
  color: #fff;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 40px rgba(59,130,246,0.4);
  transition: all 0.2s;
}
.prod-counter-unit { font-size: 1.2rem; color: #93c5fd; margin-top: 4px; }

/* Target progress */
.prod-target-wrap { max-width: 400px; margin: 0 auto; }
.prod-target-bar-bg {
  background: rgba(255,255,255,0.15);
  border-radius: 20px; height: 12px; overflow: hidden;
}
.prod-target-bar-fill {
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  height: 100%; border-radius: 20px;
  transition: width 0.5s ease;
}
.prod-target-text { color: #bfdbfe; font-size: 0.85rem; margin-top: 6px; }

/* Stat cards */
.prod-stat-card {
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--kw-shadow);
}
.prod-stat-icon { font-size: 1.4rem; color: var(--kw-mid); margin-bottom: 6px; }
.prod-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--kw-dark); line-height: 1; }
.prod-stat-label { font-size: 0.72rem; color: var(--kw-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* Control buttons */
.prod-btn {
  border: none; border-radius: 14px;
  padding: 20px 24px; font-size: 1.1rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
}
.prod-btn-start { background: #16a34a; color: #fff; }
.prod-btn-start:hover { background: #15803d; transform: translateY(-1px); }
.prod-btn-pause { background: #d97706; color: #fff; }
.prod-btn-pause:hover { background: #b45309; transform: translateY(-1px); }
.prod-btn-stop  { background: #64748b; color: #fff; }
.prod-btn-stop:hover  { background: #475569; transform: translateY(-1px); }

.prod-btn-emergency {
  background: #dc2626; color: #fff;
  border: none; border-radius: 14px;
  padding: 22px 24px; font-size: 1.2rem; font-weight: 900;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  letter-spacing: 1px;
  box-shadow: 0 4px 20px rgba(220,38,38,0.4);
  animation: pulse-red 2s infinite;
}
.prod-btn-emergency:hover { background: #b91c1c; box-shadow: 0 6px 28px rgba(220,38,38,0.6); }
@keyframes pulse-red {
  0%,100% { box-shadow: 0 4px 20px rgba(220,38,38,0.4); }
  50%      { box-shadow: 0 4px 32px rgba(220,38,38,0.8); }
}

/* Emergency banner */
.emergency-banner {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 200;
  background: #dc2626; color: #fff;
  animation: pulse-emergency 0.8s infinite;
}
.emergency-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
  font-size: 1.1rem; font-weight: 800; letter-spacing: 1px;
}
.emergency-clear-btn {
  margin-left: auto; background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff; border-radius: 8px; padding: 6px 16px;
  font-weight: 700; cursor: pointer;
}

/* ─── 800x600 OPTIMALIZÁCIÓ ──────────────────────────── */
@media (max-height: 650px) {
  :root {
    --nav-h: 44px;
    --footer-h: 24px;
    font-size: 13px;
  }
  .kw-logo-kw   { font-size: 1rem; }
  .kw-logo-arpad { font-size: 0.75rem; }
  .kw-navlink   { padding: 5px 10px; font-size: 0.82rem; }
  .kw-clock     { font-size: 1rem; }
  .status-badge { padding: 4px 10px; font-size: 0.72rem; }

  .kw-main { padding: 10px 14px; }

  /* Hero kompakt */
  .kw-hero { padding: 14px 18px; gap: 14px; }
  .kw-hero-icon { font-size: 2rem; }
  .kw-hero-product { font-size: 1.3rem; }
  .kw-hero-sub  { font-size: 0.78rem; }
  .btn-kw, .btn-kw-blue { padding: 8px 16px; font-size: 0.88rem; }
  .btn-kw-outline { padding: 7px 14px; font-size: 0.88rem; }

  /* Module kártyák kompakt */
  .kw-module-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .kw-module-card { padding: 12px 10px; }
  .kw-module-icon { font-size: 1.4rem; margin-bottom: 4px; }
  .kw-module-value { font-size: 1.1rem; }

  /* Page header */
  .kw-page-header { margin-bottom: 10px; }
  .kw-page-title  { font-size: 1.1rem; }

  /* Card */
  .kw-card-header { padding: 9px 14px; font-size: 0.88rem; }
  .kw-card-body   { padding: 12px; }

  /* Row gap */
  .row { --bs-gutter-y: 0.5rem; }
  .g-4 { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }
  .g-3 { --bs-gutter-x: 0.5rem;  --bs-gutter-y: 0.5rem; }
  .mb-4 { margin-bottom: 0.6rem !important; }
  .mb-3 { margin-bottom: 0.4rem !important; }
  .mt-4 { margin-top: 0.6rem !important; }

  /* Gyártás képernyő */
  .prod-counter-value { font-size: 4.5rem; }
  .prod-counter-card  { padding: 14px 16px; }
  .prod-counter-label { font-size: 0.7rem; margin-bottom: 4px; }
  .prod-status-bar    { padding: 8px 16px; font-size: 0.9rem; }
  .prod-stat-card     { padding: 10px 8px; }
  .prod-stat-value    { font-size: 1.2rem; }
  .prod-btn           { padding: 12px 16px; font-size: 0.95rem; }
  .prod-btn-emergency { padding: 14px 16px; font-size: 1rem; }

  /* Átállás varázsló */
  .cw-manual-target .target-value { font-size: 2.5rem; }
  .cw-step { padding: 10px 14px; margin-bottom: 6px; }
}

/* ─── SETTINGS GEAR ──────────────────────────────────── */
.kw-settings-btn {
  color: #93c5fd; font-size: 1.3rem;
  padding: 6px 8px; border-radius: 8px;
  text-decoration: none; transition: all 0.15s;
  display: flex; align-items: center;
  flex-shrink: 0;
}
.kw-settings-btn:hover  { color: #fff; background: rgba(255,255,255,0.1); transform: rotate(30deg); }
.kw-settings-btn.active { color: #fff; }

/* ─── STATUS CHECK ───────────────────────────────────── */
.status-check-row {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 0;
}
.status-dot {
  width: 16px; height: 16px; border-radius: 50%;
  flex-shrink: 0; transition: background 0.3s;
}
.dot-ok       { background: #16a34a; box-shadow: 0 0 8px #16a34a88; }
.dot-err      { background: #dc2626; box-shadow: 0 0 8px #dc262688; }
.dot-checking { background: #94a3b8; animation: pulse-check 1s infinite; }
@keyframes pulse-check {
  0%,100% { opacity:1; } 50% { opacity:0.3; }
}
.status-check-label { font-weight: 700; font-size: 1rem; }
.status-check-sub   { font-size: 0.78rem; color: #94a3b8; margin-top: 2px; }
.status-latency     { font-size: 0.78rem; color: #94a3b8; font-family: 'Courier New', monospace; }