html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Pin the primary-action cell of a list-table to the right edge so it
   stays visible while the rest of the row scrolls horizontally on a
   phone. No-op on desktop where the table fits without scrolling. The
   background and left shadow are what make the trick read as "this
   column is floating over the scrolled content". Apply to both the th
   (header) and td (action button) in the same column. */
.table .sticky-action {
  position: sticky;
  right: 0;
  background-color: var(--bs-body-bg, #fff);
  box-shadow: -4px 0 4px -2px rgba(0, 0, 0, 0.08);
  z-index: 1;
}
/* Tinted rows (table-light, table-info, etc. — any Bootstrap table-*
   variant) need the sticky cell to pick up the row's background or the
   action would visually "pop out" of context. The variants write their
   colour into --bs-table-bg on the row, so reading the variable here
   stays aligned regardless of which tint is applied. The selector
   matches any tr whose class begins with or contains "table-". */
.table tr[class*="table-"] .sticky-action {
  background-color: var(--bs-table-bg, var(--bs-body-bg, #fff));
}
/* Bootstrap 5 ships width utilities for the no-prefix variants only.
   This single responsive add-on lets the schedule header reflow the
   action group: full-width-stacked on phone portrait, auto-width
   inline on sm+ so it can right-align next to the title. */
@media (min-width: 576px) {
  .w-sm-auto { width: auto !important; }
}
/* docs/22 item 2 — clickable schedule rows. The whole row navigates
   to the meeting page (JS in site.js reads data-row-href); the cursor
   hint + table-hover tint signal the affordance. Inner buttons/links
   keep their own click behavior — the JS handler bails on those. */
.clickable-row { cursor: pointer; }

/* ---- issue #4: editable month overview (Översikt) grid ----
   A slot-name x meeting matrix modelled on the print grid, but every
   slot cell is an interactive button (assign / swap / mark-absent /
   remove). Cells call cookie-auth page-handlers via fetch; styling here
   only conveys state — the server enforces every rule. */
.ov-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ov-grid td {
  border: 1px solid var(--bs-border-color, #dee2e6);
  padding: 0;
  vertical-align: top;
  width: 28.6%;
}
.ov-grid .ov-slot-label {
  width: 14%;
  font-weight: 600;
  padding: 6px 8px;
  background-color: var(--bs-tertiary-bg, #f8f9fa);
  border-left: 0;
}
.ov-grid .ov-header-row td {
  border-bottom: 2px solid var(--bs-border-color, #dee2e6);
  padding: 8px;
  vertical-align: bottom;
}
.ov-header-row .ov-meeting-link { font-weight: 600; text-decoration: none; }
.ov-header-row .ov-meeting-date { font-size: 0.85em; color: var(--bs-secondary-color, #6c757d); }
.ov-header-row .ov-meeting-note { font-size: 0.8em; font-style: italic; color: var(--bs-secondary-color, #6c757d); }
.ov-header-row .ov-skipped .ov-meeting-link { font-style: italic; color: var(--bs-secondary-color, #6c757d); }
.ov-header-row .ov-special { background-color: var(--bs-info-bg-subtle, #cff4fc); }
.ov-td.ov-na { background-color: var(--bs-tertiary-bg, #f8f9fa); }
.ov-td.ov-pad { background: transparent; border: 0; }

/* The clickable cell fills its td so the whole cell is the hit target. */
.ov-cell {
  display: block;
  width: 100%;
  min-height: 2.4rem;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.ov-cell:hover, .ov-cell:focus-visible {
  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
  outline: none;
}
.ov-cell-empty { color: var(--bs-secondary-color, #adb5bd); }
.ov-cell-empty .ov-add { font-weight: 700; font-size: 1.1em; opacity: 0.5; }
.ov-cell-empty:hover .ov-add { opacity: 1; }
.ov-cell-absent .ov-name { text-decoration: line-through; color: var(--bs-secondary-color, #6c757d); }
.ov-cell .ov-flag { margin-left: 0.25rem; }

/* Two-click swap mode: dim non-targets, outline the source + targets. */
.ov-grid.ov-swapping .ov-cell { cursor: default; }
.ov-grid.ov-swapping .ov-cell.ov-swap-target {
  cursor: pointer;
  background-color: var(--bs-success-bg-subtle, #d1e7dd);
  box-shadow: inset 0 0 0 2px var(--bs-success-border-subtle, #a3cfbb);
}
.ov-grid.ov-swapping .ov-cell.ov-swap-source {
  box-shadow: inset 0 0 0 2px var(--bs-primary, #0d6efd);
}

/* Shared floating actions menu, positioned at the clicked cell by JS. */
.ov-menu {
  position: absolute;
  z-index: 1060;
  min-width: 11rem;
  padding: 0.25rem 0;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
}

/* Keep the swap-mode banner in view while the planner scans for a target.
   Lay out its contents inline here rather than with Bootstrap's .d-flex:
   .d-flex is display:flex !important, which would beat the `hidden`
   attribute's UA display:none and pin the banner on screen permanently.
   The [hidden] rule below (higher specificity than the base rule) lets
   the toggle hide it again. */
.ov-swap-banner {
  position: sticky;
  bottom: 1rem;
  z-index: 1055;
  display: flex;
  align-items: center;
}
.ov-swap-banner[hidden] { display: none; }