/* ============================================================
   ROOM SERVICES — Theme Tokens
   Extracted verbatim from the client's live CRM (assets/css/crm-theme.css).
   Base: Lahomes admin template on Bootstrap 5.
   Font: Figtree · Icons: Remix Icon (ri-*)

   DO NOT invent colours. DO NOT substitute a different palette.
   A user moving between the CRM and Room Services must not notice a seam.
   ============================================================ */

:root {
  --bs-body-font-family:     'Figtree', system-ui, -apple-system, sans-serif;
  --bs-headings-font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  --rs-kanban-col-width: 320px;
}

:root, [data-bs-theme="light"] {

  /* ── Brand ─────────────────────────────────────────────── */
  --rs-orange:        #F26522;
  --rs-orange-rgb:    242, 101, 34;
  --rs-orange-hover:  #DA5514;
  --rs-orange-active: #B84410;
  --rs-orange-soft:   rgba(242, 101, 34, .10);
  --rs-orange-border: rgba(242, 101, 34, .28);
  --rs-orange-bg:     rgba(242, 101, 34, .07);

  /* ── Primary = graphite (buttons that aren't the main action) ── */
  --rs-primary:       #1A1D21;
  --rs-primary-hover: #2C3238;
  --rs-primary-active:#0E1114;
  --rs-primary-fg:    #FFFFFF;

  --rs-accent:        var(--rs-orange);
  --rs-accent-strong: var(--rs-orange-hover);
  --rs-accent-soft:   var(--rs-orange-soft);
  --rs-accent-fg:     #FFFFFF;

  /* ── Ink (text) ────────────────────────────────────────── */
  --rs-ink:           #1A1D21;   /* headings, primary text */
  --rs-ink-soft:      #5A6570;   /* secondary text */
  --rs-ink-faint:     #8A94A0;   /* meta text */

  /* ── Surfaces ──────────────────────────────────────────── */
  --rs-surface-0:     #FFFFFF;   /* page background — white, not grey */
  --rs-surface-1:     #FFFFFF;   /* cards */
  --rs-surface-2:     #FAFBFC;   /* kanban columns, table heads */
  --rs-line:          #E4E7EB;   /* borders */
  --rs-line-soft:     #EFF1F4;
  --rs-border:        var(--rs-line);
  --rs-text:          var(--rs-ink);
  --rs-text-muted:    var(--rs-ink-soft);

  /* ── Semantic — used only where colour means something ─── */
  --rs-success: #1F9D6B;
  --rs-info:    #2B7FC4;
  --rs-warning: #C9860B;
  --rs-danger:  #D0342C;

  /* ── Bootstrap remap ───────────────────────────────────── */
  --bs-primary:            var(--rs-primary);
  --bs-primary-rgb:        26, 29, 33;
  --bs-body-bg:            #FFFFFF;
  --bs-body-color:         var(--rs-ink);
  --bs-secondary-color:    var(--rs-ink-soft);
  --bs-tertiary-color:     var(--rs-ink-faint);
  --bs-border-color:       var(--rs-line);
  --bs-card-bg:            #FFFFFF;
  --bs-modal-bg:           #FFFFFF;
  --bs-tertiary-bg:        #FAFBFC;
  --bs-secondary-bg:       #FFFFFF;
  --bs-emphasis-color:     var(--rs-ink);
  --bs-heading-color:      var(--rs-ink);
  --bs-link-color:         var(--rs-primary);
  --bs-link-hover-color:   var(--rs-primary-hover);
}

/* ============================================================
   UNIT BOARD — ported from the CRM's Leads kanban.
   Markup, class names and drag handlers are reused verbatim;
   only the column metadata differs.
   ============================================================ */

.kanban-board-container {
  display: flex;
  gap: var(--bs-gutter-x, 1rem);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: calc(var(--bs-gutter-y, 1rem) * 0.5);
  margin: 0 calc(var(--bs-gutter-x, 1rem) * -0.5);
}

.kanban-column {
  flex: 0 0 var(--rs-kanban-col-width);
  background: #FAFBFC;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  min-height: 200px;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--bs-spacer) * 0.75) calc(var(--bs-spacer) * 0.85);
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.kanban-column-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin: 0;
  text-transform: capitalize;
}

.kanban-column-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.kanban-column-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: calc(var(--bs-spacer) * 0.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--bs-spacer) * 0.5);
  min-height: 80px;
}

.kanban-card {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg, 0.75rem);
  padding: calc(var(--bs-spacer) * 0.75);
  cursor: grab;
  margin-bottom: calc(var(--bs-spacer) * 0.75);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.03), 0 1px 2px rgba(0,0,0,.04);
  position: relative;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: var(--bs-primary-border-subtle);
}

.kanban-card.dragging { opacity: .5; transform: scale(.98); }

.kanban-column-body.drop-target {
  background: var(--bs-primary-bg-subtle);
  border-radius: var(--bs-border-radius);
}

.kanban-empty {
  pointer-events: none;
  font-size: .78rem;
  color: var(--bs-tertiary-color);
  text-align: center;
  padding: 1.5rem .5rem;
}

/* ── Unit card status spine (same pattern as the CRM's lead cards) ── */
.kanban-card[data-status="vacant"]         { border-inline-start: 4px solid var(--bs-secondary) !important; }
.kanban-card[data-status="vacating"]       { border-inline-start: 4px solid var(--bs-warning)   !important; }
.kanban-card[data-status="reserved"]       { border-inline-start: 4px solid var(--bs-info)      !important; }
.kanban-card[data-status="overdue"]        { border-inline-start: 4px solid var(--bs-danger)    !important; }
.kanban-card[data-status="occupied_clear"] { border-inline-start: 4px solid var(--bs-success)   !important; }
.kanban-card[data-status="maintenance"]    { border-inline-start: 4px solid var(--bs-dark)      !important; }
.kanban-card[data-status="staff_accom"]    { border-inline-start: 4px solid var(--bs-primary)   !important; }

/* ── Column header spine ── */
.kanban-column.col-vacant         .kanban-column-header { border-top: 3px solid var(--bs-secondary); }
.kanban-column.col-vacating       .kanban-column-header { border-top: 3px solid var(--bs-warning);   }
.kanban-column.col-reserved       .kanban-column-header { border-top: 3px solid var(--bs-info);      }
.kanban-column.col-overdue        .kanban-column-header { border-top: 3px solid var(--bs-danger);    }
.kanban-column.col-occupied_clear .kanban-column-header { border-top: 3px solid var(--bs-success);   }
.kanban-column.col-maintenance    .kanban-column-header { border-top: 3px solid var(--bs-dark);      }
.kanban-column.col-staff_accom    .kanban-column-header { border-top: 3px solid var(--bs-primary);   }

/* ============================================================
   PUNCTUALITY STRIP — the 12-month compliance history dots
   shown on the tenant file. Grades come from RULE 4.
   ============================================================ */

.rs-punctuality-strip { display: inline-flex; gap: 3px; align-items: center; }

.rs-punctuality-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; cursor: help;
}
.rs-punctuality-dot[data-grade="on_time"]     { background: var(--rs-success); }
.rs-punctuality-dot[data-grade="delayed"]     { background: var(--rs-warning); }
.rs-punctuality-dot[data-grade="late"]        { background: var(--rs-danger);  }
.rs-punctuality-dot[data-grade="not_settled"] { background: var(--rs-ink-faint); }

.rs-risk-badge[data-risk="low"]      { background: var(--rs-success); color:#fff; }
.rs-risk-badge[data-risk="medium"]   { background: var(--rs-warning); color:#fff; }
.rs-risk-badge[data-risk="high"]     { background: var(--rs-danger);  color:#fff; }
.rs-risk-badge[data-risk="critical"] { background: #7A1D18;           color:#fff; }

/* ============================================================
   LEDGER TABLE — running-balance statement
   ============================================================ */

.rs-ledger td.debit   { color: var(--rs-danger);  text-align: end; font-variant-numeric: tabular-nums; }
.rs-ledger td.credit  { color: var(--rs-success); text-align: end; font-variant-numeric: tabular-nums; }
.rs-ledger td.balance { font-weight: 600;         text-align: end; font-variant-numeric: tabular-nums; }
.rs-ledger tr.reversed { opacity: .5; text-decoration: line-through; }

/* ============================================================
   DARK MODE — keep it working, the CRM supports it
   ============================================================ */

[data-bs-theme="dark"] .kanban-column,
[data-bs-theme="dark"] .kanban-column-header { background: var(--bs-tertiary-bg); }

/* ============================================================
   RTL — Arabic. The theme ships app-rtl.min.css; wire it to the
   locale switch. Use logical properties everywhere (margin-inline,
   padding-inline, border-inline-start) so layout mirrors cleanly.
   ============================================================ */

/* ============================================================
   ROOM SERVICES — component layer (rs-* prefix)
   Builds on the Lahomes app.css shell; same card/table/modal
   conventions as the CRM so screens are indistinguishable.
   ============================================================ */

/* Page title box — identical to the CRM's */
.rs-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}
.rs-page-head h4 { font-weight: 600; margin: 0; }
.rs-page-sub { color: var(--rs-ink-soft); font-size: .85rem; margin: .15rem 0 0; }

/* KPI cards (dashboards) */
.rs-kpi { display: flex; align-items: center; gap: .9rem; }
.rs-kpi .rs-kpi-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px; flex: 0 0 auto;
}
.rs-kpi .rs-kpi-label { font-size: .78rem; color: var(--rs-ink-soft); margin: 0 0 .15rem; }
.rs-kpi .rs-kpi-value { font-size: 1.35rem; font-weight: 700; margin: 0; color: var(--rs-ink); }

/* Semantic icon tile colours */
.rs-tile-success { background: rgba(31,157,107,.12);  color: var(--rs-success); }
.rs-tile-danger  { background: rgba(208,52,44,.12);   color: var(--rs-danger); }
.rs-tile-warning { background: rgba(201,134,11,.14);  color: var(--rs-warning); }
.rs-tile-info    { background: rgba(43,127,196,.12);  color: var(--rs-info); }
.rs-tile-dark    { background: rgba(26,29,33,.08);    color: var(--rs-primary); }
.rs-tile-orange  { background: var(--rs-orange-soft); color: var(--rs-orange); }

/* Status pills — same shape as CRM lead status chips */
.rs-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; white-space: nowrap;
}
.rs-pill-secondary { background:#F1F3F5; color:#5A6570; border-color:#E4E7EB; }
.rs-pill-success   { background:rgba(31,157,107,.12); color:#177A54; border-color:rgba(31,157,107,.25); }
.rs-pill-warning   { background:rgba(201,134,11,.12); color:#9A6A08; border-color:rgba(201,134,11,.28); }
.rs-pill-danger    { background:rgba(208,52,44,.10);  color:#B02B23; border-color:rgba(208,52,44,.25); }
.rs-pill-info      { background:rgba(43,127,196,.10); color:#22689E; border-color:rgba(43,127,196,.25); }
.rs-pill-dark      { background:rgba(26,29,33,.85);   color:#fff; }

/* Punctuality dot strip (tenant file — "fluctuation visible", RULE 4) */
.rs-punc-strip { display: inline-flex; gap: 4px; align-items: center; }
.rs-punc-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.12); }
.rs-punc-on_time     { background: var(--rs-success); }
.rs-punc-delayed     { background: var(--rs-warning); }
.rs-punc-late        { background: var(--rs-danger); }
.rs-punc-not_settled { background: #3B434B; }

/* Outstanding balance bar on kanban cards */
.rs-balance-bar { height: 6px; border-radius: 4px; background: #EDEFF2; overflow: hidden; }
.rs-balance-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--rs-danger); }

/* Kanban card (unit board) */
.rs-kanban-card {
  background: #fff; border: 1px solid var(--rs-line); border-radius: 10px;
  padding: .65rem .7rem; margin-bottom: .55rem; cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.rs-kanban-card:hover { border-color: var(--rs-orange-border); box-shadow: 0 3px 10px rgba(16,24,40,.07); }
.rs-kanban-card.gu-transit { opacity: .55; }
.rs-kanban-column-body { padding: .6rem; overflow-y: auto; flex: 1 1 auto; }
.rs-kanban-count {
  min-width: 22px; height: 22px; border-radius: 6px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EDEFF2; font-size: .75rem; font-weight: 700; color: var(--rs-ink);
}
.rs-kanban-col-total { font-size: .72rem; color: var(--rs-ink-faint); font-weight: 600; }

/* Data table refinements */
.rs-table thead th {
  background: var(--rs-surface-2); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--rs-ink-soft); font-weight: 700;
  border-bottom: 1px solid var(--rs-line) !important; white-space: nowrap;
}
.rs-table td { vertical-align: middle; }
.rs-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-money-neg { color: var(--rs-danger); font-weight: 600; }
.rs-money-pos { color: var(--rs-success); font-weight: 600; }

/* Empty / loading / error states (Definition of Done) */
.rs-state { text-align: center; padding: 2.6rem 1rem; color: var(--rs-ink-soft); }
.rs-state i { font-size: 44px; display: block; margin-bottom: .6rem; color: var(--rs-ink-faint); }
.rs-skeleton { border-radius: 8px; background: linear-gradient(90deg,#F1F3F5 25%,#E9ECEF 37%,#F1F3F5 63%);
  background-size: 400% 100%; animation: rs-shimmer 1.2s ease infinite; height: 14px; margin-bottom: .55rem; }
@keyframes rs-shimmer { 0% {background-position: 100% 50%;} 100% {background-position: 0 50%;} }

/* Filter bar (reports) — sticky per MASTER_PROMPT §13 */
.rs-filterbar {
  position: sticky; top: 0; z-index: 30; background: #fff;
  border: 1px solid var(--rs-line); border-radius: 10px;
  padding: .7rem .8rem; margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(16,24,40,.04);
}

/* Declaration checkbox gate (collection) */
.rs-declaration {
  border: 1px solid var(--rs-orange-border); background: var(--rs-orange-bg);
  border-radius: 10px; padding: .8rem .9rem;
}
.rs-locked-note { font-size: .8rem; color: var(--rs-ink-soft); }

/* Login page */
.rs-login-bg { background: #FAFBFC; min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.rs-login-card { width: 100%; max-width: 420px; border: 1px solid var(--rs-line); border-radius: 16px; }

/* RTL — mirroring for direction-sensitive bits not covered by app-rtl.css */
[dir="rtl"] .rs-kpi { flex-direction: row; }
[dir="rtl"] .rs-money { direction: ltr; unicode-bidi: embed; text-align: right; }

/* Dark mode keep-alive: semantic tiles stay readable */
[data-bs-theme="dark"] .rs-table thead th { background: #1B1F23; color: #ADB5BD; }
[data-bs-theme="dark"] .rs-kanban-card { background: #1B1F23; border-color: #2C3238; }
[data-bs-theme="dark"] .rs-filterbar { background: #1B1F23; }
[data-bs-theme="dark"] .rs-kanban-column { background: #17191C; }