/* ==========================================================================
   Quattro theme layer
   Loaded LAST on every page (after bootstrap, weekly360.css and
   weekly360-standard.css), so it wins without editing the template files.

   Goal: readable everywhere. Every text/background pair below meets WCAG AA
   (4.5:1 for normal text). The template forced light grey (#a2a2aa / #9395a7)
   onto all headings, paragraphs, table cells, labels and form text, and used
   white text on light green / cyan / yellow - that's what made pages hard to
   read.
   ========================================================================== */

:root {
  /* Palette */
  --q-text: #1f2937;            /* 14.7:1 on white */
  --q-text-muted: #4b5563;      /*  7.6:1 */
  --q-text-subtle: #6b7280;     /*  4.8:1 - smallest/least important text only */
  --q-border: #d1d5db;
  --q-border-soft: #e5e7eb;
  --q-surface: #ffffff;
  --q-bg: #f4f6f9;
  --q-row-alt: #f8fafc;

  --q-primary: #057690;         /*  5.0:1 with white text */
  --q-primary-dark: #04566a;    /*  7.9:1 on white - links */
  --q-primary-soft: #e6f3f6;

  --q-success: #15803d;         /*  5.0:1 with white */
  --q-success-dark: #166534;
  --q-info: #0e7490;            /*  5.4:1 with white */
  --q-info-dark: #155e75;
  --q-warning: #f59e0b;         /* with DARK text (8.3:1) - never white */
  --q-warning-dark: #d97706;
  --q-warning-text: #b45309;    /*  5.0:1 on white - warning as text */
  --q-danger: #dc2626;          /*  4.8:1 with white */
  --q-danger-dark: #b91c1c;

  /* Re-point the template's variables, so every older rule that uses them
     picks up a readable value. */
  --weekly360-text-color: var(--q-text);
  --weekly360-grey: var(--q-text-muted);
  --weekly360-content-bg: var(--q-bg);
  --weekly360-textbox-bg-color: var(--q-surface);
  --weekly360-light-grey: #eef2f6;
  --weekly-p-dark: var(--q-text);          /* used by the template, never defined */
  --weekly360-bs-success: var(--q-success);
  --weekly360-bs-success-dark: var(--q-success-dark);
  --weekly360-bs-info: var(--q-info);
  --weekly360-bs-info-dark: var(--q-info-dark);
  --weekly360-bs-warning: var(--q-warning);
  --weekly360-bs-warning-dark: var(--q-warning-dark);
  --weekly360-bs-danger: var(--q-danger);
  --weekly360-bs-danger-dark: var(--q-danger-dark);
  --bs-body-color: var(--q-text);
}

body {
  color: var(--q-text);
  background-color: var(--q-bg);
}

/* The template forces grey on every p/h* with !important. Inherit instead:
   dark on light backgrounds, and white inside coloured boxes. */
p, h1, h2, h3, h4, h5, h6 {
  color: inherit !important;
}

h1, .h1, h2, .h2, h3, .h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: var(--q-primary-dark);
}
a:hover {
  color: var(--q-primary);
}

/* ---- Text helpers -------------------------------------------------------- */
.text-primary   { color: var(--q-primary-dark) !important; }
.text-success   { color: var(--q-success) !important; }
.text-info      { color: var(--q-info) !important; }
.text-warning   { color: var(--q-warning-text) !important; }
.text-danger    { color: var(--q-danger-dark) !important; }
.text-muted,
.text-secondary { color: var(--q-text-subtle) !important; }
.text-gray-800  { color: var(--q-text) !important; }
.text-gray-600  { color: var(--q-text-muted) !important; }
.text-gray-400  { color: #9ca3af !important; }   /* decorative icons only */

/* Bootstrap 4 class still used in ~60 places; does nothing in Bootstrap 5. */
.font-weight-bold   { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }

/* Bootstrap 5.3 helpers used by some pages; this project ships 5.2, where
   they don't exist and the badges rendered colourless. */
.bg-primary-subtle   { background-color: var(--q-primary-soft) !important; }
.bg-secondary-subtle { background-color: #f3f4f6 !important; }
.bg-success-subtle   { background-color: #dcfce7 !important; }
.bg-info-subtle      { background-color: #cffafe !important; }
.bg-warning-subtle   { background-color: #fef3c7 !important; }
.bg-danger-subtle    { background-color: #fee2e2 !important; }
.text-primary-emphasis   { color: var(--q-primary-dark) !important; }
.text-secondary-emphasis { color: #374151 !important; }
.text-success-emphasis   { color: #166534 !important; }
.text-info-emphasis      { color: #155e75 !important; }
.text-warning-emphasis   { color: #92400e !important; }
.text-danger-emphasis    { color: #991b1b !important; }

/* ---- Badges -------------------------------------------------------------- */
.badge {
  font-size: 0.75em;           /* was 0.60em - too small to read */
  font-weight: 600;
  padding: 0.35em 0.6em;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.bg-primary   { background-color: var(--q-primary) !important; }
.bg-success   { background-color: var(--q-success) !important; }
.bg-info      { background-color: var(--q-info) !important; }
.bg-danger    { background-color: var(--q-danger) !important; }
.bg-secondary { background-color: var(--q-text-muted) !important; }
.bg-warning   { background-color: #fbbf24 !important; }
.badge.bg-warning,
.badge.bg-light { color: var(--q-text); }
/* "bg-info text-dark" was written for Bootstrap's light cyan; keep it light
   now that plain bg-info is dark. */
.bg-info.text-dark {
  background-color: #cffafe !important;
  color: #155e75 !important;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  font-weight: 600;
  border-radius: 0.45rem;
}
.btn-warning {
  --bs-btn-color: var(--q-text);
  --bs-btn-hover-color: var(--q-text);
  --bs-btn-active-color: var(--q-text);
  --bs-btn-disabled-color: var(--q-text);
}
.btn-outline-warning {
  --bs-btn-color: var(--q-warning-text);
  --bs-btn-border-color: var(--q-warning);
  --bs-btn-hover-color: var(--q-text);
  --bs-btn-active-color: var(--q-text);
  --bs-btn-disabled-color: var(--q-warning-text);
}
.btn-outline-info    { --bs-btn-color: var(--q-info); }
.btn-outline-success { --bs-btn-color: var(--q-success); }
.btn-outline-secondary {
  --bs-btn-color: var(--q-text-muted);
  --bs-btn-border-color: var(--q-border);
  --bs-btn-hover-bg: #f3f4f6;
  --bs-btn-hover-color: var(--q-text);
  --bs-btn-hover-border-color: #9ca3af;
}

/* ---- Forms --------------------------------------------------------------- */
label,
.form-label,
.col-form-label {
  color: #374151;
  font-weight: 600;
  font-size: 0.875rem;
}
.form-check-label {
  font-weight: 400;
  font-size: 1rem;
  color: var(--q-text);
}

.form-control,
.form-select {
  color: var(--q-text);
  background-color: var(--q-surface);
  border: 1px solid var(--q-border) !important;   /* template made it invisible */
}
.form-control:focus,
.form-select:focus {
  color: var(--q-text);
  background-color: var(--q-surface);
  border-color: var(--q-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(5, 118, 144, 0.2);
}
.form-control::placeholder {
  color: var(--q-text-subtle);
  opacity: 1;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: #f3f4f6;
  color: #374151;
}
/* The template set a one-line height on every .form-control and meant to
   undo it for textareas, but the selector was wrong - textareas were one
   line tall. */
textarea.form-control {
  height: auto;
  min-height: 6rem;
}
.form-check-input:checked {
  background-color: var(--q-primary);
  border-color: var(--q-primary);
}

/* ---- Cards --------------------------------------------------------------- */
.card {
  border: 1px solid var(--q-border-soft);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}
.card-header {
  background-color: var(--q-surface);
  border-bottom: 1px solid var(--q-border-soft);
  color: var(--q-primary-dark);
}
.card-header h6,
.card-header .h6 {
  font-size: 0.95rem;
}

/* Stat tiles (dashboard, complaints, wifi...) */
.qs-stat-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--q-primary-soft);
  color: var(--q-primary-dark);
  font-size: 22px;
}

/* Activity timeline (complaints, messages) */
.qs-timeline { list-style: none; margin: 0; padding: 0; }
.qs-timeline > li {
  position: relative;
  padding: 0 0 1rem 1.5rem;
  border-left: 2px solid var(--q-border-soft);
  margin-left: 0.4rem;
}
.qs-timeline > li:last-child { border-left-color: transparent; }
.qs-timeline > li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.2rem;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--q-surface);
  border: 2px solid var(--q-text-subtle);
}
.qs-timeline > li.qs-tl-tenant::before { border-color: var(--q-info); background: var(--q-info); }
.qs-timeline > li.qs-tl-staff::before  { border-color: var(--q-primary); background: var(--q-primary); }
.qs-timeline .qs-tl-body {
  background: var(--q-row-alt);
  border: 1px solid var(--q-border-soft);
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  white-space: pre-line;
}

/* ---- Tables -------------------------------------------------------------- */
.table {
  --bs-table-color: var(--q-text);
  --bs-table-striped-color: var(--q-text);
  --bs-table-striped-bg: var(--q-row-alt);
  --bs-table-hover-color: var(--q-text);
  --bs-table-hover-bg: var(--q-primary-soft);
  color: var(--q-text);
}
.table > thead th,
.table-striped thead tr,
.table-striped thead th,
.table-striped tfoot tr,
.table-striped tfoot th {
  color: #374151;
  background-color: #f1f5f9;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--q-border) !important;
}
.table-striped tbody th,
.table-striped tbody td,
.table-striped tbody th small,
.table-striped tbody td small {
  color: var(--q-text);
}
.table-striped tbody th,
.table-striped tbody td {
  padding-top: 0.75rem;        /* was 20px - very tall rows */
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--q-border-soft);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--q-row-alt);
  color: var(--q-text);
}
.table-striped tbody tr:hover,
.table-striped tbody tr:focus {
  background-color: var(--q-primary-soft) !important;
}
.table-striped tbody tr:hover td,
.table-striped tbody tr:focus td {
  color: var(--q-text);
}
.table-striped tbody td a:not(.btn),
.table-striped tbody th a:not(.btn),
.table-striped tbody tr:hover td a:not(.btn) {
  color: var(--q-primary-dark);
  font-weight: 600;
}
/* The template's "td a" colour also hit <a class="btn">, giving grey text
   on coloured buttons inside tables. */
.table-striped tbody td a.btn,
.table-striped tbody th a.btn {
  color: var(--bs-btn-color);
}
.table-striped tbody td a.btn:hover,
.table-striped tbody th a.btn:hover {
  color: var(--bs-btn-hover-color);
}
.table thead th[data-field] {
  cursor: pointer;
}

/* ---- Navigation ---------------------------------------------------------- */
.topbar {
  border-bottom: 1px solid var(--q-border-soft);
  box-shadow: none !important;
}
.topbar a {
  color: var(--q-text-muted) !important;
}

.quattro-sidebar {
  background: #f8fafc;
  border-right: 1px solid var(--q-border-soft);
}
.quattro-sidebar .qs-brand-mark {
  background: var(--q-primary);
}
.quattro-sidebar .qs-section {
  color: var(--q-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 700;
}
.quattro-sidebar .nav .nav-link.qs-link,
.quattro-sidebar .nav .nav-link.qs-sublink {
  color: #374151 !important;
}
.quattro-sidebar .nav .nav-link.qs-link:hover,
.quattro-sidebar .nav .nav-link.qs-sublink:hover {
  color: var(--q-text) !important;
  background: #eef2f6;
}
.quattro-sidebar .nav .nav-link.qs-link.active,
.quattro-sidebar .nav .nav-link.qs-sublink.active {
  color: var(--q-primary-dark) !important;
  background: var(--q-primary-soft);
  font-weight: 700;
}
.quattro-sidebar .qs-link.active i {
  color: var(--q-primary);
}
.quattro-sidebar .qs-sublink.active .qs-dot {
  background: var(--q-primary);
}
.quattro-sidebar .qs-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--q-text-muted);
  background: #e5e7eb;
  border-radius: 999px;
  padding: 1px 7px;
}
.quattro-sidebar .qs-link.qs-disabled {
  opacity: 0.75;
  cursor: default;
}

.nav-tabs .nav-link {
  color: var(--q-text-muted) !important;
  font-weight: 600;
}
.nav-tabs .nav-link.active {
  color: var(--q-primary-dark) !important;
  border-bottom-color: transparent;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--q-primary) !important;
}

/* ---- Pagination ---------------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--q-primary-dark);
  --bs-pagination-hover-color: var(--q-primary-dark);
  --bs-pagination-active-bg: var(--q-primary);
  --bs-pagination-active-border-color: var(--q-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(5, 118, 144, 0.2);
}

/* ---- Alerts -------------------------------------------------------------- */
.alert-primary {
  background-color: var(--q-primary-soft);
  border-color: #b9dde6;
  color: var(--q-primary-dark);
}

/* ---- Keyboard focus - visible everywhere --------------------------------- */
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--q-primary);
  outline-offset: 2px;
}