:root {
  --app-bg: #f5f7fb;
  --app-surface: #ffffff;
  --app-border: #dbe2ea;
  --app-muted: #6b7280;
  --app-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
html, body { background: var(--app-bg); }
body.app-shell { color: #111827; }
.app-navbar { background: linear-gradient(135deg, #111827, #1f2937); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.app-container { width: 100%; max-width: 100%; padding-left: 20px; padding-right: 20px; }
.card { border-radius: 1rem; border: 1px solid var(--app-border); box-shadow: var(--app-shadow); background: var(--app-surface); }
.btn, .form-control, .form-select, .form-check-input, .input-group-text { border-radius: .8rem; }
.table-responsive { border-radius: 1rem; }
.table { --bs-table-bg: transparent; }
.table thead th { position: sticky; top: 0; background: #eef2f7; z-index: 1; border-bottom-width: 1px; }
.navbar .nav-link { border-radius: .75rem; padding: .65rem .9rem; }
.navbar .nav-link:hover, .navbar .nav-link:focus { background: rgba(255,255,255,.09); }
.page-toolbar, .section-toolbar { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.app-grid { display:grid; gap:1rem; }
.app-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card { padding: 1rem 1.1rem; }
.stat-card .value { font-size: 1.75rem; font-weight: 700; }
.filters-bar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; }
.excel-table td, .excel-table th { white-space: nowrap; vertical-align: middle; }
.excel-table tbody tr:hover { background: rgba(17,24,39,.04); }
.excel-table .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
.badge-soft { background: #eef2ff; color: #3730a3; }
@media (max-width: 991.98px){
  .app-container { padding-left: 14px; padding-right: 14px; }
  .app-grid.cols-2, .app-grid.cols-3 { grid-template-columns: 1fr; }
  .card { border-radius: .9rem; }
  .btn { min-height: 44px; }
  .table thead th { position: static; }
  .table td, .table th { white-space: nowrap; }
}
.warehouse-subnav { display:flex; gap:.75rem; flex-wrap:wrap; }
.warehouse-subnav-link {
  display:inline-flex; align-items:center; gap:.4rem; padding:.75rem 1rem;
  border-radius:999px; background:#e9eef5; color:#111827; text-decoration:none; font-weight:600;
}
.warehouse-subnav-link.active { background:#111827; color:#fff; }
.scanner-panel { min-height: 100%; }
.scanner-video-wrap { position:relative; border-radius:1rem; overflow:hidden; background:#0f172a; }
.scanner-video-wrap video { width:100%; min-height:260px; max-height:420px; object-fit:cover; display:block; }
.scanner-overlay {
  position:absolute; inset:auto 0 1rem 0; margin:auto; width:min(82%, 420px); text-align:center;
  padding:.65rem 1rem; border:2px solid rgba(255,255,255,.9); border-radius:1rem; color:#fff;
  background:rgba(15,23,42,.25); backdrop-filter: blur(4px);
}
@media (max-width: 991.98px){
  .warehouse-subnav-link { width:100%; justify-content:center; }
  .scanner-video-wrap video { min-height:220px; }
}

/* Mobile Tab-System: Plan | Wunschstationen */
.mobile-tabs-nav {
    display: none;
}

.card-like-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .mobile-tabs-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        position: sticky;
        top: 10px;
        z-index: 60;
        margin: 10px 0 16px 0;
        background: #f8fafc;
        padding: 6px;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
    }

    .mobile-tab-btn {
        width: 100%;
        border: 0;
        border-radius: 10px;
        padding: 12px 14px;
        font-weight: 600;
        background: transparent;
        cursor: pointer;
    }

    .mobile-tab-btn.active {
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    .mobile-tab-panel {
        display: none;
    }

    .mobile-tab-panel.active {
        display: block;
    }
}

/* Desktop: beide Bereiche normal sichtbar */
@media (min-width: 769px) {
    .mobile-tab-panel {
        display: block !important;
    }
}

/* Anhänger */
.trailer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: .5rem;
}
.calendar-day {
  min-height: 110px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: .5rem;
}
.calendar-day.is-muted {
  opacity: .45;
}
.calendar-day-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.35rem;
  font-size:.9rem;
  font-weight:600;
}
.calendar-entry {
  display:block;
  font-size:.75rem;
  border-radius:999px;
  padding:.2rem .45rem;
  margin-bottom:.25rem;
  background:#f3f4f6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calendar-entry.block { background:#fee2e2; }
.calendar-entry.approved { background:#dcfce7; }
.calendar-entry.pending { background:#fef3c7; }
@media (max-width:768px){
  .calendar-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .calendar-day { min-height: 90px; }
}


.home-hero {
  background: radial-gradient(circle at top right, rgba(99,102,241,.16), transparent 30%), linear-gradient(135deg, #ffffff, #f8fafc);
}
.home-kicker {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.home-hero-panel {
  border:1px solid #e5e7eb;
  border-radius:1rem;
  background:#fff;
  padding:1rem;
}
.home-link-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1rem;
}
.home-link-card {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1rem;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  background:#fff;
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-link-card:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  border-color:#cbd5e1;
}
.home-link-icon {
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#111827;
  color:#fff;
  font-size:1.15rem;
  flex:0 0 auto;
}
.shift-board-grid {
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(0, 1fr);
  gap:1rem;
}
.shift-pool-card, .shift-drop-card {
  border:1px solid #e5e7eb;
  border-radius:1rem;
  background:#fff;
}
.shift-pool-sticky {
  position:sticky;
  top:88px;
}
.shift-pool-list, .shift-slot-dropzone {
  min-height:120px;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.shift-person-chip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.85rem 1rem;
  border:1px solid #dbe2ea;
  border-radius:14px;
  background:#f8fafc;
  cursor:grab;
}
.shift-person-chip.is-assigned {
  background:#fff;
}
.shift-person-chip:active {
  cursor:grabbing;
}
.shift-dropzone {
  border:2px dashed #cbd5e1;
  border-radius:14px;
  background:#f8fafc;
  padding:1rem;
  transition:border-color .15s ease, background .15s ease;
}
.shift-dropzone.drag-over {
  border-color:#111827;
  background:#eef2ff;
}
.shift-dropzone-hint {
  color:#6b7280;
  font-size:.92rem;
}
.shift-desktop-board { display:block; }
.shift-mobile-board { display:none; }
@media (max-width: 1199.98px){
  .shift-board-grid { grid-template-columns:1fr; }
  .shift-pool-sticky { position:static; }
}
@media (max-width: 991.98px){
  .dashboard-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px){
  .dashboard-stats { grid-template-columns:1fr; }
  .shift-desktop-board { display:none; }
  .shift-mobile-board { display:block; }
}


.jako-home-card {
  background: radial-gradient(circle at top right, rgba(17,24,39,.06), transparent 28%), linear-gradient(135deg, #ffffff, #f8fafc);
}
.jako-home-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.jako-fact-card {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
}
.jako-fact-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: .45rem;
}
.jako-fact-text {
  color: #111827;
}
.jako-product-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.jako-product-pill {
  display: inline-flex;
  align-items: center;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: #eef2f7;
  border: 1px solid #dbe2ea;
  font-weight: 600;
  color: #111827;
}
@media (max-width: 991.98px) {
  .jako-home-facts {
    grid-template-columns: 1fr;
  }
}