Room planner: rewrite card layout to match original Gantt design

Replace CSS grid with the original plugin's vertical list + 23px margin
bracket system. Each card has a 2px border coloured by booking status;
data-previous-status / data-next-status drive C-bracket pseudo-elements in
the 23px gutter; data-spans-previous/next remove the corresponding border
and collapse the margin to extend the card across days.

Card interior is restructured: header row (room number, flow badge, lock,
nights counter, site-status pill), guest info row, and stats row (time
pill, bed-type pill, task-status bordered pill). Category headers now match
the original's sticky bordered style with edge-extending pseudo-elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/RoomCard.tsx

@@ -1,9 +1,10 @@
 import { memo } from 'react'
-import type { RoomData, AppConfig } from '../types'
 import {
-  roomCardColor, bookingStatusColor, FLOW_TYPE_LABEL, sliverColor, spanDataAttrs,
+  Lock, Moon, Clock, BedDouble, BedSingle,
-  hasOutstandingTasks, isDirty,
+  ClipboardX, ClipboardCheck, Clipboard,
-} from '../lib/booking-flow'
+  ArrowDown, ArrowUp, ArrowUpDown, Package,
+} from 'lucide-react'
+import type { RoomData, AppConfig } from '../types'
 import { detectTwin } from '../lib/twin-detect'
 
 interface Props {
@@ -13,114 +14,226 @@ interface Props {
   onClick: (room: RoomData) => void
 }
 
+const I = { strokeWidth: 1.75 }
+
+function nightsInfo(arrival: string, departure: string, viewDate: string) {
+  const msDay = 86400000
+  const total   = Math.round((Date.parse(departure) - Date.parse(arrival))  / msDay)
+  const current = Math.round((Date.parse(viewDate)  - Date.parse(arrival))  / msDay) + 1
+  return { current: Math.max(1, Math.min(current, total)), total: Math.max(1, total) }
+}
+
+function etaTime(eta: string | null | undefined): string | null {
+  if (!eta) return null
+  const t = eta.slice(11, 16)
+  return t && t !== '00:00' ? t : null
+}
+
+function statusCls(status: string): string {
+  const s = (status || '').toLowerCase()
+  if (s === 'clean')     return 'site-clean'
+  if (s === 'inspected') return 'site-inspected'
+  if (s === 'dirty')     return 'site-dirty'
+  return 'site-unknown'
+}
+
+const FLOW: Record<string, { label: string; cls: string }> = {
+  arrive:         { label: 'Arrive',   cls: 'flow-arrive'   },
+  depart:         { label: 'Depart',   cls: 'flow-depart'   },
+  stopover:       { label: 'Stay',     cls: 'flow-stopover' },
+  'back-to-back': { label: 'B2B',      cls: 'flow-b2b'      },
+  vacant:         { label: 'Vacant',   cls: 'flow-vacant'   },
+  blocked:        { label: 'Blocked',  cls: ''              },
+}
+
+function FlowIcon({ type }: { type: string }) {
+  if (type === 'arrive')        return <ArrowDown   size={10} {...I} />
+  if (type === 'depart')        return <ArrowUp     size={10} {...I} />
+  if (type === 'back-to-back')  return <ArrowUpDown size={10} {...I} />
+  return null
+}
+
 function RoomCard({ room, viewDate, config, onClick }: Props) {
   const booking   = room.booking
   const twinType  = detectTwin(booking, config)
-  const taskDisplay = config?.task_display ?? {}
+  const taskDisp  = config?.task_display ?? {}
   const isBlocked = room.flow_type === 'blocked'
+  const isVacant  = room.flow_type === 'vacant'
 
-  const stripColor = booking ? bookingStatusColor(booking.booking_status) : 'transparent'
+  // Booking status (lowercased) drives the card border via CSS attribute selector
-  const prevColor = sliverColor(room.previous_status)
+  const bookingStatus = booking?.booking_status?.toLowerCase() ?? null
-  const nextColor = sliverColor(room.next_status)
 
-  // Tasks relevant for today
+  // Tasks in scope for today
   const todayTasks = room.tasks.filter(t => {
     const d = t.task_when_date || t.task_period_from
-    return !d || d <= viewDate && (t.task_period_to ? t.task_period_to >= viewDate : d === viewDate)
+    return !d || (d <= viewDate && (!t.task_period_to || t.task_period_to >= viewDate))
+  })
+  const outstanding = todayTasks.filter(t => !t.completed_on)
+  const hasRollover = outstanding.some(t => {
+    const d = t.task_when_date || t.task_period_from
+    return !!d && d < viewDate
   })
 
-  const outstanding = todayTasks.filter(t => !t.completed_on)
+  // Night counter (current night / total nights)
-  const dirty = isDirty(room)
+  const nights = booking?.booking_arrival && booking?.booking_departure
+    ? nightsInfo(booking.booking_arrival, booking.booking_departure, viewDate)
+    : null
 
-  const spanAttrs = spanDataAttrs(room)
+  // Time pills
-  const cssVars: Record<string, string> = {}
+  const arriveTime = (room.flow_type === 'arrive' || room.flow_type === 'back-to-back')
-  if (room.spans_previous) cssVars['--prev-color'] = prevColor
+    ? etaTime(booking?.booking_eta)
-  if (room.spans_next)     cssVars['--next-color'] = nextColor
+    : null
+  const departTime = (room.flow_type === 'depart' || room.flow_type === 'back-to-back')
+    ? (room.departing_time?.slice(0, 5) ?? null)
+    : null
+
+  // CSS data attributes for the Gantt bracket system
+  const dataAttrs: Record<string, string> = {}
+  if (bookingStatus) dataAttrs['data-booking-status'] = bookingStatus
+  if (room.spans_previous) {
+    dataAttrs['data-spans-previous'] = 'true'
+  } else if (room.previous_status) {
+    dataAttrs['data-previous-status'] = room.previous_status.toLowerCase()
+  }
+  if (room.spans_next) {
+    dataAttrs['data-spans-next'] = 'true'
+  } else if (room.next_status) {
+    dataAttrs['data-next-status'] = room.next_status.toLowerCase()
+  }
+
+  // Task status pill
+  let taskCls: string
+  let TaskIcon: typeof Clipboard
+  if (todayTasks.length === 0) {
+    taskCls = 'no-tasks'; TaskIcon = Clipboard
+  } else if (outstanding.length === 0) {
+    taskCls = 'all-done'; TaskIcon = ClipboardCheck
+  } else if (hasRollover) {
+    taskCls = 'rollover';    TaskIcon = ClipboardX
+  } else {
+    taskCls = 'outstanding'; TaskIcon = ClipboardX
+  }
+
+  const flow = FLOW[room.flow_type] ?? FLOW.vacant
 
   return (
     <div
-      className={`room-card${isBlocked ? ' blocked-room' : ''}`}
+      className={`room-card${isBlocked ? ' room-blocked' : ''}`}
-      style={cssVars as React.CSSProperties}
+      {...(dataAttrs as React.HTMLAttributes<HTMLDivElement>)}
-      {...(spanAttrs as React.HTMLAttributes<HTMLDivElement>)}
       onClick={() => onClick(room)}
     >
+      {/* ── Header row ─────────────────────────────── */}
+      <div className="card-header">
+        <span className="card-room-number">{room.site_name}</span>
+
         {!isBlocked && (
-        <div className="card-status-strip" style={{ background: stripColor }} />
+          <span className={`card-flow-badge ${flow.cls}`}>
+            <FlowIcon type={room.flow_type} />
+            {flow.label}
+          </span>
         )}
 
-      <div className="card-inner">
+        {isBlocked && (
-        <div className="card-top">
+          <span style={{ marginLeft: 4, color: 'rgba(255,255,255,.7)', display: 'flex' }}>
-          <span className="card-room-name">{room.site_name}</span>
+            <Package size={13} {...I} />
-          <div className="card-badges">
+          </span>
-            {twinType === 'twin'      && <span className="card-badge badge-twin">Twin</span>}
-            {twinType === 'extra-bed' && <span className="card-badge badge-extra">+Bed</span>}
-            {booking?.pax != null && booking.pax > 0 && (
-              <span className="card-badge badge-pax">{booking.pax}p</span>
         )}
-            {room.departing_time && (
+
-              <span className="card-badge badge-depart-time">{room.departing_time.slice(0,5)}</span>
+        {booking?.booking_locked && (
+          <span className="card-locked-icon"><Lock size={11} {...I} /></span>
         )}
+
+        <div className="card-header-right">
+          {nights && !isVacant && (
+            <span className="card-nights">
+              <Moon size={11} {...I} />
+              {nights.current}/{nights.total}
+            </span>
+          )}
+          <span className={`card-site-status ${statusCls(room.site_status)}`}>
+            {room.site_status || 'Unknown'}
+          </span>
         </div>
       </div>
 
+      {/* ── Guest info row ──────────────────────────── */}
       {!isBlocked && (
-          <div className="card-mid">
+        <div className="card-guest-row">
-            {booking?.guest_name ? (
+          {isVacant ? (
+            <span className="card-vacant-label">Vacant</span>
+          ) : booking?.guest_name ? (
             <span className="card-guest-name">{booking.guest_name}</span>
           ) : (
-              <span className="card-guest-name" style={{ opacity: .4 }}>
+            <span className="card-guest-name" style={{ opacity: .4 }}>—</span>
-                {room.flow_type === 'vacant' ? 'Vacant' : '—'}
-              </span>
           )}
-            {booking?.rate_plan_name && (
+
-              <span className="card-rate">{booking.rate_plan_name}</span>
+          {!isVacant && booking?.pax != null && booking.pax > 0 && (
+            <span className="card-pax-badge">{booking.pax}p</span>
           )}
+          {twinType === 'twin'      && <span className="card-type-badge type-twin">Twin</span>}
+          {twinType === 'extra-bed' && <span className="card-type-badge type-extra">+Bed</span>}
         </div>
       )}
 
-        <div className="card-bottom">
+      {/* ── Stats row ───────────────────────────────── */}
-          {!isBlocked && (
+      {!isBlocked && !isVacant && (
-            <span
+        <div className="card-stats-row">
-              className="card-flow-label"
+
-              style={{
+          {/* Arrival ETA */}
-                background: stripColor + '22',
+          {arriveTime && (
-                color: stripColor === 'transparent' ? 'var(--text-muted)' : stripColor,
+            <span className="card-stat-pill time-arrive">
-              }}
+              <Clock size={11} {...I} /> {arriveTime}
-            >
-              {FLOW_TYPE_LABEL[room.flow_type]}
             </span>
           )}
 
-          <span className={`card-clean-status ${dirty ? 'dirty-dot' : 'clean-dot'}`}>
+          {/* Departure time */}
-            {dirty ? 'Dirty' : room.site_status}
+          {departTime && (
-          </span>
+            <span className="card-stat-pill time-depart">
-
+              <Clock size={11} {...I} /> {departTime}
-          {outstanding.length > 0 && (
-            <span className="card-badge badge-tasks" style={{ background: '#fef3c7', color: '#92400e' }}>
-              {outstanding.length} task{outstanding.length > 1 ? 's' : ''}
             </span>
           )}
+
+          {/* Bed type */}
+          {twinType === 'twin' ? (
+            <span className="card-stat-pill bed-twin">
+              <BedSingle size={11} {...I} /><BedSingle size={11} {...I} />
+            </span>
+          ) : twinType === 'extra-bed' ? (
+            <span className="card-stat-pill bed-extra">
+              <BedDouble size={11} {...I} /><BedSingle size={11} {...I} />
+            </span>
+          ) : (
+            <span className="card-stat-pill bed-double">
+              <BedDouble size={11} {...I} />
+            </span>
+          )}
+
+          {/* Task status */}
+          <span className={`card-task-pill ${taskCls}`}>
+            <TaskIcon size={12} {...I} />
+            {outstanding.length > 0 && <span>{outstanding.length}</span>}
+          </span>
         </div>
+      )}
 
-        {/* Task dots for show_on_card tasks */}
+      {/* ── show_on_card task dots ──────────────────── */}
-        {todayTasks.length > 0 && (
+      {todayTasks.some(t => taskDisp[t.task_type_id]?.show_on_card) && (
         <div className="card-task-dots">
           {todayTasks.map(t => {
-              const display = taskDisplay[t.task_type_id]
+            const d = taskDisp[t.task_type_id]
-              if (!display?.show_on_card) return null
+            if (!d?.show_on_card) return null
             return (
               <div
                 key={t.task_id}
                 className={`task-dot${t.completed_on ? ' complete' : ''}`}
-                  style={{ background: display.color || '#94a3b8' }}
+                style={{ background: d.color || '#94a3b8' }}
-                  title={display.label || t.task_description}
+                title={d.label || t.task_description}
               />
             )
           })}
         </div>
       )}
     </div>
-    </div>
   )
 }
 

frontend/src/index.css

@@ -299,28 +299,52 @@ html, body, #root {
 
 /* ── Category group ──────────────────────────────────────────── */
 .category-group {
-  margin-bottom: 2px;
+  margin-bottom: 4px;
 }
 .category-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 12px 5px;
+  background: #e5e7eb;
-  background: var(--body-bg);
+  border: 2px solid #d1d5db;
-  border-bottom: 1px solid var(--border);
+  border-radius: 8px;
+  margin: 8px 23px 5px;
+  padding: 6px 12px;
   cursor: pointer;
   user-select: none;
   position: sticky;
   top: 0;
   z-index: 10;
 }
+.category-header::before,
+.category-header::after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  width: 16px;
+  background: #e5e7eb;
+  border-top: 2px solid #d1d5db;
+  border-bottom: 2px solid #d1d5db;
+  pointer-events: none;
+}
+.category-header::before {
+  left: -16px;
+  border-right: 2px solid #d1d5db;
+  border-radius: 0 6px 6px 0;
+}
+.category-header::after {
+  right: -16px;
+  border-left: 2px solid #d1d5db;
+  border-radius: 6px 0 0 6px;
+}
 .category-name {
   flex: 1;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
-  color: var(--text-muted);
+  color: #4b5563;
 }
 .category-badge {
   display: inline-flex;
@@ -333,163 +357,256 @@ html, body, #root {
 }
 .badge-tasks { background: #fef3c7; color: #92400e; }
 .badge-dirty { background: #fee2e2; color: #991b1b; }
-.category-chevron { color: var(--text-muted); transition: transform .15s; }
+.category-chevron { color: #9ca3af; transition: transform .15s; }
 .category-chevron.open  { transform: rotate(0deg);  }
 .category-chevron.closed { transform: rotate(-90deg); }
-.category-rooms {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 1px;
-  background: var(--border);
-}
 
-/* ── Room card ───────────────────────────────────────────────── */
+.category-rooms { padding: 4px 0 2px; }
+
+/* ── Room card — Gantt bracket system ────────────────────────── */
 .room-card {
-  position: relative;
+  background: #ffffff;
-  background: var(--card-bg);
+  border: 2px solid #d1d5db;
-  min-height: var(--card-h);
+  border-radius: 8px;
-  cursor: pointer;
+  margin: 0 23px 5px;
-  overflow: hidden;
-  transition: box-shadow .12s;
-  padding-left: var(--sliver-w);
-  padding-right: var(--sliver-w);
-}
-.room-card:hover { box-shadow: var(--shadow-md); z-index: 1; }
-
-/* Left sliver (previous day status) */
-.room-card[data-spans-previous="true"]::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: var(--sliver-w);
-  background: var(--prev-color, transparent);
-  opacity: .7;
-}
-/* Right sliver (next day status) */
-.room-card[data-spans-next="true"]::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: var(--sliver-w);
-  background: var(--next-color, transparent);
-  opacity: .7;
-}
-
-/* Blocked rooms — fill entire card */
-.room-card.blocked-room {
-  background: var(--col-blocked);
-}
-.room-card.blocked-room .card-room-name,
-.room-card.blocked-room .card-status-dot { color: rgba(255,255,255,.85); }
-
-/* Status indicator strip at top of card */
-.card-status-strip {
-  position: absolute;
-  top: 0;
-  left: var(--sliver-w);
-  right: var(--sliver-w);
-  height: 3px;
-}
-
-/* Card inner */
-.card-inner {
   padding: 7px 10px;
-  display: flex;
+  cursor: pointer;
-  flex-direction: column;
+  position: relative;
-  gap: 3px;
+  transition: box-shadow .15s;
-  height: 100%;
 }
-.card-top {
+.room-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
+
+/* Border colour by booking status */
+.room-card[data-booking-status="arrived"]     { border-color: #3b82f6; }
+.room-card[data-booking-status="confirmed"]   { border-color: #10b981; }
+.room-card[data-booking-status="unconfirmed"] { border-color: #f59e0b; }
+.room-card[data-booking-status="departed"]    { border-color: #a855f7; }
+
+/* Span to previous day: card extends left into the margin */
+.room-card[data-spans-previous="true"] {
+  border-left: none;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: 0;
+  padding-left: 30px;
+}
+/* Span to next day: card extends right into the margin */
+.room-card[data-spans-next="true"] {
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: 0;
+  padding-right: 30px;
+}
+/* Both: fully square on both sides */
+.room-card[data-spans-previous="true"][data-spans-next="true"] {
+  border-radius: 0;
+}
+
+/* ── Gantt bracket pseudo-elements ───────────────────────────── */
+/* Left bracket: previous adjacent booking status.
+   Extends 23px left (to the left edge of the margin area), width 15px,
+   leaving an 8px visual gap to the card border — matches original plugin. */
+.room-card[data-previous-status]::before {
+  content: '';
+  position: absolute;
+  left: -23px;
+  top: -2px;
+  bottom: -2px;
+  width: 15px;
+  border-top: 2px solid #d1d5db;
+  border-bottom: 2px solid #d1d5db;
+  border-right: 2px solid #d1d5db;
+  border-radius: 0 8px 8px 0;
+  pointer-events: none;
+}
+.room-card[data-previous-status="arrived"]::before     { border-color: #3b82f6; }
+.room-card[data-previous-status="confirmed"]::before   { border-color: #10b981; }
+.room-card[data-previous-status="unconfirmed"]::before { border-color: #f59e0b; }
+.room-card[data-previous-status="departed"]::before    { border-color: #a855f7; }
+
+/* Right bracket: next adjacent booking status. */
+.room-card[data-next-status]::after {
+  content: '';
+  position: absolute;
+  right: -23px;
+  top: -2px;
+  bottom: -2px;
+  width: 15px;
+  border-top: 2px solid #d1d5db;
+  border-bottom: 2px solid #d1d5db;
+  border-left: 2px solid #d1d5db;
+  border-radius: 8px 0 0 8px;
+  pointer-events: none;
+}
+.room-card[data-next-status="arrived"]::after     { border-color: #3b82f6; }
+.room-card[data-next-status="confirmed"]::after   { border-color: #10b981; }
+.room-card[data-next-status="unconfirmed"]::after { border-color: #f59e0b; }
+.room-card[data-next-status="departed"]::after    { border-color: #a855f7; }
+
+/* Blocked room */
+.room-card.room-blocked {
+  background: #4b5563;
+  border-color: #374151;
+  cursor: default;
+}
+
+/* ── Card content layout ──────────────────────────────────────── */
+/* Header row: room number, flow badge, lock icon, [spacer], nights+status */
+.card-header {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-.card-room-name {
+.card-room-number {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 700;
-  color: var(--text-primary);
+  color: #111827;
-  flex: 1;
+  flex-shrink: 0;
 }
-.card-badges {
+.room-blocked .card-room-number { color: rgba(255,255,255,.9); }
-  display: flex;
+
+.card-flow-badge {
+  display: inline-flex;
+  align-items: center;
   gap: 3px;
-  flex-wrap: wrap;
+  padding: 2px 6px 2px 4px;
-}
-.card-badge {
-  font-size: 9px;
-  font-weight: 600;
-  padding: 2px 5px;
   border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .04em;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
-.badge-twin   { background: #e0e7ff; color: #3730a3; }
+.flow-arrive   { background: #d1fae5; color: #065f46; }
-.badge-extra  { background: #fce7f3; color: #9d174d; }
+.flow-depart   { background: #ede9fe; color: #5b21b6; }
-.badge-pax    { background: #f3f4f6; color: #374151; }
+.flow-stopover { background: #dbeafe; color: #1e40af; }
-.badge-depart-time { background: #f5f3ff; color: #6d28d9; }
+.flow-b2b      { background: #fef3c7; color: #92400e; }
+.flow-vacant   { background: #f3f4f6; color: #6b7280; }
 
-.card-mid {
+.card-locked-icon { color: #9ca3af; display: flex; flex-shrink: 0; }
+
+/* Right-aligned header group: nights counter + site status pill */
+.card-header-right {
+  margin-left: auto;
   display: flex;
   align-items: center;
   gap: 6px;
+  flex-shrink: 0;
+}
+.card-nights {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 11px;
+  color: #6b7280;
+}
+.card-site-status {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+}
+.site-clean     { background: #d1fae5; color: #065f46; }
+.site-dirty     { background: #fee2e2; color: #991b1b; }
+.site-inspected { background: #ede9fe; color: #5b21b6; }
+.site-unknown   { background: #e5e7eb; color: #6b7280; }
+
+/* Guest info row */
+.card-guest-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
 }
 .card-guest-name {
   font-size: 12px;
-  color: var(--text-muted);
+  color: #374151;
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.card-rate {
+.card-vacant-label {
+  font-size: 12px;
+  color: #9ca3af;
+  font-style: italic;
+  flex: 1;
+}
+.card-pax-badge {
   font-size: 10px;
-  color: var(--text-muted);
+  color: #6b7280;
-  background: #f9fafb;
+  background: #f3f4f6;
   border-radius: 4px;
   padding: 1px 5px;
-}
-
-.card-bottom {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: auto;
-}
-.card-flow-label {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: .05em;
-  padding: 2px 6px;
-  border-radius: 4px;
   flex-shrink: 0;
 }
-.card-clean-status {
+.card-type-badge {
+  font-size: 10px;
+  border-radius: 4px;
+  padding: 1px 5px;
+  flex-shrink: 0;
+  font-weight: 600;
+}
+.type-twin  { background: #e0e7ff; color: #3730a3; }
+.type-extra { background: #fce7f3; color: #9d174d; }
+
+/* Stats row: time pill, bed type pill, task status pill */
+.card-stats-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 5px;
+}
+.card-stat-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 5px;
+  border-radius: 4px;
+  border: 1.5px solid #d1d5db;
+  font-size: 10px;
+  color: #6b7280;
+  background: #fff;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.card-stat-pill.time-arrive { border-color: #10b981; color: #065f46; }
+.card-stat-pill.time-depart { border-color: #a855f7; color: #7c3aed; }
+.card-stat-pill.bed-twin    { border-color: #c084fc; color: #7e22ce; }
+.card-stat-pill.bed-double  { border-color: #93c5fd; color: #1d4ed8; }
+.card-stat-pill.bed-extra   { border-color: #f9a8d4; color: #9d174d; }
+
+/* Task status pill (right-aligned) */
+.card-task-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 5px;
+  border-radius: 4px;
+  border: 1.5px solid;
   font-size: 10px;
   font-weight: 600;
-  padding: 2px 6px;
+  background: #fff;
-  border-radius: 4px;
+  margin-left: auto;
+  flex-shrink: 0;
 }
-.clean-dot  { background: #d1fae5; color: #065f46; }
+.card-task-pill.no-tasks    { border-color: #d1d5db; color: #d1d5db; }
-.dirty-dot  { background: #fee2e2; color: #991b1b; }
+.card-task-pill.all-done    { border-color: #10b981; color: #10b981; }
+.card-task-pill.outstanding { border-color: #dc2626; color: #dc2626; }
+.card-task-pill.rollover    { border-color: #f59e0b; color: #f59e0b; }
 
-/* Task dots row */
+/* show_on_card task dots */
 .card-task-dots {
   display: flex;
   gap: 3px;
   flex-wrap: wrap;
-  margin-top: 2px;
+  margin-top: 4px;
-}
-.task-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
 }
+.task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 .task-dot.complete { opacity: .3; }
 
 /* ── Room modal ──────────────────────────────────────────────── */