/* Extracted from index.html inline <style> blocks */

/* === Block 1: overflow-x fix, home-production responsive, landing feature grid === */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.ke-page-content {
  overflow-x: hidden;
}

/* Prevent iOS Safari from auto-zooming form controls */
@supports (-webkit-touch-callout: none) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  .ke-landing-feature-grid {
    grid-template-columns: 1fr !important;
  }
}

.home-production-card {
  max-width: 100%;
}

.home-production-card-inner {
  width: 100%;
}

.home-production-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  color: var(--ke-text-muted);
  flex-wrap: nowrap;
}

.home-production-check-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ke-text);
  white-space: nowrap;
}

.home-production-check-filter input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0;
  padding: 0;
  appearance: auto;
  accent-color: #4CAF50;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .ke-page-content {
    overflow-x: auto !important;
  }

  .home-production-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .home-production-card-inner {
    min-width: 680px;
  }
}

@media (min-width: 1100px) {
  .greeting-section {
    font-size: 17px !important;
    line-height: 1.3 !important;
    padding: 12px !important;
  }

  .dashboard-greeting-title {
    font-size: 2.05rem;
    line-height: 1.12;
    margin-bottom: 6px !important;
  }

  .dashboard-doc-card,
  .home-production-card {
    padding: 14px 16px !important;
  }

  .dashboard-doc-card-kicker,
  .dashboard-production-card-kicker {
    font-size: 0.82rem !important;
  }

  .dashboard-doc-card-title,
  .dashboard-production-card-title {
    font-size: 1.18rem !important;
    line-height: 1.25;
  }

  .dashboard-doc-card-copy {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  .home-production-summary {
    font-size: 0.86rem !important;
  }

  .home-production-alert {
    gap: 18px !important;
    padding: 13px 0 !important;
  }

  .home-production-name {
    font-size: 1.18rem !important;
    line-height: 1.18;
  }

  .home-production-meta {
    font-size: 0.95rem !important;
  }

  .home-production-badge {
    font-size: 0.86rem !important;
    padding: 6px 11px !important;
  }

  .home-production-copy {
    font-size: 0.9rem !important;
    line-height: 1.38 !important;
    max-width: 290px !important;
  }
}

/* === Block 2: weather forecast tooltip/wday-scroll === */

.wday:hover .wday-tip { opacity:1; pointer-events:auto; }
.wday-tip {
  opacity:0; pointer-events:none; transition:opacity .18s;
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--ke-surface); border:1px solid var(--ke-border); border-radius:7px;
  padding:6px 9px; white-space:nowrap; font-size:0.82em; color:var(--ke-text);
  z-index:99; text-align:left; line-height:1.6;
}
.wday-tip::after {
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ke-border);
}
.wday-scroll {
  display:flex; gap:6px; overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:2px; scrollbar-width:none; justify-content:center;
}
.wday-scroll::-webkit-scrollbar { display:none; }
.wday { scroll-snap-align:start; flex-shrink:0; }

/* === Block 3: public-guest page, carousel, newsletter signup dialog, nl-signup === */

.content-wrapper.public-guest-wrapper {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.public-guest-hero {
  border: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
.public-guest-section-card {
  background: var(--ke-surface);
  border: 1px solid var(--ke-border);
  border-radius: 18px;
  padding: 18px 16px 20px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03);
}
.public-guest-section-card + .public-guest-section-card {
  margin-top: 18px !important;
}
.public-stats-shell {
  margin-top: 18px !important;
}
.public-carousel {
  --per-page: 3;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
}
.public-carousel-viewport {
  overflow: hidden;
}
.public-carousel-track {
  display: flex;
  transition: transform 320ms ease;
  will-change: transform;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.public-popular-badge {
  display: inline-block;
  background: rgba(0, 0, 0, 0.62);
  color: #ffd54a;
  border: 1px solid rgba(255, 204, 0, 0.78);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
.public-carousel-slide {
  flex: 0 0 calc(100% / var(--per-page));
  padding: 0 7px;
  box-sizing: border-box;
  min-width: 0;
}
.public-carousel-nav {
  height: 42px;
  width: 42px;
  border-radius: 999px;
  border: 1px solid var(--ke-border);
  background: var(--ke-surface);
  color: var(--ke-warning);
  font-size: 20px;
  cursor: pointer;
}
.public-carousel-nav:hover {
  background: var(--ke-surface-hover);
}
@media (max-width: 1040px) {
  .public-carousel {
    --per-page: 2;
  }
}
@media (max-width: 700px) {
  .public-guest-hero {
    width: min(900px, calc(100% - 16px));
    margin: 16px auto 0 !important;
  }
  .public-guest-section-card {
    border-radius: 14px;
    padding: 14px 12px 16px !important;
  }
  .public-carousel {
    --per-page: 1;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
  }
  .public-carousel-slide {
    padding: 0 4px;
  }
  .public-carousel-nav {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }
}

.public-suppliers-section {
  margin-bottom: calc(var(--footer-height, 52px) + var(--bottom-nav-height, 62px) + 52px) !important;
}
.public-suppliers-section.has-news-below {
  margin-bottom: 12px !important;
}
.public-news-section {
  margin-bottom: calc(var(--footer-height, 52px) + var(--bottom-nav-height, 62px) + 96px) !important;
}
.public-news-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.public-news-mail-shell {
  background: transparent;
  color: var(--ke-text);
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.public-news-mail-body {
  padding: 14px;
  line-height: 1.62;
  font-size: 16px;
  overflow: visible;
  text-align: left !important;
}
.public-news-mail-body p { margin: 0 0 10px; color: var(--ke-text); text-align: left !important; }
.public-news-mail-body h1,
.public-news-mail-body h2,
.public-news-mail-body h3 { margin: 6px 0 10px; color: var(--ke-text); line-height: 1.35; text-align: left !important; }
.public-news-mail-body ul,
.public-news-mail-body ol { margin: 0 0 10px 20px; color: var(--ke-text-muted); }
.public-news-mini-card {
  background:var(--ke-surface);
  border:1px solid var(--ke-border);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.public-news-mini-card:hover {
  border-color: var(--ke-warning);
  box-shadow: 0 2px 12px rgba(248,179,58,0.12);
}
.public-newsletter-open-btn {
  display: inline-block;
  border: 1px solid #f59e0b;
  background: #f59e0b;
  color: #111;
  border-radius: 8px;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .03em;
  white-space: nowrap;
  line-height: 1.4;
  overflow: visible;
  text-align: center;
  width: auto;
  min-width: fit-content;
}
.public-newsletter-open-btn:hover { background: #fbbf24; border-color: #fbbf24; }
.nl-signup-dialog {
  background: var(--ke-surface);
  border: 1px solid var(--ke-border);
  border-radius: 16px;
  padding: 0;
  max-width: 480px;
  width: min(90vw, 480px);
  color: var(--ke-text);
  margin: auto;
}
.nl-signup-dialog::backdrop { background: rgba(0,0,0,.72); }
.nl-signup-dialog-inner {
  padding: 28px 24px 20px;
  position: relative;
}
.nl-signup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--ke-text-muted);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.nl-signup-close:hover { color: var(--ke-text); }
.nl-signup-dialog-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ke-warning);
}
.nl-signup-dialog-sub {
  margin: 0 0 16px;
  color: var(--ke-text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.public-newsletter-signup-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.public-newsletter-input {
  width: 100%;
  border: 1px solid var(--ke-border);
  background: var(--ke-bg);
  color: var(--ke-text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  box-sizing: border-box;
}
.public-newsletter-btn {
  width: 100%;
  border: 1px solid #f59e0b;
  background: #f59e0b;
  color: #111;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.public-newsletter-legal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  background: var(--ke-surface);
  border: 1px solid var(--ke-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ke-text);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.public-newsletter-legal-switch {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.public-newsletter-legal-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  background: transparent !important;
}
.public-newsletter-legal-title {
  background: transparent !important;
  color: var(--ke-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.public-newsletter-legal-text {
  background: transparent !important;
  color: var(--ke-text-muted);
  font-size: 17px;
  line-height: 1.45;
}
.public-newsletter-toggle-wrap {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
}
.public-newsletter-toggle-wrap input[type=checkbox] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.public-newsletter-toggle-track {
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--ke-border);
  border: 1px solid var(--ke-border);
  position: relative;
  transition: background .22s, border-color .22s;
}
.public-newsletter-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ke-text-muted);
  transition: left .22s, background .22s;
  pointer-events: none;
}
.public-newsletter-toggle-wrap input[type=checkbox]:checked + .public-newsletter-toggle-track {
  background: #22c55e;
  border-color: #16a34a;
}
.public-newsletter-toggle-wrap input[type=checkbox]:checked + .public-newsletter-toggle-track .public-newsletter-toggle-thumb {
  left: 23px;
  background: #fff;
}
.public-newsletter-legal a {
  background: transparent !important;
  color: var(--ke-warning);
  text-decoration: underline;
}
.public-newsletter-hint {
  margin: 8px 0 0;
  color: var(--ke-text-muted);
  font-size: 17px;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .public-newsletter-signup-row {
    grid-template-columns: 1fr;
  }
  .public-newsletter-btn {
    width: 100%;
  }
  .public-newsletter-legal-switch {
    align-items: flex-start;
  }
  .nl-signup-dialog { width: 96vw; }
  .nl-signup-dialog-inner { padding: 22px 16px 16px; }
}

/* === Block 4: date-picker modal, weekday-grid, todo-calendar-btn, production-date === */

/* Date picker modal styles */
.date-picker-modal-backdrop { 
  position: fixed; 
  top: var(--ke-content-safe-top, var(--top-nav-height, 64px));
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.7); 
  display: none; 
  align-items: center; 
  justify-content: center; 
  z-index: 14100; 
  padding: 12px;
  padding-bottom: calc(var(--ke-content-safe-bottom, calc(var(--bottom-nav-height, 60px) + var(--footer-height, 42px))) + 12px);
  box-sizing: border-box;
}
.date-picker-modal-backdrop[style*="display: flex"] { 
  display: flex !important;
}
.date-picker-modal { 
  background: var(--ke-surface); 
  border: 2px solid var(--ke-success);
  border-radius: 12px; 
  width: min(92vw, 760px);
  max-width: 760px;
  max-height: calc(100vh - var(--ke-content-safe-top, var(--top-nav-height, 64px)) - var(--ke-content-safe-bottom, calc(var(--bottom-nav-height, 60px) + var(--footer-height, 42px))) - 24px);
  padding: 24px; 
  color: var(--ke-text); 
  box-shadow: 0 10px 40px rgba(0,0,0,0.8); 
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .date-picker-modal {
    max-height: calc(100dvh - var(--ke-content-safe-top, var(--top-nav-height, 64px)) - var(--ke-content-safe-bottom, calc(var(--bottom-nav-height, 60px) + var(--footer-height, 42px))) - 24px);
  }
}
.weekday-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 500px;
  overflow-y: auto;
  padding: 4px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.week-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.weekday-btn {
  position: relative;
  background: var(--ke-surface-2);
  border: 2px solid var(--ke-border);
  border-radius: 8px;
  padding: 10px 6px;
  color: var(--ke-text);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  font-size: 12px;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.weekday-btn:hover {
  background: var(--ke-surface-hover);
  border-color: var(--ke-warning);
  transform: scale(1.05);
}
.weekday-btn.today {
  background: rgba(255, 152, 0, 0.2);
  border-color: #ff9800;
  font-weight: bold;
}
.weekday-btn.weekend {
  background: rgba(100, 100, 100, 0.15);
  border-color: #666;
  opacity: 0.8;
}
.weekday-btn.weekend:hover {
  opacity: 1;
}
.weekday-name {
  font-size: 11px;
  font-weight: bold;
  color: var(--ke-success);
}
.weekday-date {
  font-size: 16px;
}
.todo-count-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--ke-success);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
@media (max-width: 640px) {
  .date-picker-modal {
    width: min(92vw, 420px);
    padding: 18px;
  }

  .week-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .weekday-btn {
    min-height: 88px;
  }
}

/* Calendar button */
.todo-calendar-btn {
  position: relative;
  background: transparent;
  border: 2px solid var(--ke-warning);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.todo-calendar-btn:hover {
  background: rgba(248, 179, 58, 0.1);
  transform: scale(1.05);
}
.todo-calendar-btn .date-badge {
  font-size: 11px;
  font-weight: bold;
  color: var(--ke-warning);
  white-space: nowrap;
}
.todo-calendar-btn.date-overdue {
  border-color: #e53935;
  background: rgba(229, 57, 53, 0.1);
}
.todo-calendar-btn.date-overdue .date-badge {
  color: #e53935;
}
.todo-calendar-btn.date-today {
  border-color: #ff9800;
  background: rgba(255, 152, 0, 0.1);
}
.todo-calendar-btn.date-today .date-badge {
  color: #ff9800;
}
.todo-calendar-btn.date-soon {
  border-color: #fdd835;
  background: rgba(253, 216, 53, 0.1);
}
.todo-calendar-btn.date-soon .date-badge {
  color: #f9a825;
}

/* Production date picker buttons */
.production-date-nav,
.production-date-action,
.production-date-danger {
  min-height: 40px;
  border: 1px solid var(--ke-border);
  border-radius: 6px;
  background: var(--ke-surface);
  color: var(--ke-text);
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.production-date-nav {
  min-width: 44px;
}

.production-date-action:hover,
.production-date-nav:hover {
  border-color: var(--ke-warning);
}

.production-date-danger {
  width: min(200px, 100%);
  border-color: #b52b2b;
  background: #ff4247;
  color: #fff;
}

/* === Block 5: Barcode Scanner Modal === */

#barcode-video {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--ke-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#barcode-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: var(--ke-bg);
}

#barcode-video canvas {
  display: none;
}

/* Light mode overrides for calendar buttons and date badges */
[data-theme="light"] .todo-calendar-btn {
  border-color: var(--ke-warning) !important;
  color: var(--ke-warning) !important;
  background: rgba(248, 179, 58, 0.08) !important;
}
[data-theme="light"] .todo-calendar-btn .date-badge {
  color: var(--ke-warning) !important;
}
[data-theme="light"] .todo-calendar-btn.date-overdue {
  border-color: #e53935 !important;
  background: rgba(229, 57, 53, 0.12) !important;
}
[data-theme="light"] .todo-calendar-btn.date-overdue .date-badge {
  color: #e53935 !important;
}
[data-theme="light"] .todo-calendar-btn.date-today {
  border-color: #ff9800 !important;
  background: rgba(255, 152, 0, 0.12) !important;
}
[data-theme="light"] .todo-calendar-btn.date-today .date-badge {
  color: #ff9800 !important;
}
[data-theme="light"] .todo-calendar-btn.date-soon {
  border-color: #fdd835 !important;
  background: rgba(253, 216, 53, 0.12) !important;
}
[data-theme="light"] .todo-calendar-btn.date-soon .date-badge {
  color: #f9a825 !important;
}