/* Task Management dashboard — Kanban board (Component 1 only).
   Scoped to .hnbg-tmd-root so it never leaks into the rest of the app's theme. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

.app-content:has(.hnbg-tmd-root) {
  padding: 0 !important;
  overflow: hidden !important;
  height: calc(100vh - 82px) !important;
  max-height: calc(100vh - 82px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.hnbg-tmd-root {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #0f172a;
  margin: 0 !important;
  padding: 0.65rem 1rem 0.5rem 1rem !important;
  background: #ffffff;
  height: 100%;
  max-height: 100%;
  width: 100%;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.hnbg-tmd-root .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.hnbg-tmd-root .wireframe-canvas {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.hnbg-tmd-root .kanban-col {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  height: calc(100vh - 142px) !important;
  max-height: calc(100vh - 142px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.hnbg-tmd-root .kanban-col::-webkit-scrollbar,
.hnbg-tmd-root *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* The color itself is no longer picked here -- it comes from TaskManagement.TaskStatus (0076/0077)
   via TaskManagementDashboard.razor's StatusColorHex(task), applied inline as the card's own
   border-color -- background stays plain white, no left strip either (that accent read as a stray
   line floating outside the card rather than an edge of it). */
.hnbg-tmd-root .task-card {
  position: relative;
  background: #ffffff;
  border: 1.25px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  padding: 6px 8px 6px 11px !important;
}

.hnbg-tmd-root .task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.1);
  z-index: 30;
}

/* "Review Offer" button on a task card -- background-color is set inline from the same
   StatusColorHex(task) the card border uses; this just gives it the darken-on-hover feedback the
   old per-status "hover:bg-X-700" Tailwind classes gave, without hardcoding a color of its own. */
.hnbg-tmd-root .tmd-status-button:hover {
  filter: brightness(0.9);
}

.hnbg-tmd-root .h-13 {
  height: 3.25rem;
}

/* Filter row should read as one row of same-height controls. CbsDateRangePicker's shared field
   (.cbs-range-field, from CbsDateRangePicker.razor.css) is comfortably sized for pages where it
   stands alone, but visibly taller than the "All Staff" <select> (text-xs, py-1, 1px border --
   1rem line-height + .5rem padding + 2px border = 1.625rem) beside it here. An explicit height on
   just this one shared field -- not touched elsewhere, other pages using it are unaffected -- lines
   it up exactly, since matching padding/font-size alone still left a couple of px of drift between
   a <button>-based field and a native <select>. */
.hnbg-tmd-root .cbs-range-field {
  height: 1.625rem;
  box-sizing: border-box;
  padding: .25rem .5rem !important;
}

/* Modal z-index above app shell. The app shell's top nav bar is position:sticky with
   z-index:1000, and its own dropdown menu z-index:1100 (see wwwroot/css/theme.css) -- Tailwind's
   z-50 on these modals sits far below that, so an open nav dropdown renders on top of the modal
   instead of being covered by it. */
.hnbg-tmd-root #modal-task-preview,
.hnbg-tmd-root #modal-add-task {
  z-index: 1200 !important;
}

/* The checklist point editor opens ON TOP of the task modal, so it has to clear that modal's 1200,
   not just Tailwind's z-50 -- with anything lower it renders underneath and looks like it never
   opened. */
.hnbg-tmd-root #modal-checklist-point {
  z-index: 1300 !important;
}