/* ── Shift colour coding ──────────────────────────────────────────────── */
.shift-D1    { background-color: #fef9c3; color: #713f12; font-weight: 600; }
.shift-N3    { background-color: #1e1b4b; color: #c7d2fe; font-weight: 600; }
.shift-libre { background-color: #f0fdf4; color: #6b7280; }

/* Badge-style legend pills */
.badge-shift {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.1);
}

/* ── Schedule table ───────────────────────────────────────────────────── */
.schedule-table {
  font-size: .82rem;
  white-space: nowrap;
}
.schedule-table .emp-col {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  min-width: 110px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-table thead .emp-col {
  background: #212529;
}
.schedule-table .day-col {
  min-width: 34px;
  max-width: 46px;
  text-align: center;
  padding: 4px 2px;
}

/* On very small screens shrink further */
@media (max-width: 576px) {
  .schedule-table { font-size: .72rem; }
  .schedule-table .emp-col { min-width: 90px; max-width: 120px; }
  .schedule-table .day-col { min-width: 28px; }
}

/* ── Overflow days (prev/next month) ─────────────────────────────────── */
.schedule-table td.overflow-day,
.schedule-table th.overflow-day {
  opacity: 0.4;
}

/* ── Mini calendar ────────────────────────────────────────────────────── */
.mini-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 52px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.08);
  font-size: .72rem;
  line-height: 1.2;
  cursor: default;
  transition: transform .1s;
  flex-shrink: 0;
}
.mini-day:hover { transform: scale(1.08); }
.mini-day-num   { font-weight: 700; font-size: .85rem; line-height: 1.1; }
.mini-day-wd    { display: block; font-size: .55rem; font-weight: 400; opacity: .8; }
.mini-day-shift { font-size: .65rem; opacity: .8; }
.mini-day-selected {
  outline: 3px solid #0d6efd;
  outline-offset: 1px;
  transform: scale(1.1);
}

@media (max-width: 400px) {
  .mini-day { width: 40px; height: 46px; }
  .mini-day-num { font-size: .78rem; }
}

/* ── Mini calendar table (exchange view, weeks Mon–Sun) ──────────────── */
.mini-calendar-table { font-size: .82rem; }
.mini-calendar-table th { min-width: 38px; text-align: center; }
.mini-calendar-table td { padding: 4px 2px; vertical-align: middle; min-width: 38px; }
.mini-calendar-table a { display: block; padding: 1px; color: inherit; }
.mini-calendar-table a:hover { opacity: .82; }
.cal-day-num  { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.cal-day-shift { font-size: .68rem; opacity: .85; line-height: 1.2; }

/* D1 / N3 shift text colours in the mini calendar */
.mini-calendar-table .shift-D1               { background-color: #fef3c7; color: #92400e; }
.mini-calendar-table .shift-D1 .cal-day-num  { color: #92400e; }
.mini-calendar-table .shift-D1 .cal-day-shift { color: #b45309; opacity: 1; font-weight: 700; }
.mini-calendar-table .shift-N3               { background-color: #ede9fe; color: #5b21b6; }
.mini-calendar-table .shift-N3 .cal-day-num   { color: #5b21b6; }
.mini-calendar-table .shift-N3 .cal-day-shift { color: #6d28d9; opacity: 1; font-weight: 700; }
.mini-day.shift-D1 { background-color: #fef3c7; color: #92400e; }

/* ── Exchange option cards ────────────────────────────────────────────── */
.option-card { transition: box-shadow .15s; }
.option-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}
.option-card.swap-active {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
}

/* ── Target day (the shift being exchanged) ───────────────────────────── */
.day-target {
  background-color: #16a34a !important;
  color: #fff !important;
  font-weight: 700;
  outline: 2px solid #15803d;
  outline-offset: -2px;
}

/* ── Swap-day highlight in the full schedule table ────────────────────── */
[data-swap-day].swap-highlight-primary {
  background-color: #2563eb !important;
  color: #fff !important;
  outline: 2px solid #1d4ed8;
  outline-offset: -2px;
  font-weight: 700;
}
[data-swap-day].swap-highlight-secondary {
  background-color: #6b7280 !important;
  color: #fff !important;
  outline: 2px solid #374151;
  outline-offset: -2px;
  font-weight: 700;
}
[data-swap-day].swap-highlight-danger {
  background-color: #dc2626 !important;
  color: #fff !important;
  outline: 2px solid #b91c1c;
  outline-offset: -2px;
  font-weight: 700;
}

/* ── Navigation ───────────────────────────────────────────────────────── */
.navbar-brand { font-size: 1.2rem; }

/* Prevent horizontal overflow on mobile */
body { overflow-x: hidden; }

/* ── Purple helpers (N3 accent) ───────────────────────────────────────── */
.text-purple { color: #6d28d9; }

/* ── File drop zone ───────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed #6ea8fe;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  background: #f8f9fa;
  position: relative;
}
.drop-zone:hover,
.drop-zone.drag-over {
  background: #e7f1ff;
  border-color: #0d6efd;
}
.drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.drop-zone .drop-icon   { font-size: 2rem; color: #6ea8fe; }
.drop-zone .drop-hint   { font-size: .85rem; color: #6c757d; }
.drop-zone .drop-name   { font-size: .9rem; font-weight: 600; color: #0d6efd; margin-top: .4rem; }

/* ── Cookie consent banner ────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e293b;
  color: #e2e8f0;
  padding: .75rem 0;
  z-index: 1050;
  box-shadow: 0 -2px 12px rgba(0,0,0,.25);
}
.cookie-banner a { color: #fbbf24; }
.cookie-banner code { color: #a5f3fc; font-size: .85em; }

/* ── Utility ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Stack action buttons vertically on small screens */
  .btn-group-responsive {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .btn-group-responsive .btn { width: 100%; }
  /* Reduce heading sizes */
  h4 { font-size: 1.1rem; }
  h5 { font-size: 1rem; }
}