/* dashboard-aqary.css — AqaryPro Dashboard skin
 * All styles scoped to .aq-dashboard or dashboard-specific classes.
 * Consumes CSS custom properties from aqary-tokens.css.
 * Loaded only on pages with page_type = dashboard.
 */

/* ── Dashboard root ───────────────────────────────────────────────── */
.aq-dashboard { width: 100%; }

/* ── Section spacing ──────────────────────────────────────────────── */
.aq-section { margin-bottom: 16px; }

/* ── Grid ─────────────────────────────────────────────────────────── */
.aq-grid   { display: grid; gap: 16px; }
.aq-grid-5 { grid-template-columns: repeat(5, 1fr); }
.aq-grid-4 { grid-template-columns: repeat(4, 1fr); }
.aq-grid-3 { grid-template-columns: repeat(3, 1fr); }
.aq-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .aq-grid-5 { grid-template-columns: repeat(3, 1fr); } .aq-grid-4 { grid-template-columns: repeat(2, 1fr); } .aq-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .aq-grid-5, .aq-grid-4, .aq-grid-3, .aq-grid-2 { grid-template-columns: 1fr; } }

/* ── Card ─────────────────────────────────────────────────────────── */
.aq-card {
    background: var(--aq-surface-card);
    border: 1px solid var(--aq-surface-border);
    border-radius: var(--aq-r-lg);
    box-shadow: var(--aq-shadow-card);
    overflow: hidden;
}
.aq-card-head {
    padding: 14px 18px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.aq-card-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--aq-ink-500);
}
.aq-card-body  { padding: 14px 18px 18px; }
.aq-card-divider { border: none; border-top: 1px solid var(--aq-surface-border); margin: 0; }

/* ── Subscription expiry banner ───────────────────────────────────── */
.aq-sub-alert {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    border-radius: var(--aq-r-md);
    margin-bottom: 20px;
    font-size: 13px;
}
.aq-sub-alert--amber {
    background: var(--aq-warning-50);
    border-inline-start: 4px solid var(--aq-warning-500);
    color: var(--aq-warning-700);
}
.aq-sub-alert--red {
    background: var(--aq-danger-50);
    border-inline-start: 4px solid var(--aq-danger-500);
    color: var(--aq-danger-700);
}
.aq-sub-alert-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.aq-sub-alert-body { flex: 1; min-width: 0; }
.aq-sub-alert-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.aq-sub-alert-detail { font-size: 12px; opacity: 0.85; font-feature-settings: "tnum" 1; }
.aq-sub-alert-sep { margin: 0 6px; opacity: 0.5; }
.aq-sub-alert-btn {
    background: var(--aq-warning-600);
    color: #fff; text-decoration: none;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
    transition: background 120ms;
    flex-shrink: 0;
}
.aq-sub-alert-btn:hover { background: var(--aq-warning-700); }
.aq-sub-alert--red .aq-sub-alert-btn { background: var(--aq-danger-600); }
.aq-sub-alert--red .aq-sub-alert-btn:hover { background: var(--aq-danger-700); }

/* ── Demo/canary sandbox bar ──────────────────────────────────────── */
/* Rendered from application/views/common/demo_sandbox_bar.php, included by
 * common/top-menu.php on every logged-in page for the demo tenant -- this
 * file is loaded globally (css-files.php / eng-css-files.php), not only on
 * page_type=dashboard, which is what a top-menu-level component needs
 * despite this file's name.
 *
 * Calm-light treatment, matching .aq-sub-alert below rather than a bold
 * gradient hero band -- a saturated full-bleed color sitting directly under
 * the (also solid-blue) fixed navbar had no luminance separation from it,
 * and this dashboard's established direction is calm/light, not a hero
 * band (see feedback_dashboard_aesthetic). Pale tint + accent stripe reads
 * clearly against the navbar and stays inside the existing aq-* language. */
.aq-sandbox-bar {
    background: var(--aq-brand-50);
    border-bottom: 1px solid var(--aq-brand-100);
    box-shadow: 0 1px 4px rgba(15, 26, 42, .06);
}
.aq-sandbox-inner {
    display: flex; align-items: center; gap: 14px;
    max-width: 1400px; margin: 0 auto; padding: 10px 20px;
    border-inline-start: 3px solid var(--aq-brand-500);
}
.aq-sandbox-icon  { font-size: 20px; line-height: 1; flex-shrink: 0; color: var(--aq-brand-600); margin-inline-start: 8px; }
.aq-sandbox-copy  { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aq-sandbox-title { font-weight: 700; font-size: 13px; color: var(--aq-brand-700); }
.aq-sandbox-text  { font-size: 12.5px; line-height: 1.6; color: var(--aq-ink-700); }
.aq-sandbox-btn {
    flex-shrink: 0; white-space: nowrap;
    background: var(--aq-surface-card); color: var(--aq-brand-600);
    border: 1px solid var(--aq-brand-200); border-radius: 20px;
    padding: 6px 14px; font-size: 12px; font-weight: 600;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.aq-sandbox-btn:hover, .aq-sandbox-btn:focus { background: var(--aq-brand-500); color: #fff; border-color: var(--aq-brand-500); }
.aq-sandbox-btn i { margin-inline-end: 6px; vertical-align: -1px; }
@media (max-width: 767px) {
    .aq-sandbox-inner { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
    .aq-sandbox-btn   { width: 100%; justify-content: center; }
}

/* ── KPI cards ────────────────────────────────────────────────────── */
/* Equal-height: cards in the grid row all stretch to the tallest sibling */
.aq-kpi { transition: box-shadow 150ms ease, transform 150ms ease; cursor: default; display: flex; flex-direction: column; }
.aq-kpi .aq-card-body { display: flex; flex-direction: column; flex: 1; }
.aq-kpi:hover { box-shadow: 0 8px 16px rgba(15,26,42,.09); transform: translateY(-2px); }
.aq-kpi.aq-clickable { cursor: pointer; text-decoration: none; color: inherit; }
.aq-portfolio-tile.aq-clickable { cursor: pointer; text-decoration: none; color: inherit; }
.aq-portfolio-tile.aq-clickable:hover { border-color: var(--aq-brand-600); background: var(--aq-brand-50); transition: all 120ms ease; }
/* Per-number deep-link substats */
a.aq-kpi-substat { display: block; text-decoration: none; color: inherit; border-radius: var(--aq-r-sm); }
a.aq-kpi-substat:hover { background: var(--aq-surface-page, #f5f7fa); transition: background 120ms ease; }
a.aq-kpi-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-decoration: none; color: inherit; cursor: pointer; }
a.aq-kpi-right:hover { opacity: 0.8; transition: opacity 120ms ease; }

/* split row: [icon + label] ←→ [value] */
.aq-kpi-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.aq-kpi-left {
    display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;
}
.aq-kpi-right {
    flex-shrink: 0; text-align: end;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}

.aq-kpi-icon-wrap {
    width: 40px; height: 40px;
    border-radius: var(--aq-r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.aq-kpi-value {
    font-size: 22px; font-weight: 700; color: var(--aq-ink-800);
    line-height: 1.1; font-feature-settings: "tnum" 1, "lnum" 1;
}
.aq-kpi-label {
    font-size: 11px; font-weight: 600; color: var(--aq-ink-500);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.aq-kpi-sublabel { font-size: 11px; color: var(--aq-ink-400); }
.aq-kpi--brand   .aq-kpi-icon-wrap { background: var(--aq-brand-50);   color: var(--aq-brand-600); }
.aq-kpi--success .aq-kpi-icon-wrap { background: var(--aq-success-50); color: var(--aq-success-600); }
.aq-kpi--warning .aq-kpi-icon-wrap { background: var(--aq-warning-50); color: var(--aq-warning-600); }
.aq-kpi--danger  .aq-kpi-icon-wrap { background: var(--aq-danger-50);  color: var(--aq-danger-600); }

.aq-occupancy-bar-wrap {
    margin-top: 10px; height: 6px;
    background: var(--aq-ink-100); border-radius: 3px; overflow: hidden;
}
.aq-occupancy-bar-fill {
    height: 100%; background: var(--aq-brand-500); border-radius: 3px;
    transition: width 600ms ease;
}

/* ── KPI sub-stat strip ───────────────────────────────────────────── */
/* Pushed to card bottom via margin-block-start:auto so short cards still
   bottom-align the strip with taller neighbours.
   All directional values use CSS logical properties — flips under dir=rtl. */
.aq-kpi-substats {
    display: flex;
    margin-block-start: auto;
    padding-block-start: 12px;
    margin-block-end: 0;
    border-block-start: 1px solid var(--aq-surface-border);
}
.aq-kpi-substat {
    flex: 1;
    text-align: center;
    padding-block-start: 2px;
}
.aq-kpi-substat + .aq-kpi-substat {
    border-inline-start: 1px solid var(--aq-surface-border);
}
.aq-kpi-substat-val {
    font-size: 15px; font-weight: 700;
    color: var(--aq-ink-700);
    line-height: 1.2;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.aq-kpi-substat-val--danger  { color: var(--aq-danger-600);  }
.aq-kpi-substat-val--warning { color: var(--aq-warning-600); }
.aq-kpi-substat-val--brand   { color: var(--aq-brand-600);   }
.aq-kpi-substat-val--success { color: var(--aq-success-600); }
.aq-kpi-substat-val--muted   { color: var(--aq-ink-400);     }
.aq-kpi-substat-lbl {
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--aq-ink-400);
    margin-block-start: 2px;
    line-height: 1.3;
}

/* ── Chart wrapper ────────────────────────────────────────────────── */
.aq-chart-wrap { padding: 0 18px 18px; }

/* ── Portfolio grid ───────────────────────────────────────────────── */
.aq-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 1024px) { .aq-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .aq-portfolio-grid { grid-template-columns: 1fr; } }
/* transparent tile + border: icon tints read clearly against the white card bg */
.aq-portfolio-tile {
    background: transparent;
    border: 1px solid var(--aq-surface-border);
    border-radius: var(--aq-r-sm);
    padding: 10px 12px;
    display: flex; flex-direction: row; align-items: center;
    justify-content: space-between; gap: 8px;
}
/* icon + label grouped on the start side */
.aq-portfolio-info {
    display: flex; align-items: center; gap: 8px; min-width: 0;
}
.aq-portfolio-icon {
    width: 32px; height: 32px;
    border-radius: var(--aq-r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.aq-portfolio-icon--brand   { background: var(--aq-brand-50);   color: var(--aq-brand-600); }
.aq-portfolio-icon--success { background: var(--aq-success-50); color: var(--aq-success-600); }
.aq-portfolio-icon--warning { background: var(--aq-warning-50); color: var(--aq-warning-600); }
.aq-portfolio-icon--info    { background: var(--aq-info-50);    color: var(--aq-info-700); }
.aq-portfolio-icon--neutral { background: var(--aq-ink-100);    color: var(--aq-ink-600); }
.aq-portfolio-value {
    font-size: 18px; font-weight: 700;
    color: var(--aq-ink-800); line-height: 1; flex-shrink: 0;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.aq-portfolio-label {
    font-size: 11px; font-weight: 600;
    color: var(--aq-ink-500);
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Reports Center shortcut tile ────────────────────────────────── */
/* 7th tile in the portfolio grid — the 6 metric tiles exactly fill 2
   rows of the 3-col grid, so this one spans the full row width instead
   of leaving a stray partial 3rd row, and reads as a navigational hub
   rather than another stat card (icon+label+description on the start
   side, a live count + directional arrow on the end side). */
.aq-portfolio-tile--wide {
    grid-column: 1 / -1;
    background: var(--aq-brand-50);
    border-color: var(--aq-brand-200);
    padding: 12px 16px;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.aq-portfolio-tile--wide:hover {
    background: var(--aq-brand-100, var(--aq-brand-50));
    border-color: var(--aq-brand-500);
    transform: translateY(-1px);
}
.aq-portfolio-tile--wide .aq-portfolio-info { gap: 12px; }
.aq-portfolio-label--wide {
    font-size: 13px; font-weight: 700;
    color: var(--aq-ink-800);
    text-transform: none; letter-spacing: normal;
    white-space: normal;
}
.aq-portfolio-tile-desc {
    font-size: 11px; color: var(--aq-ink-500);
    margin-top: 2px;
    white-space: normal; line-height: 1.4;
}
.aq-portfolio-tile-cta {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.aq-portfolio-tile-cta .aq-portfolio-value { color: var(--aq-brand-700, var(--aq-brand-600)); }
.aq-portfolio-tile-arrow {
    font-size: 15px; color: var(--aq-brand-600);
    transition: transform .15s ease;
}
.aq-portfolio-tile--wide:hover .aq-portfolio-tile-arrow {
    transform: translateX(var(--aq-arrow-hover-shift, -3px));
}
[dir="ltr"] .aq-portfolio-tile--wide:hover .aq-portfolio-tile-arrow { --aq-arrow-hover-shift: 3px; }
@media (max-width: 640px) {
    .aq-portfolio-tile--wide { flex-wrap: wrap; row-gap: 8px; }
    .aq-portfolio-tile-cta { width: 100%; justify-content: space-between; }
}

/* ── Portfolio card fill-height chain ────────────────────────────── */
/* Makes the 6 tiles expand to fill the card when it is stretched taller
   than its natural content height by the adjacent chart card. */
.aq-card--portfolio { display: flex; flex-direction: column; }
.aq-card--portfolio .aq-card-body { flex: 1; display: flex; flex-direction: column; }
.aq-card--portfolio .aq-portfolio-grid { flex: 1; align-content: stretch; }

/* ── Chart toggle + legend ────────────────────────────────────────── */
.aq-chart-toggle { display: flex; gap: 4px; align-items: center; }
.aq-bar-legend { display: flex; gap: 10px; align-items: center; }
.aq-bar-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--aq-ink-500); }
.aq-bar-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.aq-bar-dot--paid   { background: var(--aq-success-700); }
.aq-bar-dot--unpaid { background: var(--aq-danger-500); }
.aq-toggle-btn {
    font-size: 11px; font-weight: 500;
    padding: 3px 10px; border-radius: 20px;
    border: 1px solid var(--aq-surface-border);
    background: transparent; color: var(--aq-ink-500);
    cursor: pointer; font-family: inherit; transition: all 100ms;
}
.aq-toggle-btn.active { background: var(--aq-brand-500); border-color: var(--aq-brand-500); color: #fff; }

/* ── Button-group filter chips ────────────────────────────────────── */
.aq-btn-group { display: flex; flex-wrap: wrap; gap: 4px; }
.aq-btn-group-item {
  background: #fff;
  border: 1px solid var(--aq-surface-border);
  color: var(--aq-ink-600);
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  user-select: none;
}
.aq-btn-group-item:hover { background: var(--aq-ink-50); }
.aq-btn-group-item.is-active {
  background: var(--aq-brand-500);
  border-color: var(--aq-brand-500);
  color: #fff;
}

/* ── Active-filter chip row (global — used by agreements + AllFlats) ─ */
.pmr-chip-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 0;
}
.aq-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px 3px 10px;
    border-radius: 20px;
    background: var(--aq-brand-50);
    border: 1px solid var(--aq-brand-200);
    font-size: 12px; color: var(--aq-brand-700); line-height: 1.5;
}
.aq-chip__label { font-weight: 600; }
.aq-chip__value { font-weight: 400; color: var(--aq-ink-800); }
.aq-chip__remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    border: none; background: var(--aq-brand-200); color: var(--aq-brand-700);
    font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
    transition: background 100ms, color 100ms; flex-shrink: 0; margin-inline-start: 2px;
}
.aq-chip__remove:hover { background: var(--aq-brand-500); color: #fff; }
.aq-chip.aq-chip--clear-all {
    font-size: 12px; font-weight: 600; color: var(--aq-ink-500);
    background: transparent; border: 1px dashed var(--aq-ink-200);
    cursor: pointer; padding: 3px 10px;
    transition: color 100ms, border-color 100ms; border-radius: 20px;
}
.aq-chip.aq-chip--clear-all:hover { color: var(--aq-danger-600); border-color: var(--aq-danger-300); }

/* ── Watchlists ───────────────────────────────────────────────────── */
.aq-watchlist-empty {
    padding: 10px 18px; font-size: 12px; color: var(--aq-ink-300); font-style: italic;
}
.aq-watchlist-list--full { padding: 4px 0; }
.aq-watchlist-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px minmax(0, max-content) 110px;
    align-items: center; gap: 14px;
    padding: 10px 18px; font-size: 13px;
    text-decoration: none; color: inherit;
    border-top: 1px solid var(--aq-surface-border);
}
.aq-watchlist-row:first-child { border-top: none; }
.aq-watchlist-row:nth-child(even) { background: var(--aq-ink-50, #FAFBFC); }
.aq-watchlist-row:hover { background: var(--aq-ink-100); }
.aq-wl-primary { min-width: 0; }
.aq-wl-name   { color: var(--aq-ink-700); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-wl-detail { color: var(--aq-ink-400); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-wl-date   { color: var(--aq-ink-400); font-feature-settings: "tnum" 1; white-space: nowrap; }
.aq-wl-pill   { white-space: nowrap; }
.aq-wl-amount { text-align: end; font-weight: 600; font-feature-settings: "tnum" 1; color: var(--aq-ink-700); white-space: nowrap; }

/* Contract row: 3 columns (no amount) */
.aq-card--contracts .aq-watchlist-row { grid-template-columns: minmax(0, 1fr) 110px minmax(0, max-content); }

/* ── Status pills ─────────────────────────────────────────────────── */
.aq-pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    white-space: nowrap; flex-shrink: 0;
    border: 1px solid var(--aq-ink-300);
    /* Grey fallback for AQ.tabulator.formatters.pill()'s 'grey' bucket
     * (no color modifier applied) — archived/deprovisioned clients, closed
     * tickets, etc. Must stay ABOVE the modifiers below: an .aq-pill--*
     * rule has the same specificity as this one, so it only wins the
     * cascade by coming later in the file. Putting a background here
     * *after* the modifiers previously made every colored pill grey too. */
    background: var(--aq-ink-200); color: var(--aq-ink-700);
}
.aq-pill--brand { background: var(--aq-brand-100, #dbeafe); color: var(--aq-brand-700, #1d4ed8); border-color: var(--aq-brand-200); }
.aq-pill--red   { background: var(--aq-danger-50);  color: var(--aq-danger-700); border-color: rgba(239,68,68,.35); }
.aq-pill--amber { background: var(--aq-warning-50); color: var(--aq-warning-700); border-color: rgba(245,158,11,.35); }
.aq-pill--blue  { background: var(--aq-info-50);    color: var(--aq-info-700); border-color: rgba(30,159,242,.35); }
.aq-pill--green { background: var(--aq-success-50); color: var(--aq-success-700); border-color: rgba(16,185,129,.35); }

/* ── View-all link ────────────────────────────────────────────────── */
.aq-view-all {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 10px 18px 14px;
    font-size: 12px; font-weight: 600; color: var(--aq-brand-600);
    text-decoration: none; gap: 4px;
    border-top: 1px solid var(--aq-surface-border);
    transition: color 100ms;
}
.aq-view-all:hover, .aq-view-all:focus { color: var(--aq-brand-700); text-decoration: none; }
[dir="rtl"] .aq-view-all { justify-content: flex-start; }

/* ── Rent Collection Dashboard — KPI ribbon active state ─────────── */
.aq-kpi.aq-kpi--active { outline: 2px solid transparent; }
.aq-kpi--danger.aq-kpi--active  { box-shadow: 0 0 0 2px var(--aq-danger-500);  background: var(--aq-danger-50); }
.aq-kpi--warning.aq-kpi--active { box-shadow: 0 0 0 2px var(--aq-warning-500); background: var(--aq-warning-50); }
.aq-kpi--success.aq-kpi--active { box-shadow: 0 0 0 2px var(--aq-success-500); background: var(--aq-success-50); }
.aq-kpi--brand.aq-kpi--active   { box-shadow: 0 0 0 2px var(--aq-brand-500);   background: var(--aq-brand-50); }
.aq-kpi-sub { display: block; font-size: 11px; color: var(--aq-ink-500); margin-top: 2px; }

/* ── Rent Collection Dashboard — select column ───────────────────── */
.rcd-sel-header { display: flex; align-items: center; justify-content: center; }
.rcd-sel-cell   { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rcd-row-check  { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; accent-color: var(--aq-brand-500); }

/* ── Rent Collection Dashboard — bulk action bar ─────────────────── */
.rcd-bulkbar {
    background: var(--aq-surface-card, #fff);
    border: 1px solid var(--aq-surface-border, #E5E9F0);
    border-radius: var(--aq-r-md, 8px);
    padding: 12px !important;
    box-shadow: 0 1px 3px rgba(15,26,42,.10);
}
.rcd-bulkbar .rcd-count-badge { font-size: 13px; padding: .3em .55em; }
.rcd-bulkbar .rcd-bulk-btn {
    min-width: 9rem;
    background: var(--aq-surface-card, #fff) !important;
    border-color: var(--aq-surface-border, #E5E9F0) !important;
    color: var(--aq-ink-700, #2D3748) !important;
}
.rcd-bulkbar .rcd-bulk-btn:not(:disabled):hover {
    background: var(--aq-brand-50, #EBF6FE) !important;
    border-color: var(--aq-brand-500, #1E9FF2) !important;
    color: var(--aq-brand-700, #1d4ed8) !important;
}
.rcd-bulkbar .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: auto; }
.rcd-banner {
    font-size: .875rem; color: var(--aq-ink-600);
    padding: .4rem .75rem;
    background: var(--aq-bg-subtle, #f8f9fa);
    border-radius: 4px;
}

/* ── Real Estate Workspace ───────────────────────────────────────── */

/* Segmented tabs */
.aq-tabs { display: flex; gap: 4px; padding: 4px; background: var(--aq-surface-border); border-radius: var(--aq-r-md); }
.aq-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 6px; border: none;
    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;
    color: var(--aq-ink-600); transition: background 150ms, color 150ms, box-shadow 150ms;
    text-decoration: none;
}
.aq-tab:hover { background: rgba(255,255,255,.6); color: var(--aq-ink-900); text-decoration: none; }
.aq-tab--active {
    background: #fff; color: var(--aq-brand-600);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.aq-tab--locked {
    color: var(--aq-ink-400); cursor: not-allowed; pointer-events: none;
}

/* ── Analytics Ribbon ─────────────────────────────────────────────────── */
.aq-ribbon {
    background: var(--aq-surface-card, #fff);
    border-radius: var(--aq-r-lg);
    box-shadow: var(--aq-shadow-card, 0 1px 4px rgba(15,26,42,.08));
    border: 1px solid var(--aq-surface-border);
    padding: var(--aq-sp-3, 12px) var(--aq-sp-4, 16px);
}
.aq-ribbon-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aq-sp-3, 12px);
}
.aq-ribbon-toggle {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: var(--aq-r-sm);
    cursor: pointer; color: var(--aq-ink-500); font-size: 18px; line-height: 1;
    transition: background 120ms, color 120ms, transform 200ms;
    flex-shrink: 0;
}
.aq-ribbon-toggle:hover { background: var(--aq-surface-muted, #F7F9FC); color: var(--aq-ink-800); }
.aq-ribbon[data-collapsed="true"] .aq-ribbon-toggle { transform: rotate(180deg); }
.aq-ribbon-body {
    margin-top: var(--aq-sp-3, 12px);
    display: block;
}
.aq-ribbon[data-collapsed="true"] .aq-ribbon-body { display: none; }
.aq-ribbon-pane { display: none; }
.aq-ribbon[data-active-tab="overview"] .aq-ribbon-pane--overview,
.aq-ribbon[data-active-tab="due"]      .aq-ribbon-pane--due,
.aq-ribbon[data-active-tab="links"]    .aq-ribbon-pane--links { display: block; }

/* View toggle (Table / Map) */
.aq-view-toggle { display: flex; gap: 4px; }
.aq-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 6px; border: 1px solid var(--aq-surface-border);
    background: #fff; cursor: pointer; font-size: 12px; font-weight: 500;
    color: var(--aq-ink-600); transition: all 120ms; text-decoration: none;
}
.aq-view-btn:hover { border-color: var(--aq-brand-300); color: var(--aq-brand-600); text-decoration: none; }
.aq-view-btn--active { background: var(--aq-brand-600); border-color: var(--aq-brand-600); color: #fff; }

/* Row accent colors in Tabulator */
.aq-row--offer  td { border-left: 3px solid #16a34a !important; }
.aq-row--demand td { border-left: 3px solid #2563eb !important; }

/* Mode badges in Tabulator cells */
.aq-badge--offer  { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; background:#dcfce7; color:#15803d; }
.aq-badge--demand { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; background:#dbeafe; color:#1d4ed8; }

/* Share-text action button */
.aq-act--share-text { color: #0369a1; }
.aq-act--share-text:hover { color: #075985; }

/* Map shell */
.aq-map-shell {
    position: relative; min-height: 60vh; border-radius: var(--aq-r-lg);
    border: 1px solid var(--aq-surface-border); overflow: hidden; background: #f1f5f9;
}
.aq-map-shell::before {
    content: ''; display: block; position: absolute; inset: 0;
    background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
    background-size: 200% 100%;
    animation: aq-shimmer 1.4s infinite;
    z-index: 1;
    pointer-events: none;
}
.aq-map-shell.map-ready::before { display: none; }
@keyframes aq-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
#aq-leaflet-map { position: absolute; inset: 0; z-index: 2; }

/* Code/ID pill in table cells */
.aq-cell--code {
    display: inline-block; font-family: 'SFMono-Regular',Consolas,monospace;
    font-size: 11px; padding: 1px 6px; border-radius: 4px;
    background: var(--aq-surface-border); color: var(--aq-ink-700);
}
.aq-cell--code-empty { color: var(--aq-ink-400); }

/* Map legend */
.aq-map-legend {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 8px 12px; background: rgba(255,255,255,.9);
    border-radius: 8px; border: 1px solid var(--aq-surface-border);
    font-size: 12px;
}
.aq-map-legend-item { display: flex; align-items: center; gap: 6px; }
.aq-legend-dot { width:12px;height:12px;border-radius:50%;display:inline-block; flex-shrink:0; }
.aq-legend-dot--offer  { background:#16a34a; }
.aq-legend-dot--demand { background:#2563eb; }

/* Workspace control bar */
.aq-workspace-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 10px 0 12px;
}
.aq-workspace-bar-right { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

/* Payment method marks (subscription/history) */
.aq-pay-marks { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.aq-pay-marks img { height: 26px; width: auto; display: block; }

/* ── Reports Center (v2/application/views/reports_center_v.php) ─────
   Group tints mirror the existing dashboard KPI icon/theme pairs:
   ph-coins == aq-kpi--success (revenue KPI), ph-buildings == aq-kpi--brand
   (occupancy KPI), contracts theme == aq-kpi--warning (contracts KPI);
   danger is left for maintenance/operations by elimination. */
.rc-header { margin-bottom: 4px; }
.rc-title { margin-bottom: 4px; }
.rc-subtitle { color: var(--aq-ink-500); font-size: 13px; margin-bottom: 14px; }

.rc-search-wrap { position: relative; max-width: 420px; margin-bottom: 18px; }
.rc-search-icon {
    position: absolute; inset-inline-start: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--aq-ink-400); font-size: 15px; pointer-events: none;
}
/* !important required — aqary-skin.css's global `.form-control { padding:
   10px 14px !important }` rule otherwise wins regardless of source order
   (an !important physical shorthand always beats a non-!important logical
   longhand), which is what let the placeholder text render underneath the
   icon instead of clearing it. */
.rc-search-input { padding-inline-start: 34px !important; }

/* ── Tabs (2026-08-25 — replaced the old stacked A/B/C/D group sections;
   .rc-group/.rc-group-title* are no longer referenced by the view).
   Reuses the app's real .aq-tabs/.aq-tab component (already live on Real
   Estate Workspace) via the .rc-tabs modifier rather than editing the base
   rule: .aq-tabs there sits inside a white .card-header, so its default
   gray track (var(--aq-surface-border)) already has plenty of contrast —
   but the Reports Center header sits directly on this app's own page
   background (#F4F5FA, components.min.css), a value close enough to that
   same gray that the track read as "melted" into the page. Fixed with the
   same white-surface-plus-border-plus-shadow recipe every other floating
   control here uses against that exact background (identical to .aq-card
   itself), and the active tab now signals via a brand-tinted fill instead
   of a white-vs-gray contrast that no longer exists once the track itself
   is white. Focus outline removed on click (:focus-visible only keeps a
   soft ring for keyboard navigation, so this isn't a pure accessibility
   regression — just the default browser ring the user found visually
   noisy on mouse click). ───────────────────────────────────────────── */
.rc-tabs {
    display: inline-flex;
    background: var(--aq-surface-card, #fff);
    border: 1px solid var(--aq-surface-border);
    box-shadow: var(--aq-shadow-card, 0 1px 4px rgba(15,26,42,.06));
    margin-bottom: 22px;
}
.rc-tabs .aq-tab {
    padding: 9px 20px;
    font-size: 13.5px;
    color: var(--aq-ink-600);
}
.rc-tabs .aq-tab i { font-size: 15px; color: var(--aq-ink-400); transition: color 150ms; }
.rc-tabs .aq-tab:hover { background: var(--aq-surface-muted); }
.rc-tabs .aq-tab:focus { outline: none; }
.rc-tabs .aq-tab:focus-visible { box-shadow: 0 0 0 2px var(--aq-brand-200, #bfe3fb); }
.rc-tabs .aq-tab--active {
    background: var(--aq-brand-50);
    color: var(--aq-brand-700);
    box-shadow: none;
    font-weight: 700;
}
.rc-tabs .aq-tab--active i { color: var(--aq-brand-600); }

.rc-pane { display: none; }
.rc-pane.is-active { display: block; }

/* First-seen flatten tag on a card, shown only while it's living inside
   #rc-flat-results (report-search-toggled visibility, not a new element —
   see reports_center_v.php's own JS: existing DOM nodes are relocated,
   never cloned, so Select2-bound picker cards keep working while
   flattened). */
.rc-flat-tag {
    display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px;
    border-radius: 999px; margin-bottom: 8px;
}
.rc-flat-tag--a { background: var(--aq-success-50); color: var(--aq-success-700); }
.rc-flat-tag--b { background: var(--aq-brand-50);   color: var(--aq-brand-700); }
.rc-flat-tag--c { background: var(--aq-warning-50); color: var(--aq-warning-700); }
.rc-flat-tag--d { background: var(--aq-danger-50);  color: var(--aq-danger-700); }

.rc-card { display: flex; flex-direction: column; }
.rc-card .aq-card-body { display: flex; flex-direction: column; flex: 1; }

.rc-card-icon {
    width: 40px; height: 40px;
    border-radius: var(--aq-r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 10px; flex-shrink: 0;
}
.rc-card-icon--a { background: var(--aq-success-50); color: var(--aq-success-600); }
.rc-card-icon--b { background: var(--aq-brand-50);   color: var(--aq-brand-600); }
.rc-card-icon--c { background: var(--aq-warning-50); color: var(--aq-warning-600); }
.rc-card-icon--d { background: var(--aq-danger-50);  color: var(--aq-danger-600); }

.rc-card-title { margin-bottom: 4px; }
.rc-card-desc {
    font-size: 12px; color: var(--aq-ink-500);
    line-height: 1.5; flex: 1; margin-bottom: 14px;
}

.rc-card-requires { margin-bottom: 2px; }
.rc-cta--disabled { pointer-events: none; opacity: .6; }

.rc-no-results {
    padding: 30px 0; text-align: center;
    color: var(--aq-ink-400); font-size: 13px;
}

/* ── Reports Center — occupancy_rate ratio banner (Task 7, Pattern A) ─
   Plain static computed summary (report-wrapper.js), not an interactive
   indicator — one line, same visual language as .aq-chip (brand-tinted
   pill) but block-level so it reads as a small standalone summary rather
   than a removable filter chip. */
.aq-rc-occupancy-banner {
    display: inline-block;
    margin: 8px 0;
    padding: 6px 14px;
    border-radius: var(--aq-r-lg);
    background: var(--aq-brand-50);
    border: 1px solid var(--aq-brand-200);
    color: var(--aq-brand-700);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
   Reports Center — Standard Report Master Template filter band
   (Task 12; DOM contract + this whole rule block REPLACED, not layered
   under an override, for the Standard Report Master Template rollout —
   see the implementation plan at
   C:\Users\cuu9\.claude\plans\act-as-an-expert-abstract-crayon.md).

   .rc-band is no longer a standalone, self-chromed card inserted BEFORE
   the wrapped engine's own card — report-filter-band.js now appends the
   whole .rc-band element into that engine's real first .card-body.p-1
   (its 'filtersHostSelector'), and separately appends .rc-band-save into
   the engine's real .card-header (its 'headerSelector'). The surrounding
   real .card supplies all chrome now — .rc-band itself declares none of
   its own (no background/border/shadow/padding here on purpose).

   Basic/advanced fields are a genuine Bootstrap 4 .row of .col-md-3
   children now (report-filter-band.js's normalizeColumn() rewrites each
   moved wrapper's original column classes to col-md-3, or col-12 for the
   few full-row fields like #agr-presets/.vat-source-section) — a strict,
   non-stretching 4-slot grid: 2 fields fill exactly 50%, the other 50%
   stays genuinely empty, never flex-grown to fill the row. Deliberately
   NO custom flex/basis rules are defined on .rc-band-basic/.rc-band-adv-
   body below — dashboard-aqary.css loads AFTER bootstrap.css, so any
   competing rule at equal specificity would silently win over Bootstrap's
   own .col-md-3 regardless of DOM order (confirmed hitting exactly this
   bug while building the live preview mockup) — the fix is to not
   compete, not to out-specificity it.
   ══════════════════════════════════════════════════════════════════════ */

/* F3 fix — some engines wrap their filters .card-body.p-1 in a REDUNDANT
   outer .card-body (24px padding) that the results .card-body.p-1 sibling
   doesn't have, so filters would sit ~40px in vs. the table's 16px once
   .rc-band mounts inside the inner .p-1. report-filter-band.js detects
   that extra wrapper at boot and adds this class to it, zeroing its own
   padding so both sections share the same 16px inset. */
.rc-band-host-outer { padding: 0 !important; }

/* .rc-band-save is a transit child of .rc-band until report-filter-
   band.js's mountHeader() relocates it into the engine's real
   .card-header — that function also adds .rc-header-flex to the header
   element itself (never a blanket .card-header rule, which would reach
   every non-report card in the app), turning it into a flex row so the
   save button sits flush at the row's end instead of stacking onto its
   own line below the title / the permission-gated "Add …" button 4 of the
   7 engines already have there (finding F4). */
.rc-header-flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
}
.rc-header-flex .rc-band-save { margin-inline-start: auto; white-space: nowrap; }
.rc-band-save { white-space: nowrap; }

/* ── Advanced filters — Bootstrap 4 collapse, not <details>/<summary> ──
   <details>/<summary> can only instantly flip display:none/block in most
   browsers, it cannot slide-animate. Real slide-down/slide-up needs the
   same Bootstrap collapse component already used at
   realestate_workspace_v.php's "More filters" link — collapse.js
   automatically toggles the trigger's own .collapsed class + aria-expanded
   to match shown/hidden state, so the caret rotation below needs no extra
   JS. report-filter-band.js still removes the whole #rc-band-adv element
   (not just its body) when zero fields were moved into it, same fail-safe
   shape the old <details> removal had. */
.rc-band-adv { margin-top: 10px; }
.rc-band-adv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--aq-ink-500);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.rc-band-adv-toggle:hover,
.rc-band-adv-toggle:focus {
    color: var(--aq-brand-600);
    text-decoration: none;
}
.rc-band-adv-icon { font-size: 14px; line-height: 1; }
.rc-band-adv-caret {
    font-size: 11px;
    line-height: 1;
    transition: transform 150ms;
}
.rc-band-adv-toggle:not(.collapsed) .rc-band-adv-caret { transform: rotate(180deg); }
.rc-band-adv-count,
.rc-adv-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--aq-brand-500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}
.rc-adv-count:empty { display: none; }

/* Tinted, bordered container for the expanded panel — gives the advanced
   group real container distinction from the basic fields above it,
   instead of the two areas reading as one undifferentiated block. */
.rc-band-adv-panel {
    margin-top: 10px;
    padding: 14px 14px 2px;
    background: var(--aq-surface-muted);
    border: 1px solid var(--aq-surface-border);
    border-radius: var(--aq-r-lg);
}

/* Search/Reset — a plain physical-right block (not a logical property, per
   the explicit instruction), flush with the same start edge as the field
   grid above it, separated from it by a hairline divider so "basic +
   advanced fields" reads as one group and "Search/Reset" reads as the
   final row that applies to all of them. Physical text-align:right is
   correct (= the start edge) in Arabic/RTL, the mode this was designed
   in; in English/LTR mode (dir="ltr") it lands on the far edge instead —
   shipped as approved, not silently switched to a logical property. */
.rc-band-actions {
    text-align: right;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--aq-surface-border);
}
/* Only relevant for payments_main (band renders, but the generic mover
   bails out for that engine, so #rc-band-actions is never populated) —
   every other engine that reaches this element always has a real
   Search/Reset pair per report_center_helper.php's own 'actionsSelector'
   comments (confirmed by reading all 7 views), so this empty-state rule
   is a defensive fallback, not the common case. */
.rc-band-actions:empty { display: none; margin-top: 0; padding-top: 0; border-top: 0; }

/* #rc-chip-row reuses .pmr-chip-row's own flex layout (defined above) —
   an adopted chip row (agreements_report/units/vat) nests one .pmr-chip-row
   inside another; report-filter-band.js clears THIS element's own `hidden`
   attribute on adoption so it never masks the adopted row regardless of
   the adopted row's own visibility toggling. Scoped to the #rc-chip-row id
   specifically (never a blanket .pmr-chip-row rule, which would also
   reshape PMR's own untouched native chip row). margin-bottom is
   deliberately negative — halves the measured whitespace between the chip
   row and the <hr> into Section 3 without touching the shared .p-1/
   .pmr-chip-row padding rules those measurements are made of; calibrated
   against the temp preview's padding context and flagged for live
   re-measurement once a real engine (payments_detailed) is wired up, since
   the real page's .card-body.p-1 padding differs from the preview's
   (16px vs. what was assumed there — see the implementation plan's F2/F3
   and task B4). */
#rc-chip-row {
    margin-top: var(--aq-sp-3);
    margin-bottom: -11px;
}

/* ══════════════════════════════════════════════════════════════════════
   Reports Center — "تقاريري المحفوظة" saved-reports list (Task 16)
   Same visual language/tokens as .aq-card/.rc-band above. A plain bordered
   row list, not a card grid: a saved report is a single-line record (name +
   parent report + optional "مشترك" pill), not a rich tile like the catalog
   cards above it.
   ══════════════════════════════════════════════════════════════════════ */
.rc-saved-section { margin-bottom: 22px; }
.rc-saved-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--aq-ink-800);
    margin: 0 0 12px;
}
.rc-saved-title i { font-size: 18px; line-height: 1; color: var(--aq-brand-600); }

.rc-saved-list {
    background: var(--aq-surface-card);
    border: 1px solid var(--aq-surface-border);
    border-radius: var(--aq-r-lg);
    box-shadow: var(--aq-shadow-card);
    overflow: hidden;
}
.rc-saved-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--aq-surface-border);
}
.rc-saved-row:last-child { border-bottom: none; }
.rc-saved-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.rc-saved-name { font-size: 13px; font-weight: 700; color: var(--aq-ink-900); }
.rc-saved-parent { font-size: 12px; color: var(--aq-ink-500); }

/* ── What's New modal — fixed height, centered, internally scrollable ──
   whats-new.js toggles .aq-wn-dialog + Bootstrap's own .modal-dialog-
   centered on the shared #default modal's .modal-dialog, only while this
   feature's content is showing (added right before every open, removed
   right after every close via the existing hidden.bs.modal handler) — no
   other consumer of that shared modal is affected.

   Bootstrap 4 centers a modal by giving .modal-dialog-centered itself
   min-height: calc(100% - 1rem) — nearly the full viewport — turning it
   into a tall, invisible flex "canvas", then vertically centers its one
   real child, .modal-content, inside that canvas via justify-content:
   center (the combined .modal-dialog-centered.modal-dialog-scrollable
   selector switches the dialog to flex-direction: column to make that
   centering axis vertical). So the fix belongs on .modal-content, NOT on
   .modal-dialog — constraining .modal-dialog's own height instead (tried
   first, left as a cautionary note) collapses that canvas and the dialog
   just sits near the top via its own margin, no longer centered at all.

   Bootstrap's own .modal-dialog-centered.modal-dialog-scrollable .modal-
   content rule also removes the plain .modal-dialog-scrollable variant's
   max-height cap (it assumes centered content is short enough to just
   center, not scroll) — so a tall backfilled list would render uncapped
   and the outer PAGE would scroll instead of the modal body. Re-adding an
   explicit height here (capped again on short viewports) restores a real,
   constant box height regardless of entry count, kept centered by the
   dialog's own justify-content, with .modal-body (already `overflow-y:
   auto` via the static .modal-dialog-scrollable class) scrolling inside
   it once content exceeds that fixed height. */
.modal-dialog.aq-wn-dialog.modal-dialog-centered .modal-content {
    height: 620px;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}
/* whats_new_modal_v.php wraps .modal-header/.modal-body/.modal-footer in its
   own [data-whats-new-body] root div (used elsewhere to detect "was this
   OUR content" before acking/cleanup) — that div sits between .modal-content
   and its header/body/footer, so it, not .modal-content, is the real flex
   parent those three see. Left as a plain block div it has no height/
   overflow of its own, so header/body/footer size to their natural content
   height regardless of .modal-content's 620px cap above. Mirroring
   .modal-content's own flex setup here makes it a transparent pass-through
   so the fixed height (and the min-height: 0 below) actually reaches them.
   Unconditional, not scoped to .aq-wn-dialog: this attribute selector only
   ever matches this one feature's modal content. */
[data-whats-new-body] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
/* Flex items default to min-height: auto, which refuses to shrink below the
   content's own intrinsic height — without this override .modal-body would
   render at its full ~2300px content height regardless of the 620px parent
   (clipped by .modal-content's overflow: hidden with no scrollbar to reach
   the clipped part, since the body's own scrollHeight would equal its
   clientHeight). min-height: 0 lets it actually shrink to the remaining
   flex space, which is what makes its own overflow-y: auto do anything. */
.modal-dialog.aq-wn-dialog.modal-dialog-centered .modal-body {
    min-height: 0;
}
.rc-saved-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }