/* =========================
   Week header
   ========================= */
.weekbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:12px 0 16px;
}
.weekbar-title{
  font-size:14px;
  opacity:.85;
}
.weekbar-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* =========================
   Page layout: schedule + sidebar
   Fix: sidebar does NOT cramp the grid
   ========================= */
.rosters-layout{
  display:grid;
  grid-template-columns: minmax(980px, 1fr) 280px; /* schedule keeps width, sidebar fixed */
  gap:18px;
  align-items:start;
}

/* left column (schedule) should scroll horizontally rather than shrink */
.schedule-wrapper{
  width:100%;
  overflow-x:auto;
  min-width:0;
}

/* ensure the grid has a comfortable minimum width */
.schedule{
  min-width: 1180px; /* tweak if you want wider cells */
  border:1px solid rgba(0,0,0,0.06);
  border-radius:16px;
  background:rgba(255,255,255,0.80);
}

/* Sidebar fixed width, pinned while scrolling page */
.week-summary{
  width:280px;
  background:rgba(127,178,214,0.55);
  border-radius:28px;
  padding:14px 14px 16px;
  border:2px solid rgba(27,42,107,0.18);
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
  position:sticky;
  top:16px;
}

/* stack layout on smaller screens */
@media (max-width: 1250px){
  .rosters-layout{
    grid-template-columns: 1fr;
  }
  .week-summary{
    width:100%;
    max-width:520px;
    margin:0 auto;
    position:static;
  }
  .schedule{
    min-width: 1040px;
  }
}

/* =========================
   Schedule grid
   ========================= */
.schedule-head,
.schedule-row{
  display:grid;
  grid-template-columns: 220px repeat(7, minmax(130px, 1fr));
}

/* Zebra striping by user row */
.schedule-row:nth-of-type(odd){
  background: rgba(255,255,255,0.70);
}

.schedule-row:nth-of-type(even){
  background: rgba(127,178,214,0.12);
}

/* Make sure sticky left cell matches the row background */
.schedule-row:nth-of-type(odd) .schedule-sticky-left{
  background: rgba(255,255,255,0.95);
}

.schedule-row:nth-of-type(even) .schedule-sticky-left{
  background: rgba(240,248,255,0.95); /* light blue-ish */
}

/* Add subtle separators so it's easier to scan */
.schedule-row{
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* slightly tighter on smaller screens */
@media (max-width: 1000px){
  .schedule-head,
  .schedule-row{
    grid-template-columns: 180px repeat(7, minmax(120px, 1fr));
  }
}

.schedule-cell{
  padding:8px;
  min-height:70px;
}

.schedule-head .schedule-cell{
  min-height:64px;
  background:rgba(255,255,255,0.95);
}

.schedule-head-left{
  display:flex;
  align-items:center;
}

.schedule-search{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.10);
  outline:none;
}

.schedule-sticky-left{
  position:sticky;
  left:0;
  z-index:5;
  background:rgba(255,255,255,0.95);
}

.schedule-head-day{
  text-align:center;
}

.schedule-dow{
  font-weight:800;
  color:var(--navy);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.schedule-date{
  font-size:12px;
  opacity:.8;
}

/* =========================
   User cell
   ========================= */
.schedule-user{
  display:flex;
  gap:10px;
  align-items:center;
}

.schedule-avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  background:rgba(27,42,107,0.12);
  color:var(--navy);
  display:grid;
  place-items:center;
  font-weight:900;
}

.schedule-user-name{ font-weight:800; font-size: 13px;}
.schedule-user-sub{ font-size:11px; opacity:.7; }

/* =========================
   Shifts
   ========================= */
.schedule-day-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.shift-card{
  background:rgba(127,178,214,0.25);
  border:1px solid rgba(127,178,214,0.50);
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.shift-time{
  font-weight:900;
  font-size:10px;
}

.shift-meta{
  font-size:9px;
  opacity:.85;
  line-height:1.25;
}

/* Keep action buttons inside the card and wrapping neatly */
.shift-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:4px;
}

/* unified small pill buttons (use for Edit + Duplicate) */
.mini-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 4px;
  border-radius:999px;
  border:1px solid rgba(27,42,107,0.20);
  background:rgba(255,255,255,0.65);
  color:var(--navy);
  font-weight:900;
  font-size:9px;
  text-decoration:none;
  cursor:pointer;
}

/* for Delete button_to */
.mini-pill.danger{
  color:#991b1b;
  border-color:rgba(153,27,27,0.25);
  background:rgba(255,255,255,0.65);
}

/* Make button_to look like the links */
.shift-actions form{
  display:inline;
  margin: 0;
}
.shift-actions form button{
  border:1px solid rgba(153,27,27,0.25);
  background:rgba(255,255,255,0.65);
  color:#991b1b;
  font-weight:900;
  font-size:9px;
  padding:2px 6px;
  border-radius:999px;
  cursor:pointer;
  line-height:1;
}

.shift-actions > *{
  height:22px;
}

/* Add shift link */
/* Engaging "+ Add shift" button */
.shift-add a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(27,42,107,0.20);
  background: rgba(27,42,107,0.06);
  color: var(--navy);
  font-weight: 900;
  font-size: 11px;
  text-decoration: none;
  transition: transform 0.08s ease, background 0.12s ease;
}

.shift-add a:hover{
  background: rgba(127,178,214,0.35);
  transform: translateY(-1px);
}

/* Base transition for smooth hover */
.mini-pill,
.shift-actions form button{
  transition: 
    background 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.15s ease;
}

/* Hover for normal pills (Edit / Duplicate) */
.mini-pill:hover{
  background: rgba(127,178,214,0.45);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

/* Hover for Delete */
.mini-pill.danger:hover,
.shift-actions form button:hover{
  background: rgba(220,38,38,0.15);
  box-shadow: 0 2px 6px rgba(153,27,27,0.25);
  transform: translateY(-1px);
}

/* =========================
   Sidebar content
   ========================= */
.week-summary__title{
  font-weight:900;
  text-align:center;
  color:var(--navy);
  background:rgba(255,255,255,0.55);
  border-radius:18px;
  padding:10px 12px;
  border:1px solid rgba(27,42,107,0.18);
  margin-bottom:12px;
  line-height:1.15;
}

.week-summary__list{
  display:grid;
  gap:10px;
  margin-bottom:12px;
}

.week-summary__card{
  background:rgba(255,255,255,0.85);
  border-radius:14px;
  border:1px solid rgba(27,42,107,0.18);
  padding:10px;
  text-align:center;
}

.week-summary__name{
  font-weight:900;
  margin-bottom:4px;
}

.week-summary__meta{
  font-size:12px;
  opacity:.9;
}

.week-summary__total{
  background:rgba(255,255,255,0.95);
  border-radius:18px;
  padding:12px;
  border:1px solid rgba(27,42,107,0.18);
  text-align:center;
}

.week-summary__total-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
  color:var(--navy);
}
/* ===== Make Mon–Sun fit better on one page ===== */

/* Slightly narrower user column + smaller day min width */
.schedule-head,
.schedule-row{
  grid-template-columns: 190px repeat(7, minmax(105px, 1fr));
}

/* Reduce padding/height so more content fits */
.schedule-cell{
  padding: 6px;
  min-height: 64px;
}

/* Reduce header height a bit */
.schedule-head .schedule-cell{
  min-height: 56px;
}

/* Tighten overall schedule min width (less horizontal scroll) */
.schedule{
  min-width: 980px;
}

.portal-nav {
  background: rgba(127,178,214,0.35); /* or whatever colour you want */
}