/* styles.css - calendar, wallpaper and solid appearance themes */
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; }

.dashboard-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.dashboard-toggle:hover { background: rgba(var(--bs-body-color-rgb), .05); }
.dashboard-toggle:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: -3px; }
.dashboard-toggle-icon {
  width: .7rem;
  height: .7rem;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.dashboard-toggle[aria-expanded="false"] .dashboard-toggle-icon { transform: rotate(-45deg); }
.user-actions-column { width: 220px; min-width: 220px; white-space: nowrap; }
.half-day-badge {
  margin-left: .2rem;
  padding: .25em .45em;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  font-size: .65em;
  vertical-align: .12em;
}
.entry-meta { display: inline-flex; flex: 0 0 auto; align-items: center; }
.entry-hours-badge {
  display: inline-block;
  min-width: 1.6rem;
  padding: .16rem .4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .72em;
  line-height: 1;
  text-align: center;
}
.entry-pill.red .entry-hours-badge { background: rgba(255,255,255,.2); color: #fff; }
.entry-pill.white .entry-hours-badge { background: #212529; color: #fff; border-color: #212529; }

.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 */
}

.upcoming-month-select{
  width:auto;
  min-width:145px;
}

/* Solid themes are the default; wallpaper mode retains the original glass styling. */
html[data-appearance="solid"][data-bs-theme="dark"] {
  --bs-body-bg: #202020;
  --bs-body-bg-rgb: 32, 32, 32;
  --bs-body-color: #ececec;
  --bs-body-color-rgb: 236, 236, 236;
  --bs-secondary-bg: #303030;
  --bs-tertiary-bg: #383838;
  --bs-border-color: #505050;
  --appearance-surface: #292929;
  --appearance-cell: #333333;
  --appearance-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
html[data-appearance="solid"][data-bs-theme="light"] {
  --bs-body-bg: #f1f2f4;
  --bs-body-color: #24262a;
  --bs-border-color: #c9cdd3;
  --appearance-surface: #ffffff;
  --appearance-cell: #f5f6f8;
  --appearance-shadow: 0 8px 24px rgba(30, 35, 45, .06);
}
html[data-appearance="solid"] .bg-hero,
html[data-appearance="solid"] .bg-overlay { display: none; }
html[data-appearance="wallpaper"] body { isolation: isolate; }
html[data-appearance="solid"] .frosted,
html[data-appearance="solid"] .navbar-blur {
  background: var(--appearance-surface);
  border-color: var(--bs-border-color);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--appearance-shadow);
}
html[data-appearance="solid"] .calendar-cell {
  background: var(--appearance-cell);
  border-color: var(--bs-border-color);
}
html[data-appearance="solid"] .table-glass { background: var(--appearance-surface); }
html[data-appearance="solid"] .table {
  --bs-table-bg: var(--appearance-surface);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
}
html[data-appearance="solid"] .popover {
  --bs-popover-bg: var(--appearance-surface);
  --bs-popover-header-bg: var(--appearance-cell);
  --bs-popover-body-color: var(--bs-body-color);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
html[data-appearance="solid"] .popover .popover-header { color: var(--bs-body-color); }
html[data-appearance="solid"] input[type="file"]::file-selector-button {
  background: var(--appearance-cell); color: var(--bs-body-color);
}
html[data-bs-theme="light"] .btn-outline-light {
  --bs-btn-color: #41464d;
  --bs-btn-border-color: #626973;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #41464d;
  --bs-btn-hover-border-color: #41464d;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #41464d;
  --bs-btn-active-border-color: #41464d;
}
.appearance-settings { max-width: 720px; }
.theme-choice { width: 250px; max-width: 100%; padding: .75rem; border: 2px solid var(--bs-border-color); border-radius: .75rem; cursor: pointer; }
.theme-choice:has(input:checked) { border-color: var(--bs-primary); }
.theme-choice:focus-within { outline: 3px solid var(--bs-primary); outline-offset: 3px; }
.theme-preview { display: flex; flex-direction: column; gap: .6rem; height: 90px; padding: 1rem; border-radius: .4rem; margin-bottom: .75rem; }
.theme-preview span { height: 20px; border-radius: .25rem; }
.theme-preview span:last-child { width: 65%; }
.theme-preview-dark { background: #202020; }
.theme-preview-dark span { background: #444; }
.theme-preview-light { background: #edf0f3; }
.theme-preview-light span { background: #fff; border: 1px solid #d4d8de; }
#themeChoices:disabled .theme-choice { opacity: .55; cursor: default; }