/* styles.css - frosted glass + calendar visuals */
html, body { height: 100%; }
.bg-hero { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bg-overlay { position: fixed; inset: 0;
  background: radial-gradient(1200px circle at 10% 10%, rgba(255,255,255,0.15), transparent 40%),
              radial-gradient(800px circle at 90% 20%, rgba(255,255,255,0.12), transparent 50%),
              linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  z-index: -1;
}
.frosted { background: rgba(255,255,255,0.18); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.32); border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.calendar-cell { min-height: 110px; padding: .5rem; border-radius: .75rem; background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.35); position: relative; }
.calendar-cell .date-badge { position: absolute; top: .4rem; right: .5rem; font-size: .85rem; opacity: .85; }
.entry-pill { display: inline-block; padding: .2rem .5rem; border-radius: 999px; font-weight: 600; margin: .15rem .15rem 0 0; font-size: .85rem; border: 1px solid rgba(0,0,0,0.12); }
.entry-pill.red { background: #dc3545; color: #fff; }
.entry-pill.white { background: #ffffff; color: #000; }
.small-calendar .calendar-cell { min-height: 70px; }
.navbar-blur { background: rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.2); }
.table-glass { background: rgba(255,255,255,0.22); border-radius: .75rem; overflow: hidden; }
input[type="file"]::file-selector-button { border: 1px solid #6c757d; padding: .35rem .75rem; border-radius: .5rem; background: rgba(255,255,255,0.7); cursor: pointer; }
footer.small { opacity: .7; }

.dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.dot.red{background:#dc3545}
.dot.white{background:#ffffff;border:1px solid rgba(0,0,0,.55)}
.cell-dots{position:absolute;left:.5rem;bottom:.4rem}
.popover{--bs-popover-header-bg:#343a40;--bs-popover-bg:rgba(33,37,41,.95);color:#fff;border:1px solid rgba(255,255,255,.15)}
.popover .popover-header{color:#fff}

/* --- TV/wide tweaks --- */
.container-xxl{max-width:1600px}

/* bigger calendar cells & gaps */
.calendar-grid{gap:.65rem}
.calendar-cell{min-height:140px}
.small-calendar .calendar-cell{min-height:90px}

/* larger badges/pills */
.calendar-cell .date-badge{font-size:1rem}
.entry-pill{font-size:.95rem;padding:.25rem .6rem}

/* red/white shift dots (already present) + “more” dot for extra items */
.dot.more{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.35);
  margin-left:8px;      /* space from the 3rd pill */
  vertical-align:middle;/* align to pill text */
}


/* wider search offcanvas */
#searchPanel{--bs-offcanvas-width:760px}
@media (min-width:1400px){#searchPanel{--bs-offcanvas-width:900px}}

/* --- Tighter tables for Upcoming & Search --- */
.table-tight{table-layout:fixed;width:100%}
.table-tight th,.table-tight td{white-space:nowrap;vertical-align:middle}

.col-date{width:180px}
.col-name{width:36%}           /* keeps the name from eating the whole row */
.col-hours{width:80px;text-align:center}
.col-shift{width:110px}
.col-actions{width:150px}

.col-name .name{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* add breathing-room on first/last columns */
.table-tight th.col-date,
.table-tight td.col-date{ padding-left:1rem !important; }

.table-tight th.col-actions,
.table-tight td.col-actions{ padding-right:1rem !important; }

/* make the action buttons feel padded */
.table-tight td.col-actions .btn-sm{
  padding:.35rem .75rem;   /* was tighter; this is comfier */
}