/* MedCover custom styles */

/*
 * ── Dark-mode design conventions ────────────────────────────────────────────
 *
 *  SAFE (Bootstrap 5.3 CSS-variable-based, adapts to data-bs-theme="dark"):
 *    bg-body            — page background
 *    bg-body-secondary  — subtle panel / card-body highlight  ← use instead of bg-light
 *    bg-body-tertiary   — slightly more distinct panel
 *    bg-secondary       — muted badge/chip
 *    text-body          — primary text
 *    text-body-secondary — muted text
 *    text-black         — true black (use on coloured badge backgrounds)
 *
 *  UNSAFE (fixed colours, ignore dark mode — avoid in app templates):
 *    bg-light  ← always white/light-grey  → use bg-body-secondary instead
 *    bg-white  ← always white             → use bg-body instead
 *    text-dark ← always near-black        → use text-black on coloured badges
 *
 *  BADGE RULE: never write badge utility combos inline in templates.
 *    Use the macros in macros/badges.html instead so dark-mode correctness
 *    is enforced in one place.
 *
 *  TABLE HEADERS: always use <thead class="table-light"> — the global rule
 *    below neutralises it in dark mode for every table automatically.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Help popover trigger button ── */
.btn-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--color-help-button);
  background: transparent;
  border: 1px solid var(--color-help-button-border);
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 0.25rem;
  /* Ensure tap target is comfortable on mobile */
  position: relative;
}
.btn-help::after {
  content: '';
  position: absolute;
  inset: -6px;   /* expand tap area without expanding the visual element */
}
.btn-help:hover,
.btn-help:focus {
  color: var(--color-primary);
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 0.15rem var(--color-primary-shadow);
}

/* ── Mobile: compact tables ── */
@media (max-width: 767.98px) {
  .table {
    font-size: 0.8rem;
  }
  .table th,
  .table td {
    padding: 0.3rem 0.4rem;
  }
  .table .badge {
    font-size: 0.7rem;
    padding: 0.2em 0.4em;
  }
}

/* ── Mobile: make tables horizontally scrollable ── */
@media (max-width: 767.98px) {
  .table-responsive-stack thead {
    display: none;
  }
  .table-responsive-stack tbody tr {
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
  }
  .table-responsive-stack tbody td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    border: none;
  }
  .table-responsive-stack tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 0.5rem;
    white-space: nowrap;
  }
}

/* ── Mobile: btn groups stacked ── */
@media (max-width: 575.98px) {
  .btn-toolbar-mobile {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-toolbar-mobile .btn {
    width: 100%;
    margin-bottom: 0.25rem;
  }
}

/* ── FullCalendar — mobile-only adjustments ── */
@media (max-width: 575.98px) {
  .fc .fc-toolbar-title {
    font-size: 1rem;
  }
  .fc .fc-button {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
  }
  .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .fc .fc-toolbar-chunk {
    display: flex;
    gap: 0.2rem;
  }
}

/* Navbar link contrast on red background */
.navbar-dark .nav-link,
.navbar-dark .navbar-brand {
  color: var(--color-navbar-text);
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
  color: var(--color-navbar-text-hover);
}

/* Dark mode: table-light / table-foot overrides */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > * {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: rgba(255,255,255,0.05);
  --bs-table-color: var(--bs-body-color);
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
}

/* Dark mode: FullCalendar — wire FullCalendar CSS variables to Bootstrap */
[data-bs-theme="dark"] .fc {
  --fc-page-bg-color: var(--bs-body-bg);
  --fc-neutral-bg-color: var(--bs-secondary-bg);
  --fc-border-color: var(--bs-border-color);
  --fc-event-text-color: #fff;
  --fc-list-event-hover-bg-color: var(--bs-tertiary-bg);
}

/* Month/week view: day-name header row — match events table thead */
[data-bs-theme="dark"] .fc .fc-col-header-cell,
[data-bs-theme="dark"] .fc .fc-col-header-cell a {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Month/week view: day-number cells (exclude today — it has its own highlight) */
[data-bs-theme="dark"] .fc .fc-daygrid-day:not(.fc-day-today),
[data-bs-theme="dark"] .fc .fc-timegrid-col:not(.fc-day-today) {
  background-color: var(--bs-body-bg) !important;
}

/* Restore today highlight in dark mode */
[data-bs-theme="dark"] .fc .fc-day-today {
  background-color: var(--color-darkmode-day-today-highlight) !important;
}

/* Month view: "other month" faded day cells */
[data-bs-theme="dark"] .fc .fc-day-other .fc-daygrid-day-top {
  opacity: 0.4;
}

/* List view: sticky day-header rows — same color as table thead */
[data-bs-theme="dark"] .fc .fc-list-sticky .fc-list-day > *,
[data-bs-theme="dark"] .fc .fc-list-day-cushion {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* List view: event rows */
[data-bs-theme="dark"] .fc .fc-list-event td {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Toolbar */
[data-bs-theme="dark"] .fc .fc-toolbar {
  background-color: transparent !important;
}

/* Filter buttons: Bootstrap .btn classes handle all base styling.
   On touch-only devices (mobile), suppress the sticky simulated-hover,
   focus and active states that persist after a tap on inactive buttons. */
@media (hover: none) {
  .filter-btn:not(.active):hover,
  .filter-btn:not(.active):focus,
  .filter-btn:not(.active):focus-visible,
  .filter-btn:not(.active):active {
    background-color: transparent !important;
    color: var(--bs-btn-color) !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

/* ── Utility extensions (CSP-safe replacements for inline styles) ── */

/* White-space */
.text-prewrap { white-space: pre-wrap; }

/* Font-size */
.font-65  { font-size: 0.65rem; }
.font-70  { font-size: 0.70rem; }
.font-75  { font-size: 0.75rem; }
.font-78  { font-size: 0.78rem; }
.font-85  { font-size: 0.85rem; }

/* Column / element widths — pixel */
.col-60   { width:  60px; }
.col-80   { width:  80px; }
.col-90   { width:  90px; }
.col-100  { width: 100px; }
.col-110  { width: 110px; }
.col-130  { width: 130px; }

/* Column / element widths — relative */
.col-2r    { width:  2rem; }
.col-2p5r  { width:  2.5rem; }
.col-13e   { width:  13em; }
.col-14r   { width:  14rem; }
.col-375p  { width:  37.5%; }

/* Min-width utilities */
.minw-7r   { min-width:   7rem; }
.minw-8r   { min-width:   8rem; }
.minw-9r   { min-width:   9rem; }
.minw-12r  { min-width:  12rem; }
.minw-110  { min-width: 110px; }
.minw-120  { min-width: 120px; }
.minw-140  { min-width: 140px; }
.minw-160  { min-width: 160px; }
.minw-180  { min-width: 180px; }
.minw-200  { min-width: 200px; }
.minw-260  { min-width: 260px; }
.minw-1200 { min-width: 1200px; }

/* Max-width utilities */
.maxw-80   { max-width:  80px; }
.maxw-160  { max-width: 160px; }
.maxw-180  { max-width: 180px; }
.maxw-200  { max-width: 200px; }
.maxw-220  { max-width: 220px; }
.maxw-250  { max-width: 250px; }
.maxw-340  { max-width: 340px; }
.maxw-640  { max-width: 640px; }
.maxw-5p5r { max-width: 5.5rem; }
.maxw-9r   { max-width:   9rem; }
.maxw-14r  { max-width:  14rem; }
.maxw-22r  { max-width:  22rem; }
.maxw-30r  { max-width:  30rem; }

/* Batch toolbar — flex layout when shown; d-none class overrides this */
#batchToolbar { display: flex; }

/* Login page logo */
.logo-max-h { max-height: 80px; }

/* ── Table Manager — dark-mode colour compatibility ─────────────────────────
   Spot cells always carry a pastel qual-colour background; row cells may carry
   a user-picked event colour.  Both are light pastels → force dark text so the
   content stays readable regardless of the active Bootstrap theme.            */
[data-bs-theme="dark"] .tm-spot-cell,
[data-bs-theme="dark"] .tm-row-cell[style*="background"] {
  color: var(--color-tm-darkmode-colored-parent-element) !important;
}
/* Also ensure child links / buttons are readable on coloured cells */
[data-bs-theme="dark"] .tm-row-cell[style*="background"] a,
[data-bs-theme="dark"] .tm-row-cell[style*="background"] .btn-link {
  color: var(--color-tm-darkmode-colored-parent-element) !important;
}
[data-bs-theme="dark"] .tm-row-cell[style*="background"] .tm-edit-icon {
  color: var(--color-tm-darkmode-colored-parent-edit-icon) !important;
}

/* ── Table Manager — layout & sizing ──────────────────────────────────────── */
.tm-action-col  { width: 1px; }
.tm-event-col   { width: 280px; } /* max-width: 300px; } */
.tm-action-cell { white-space: nowrap; padding: 2px 4px; }
.tm-icon-btn    { font-size: 1rem; line-height: 1; }
.tm-sm-btn      { font-size: 0.75rem; }
.tm-edit-name   { font-size: 0.8rem; vertical-align: baseline; }
.tm-clickable   { cursor: pointer; }

.tm-spot-cell   { min-width: 140px; }
.tm-assign-select { min-width: 130px; font-size: 0.75rem; }

/* Popups (shared base — positioning only; display is toggled by JS inline) */
.tm-popup       { position: absolute; }
.tm-popup-time  { z-index: 1050; min-width: 280px; }
.tm-popup-color { z-index: 1060; background: var(--color-tm-popup-background); border: 1px solid var(--color-tm-popup-border);
                  border-radius: 6px; padding: 8px; box-shadow: 0 4px 12px var(--color-tm-popup-box-shadow); }
.tm-popup-advance { z-index: 1070; min-width: 200px; }
.tm-popup-name  { z-index: 1050; min-width: 320px; }

.tm-color-grid  { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
.tm-color-swatch { width: 28px; height: 28px; border-radius: 4px;
                   cursor: pointer; border: 2px solid transparent; }

.tm-date-input  { width: 130px; }
.tm-time-input  { width: 70px; }
.tm-name-input  { width: 220px; }
.tm-error-toast { z-index: 1060; }

@media (max-width: 767.98px) {
  .tm-icon-btn  { font-size: 0.8rem; }
  .tm-sm-btn    { font-size: 0.65rem; }
}

/* ── Notifications table — column widths ──────────────────────────────────── */
.notif-col-name     { width: 20%; }
.notif-col-desc     { width: 28%; }
.notif-col-trigger  { width: 20%; }
.notif-col-rcpt     { width: 18%; }
.notif-col-tpl      { width: 7%; }
.notif-col-status   { width: 7%; }
.notif-test-btn     { font-size: 0.7rem; }
.notif-code         { font-size: 0.75rem; }
.notif-template     { font-size: 0.72rem; }

/* ── Custom toggle switches ───────────────────────────────────────────────── */
:root {
  --color-paid: #198754;
  --color-dark-mode: #6f42c1;
  --color-primary: #0d6efd;
  --color-primary-shadow: rgba(13, 110, 253, 0.25);
  --color-column-flash: #ffc107;
  --color-tm-day-separator: #495057;
  --color-tm-event-separator: #adb5bd;
  --color-tm-popup-background: #fff;
  --color-tm-popup-border: #dee2e6;
  --color-tm-popup-box-shadow: rgba(0,0,0,.15);
  --color-tm-darkmode-colored-parent-element: #212529;
  --color-tm-darkmode-colored-parent-edit-icon: #495057;
  --color-help-button-border: #adb5bd;
  --color-help-button: #6c757d;
  --color-darkmode-day-today-highlight: rgba(255, 200, 40, 0.12);
  --color-navbar-text: rgba(255, 255, 255, 0.90);
  --color-navbar-text-hover: #ffffff;
  --color-tm-swatch-border: #333333;
}

.paid-toggle  { width: 3em; height: 1.5em; cursor: pointer; }
.paid-toggle:checked  { background-color: var(--color-paid); border-color: var(--color-paid); }
.paid-label.is-paid   { color: var(--color-paid); }

.dark-toggle  { width: 3em; height: 1.5em; cursor: pointer; }
.dark-toggle:checked  { background-color: var(--color-dark-mode); border-color: var(--color-dark-mode); }
.dark-label.is-dark   { color: var(--color-dark-mode); }