/* app.css – Individuelle Styles für den Caterer */

/* ── Design-System Variablen ─────────────────────────── */
:root {
  --color-header:        #2f3f49;
  --color-accent-red:    #d6001c;
  --color-success-green: #2fb87a;
  --color-background:    #f4f4f4;
  --color-card:          #fff;
  --color-text-main:     #555;
  --color-text-muted:    #8a8a8a;
  --color-border:        #dddddd;
  --bs-body-bg:          var(--color-background);
  --bs-body-color:       var(--color-text-main);
}

/* Bootstrap-Overrides */
.btn-primary        { background-color: var(--color-header); border-color: var(--color-header); }
.btn-primary:hover  { background-color: #3e5463; border-color: #3e5463; }
.btn-primary:focus  { background-color: #3e5463; border-color: #3e5463; box-shadow: 0 0 0 .25rem rgba(47,63,73,.25); }
.progress-bar       { background: var(--color-header); }

/* Sidebar */
#sidebar {
  width: 240px;
  min-width: 240px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--color-header) !important;
}

#sidebar .nav-link {
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  transition: background-color 0.15s ease;
}

#sidebar .nav-link:hover,
#sidebar .nav-link.active {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Login-Container */
#login-container {
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* Hauptinhalt */
#app-content { min-height: 0; }

/* Globale Karten-Abstände */
.card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); }

/* Tabellen */
.table th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
}

/* Badge-Farben */
.badge-kategorie { font-size: 0.75rem; }

/* ── Wochennavigation ────────────────────────────────── */
.week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.btn-wn-arrow {
  width: 34px; height: 34px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-card);
  color: var(--color-text-main);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.btn-wn-arrow:hover      { background: #eee; }
.wn-title-wrap           { display: flex; flex-direction: column; }
.wn-kw-btn {
  background: none; border: none; padding: 0;
  cursor: pointer;
  font-size: 16px; font-weight: 700; color: var(--color-header);
  line-height: 1.2;
}
.wn-kw-btn:hover         { color: var(--color-accent-red); }
.wn-sub                  { font-size: 11px; color: var(--color-text-muted); }

/* ── Angebotsplanung-Grid ────────────────────────────── */
.ap-grid-scroll { overflow-x: auto; margin-bottom: 20px; }
.ap-grid-wrap {
  min-width: 820px;
  background: var(--color-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.ap-grid-head  { display: grid; grid-template-columns: 130px repeat(5, 1fr); background: var(--color-header); }
.ap-gh-label   { padding: 8px 12px; color: rgba(255,255,255,0.5); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: flex-end; }
.ap-gh-cell    { padding: 7px 10px; color: #fff; border-left: 1px solid rgba(255,255,255,0.1); }
.ap-gh-day     { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.ap-gh-date    { font-size: 13px; font-weight: 600; line-height: 1.2; }
.ap-gh-holiday { font-size: 10px; color: #ff8a80; margin-top: 2px; }
.ap-gh-cell.ap-gh-holiday-cell { background: rgba(214,0,28,0.25); }
.ap-grid-body  { }
.ap-grid-row   { display: grid; grid-template-columns: 130px repeat(5, 1fr); border-top: 1px solid var(--color-border); }
.ap-row-label  {
  padding: 6px 12px;
  font-size: 11px; color: var(--color-text-muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center;
  background: var(--color-background);
  border-right: 1px solid var(--color-border);
}
.ap-drop-cell  {
  min-height: 78px; padding: 6px;
  border-left: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 5px;
  transition: background .15s;
}
.ap-drop-cell.droppable-hover {
  background-color: rgba(47,63,73,0.06) !important;
  outline: 2px dashed var(--color-header);
}
.ap-drop-cell.drop-valid {
  background-color: rgba(22,163,74,0.10) !important;
  border-top: 3px solid #16a34a !important;
  outline: none;
}
.ap-drop-cell.drop-invalid {
  background-color: rgba(220,38,38,0.07) !important;
  border-top: 3px solid #dc2626 !important;
  outline: none;
  cursor: not-allowed;
}
.ap-gh-cell.drop-col-active {
  background-color: rgba(47,63,73,0.08);
}

/* Meal-Karte im Grid */
.ap-meal-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  overflow: hidden;
  cursor: grab;
  display: flex;
  flex-direction: column;
}
.ap-meal-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-accent-red);
  border-radius: 7px 0 0 7px;
}
.ap-mc-thumb             { width: 100%; aspect-ratio: 3/1; background: linear-gradient(135deg,#e8ecef 0%,#d0d6db 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.ap-mc-thumb img         { width: 100%; height: 100%; object-fit: cover; }
.ap-mc-thumb i           { font-size: 16px; color: #aab4bb; }
.ap-mc-body              { padding: 4px 6px 4px 9px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ap-mc-name              { font-size: 11px; font-weight: 600; color: var(--color-text-main); line-height: 1.3; }
.ap-mc-footer            { display: flex; align-items: center; gap: 4px; }
.ap-mc-price             { font-size: 11px; color: var(--color-text-muted); flex: 1; }
.ap-mc-override          { font-size: 10px; background: rgba(255,193,7,0.15); color: #9a6700; border-radius: 4px; padding: 0 4px; }
.ap-mc-edit              { background: none; border: none; padding: 2px 4px; cursor: pointer; color: var(--color-text-muted); font-size: 12px; border-radius: 4px; }
.ap-mc-edit:hover        { background: #f0f0f0; color: var(--color-header); }
.ap-add-btn              { font-size: 11px; color: var(--color-text-muted); border: 1.5px dashed var(--color-border); border-radius: 7px; padding: 6px; text-align: center; cursor: default; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; }

/* ── Mahlzeiten-Bibliothek ───────────────────────────── */
.ap-lib-grid             { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-lib-card             { width: 140px; background: var(--color-card); border: 1.5px solid var(--color-border); border-radius: 8px; overflow: hidden; cursor: grab; user-select: none; transition: box-shadow .15s, border-color .15s; }
.ap-lib-card:hover       { box-shadow: 0 3px 10px rgba(0,0,0,0.12); border-color: #bbb; }
.ap-lib-thumb            { aspect-ratio: 4/3; background: linear-gradient(135deg,#e8ecef 0%,#d0d6db 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ap-lib-thumb img        { width: 100%; height: 100%; object-fit: cover; }
.ap-lib-thumb i          { font-size: 22px; color: #aab4bb; }
.ap-lib-body             { padding: 6px 8px; }
.ap-lib-name             { font-size: 12px; font-weight: 600; color: var(--color-text-main); line-height: 1.3; margin-bottom: 2px; }
.ap-lib-price            { font-size: 11px; color: var(--color-text-muted); }
.ap-lib-veg              { color: var(--color-success-green); font-size: 11px; }
.ap-lib-days             { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.ap-lib-day-pill         { font-size: 9px; padding: 1px 4px; border-radius: 3px; background: rgba(47,63,73,0.12); color: var(--color-text-muted); font-weight: 600; }

/* jQuery UI Draggable/Droppable */
.ui-draggable-dragging {
  opacity: 0.75;
  cursor: grabbing !important;
  z-index: 9999;
}
/* Drag-Clone der Grid-Karte: feste Breite, damit aspect-ratio korrekt skaliert */
.ui-draggable-dragging.ap-meal-card {
  width: 140px !important;
}
.droppable-hover {
  background-color: rgba(47,63,73,0.06) !important;
  outline: 2px dashed var(--color-header);
}

/* Mahlzeiten: Drag-and-Drop Bild-Upload auf Tabellenzeilen */
.m-drop-row {
  transition: background-color .15s ease, box-shadow .15s ease;
}

.m-drop-thumb-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.m-drop-target-label {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: #2f3f49;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(47, 63, 73, 0.28);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

.m-drop-row.m-drop-over {
  background-color: rgba(47,63,73,0.08);
  box-shadow: inset 0 0 0 2px rgba(47,63,73,0.35);
}

.m-drop-row.m-drop-over .m-drop-target-label,
.m-drop-row.m-drop-uploading .m-drop-target-label {
  display: inline-block;
}

.m-drop-row.m-drop-uploading {
  background-image: linear-gradient(90deg, rgba(47,63,73,0.12) 25%, rgba(47,63,73,0.04) 25%, rgba(47,63,73,0.04) 50%, rgba(47,63,73,0.12) 50%, rgba(47,63,73,0.12) 75%, rgba(47,63,73,0.04) 75%, rgba(47,63,73,0.04));
  background-size: 32px 32px;
}