/* Minimal app styles - branding handled via DaisyUI + brand_config */

/*
 * Modal robustness. The board renders ~70 <dialog class="modal"> elements (one
 * per card/column). Those rely on DaisyUI's CDN CSS to (a) stay hidden when
 * closed and (b) give the panel a solid background. When that CDN styling loads
 * incompletely, every closed dialog leaks into the page as a transparent,
 * unreadable pile-up. These same-origin rules (always loaded, higher
 * specificity) restore the native-dialog behavior no matter what the CDN does.
 */
dialog.modal:not([open]) { display: none; }
dialog.modal[open] { display: grid; }
.modal-box { background-color: #ffffff; }

/*
 * Checkbox robustness — same story as the modal rules above. DaisyUI's .checkbox
 * sets `appearance: none` (which hides the browser's own checkmark) and then
 * paints its own tick from the CDN stylesheet. When that CDN styling doesn't
 * fully apply, a *checked* box looks identical to an unchecked one — so people
 * couldn't tell a selection had registered (reported on the Timesheets "Add
 * time" people picker: "it won't let me select the cleaner"). These same-origin,
 * higher-specificity rules draw the checked state ourselves, so a tick is always
 * visible no matter what the CDN does.
 */
input[type="checkbox"].checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  flex-shrink: 0;
  border: 2px solid var(--brand-primary, #2563EB);
  border-radius: 0.35rem;
  background-color: #ffffff;
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}
input[type="checkbox"].checkbox.checkbox-sm {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
}
input[type="checkbox"].checkbox:checked {
  background-color: var(--brand-primary, #2563EB);
  border-color: var(--brand-primary, #2563EB);
}
input[type="checkbox"].checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.3rem;
  height: 0.6rem;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/*
 * Sidebar nav colors. DaisyUI's bg-primary/text-primary *utility* classes are
 * not generated in this CDN setup (they compute to transparent), so the active
 * "you are here" pill is drawn here with the reliable --brand-primary variable.
 */
.sidebar-link { color: rgba(20, 35, 51, 0.72); }
.sidebar-link:hover { background-color: rgba(0, 113, 175, 0.10); color: #0071af; }
.sidebar-link.is-active,
.sidebar-link.is-active:hover { background-color: var(--brand-primary); color: #ffffff; font-weight: 600; }
.sidebar-link.is-active i { color: #ffffff; }

/*
 * Project Board — a persistent, grabbable horizontal scrollbar. The board is a
 * wide row of columns you scroll laterally. On macOS the native overflow
 * scrollbar stays hidden until you're already scrolling, so it felt like there
 * was "no bar to move along." Force it always-visible with a chunky, easy-to-
 * drag thumb. Higher-specificity `div.board-scroll` so it beats utility classes.
 */
div.board-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: auto;                       /* Firefox: normal-width bar */
  scrollbar-color: #94a3b8 rgba(100, 116, 139, 0.15);
}
div.board-scroll::-webkit-scrollbar {
  height: 14px;
}
div.board-scroll::-webkit-scrollbar-track {
  background: rgba(100, 116, 139, 0.15);
  border-radius: 999px;
  margin: 0 4px;
}
div.board-scroll::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
div.board-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748b;
  background-clip: padding-box;
}

/*
 * Floating overlays must be opaque. Search dropdowns and menu pop-overs render
 * on top of other content, so a see-through background makes the text collide
 * with the fields behind it (reported: the client search list on the Schedule
 * Job form). They rely on daisyUI's `bg-base-100`, which resolves to
 * transparent whenever the CDN theme variables don't load — the same CDN
 * fragility handled for modals/checkboxes above. Force a solid background (and
 * dark text) so they always cover what's behind them, wherever they appear:
 *   - the client search lists (new + inline job forms)
 *   - the board card menu, the board column menu
 *   - the schedule "Assign" open-shift dropdown
 */
[data-client-search-target="list"],
.dropdown-content {
  background-color: #ffffff;
  color: #10222f;
}

/*
 * Messages screen — conversation list overflow (ROOT CAUSE).
 *
 * The two-pane layout (conversation list | thread + compose) looked like it was
 * collapsing, but the grid was never the problem. The conversation list is a
 * DaisyUI `.menu`, and DaisyUI v4 sets `.menu { display:flex; flex-flow: column
 * wrap }`. In a WRAPPING column flex container, items are NOT stretched to the
 * container's width — each <li> sizes to its own content (max-content). So a
 * conversation whose last message is long stretches its row to the full width
 * of that text (~900px), bursting out of the ~290px list column and sprawling
 * across the thread pane, on top of the "Pick a conversation…" text. Rows with
 * short messages don't trigger it — which is why it looked fine when there were
 * few/short conversations and broke once a long message arrived.
 *
 * Fix (same-origin, independent of whether the Tailwind CDN utilities load):
 *   - stop the menu wrapping, so rows stretch to the column width instead of
 *     growing to their content;
 *   - let each row and its content shrink (min-width:0) and clip the number +
 *     preview lines with an ellipsis, so long text can never widen the row.
 *
 * The grid + stretched-link rules below are kept as belt-and-suspenders for the
 * separate case where the CDN utilities are slow to generate on a Turbo nav.
 */
.messages-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .messages-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .messages-col-list { grid-column: span 1 / span 1; }
  .messages-col-thread { grid-column: span 2 / span 2; }
}

/* THE fix: a non-wrapping menu whose rows fill the column and clip long text. */
.messages-col-list .menu { flex-wrap: nowrap; width: 100%; align-items: stretch; }
.messages-row {
  position: relative;      /* positioning context for the stretched link below */
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}
.messages-row-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* Let clicks fall through to the stretched row link below, so tapping
     anywhere on the row opens the thread… */
  pointer-events: none;
}
.messages-row-content > * { min-width: 0; max-width: 100%; }
/* The number + message-preview lines truncate instead of forcing the row wide. */
.messages-row-content > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* …except the client-name link, which stays clickable to reach their page. */
.messages-row-content a { pointer-events: auto; }
.messages-row-link { position: absolute; inset: 0; z-index: 0; }

/* ---- Messages: iMessage-style drill-in + new-message picker ---- */

/* Conversation-list column header (holds the "New message" button). */
.messages-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid hsl(var(--b3));
}

/* Selected / pressed / hovered conversation row: a light brand tint — never the
   dark navy block DaisyUI paints for `.active` / `:active` on a menu item. */
.messages-row-link:hover,
.messages-row-link:focus,
.messages-row-link:active,
.messages-row-link.active {
  background-color: #eaf3fb !important;
  color: inherit !important;
  box-shadow: none !important;
  border-radius: 10px;
}

/* Thread / new-message header: (mobile-only) back button + the title. */
.messages-thread-head { display: flex; align-items: center; gap: 10px; }
.messages-back {
  display: none;
  align-items: center;
  gap: 4px;
  color: var(--brand-primary, #0071af);
  font-weight: 600;
  white-space: nowrap;
}

/* New-message recipient typeahead dropdown. A plain list (deliberately NOT a
   DaisyUI .menu — that wraps and overflows, see the rules above) anchored under
   the To box, with a solid background so it covers the form behind it. */
.messages-recipient-list {
  position: absolute;
  left: 0; right: 0;
  z-index: 30;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  color: #10222f;
  border: 1px solid hsl(var(--b3));
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(16, 40, 58, .12);
  padding: 4px;
  list-style: none;
}
.messages-recipient-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
}
.messages-recipient-item:hover { background: #eaf3fb; }
.messages-recipient-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-recipient-empty { padding: 10px 12px; font-size: 13px; opacity: .6; }

/* Responsive drill-in: on phones show ONE pane at a time — the conversation
   list, OR the open thread / new-message screen (with a back button). On
   tablets and up, keep the two-pane split visible at all times. */
@media (max-width: 767px) {
  .messages-layout[data-detail="closed"] .messages-col-thread { display: none; }
  .messages-layout[data-detail="open"]  .messages-col-list   { display: none; }
  .messages-layout[data-detail="open"]  .messages-col-thread { grid-column: 1 / -1; }
  .messages-back { display: inline-flex; }
}